@public-ui/mcp 4.5.0-rc.0 → 4.5.0-rc.3

package/shared/sample-index.json

@@ -1,16 +1,16 @@
 {
   "metadata": {
-    "generatedAt": "2026-09-22T11:55:19.303Z",
+    "generatedAt": "2026-09-29T11:09:38.269Z",
     "buildMode": "ci",
     "counts": {
-      "total": 338,
-      "totalDocs": 65,
+      "total": 341,
+      "totalDocs": 66,
       "totalSpecs": 53,
-      "totalSamples": 200,
+      "totalSamples": 202,
       "totalScenarios": 20
     },
     "repo": {
-      "commit": "769576554d98255a7b6a115dcaa892725bf6c79b",
+      "commit": "d4fafc2566cee7454a30e98e000ea15d3e763515",
       "branch": "develop",
       "repoUrl": "https://github.com/public-ui/kolibri"
     }
@@ -21,7 +21,7 @@
       "group": "docs",
       "name": "AGENTS",
       "path": "AGENTS.md",
-      "code": "# Agent Instructions\n\nThis repository is a monorepo managed with **pnpm** and **Nx**. It contains multiple packages under `packages/` such as web components, themes, adapters, samples and tooling.\n\n## Handling hints\n\nWe have a monorepo structure with multiple packages, each with its own `package.json`. The root `package.json` contains shared dependencies and scripts. Use `pnpm` commands to manage dependencies and run scripts across packages.\n\n- To install dependencies, use `pnpm i` at the root level. This will install all dependencies for all packages.\n- If you change a dependency in a package:\n  - Use only exact version numbers in `package.json`. Other peers will not be able to use the package if you can use a range version.\n  - You need to run `pnpm i` at the root level. This updates the lockfile and ensures all packages are using the correct versions.\n- 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. It never contains a color scheme (dark/light).\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. It never contains a color scheme (dark/light).\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`. Color schemes (dark/light) are defined here via theme tokens.\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> **Base styling vs. theming — dark/light lives in the theme.** The base styling of the components package (layers 1–3) is responsible for layout and structure only. It knows no dark/light color scheme: no `prefers-color-scheme`, no `color-scheme`, no `light-dark()`, no scheme tokens. Black and white in the base layers are a contrast fallback, not a color design. Dark/light theming is anchored and implemented exclusively in the theme packages (layers 4–5). See [`docs/BASE_STYLING_VS_THEMING_CONCEPT.md`](docs/BASE_STYLING_VS_THEMING_CONCEPT.md).\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\nDark/light color schemes are implemented in the theme layers only. Define all colors that differ between light and dark as tokens on `:host` in the theme global layer and switch the scheme there (`color-scheme` + `light-dark()`, `@media (prefers-color-scheme: dark)`, or an opt-in attribute). The theme component layer only references those tokens and never contains its own scheme media queries. Alternatively, a theme may ship a separate dark export that is registered as an additional theme and switched via the `kol-theme` attribute. The base styling of the components package must never be involved in this.\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### Color schemes\n\nA theme carries one palette per color scheme in a single declaration, resolved by the CSS\n`light-dark()` function:\n\n```scss\n@layer kol-theme-global {\n\t:host {\n\t\t--color-text: var(--kolibri-color-text, light-dark(#202020, #{$dark-color-text}));\n\t}\n}\n```\n\nRules that hold for every theme:\n\n- **Never declare `color-scheme` in a theme**, and never write `@media (prefers-color-scheme: …)`.\n  `color-scheme` is an inherited property and inheritance follows the flat tree, so it crosses the\n  shadow boundary on its own: each component resolves `light-dark()` against whatever the consuming\n  application has in effect where the component sits. A declaration on `:host` would replace that\n  inherited value, and the page and the components in it could then disagree — which is exactly the\n  bug this rule exists to prevent.\n- The application owns the scheme, in plain CSS: `:root { color-scheme: light dark }` to follow the\n  operating system, `color-scheme: dark` on any element to force a subtree. Consequently an\n  application that declares nothing stays light, whatever the operating system says. Dark mode is\n  opt-in; `color-scheme.css` in a theme package ships that one line plus the page colors.\n- Sass does not evaluate variables inside `var()`. Interpolate them (`#{$dark-color-text}`).\n- An application stylesheet that uses `light-dark()` must not be downlevelled. A CSS minifier\n  targeting older browsers rewrites it into a `prefers-color-scheme` media query with space\n  toggles, and that replacement ignores the `color-scheme` property. A theme's CSS is a string\n  adopted into the shadow roots at runtime and is never processed by the application's CSS\n  pipeline, so the page would follow the operating system while the components follow\n  `color-scheme`. Both sample host apps therefore pin `build.cssTarget` in their Vite config.\n- The base layer hardcodes `black` and `white` in a few places. Where it routes them through a\n  token, override the token (`--kol-a11y-font-color` / `--kol-a11y-background-color` in `a11y.scss`\n  are the sanctioned hook for the host box of every component); elsewhere restate the declaration in\n  a theme layer, which sits above `kol-a11y`, `kol-global` and `kol-component`. Keep the light\n  branch byte identical to the base value so no light snapshot moves.\n- What a theme layer cannot reach are the color stops of a `@keyframes` rule declared in the base\n  layer: an animation's own values win over any normal declaration, whatever the layer. Such a case\n  needs a change in `packages/components`.\n- Depth is a surface scale, not a shadow: a lighter surface sits higher. A light palette collapses\n  that scale onto white and draws depth with a shadow instead; a dark one carries it in the surfaces\n  and replaces the shadow with a hard edge. Since `light-dark()` is a color function and cannot\n  switch a `box-shadow` geometry, state both branches at once and switch them by their colors — the\n  shadow token transparent in dark mode, the edge token transparent in light mode. A container that\n  paints a surface of its own passes it down through `--kol-surface`, which reaches slotted\n  components too, so their host box matches the surface they were placed on.\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 `@media (prefers-color-scheme: …)`, the `color-scheme` property or the `light-dark()` function in the basis global and component layers. Dark/light color schemes are a theme concern and belong exclusively in the theme global layer (see [`docs/BASE_STYLING_VS_THEMING_CONCEPT.md`](docs/BASE_STYLING_VS_THEMING_CONCEPT.md)). `forced-colors` (high contrast) is a separate accessibility mechanism and stays in the basis `kol-forced-colors` layer.\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- Text snapshots of the unit tests can be updated with `pnpm test:update:unit` or via the `update-snapshots.yml` GitHub workflow. Visual screenshots are **not** committed: differences are approved on the review page of the pull request (see `docs/visual-review.md`); `pnpm snapshots:pull` fetches the current baseline for local runs.\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",
+      "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- Development workflow: `git pull` → `pnpm i` → `pnpm -r build` → `pnpm dev` only in the packages being changed → work on the code. No `dev` or `preview` script builds dependencies. Never run a build while a watcher is active, the components build clears the watcher's output. See [CONTRIBUTING.md](CONTRIBUTING.md#daily-workflow).\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`). A package's build never builds another package: `pnpm -r build` builds each package exactly once in topological order. Build a package together with its dependencies using `pnpm --filter <package>... build` (e.g. components, which needs the kolicons font from `@public-ui/icons`).\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. It never contains a color scheme (dark/light).\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. It never contains a color scheme (dark/light).\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`. Color schemes (dark/light) are defined here via theme tokens.\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> **Base styling vs. theming — dark/light lives in the theme.** The base styling of the components package (layers 1–3) is responsible for layout and structure only. It knows no dark/light color scheme: no `prefers-color-scheme`, no `color-scheme`, no `light-dark()`, no scheme tokens. Black and white in the base layers are a contrast fallback, not a color design. Dark/light theming is anchored and implemented exclusively in the theme packages (layers 4–5). See [`docs/BASE_STYLING_VS_THEMING_CONCEPT.md`](docs/BASE_STYLING_VS_THEMING_CONCEPT.md).\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\nDark/light color schemes are implemented in the theme layers only. Define all colors that differ between light and dark as tokens on `:host` in the theme global layer and switch the scheme there (`color-scheme` + `light-dark()`, `@media (prefers-color-scheme: dark)`, or an opt-in attribute). The theme component layer only references those tokens and never contains its own scheme media queries. Alternatively, a theme may ship a separate dark export that is registered as an additional theme and switched via the `kol-theme` attribute. The base styling of the components package must never be involved in this.\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### Color schemes\n\nA theme carries one palette per color scheme in a single declaration, resolved by the CSS\n`light-dark()` function:\n\n```scss\n@layer kol-theme-global {\n\t:host {\n\t\t--color-text: var(--kolibri-color-text, light-dark(#202020, #{$dark-color-text}));\n\t}\n}\n```\n\nRules that hold for every theme:\n\n- **Never declare `color-scheme` in a theme**, and never write `@media (prefers-color-scheme: …)`.\n  `color-scheme` is an inherited property and inheritance follows the flat tree, so it crosses the\n  shadow boundary on its own: each component resolves `light-dark()` against whatever the consuming\n  application has in effect where the component sits. A declaration on `:host` would replace that\n  inherited value, and the page and the components in it could then disagree — which is exactly the\n  bug this rule exists to prevent.\n- The application owns the scheme, in plain CSS: `:root { color-scheme: light dark }` to follow the\n  operating system, `color-scheme: dark` on any element to force a subtree. Consequently an\n  application that declares nothing stays light, whatever the operating system says. Dark mode is\n  opt-in; `color-scheme.css` in a theme package ships that one line plus the page colors.\n- Sass does not evaluate variables inside `var()`. Interpolate them (`#{$dark-color-text}`).\n- An application stylesheet that uses `light-dark()` must not be downlevelled. A CSS minifier\n  targeting older browsers rewrites it into a `prefers-color-scheme` media query with space\n  toggles, and that replacement ignores the `color-scheme` property. A theme's CSS is a string\n  adopted into the shadow roots at runtime and is never processed by the application's CSS\n  pipeline, so the page would follow the operating system while the components follow\n  `color-scheme`. Both sample host apps therefore pin `build.cssTarget` in their Vite config.\n- The base layer hardcodes `black` and `white` in a few places. Where it routes them through a\n  token, override the token (`--kol-a11y-font-color` / `--kol-a11y-background-color` in `a11y.scss`\n  are the sanctioned hook for the host box of every component); elsewhere restate the declaration in\n  a theme layer, which sits above `kol-a11y`, `kol-global` and `kol-component`. Keep the light\n  branch byte identical to the base value so no light snapshot moves.\n- What a theme layer cannot reach are the color stops of a `@keyframes` rule declared in the base\n  layer: an animation's own values win over any normal declaration, whatever the layer. Such a case\n  needs a change in `packages/components`.\n- Depth is a surface scale, not a shadow: a lighter surface sits higher. A light palette collapses\n  that scale onto white and draws depth with a shadow instead; a dark one carries it in the surfaces\n  and replaces the shadow with a hard edge. Since `light-dark()` is a color function and cannot\n  switch a `box-shadow` geometry, state both branches at once and switch them by their colors — the\n  shadow token transparent in dark mode, the edge token transparent in light mode. A container that\n  paints a surface of its own passes it down through `--kol-surface`, which reaches slotted\n  components too, so their host box matches the surface they were placed on.\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 `@media (prefers-color-scheme: …)`, the `color-scheme` property or the `light-dark()` function in the basis global and component layers. Dark/light color schemes are a theme concern and belong exclusively in the theme global layer (see [`docs/BASE_STYLING_VS_THEMING_CONCEPT.md`](docs/BASE_STYLING_VS_THEMING_CONCEPT.md)). `forced-colors` (high contrast) is a separate accessibility mechanism and stays in the basis `kol-forced-colors` layer.\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- Inline code documentation follows [Inline code documentation](#inline-code-documentation).\n\n### Inline code documentation\n\nWe encourage inline code documentation (JSDoc in TypeScript/TSX, comments in SCSS and scripts), but only as much as necessary and as little as possible. This rule applies to every new or changed comment; when you touch code, bring the comments of the touched code in line with it.\n\n- **Document what the code cannot say itself**: the purpose of public API (`@Prop`, `@Method`, `@Event`, exported functions and types), constraints, a non-obvious reason (the \"why\") and known limitations.\n- **Do not repeat the code**: no comment that restates a name, a type or the next line. The TypeScript signature is the source of truth, so no `@param {string}` or `@returns {void}` type annotations.\n- **Describe the present and the future, never the past**: state what the code is and does and, where relevant, where it is heading (`@deprecated` with its replacement, a `TODO` with an issue link). Do not write history such as \"previously\", \"changed to\", \"fixed\", \"new:\", and do not refer to the diff, the pull request or a predecessor implementation. History belongs in the commit message, the pull request and the changelog. If an earlier state still matters, state the constraint that follows from it today.\n- **Write for human and AI readers alike**: clear, easy to follow and free of contradictions. One statement per fact, terms named exactly as in the code, no vague wording (\"maybe\", \"somehow\", \"for now\"). A comment never contradicts the code, another comment or the documentation. Update or delete a comment together with the code it describes, and link the authoritative document instead of copying it.\n- **Published API documentation stays stable**: the JSDoc of public `@Prop`, `@Method` and `@Event` members is published (`custom-elements.json`, `docs-vscode`, adapter IntelliSense). Refactorings and migrations keep it unchanged (see [Public API Contract](packages/components/src/components/_skeleton/ARC42.md#public-api-contract-migration-parity)); rewording it is a change of its own.\n\n```ts\n// ❌ Bad: repeats the signature and tells history.\n/**\n * Sets the label.\n * @param {string} value - the label\n * Previously this was handled by the controller; changed in the skeleton migration.\n */\nprivate setLabel(value: string): void {}\n\n// ✅ Good: states the constraint the code cannot express.\n/**\n * Runs before the first render, because the behaviors read the normalized label in `componentWillLoad`.\n */\nprivate setLabel(value: string): void {}\n```\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- Text snapshots of the unit tests can be updated with `pnpm test:update:unit` or via the `update-snapshots.yml` GitHub workflow. Visual screenshots are **not** committed: differences are approved on the review page of the pull request (see `docs/visual-review.md`); `pnpm snapshots:pull` fetches the current baseline for local runs.\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",
       "kind": "doc"
     },
     {
@@ -77,7 +77,7 @@
       "group": "docs/arc42_de",
       "name": "07-deployment-view",
       "path": "docs/arc42_de/07-deployment-view.md",
-      "code": "# 7. Verteilungssicht\n\nDieser Abschnitt beschreibt die Infrastruktur und Verteilungsszenarien für Public UI - KoliBri. Er umfasst Entwicklungsumgebungen, CI/CD-Pipelines, Paketverteilungsstrategien und verschiedene Anwendungs-Verteilungsmuster, die Konsumenten bei der Integration von KoliBri-Komponenten in ihre Projekte verwenden können.\n\n## 7.1 Infrastrukturübersicht\n\n```mermaid\ngraph TB\n    subgraph Development\n        Dev[Entwickler-Workstation]\n        Git[Git Repository<br/>GitHub]\n    end\n\n    subgraph CI/CD\n        Actions[GitHub Actions]\n        Tests[Test-Runner]\n        Build[Build-Pipeline]\n        Security[Sicherheits-Scanner<br/>CodeQL]\n    end\n\n    subgraph Distribution\n        NPM[npm Registry]\n        CDN1[unpkg.com]\n        CDN2[jsDelivr]\n    end\n\n    subgraph Deployment\n        StaticSite[Statische Websites]\n        SPA[Single Page Apps]\n        SSR[Server-Side Rendered Apps]\n    end\n\n    Dev -->|push code| Git\n    Git -->|trigger| Actions\n    Actions -->|führe aus| Tests\n    Actions -->|führe aus| Build\n    Actions -->|führe aus| Security\n    Actions -->|veröffentliche| NPM\n\n    NPM -->|spiegele| CDN1\n    NPM -->|spiegele| CDN2\n\n    NPM -->|installiere| StaticSite\n    NPM -->|installiere| SPA\n    NPM -->|installiere| SSR\n\n    CDN1 -->|lade| StaticSite\n    CDN2 -->|lade| StaticSite\n```\n\n## 7.2 Entwicklungsumgebung\n\n### Entwickler-Workstation-Anforderungen\n\n| Komponente         | Anforderung                       | Zweck                                         |\n| ------------------ | --------------------------------- | --------------------------------------------- |\n| **Betriebssystem** | Windows 10+, macOS 11+ oder Linux | Plattformunabhängige Entwicklung              |\n| **Node.js**        | Version 22.x (erforderlich)       | Runtime für Build-Tools                       |\n| **pnpm**           | Version 10.x                      | Paketmanager                                  |\n| **Git**            | Version 2.30+                     | Versionskontrolle                             |\n| **IDE**            | VS Code (empfohlen)               | Code-Bearbeitung mit TypeScript-Unterstützung |\n| **Browser**        | Chrome/Edge (zum Testen)          | Entwicklung und Testing                       |\n\n### Lokales Setup\n\n```bash\n# Repository klonen\ngit clone https://github.com/public-ui/kolibri.git\ncd kolibri\n\n# Node.js 22 installieren\n# (plattformspezifische Installation)\n\n# pnpm aktivieren\ncorepack enable pnpm\n\n# Abhängigkeiten installieren\npnpm i --ignore-scripts\n\n# Alle Pakete bauen\npnpm -r build\n\n# Entwicklungsserver starten\ncd packages/samples/react\npnpm start\n```\n\n### Entwicklungs-Ports\n\n| Port     | Dienst               | URL                   |\n| -------- | -------------------- | --------------------- |\n| 9191     | React-Beispiel-App   | http://localhost:9191 |\n| 4200     | Angular-Beispiel-App | http://localhost:4200 |\n| Variabel | Stencil-Dev-Server   | http://localhost:3333 |\n\n## 7.3 CI/CD-Pipeline\n\n```mermaid\ngraph LR\n    subgraph GitHub Actions Workflows\n        PR[Pull Request] -->|trigger| CI\n        Push[Push to main] -->|trigger| CI\n        Tag[Tag-Erstellung] -->|trigger| Publish\n\n        CI[CI Workflow]\n        Publish[Publish Workflow]\n        Snapshots[Update Snapshots]\n\n        CI -->|bei Erfolg| Merge\n        Merge[Merge to main]\n        Merge -->|trigger| Tag\n        Tag -->|trigger| Publish\n    end\n\n    subgraph CI Steps\n        Install[Abhängigkeiten installieren]\n        Build[Alle Pakete bauen]\n        Lint[Code linten]\n        Test[Tests ausführen]\n        Security[Sicherheits-Scans]\n\n        Install --> Build\n        Build --> Lint\n        Lint --> Test\n        Test --> Security\n    end\n\n    subgraph Publish Steps\n        VerifyBuild[Build verifizieren]\n        Pack[Pakete packen]\n        Provenance[Provenance generieren]\n        NPMPublish[Zu npm veröffentlichen]\n\n        VerifyBuild --> Pack\n        Pack --> Provenance\n        Provenance --> NPMPublish\n    end\n```\n\n### GitHub Actions Workflows\n\n| Workflow                 | Trigger                      | Zweck                                          |\n| ------------------------ | ---------------------------- | ---------------------------------------------- |\n| **ci.yml**               | Push, Pull Request           | Tests, Linting, Builds ausführen               |\n| **publish.yml**          | Tag-Erstellung               | Pakete zu npm mit Provenance veröffentlichen   |\n| **update-pnpm-lock.yml** | Manueller Trigger            | `pnpm-lock.yaml` für einen Branch erneuern     |\n| **update-snapshots.yml** | Manueller Trigger            | Visual Regression Test Snapshots aktualisieren |\n| **codeql.yml**           | Push, Pull Request, Schedule | Sicherheits-Scanning mit CodeQL                |\n\n### CI Quality Gates\n\nAlle PRs müssen bestehen:\n\n1. **Build**: Alle Pakete müssen ohne Fehler bauen\n2. **Linting**: ESLint, Stylelint, TypeScript-Checks müssen bestehen\n3. **Unit-Tests**: Alle Jest-Tests müssen bestehen\n4. **E2E-Tests**: Playwright-Tests müssen bestehen\n5. **Sicherheit**: CodeQL-Analyse muss bestehen, keine kritischen Schwachstellen\n6. **Formatierung**: Code muss mit Prettier formatiert sein\n\n## 7.4 Paketverteilung\n\n### npm Registry\n\nPrimärer Verteilungskanal für KoliBri-Pakete:\n\n```mermaid\ngraph TB\n    subgraph \"Published Packages\"\n        Core[\"@public-ui/components\"]\n        DefaultTheme[\"@public-ui/theme-default\"]\n        ECLTheme[\"@public-ui/theme-ecl\"]\n        ReactAdapter[\"@public-ui/react\"]\n        AngularAdapter[\"@public-ui/angular-v21\"]\n        VueAdapter[\"@public-ui/vue\"]\n        CLI[\"@public-ui/kolibri-cli\"]\n    end\n\n    subgraph \"npm Registry\"\n        Registry[npm Registry]\n    end\n\n    subgraph CDN\n        unpkg[unpkg.com]\n        jsDelivr[jsDelivr.net]\n    end\n\n    Core --> Registry\n    DefaultTheme --> Registry\n    ECLTheme --> Registry\n    ReactAdapter --> Registry\n    AngularAdapter --> Registry\n    VueAdapter --> Registry\n    CLI --> Registry\n\n    Registry -->|spiegele| unpkg\n    Registry -->|spiegele| jsDelivr\n```\n\n### Paketstruktur\n\nJedes zu npm veröffentlichte Paket enthält:\n\n```\n@public-ui/components/\n├── dist/                   # Kompiliertes JavaScript\n│   ├── index.js           # ES-Modul-Einstieg\n│   ├── index.cjs.js       # CommonJS-Einstieg\n│   ├── types/             # TypeScript-Definitionen\n│   └── esm/               # ES2017-Module\n├── loader/                # Lazy-Loading-Wrapper\n├── assets/                # Statische Assets (Icons, etc.)\n├── doc/                   # Generierte Dokumentation\n├── custom-elements.json   # Custom Elements Manifest\n└── package.json           # Paket-Metadaten\n```\n\n### SLSA Provenance\n\nKoliBri veröffentlicht Pakete mit SLSA Build Level 3 Provenance:\n\n- Pakete in GitHub Actions mit OIDC-Identität gebaut\n- Mit `--provenance`-Flag veröffentlicht\n- Verifizierbare Attestierungen für alle veröffentlichten Artefakte\n- Gewährleistet Build-Integrität und Supply-Chain-Sicherheit\n\nVerifizierung:\n\n```bash\n# Provenance-Metadaten anzeigen\npnpm view @public-ui/components dist.provenance\n\n# Signaturen verifizieren (falls npm-Client unterstützt)\npnpm audit signatures --package=@public-ui/components@latest\n```\n\n## 7.5 Anwendungs-Verteilungsszenarien\n\n### Szenario 1: Statische Website\n\n```mermaid\ngraph LR\n    Build[Build-Prozess] -->|bundle| Static[Statische Assets]\n    Static -->|deploy| CDN[CDN/Static Host]\n    CDN -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lade| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten mit Anwendungscode gebündelt\n- Zu statischem Hosting deployed (Netlify, Vercel, GitHub Pages, S3, etc.)\n- Kein Server-Side Rendering\n- Alle Assets von CDN gecacht\n\n**Beispiel:**\n\n```html\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<script type=\"module\" src=\"./kolibri-components.js\"></script>\n\t\t<link rel=\"stylesheet\" href=\"./theme-default.css\" />\n\t</head>\n\t<body>\n\t\t<kol-button _label=\"Klick mich\"></kol-button>\n\t</body>\n</html>\n```\n\n### Szenario 2: Single Page Application (SPA)\n\n```mermaid\ngraph LR\n    Framework[React/Angular/Vue App] -->|bundle| Webpack[Bundler]\n    Webpack -->|build| Assets[Optimierte Assets]\n    Assets -->|deploy| Server[Web-Server]\n    Server -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lazy load| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten über Framework-Adapter importiert\n- Mit Anwendung über Webpack/Vite/Rollup gebündelt\n- Lazy Loading für Code-Splitting\n- Zu Anwendungsserver oder CDN deployed\n\n**Beispiel (React):**\n\n```typescript\nimport { KolButton } from '@public-ui/react';\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n\nfunction App() {\n\treturn <KolButton _label=\"Klick mich\" />;\n}\n```\n\n### Szenario 3: Server-Side Rendering (SSR)\n\n```mermaid\ngraph LR\n    SSR[SSR Server] -->|render| HTML[Initiales HTML]\n    HTML -->|sende| Browser[Nutzer-Browser]\n    Browser -->|hydrate| Components[KoliBri-Komponenten]\n    Browser -->|request| SSR\n```\n\n**Verteilung:**\n\n- Komponenten auf Client nach SSR hydratisiert\n- Initiales HTML server-seitig gerendert\n- Client-seitige Hydratisierung für Interaktivität\n- Zu Node.js-Server oder Serverless-Funktionen deployed\n\n**Überlegungen:**\n\n- Verwende Hydrate-Adapter für SSR-Unterstützung\n- Komponenten benötigen client-seitige Hydratisierung\n- Shadow DOM erfordert sorgfältiges SSR-Handling\n\n### Szenario 4: Nur CDN (Kein Build)\n\n```mermaid\ngraph LR\n    CDN[unpkg/jsDelivr] -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lade| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten direkt von CDN laden\n- Kein Build-Schritt erforderlich\n- Ideal für Prototypen und einfache Websites\n\n**Beispiel:**\n\n```html\n<script type=\"module\">\n\timport { defineCustomElements } from 'https://unpkg.com/@public-ui/components@latest/loader/index.mjs';\n\timport { register } from 'https://unpkg.com/@public-ui/components@latest/dist/index.js';\n\timport { DEFAULT } from 'https://unpkg.com/@public-ui/theme-default@latest/index.js';\n\n\tawait register(DEFAULT, defineCustomElements);\n</script>\n```\n\n## 7.6 Verteilungstopologie\n\n### Multi-Tier-Architektur\n\n```mermaid\ngraph TB\n    subgraph \"User Tier\"\n        Browser[Web Browser]\n        AT[Assistive Technologie]\n    end\n\n    subgraph \"CDN Tier\"\n        CDN[Content Delivery Network]\n    end\n\n    subgraph \"Application Tier\"\n        AppServer[Anwendungsserver - Node.js/Static]\n        API[Backend-API - optional]\n    end\n\n    subgraph \"Data Tier\"\n        DB[Datenbank - optional]\n    end\n\n    Browser -->|HTTPS| CDN\n    Browser -->|HTTPS| AppServer\n    AT -->|Accessibility API| Browser\n\n    CDN -->|fallback| AppServer\n    AppServer -->|HTTP/REST| API\n    API -->|query| DB\n```\n\n### Komponenten-Lade-Strategie\n\n1. **Initialer Ladevorgang**:\n   - HTML-Seite mit Komponenten-Tags\n   - Kern-Component-Loader-Skript\n   - Theme-CSS\n\n2. **Lazy Loading**:\n   - Individuelle Komponenten-Bundles on-demand geladen\n   - Nur verwendete Komponenten heruntergeladen\n   - Browser-Caching für nachfolgende Ladevorgänge\n\n3. **Caching-Strategie**:\n   - Komponenten: Langer Cache (unveränderliche Versionen)\n   - Themes: Langer Cache (unveränderliche Versionen)\n   - Anwendungscode: Cache mit Revalidierung\n\n## 7.7 Monitoring und Observability\n\n### Client-Side-Monitoring\n\nEmpfehlungen für Anwendungen mit KoliBri:\n\n- **Performance-Monitoring**: Web Vitals\n- **Fehler-Tracking**: Sentry, Rollbar (Anwendungsebene)\n- **Barrierefreiheits-Monitoring**: axe DevTools, automatisierte Scans\n- **Bundle-Size-Tracking**: bundlephobia, webpack-bundle-analyzer\n\n### Build-Pipeline-Monitoring\n\n- **CI/CD-Status**: GitHub Actions Status-Badges\n- **Test-Abdeckung**: Jest-Coverage-Reports\n- **Sicherheits-Warnungen**: GitHub Dependabot, CodeQL-Warnungen\n- **Paket-Gesundheit**: npm-Paket-Gesundheits-Score\n\n### Metriken\n\nWichtige verfolgte Metriken:\n\n- **Build-Zeit**: Vollständige Build-Dauer (~2 Minuten)\n- **Test-Dauer**: Unit + E2E-Test-Ausführung (~3 Minuten)\n- **Paketgröße**: Individuelle Paketgrößen\n- **Download-Statistiken**: npm-Download-Zahlen\n- **Issue-Auflösungszeit**: Zeit bis zum Schließen von Issues/PRs\n",
+      "code": "# 7. Verteilungssicht\n\nDieser Abschnitt beschreibt die Infrastruktur und Verteilungsszenarien für Public UI - KoliBri. Er umfasst Entwicklungsumgebungen, CI/CD-Pipelines, Paketverteilungsstrategien und verschiedene Anwendungs-Verteilungsmuster, die Konsumenten bei der Integration von KoliBri-Komponenten in ihre Projekte verwenden können.\n\n## 7.1 Infrastrukturübersicht\n\n```mermaid\ngraph TB\n    subgraph Development\n        Dev[Entwickler-Workstation]\n        Git[Git Repository<br/>GitHub]\n    end\n\n    subgraph CI/CD\n        Actions[GitHub Actions]\n        Tests[Test-Runner]\n        Build[Build-Pipeline]\n        Security[Sicherheits-Scanner<br/>CodeQL]\n    end\n\n    subgraph Distribution\n        NPM[npm Registry]\n        CDN1[unpkg.com]\n        CDN2[jsDelivr]\n    end\n\n    subgraph Deployment\n        StaticSite[Statische Websites]\n        SPA[Single Page Apps]\n        SSR[Server-Side Rendered Apps]\n    end\n\n    Dev -->|push code| Git\n    Git -->|trigger| Actions\n    Actions -->|führe aus| Tests\n    Actions -->|führe aus| Build\n    Actions -->|führe aus| Security\n    Actions -->|veröffentliche| NPM\n\n    NPM -->|spiegele| CDN1\n    NPM -->|spiegele| CDN2\n\n    NPM -->|installiere| StaticSite\n    NPM -->|installiere| SPA\n    NPM -->|installiere| SSR\n\n    CDN1 -->|lade| StaticSite\n    CDN2 -->|lade| StaticSite\n```\n\n## 7.2 Entwicklungsumgebung\n\n### Entwickler-Workstation-Anforderungen\n\n| Komponente         | Anforderung                       | Zweck                                         |\n| ------------------ | --------------------------------- | --------------------------------------------- |\n| **Betriebssystem** | Windows 10+, macOS 11+ oder Linux | Plattformunabhängige Entwicklung              |\n| **Node.js**        | Version 22.x (erforderlich)       | Runtime für Build-Tools                       |\n| **pnpm**           | Version 10.x                      | Paketmanager                                  |\n| **Git**            | Version 2.30+                     | Versionskontrolle                             |\n| **IDE**            | VS Code (empfohlen)               | Code-Bearbeitung mit TypeScript-Unterstützung |\n| **Browser**        | Chrome/Edge (zum Testen)          | Entwicklung und Testing                       |\n\n### Lokales Setup\n\n```bash\n# Repository klonen\ngit clone https://github.com/public-ui/kolibri.git\ncd kolibri\n\n# Node.js 22 installieren\n# (plattformspezifische Installation)\n\n# pnpm aktivieren\ncorepack enable pnpm\n\n# Abhängigkeiten installieren\npnpm i --ignore-scripts\n\n# Alle Pakete bauen\npnpm -r build\n\n# Entwicklungsserver starten\ncd packages/samples/presentation\npnpm dev\n```\n\n### Entwicklungs-Ports\n\n| Port     | Dienst               | URL                   |\n| -------- | -------------------- | --------------------- |\n| 9191     | React-Beispiel-App   | http://localhost:9191 |\n| 4200     | Angular-Beispiel-App | http://localhost:4200 |\n| Variabel | Stencil-Dev-Server   | http://localhost:3333 |\n\n## 7.3 CI/CD-Pipeline\n\n```mermaid\ngraph LR\n    subgraph GitHub Actions Workflows\n        PR[Pull Request] -->|trigger| CI\n        Push[Push to main] -->|trigger| CI\n        Tag[Tag-Erstellung] -->|trigger| Publish\n\n        CI[CI Workflow]\n        Publish[Publish Workflow]\n        Snapshots[Update Snapshots]\n\n        CI -->|bei Erfolg| Merge\n        Merge[Merge to main]\n        Merge -->|trigger| Tag\n        Tag -->|trigger| Publish\n    end\n\n    subgraph CI Steps\n        Install[Abhängigkeiten installieren]\n        Build[Alle Pakete bauen]\n        Lint[Code linten]\n        Test[Tests ausführen]\n        Security[Sicherheits-Scans]\n\n        Install --> Build\n        Build --> Lint\n        Lint --> Test\n        Test --> Security\n    end\n\n    subgraph Publish Steps\n        VerifyBuild[Build verifizieren]\n        Pack[Pakete packen]\n        Provenance[Provenance generieren]\n        NPMPublish[Zu npm veröffentlichen]\n\n        VerifyBuild --> Pack\n        Pack --> Provenance\n        Provenance --> NPMPublish\n    end\n```\n\n### GitHub Actions Workflows\n\n| Workflow                 | Trigger                      | Zweck                                          |\n| ------------------------ | ---------------------------- | ---------------------------------------------- |\n| **ci.yml**               | Push, Pull Request           | Tests, Linting, Builds ausführen               |\n| **publish.yml**          | Tag-Erstellung               | Pakete zu npm mit Provenance veröffentlichen   |\n| **update-pnpm-lock.yml** | Manueller Trigger            | `pnpm-lock.yaml` für einen Branch erneuern     |\n| **update-snapshots.yml** | Manueller Trigger            | Visual Regression Test Snapshots aktualisieren |\n| **codeql.yml**           | Push, Pull Request, Schedule | Sicherheits-Scanning mit CodeQL                |\n\n### CI Quality Gates\n\nAlle PRs müssen bestehen:\n\n1. **Build**: Alle Pakete müssen ohne Fehler bauen\n2. **Linting**: ESLint, Stylelint, TypeScript-Checks müssen bestehen\n3. **Unit-Tests**: Alle Jest-Tests müssen bestehen\n4. **E2E-Tests**: Playwright-Tests müssen bestehen\n5. **Sicherheit**: CodeQL-Analyse muss bestehen, keine kritischen Schwachstellen\n6. **Formatierung**: Code muss mit Prettier formatiert sein\n\n## 7.4 Paketverteilung\n\n### npm Registry\n\nPrimärer Verteilungskanal für KoliBri-Pakete:\n\n```mermaid\ngraph TB\n    subgraph \"Published Packages\"\n        Core[\"@public-ui/components\"]\n        DefaultTheme[\"@public-ui/theme-default\"]\n        ECLTheme[\"@public-ui/theme-ecl\"]\n        ReactAdapter[\"@public-ui/react\"]\n        AngularAdapter[\"@public-ui/angular-v21\"]\n        VueAdapter[\"@public-ui/vue\"]\n        CLI[\"@public-ui/kolibri-cli\"]\n    end\n\n    subgraph \"npm Registry\"\n        Registry[npm Registry]\n    end\n\n    subgraph CDN\n        unpkg[unpkg.com]\n        jsDelivr[jsDelivr.net]\n    end\n\n    Core --> Registry\n    DefaultTheme --> Registry\n    ECLTheme --> Registry\n    ReactAdapter --> Registry\n    AngularAdapter --> Registry\n    VueAdapter --> Registry\n    CLI --> Registry\n\n    Registry -->|spiegele| unpkg\n    Registry -->|spiegele| jsDelivr\n```\n\n### Paketstruktur\n\nJedes zu npm veröffentlichte Paket enthält:\n\n```\n@public-ui/components/\n├── dist/                   # Kompiliertes JavaScript\n│   ├── index.js           # ES-Modul-Einstieg\n│   ├── index.cjs.js       # CommonJS-Einstieg\n│   ├── types/             # TypeScript-Definitionen\n│   └── esm/               # ES2017-Module\n├── loader/                # Lazy-Loading-Wrapper\n├── assets/                # Statische Assets (Icons, etc.)\n├── doc/                   # Generierte Dokumentation\n├── custom-elements.json   # Custom Elements Manifest\n└── package.json           # Paket-Metadaten\n```\n\n### SLSA Provenance\n\nKoliBri veröffentlicht Pakete mit SLSA Build Level 3 Provenance:\n\n- Pakete in GitHub Actions mit OIDC-Identität gebaut\n- Mit `--provenance`-Flag veröffentlicht\n- Verifizierbare Attestierungen für alle veröffentlichten Artefakte\n- Gewährleistet Build-Integrität und Supply-Chain-Sicherheit\n\nVerifizierung:\n\n```bash\n# Provenance-Metadaten anzeigen\npnpm view @public-ui/components dist.provenance\n\n# Signaturen verifizieren (falls npm-Client unterstützt)\npnpm audit signatures --package=@public-ui/components@latest\n```\n\n## 7.5 Anwendungs-Verteilungsszenarien\n\n### Szenario 1: Statische Website\n\n```mermaid\ngraph LR\n    Build[Build-Prozess] -->|bundle| Static[Statische Assets]\n    Static -->|deploy| CDN[CDN/Static Host]\n    CDN -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lade| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten mit Anwendungscode gebündelt\n- Zu statischem Hosting deployed (Netlify, Vercel, GitHub Pages, S3, etc.)\n- Kein Server-Side Rendering\n- Alle Assets von CDN gecacht\n\n**Beispiel:**\n\n```html\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<script type=\"module\" src=\"./kolibri-components.js\"></script>\n\t\t<link rel=\"stylesheet\" href=\"./theme-default.css\" />\n\t</head>\n\t<body>\n\t\t<kol-button _label=\"Klick mich\"></kol-button>\n\t</body>\n</html>\n```\n\n### Szenario 2: Single Page Application (SPA)\n\n```mermaid\ngraph LR\n    Framework[React/Angular/Vue App] -->|bundle| Webpack[Bundler]\n    Webpack -->|build| Assets[Optimierte Assets]\n    Assets -->|deploy| Server[Web-Server]\n    Server -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lazy load| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten über Framework-Adapter importiert\n- Mit Anwendung über Webpack/Vite/Rollup gebündelt\n- Lazy Loading für Code-Splitting\n- Zu Anwendungsserver oder CDN deployed\n\n**Beispiel (React):**\n\n```typescript\nimport { KolButton } from '@public-ui/react';\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n\nfunction App() {\n\treturn <KolButton _label=\"Klick mich\" />;\n}\n```\n\n### Szenario 3: Server-Side Rendering (SSR)\n\n```mermaid\ngraph LR\n    SSR[SSR Server] -->|render| HTML[Initiales HTML]\n    HTML -->|sende| Browser[Nutzer-Browser]\n    Browser -->|hydrate| Components[KoliBri-Komponenten]\n    Browser -->|request| SSR\n```\n\n**Verteilung:**\n\n- Komponenten auf Client nach SSR hydratisiert\n- Initiales HTML server-seitig gerendert\n- Client-seitige Hydratisierung für Interaktivität\n- Zu Node.js-Server oder Serverless-Funktionen deployed\n\n**Überlegungen:**\n\n- Verwende Hydrate-Adapter für SSR-Unterstützung\n- Komponenten benötigen client-seitige Hydratisierung\n- Shadow DOM erfordert sorgfältiges SSR-Handling\n\n### Szenario 4: Nur CDN (Kein Build)\n\n```mermaid\ngraph LR\n    CDN[unpkg/jsDelivr] -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lade| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten direkt von CDN laden\n- Kein Build-Schritt erforderlich\n- Ideal für Prototypen und einfache Websites\n\n**Beispiel:**\n\n```html\n<script type=\"module\">\n\timport { defineCustomElements } from 'https://unpkg.com/@public-ui/components@latest/loader/index.mjs';\n\timport { register } from 'https://unpkg.com/@public-ui/components@latest/dist/index.js';\n\timport { DEFAULT } from 'https://unpkg.com/@public-ui/theme-default@latest/index.js';\n\n\tawait register(DEFAULT, defineCustomElements);\n</script>\n```\n\n## 7.6 Verteilungstopologie\n\n### Multi-Tier-Architektur\n\n```mermaid\ngraph TB\n    subgraph \"User Tier\"\n        Browser[Web Browser]\n        AT[Assistive Technologie]\n    end\n\n    subgraph \"CDN Tier\"\n        CDN[Content Delivery Network]\n    end\n\n    subgraph \"Application Tier\"\n        AppServer[Anwendungsserver - Node.js/Static]\n        API[Backend-API - optional]\n    end\n\n    subgraph \"Data Tier\"\n        DB[Datenbank - optional]\n    end\n\n    Browser -->|HTTPS| CDN\n    Browser -->|HTTPS| AppServer\n    AT -->|Accessibility API| Browser\n\n    CDN -->|fallback| AppServer\n    AppServer -->|HTTP/REST| API\n    API -->|query| DB\n```\n\n### Komponenten-Lade-Strategie\n\n1. **Initialer Ladevorgang**:\n   - HTML-Seite mit Komponenten-Tags\n   - Kern-Component-Loader-Skript\n   - Theme-CSS\n\n2. **Lazy Loading**:\n   - Individuelle Komponenten-Bundles on-demand geladen\n   - Nur verwendete Komponenten heruntergeladen\n   - Browser-Caching für nachfolgende Ladevorgänge\n\n3. **Caching-Strategie**:\n   - Komponenten: Langer Cache (unveränderliche Versionen)\n   - Themes: Langer Cache (unveränderliche Versionen)\n   - Anwendungscode: Cache mit Revalidierung\n\n## 7.7 Monitoring und Observability\n\n### Client-Side-Monitoring\n\nEmpfehlungen für Anwendungen mit KoliBri:\n\n- **Performance-Monitoring**: Web Vitals\n- **Fehler-Tracking**: Sentry, Rollbar (Anwendungsebene)\n- **Barrierefreiheits-Monitoring**: axe DevTools, automatisierte Scans\n- **Bundle-Size-Tracking**: bundlephobia, webpack-bundle-analyzer\n\n### Build-Pipeline-Monitoring\n\n- **CI/CD-Status**: GitHub Actions Status-Badges\n- **Test-Abdeckung**: Jest-Coverage-Reports\n- **Sicherheits-Warnungen**: GitHub Dependabot, CodeQL-Warnungen\n- **Paket-Gesundheit**: npm-Paket-Gesundheits-Score\n\n### Metriken\n\nWichtige verfolgte Metriken:\n\n- **Build-Zeit**: Vollständige Build-Dauer (~2 Minuten)\n- **Test-Dauer**: Unit + E2E-Test-Ausführung (~3 Minuten)\n- **Paketgröße**: Individuelle Paketgrößen\n- **Download-Statistiken**: npm-Download-Zahlen\n- **Issue-Auflösungszeit**: Zeit bis zum Schließen von Issues/PRs\n",
       "kind": "doc"
     },
     {
@@ -181,7 +181,7 @@
       "group": "docs/arc42",
       "name": "07-deployment-view",
       "path": "docs/arc42/07-deployment-view.md",
-      "code": "# 7. Deployment View\n\nThis section describes the infrastructure and deployment scenarios for Public UI - KoliBri. It covers development environments, CI/CD pipelines, package distribution strategies, and various application deployment patterns that consumers can use when integrating KoliBri components into their projects.\n\n## 7.1 Infrastructure Overview\n\n```mermaid\ngraph TB\n    subgraph Development\n        Dev[Developer Workstation]\n        Git[Git Repository<br/>GitHub]\n    end\n\n    subgraph CI/CD\n        Actions[GitHub Actions]\n        Tests[Test Runners]\n        Build[Build Pipeline]\n        Security[Security Scanners<br/>CodeQL]\n    end\n\n    subgraph Distribution\n        NPM[npm Registry]\n        CDN1[unpkg.com]\n        CDN2[jsDelivr]\n    end\n\n    subgraph Deployment\n        StaticSite[Static Sites]\n        SPA[Single Page Apps]\n        SSR[Server-Side Rendered Apps]\n    end\n\n    Dev -->|push code| Git\n    Git -->|trigger| Actions\n    Actions -->|run| Tests\n    Actions -->|run| Build\n    Actions -->|run| Security\n    Actions -->|publish| NPM\n\n    NPM -->|mirror| CDN1\n    NPM -->|mirror| CDN2\n\n    NPM -->|install| StaticSite\n    NPM -->|install| SPA\n    NPM -->|install| SSR\n\n    CDN1 -->|load| StaticSite\n    CDN2 -->|load| StaticSite\n```\n\n## 7.2 Development Environment\n\n### Developer Workstation Requirements\n\n| Component            | Requirement                      | Purpose                              |\n| -------------------- | -------------------------------- | ------------------------------------ |\n| **Operating System** | Windows 10+, macOS 11+, or Linux | Platform-independent development     |\n| **Node.js**          | Version 22.x (required)          | Runtime for build tools              |\n| **pnpm**             | Version 10.x                     | Package manager                      |\n| **Git**              | Version 2.30+                    | Version control                      |\n| **IDE**              | VS Code (recommended)            | Code editing with TypeScript support |\n| **Browser**          | Chrome/Edge (for testing)        | Development and testing              |\n\n### Local Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/public-ui/kolibri.git\ncd kolibri\n\n# Install Node.js 22\n# (platform-specific installation)\n\n# Enable pnpm\ncorepack enable pnpm\n\n# Install dependencies\npnpm i --ignore-scripts\n\n# Build all packages\npnpm -r build\n\n# Start development server\ncd packages/samples/react\npnpm start\n```\n\n### Development Ports\n\n| Port     | Service            | URL                   |\n| -------- | ------------------ | --------------------- |\n| 9191     | React sample app   | http://localhost:9191 |\n| 4200     | Angular sample app | http://localhost:4200 |\n| Variable | Stencil dev server | http://localhost:3333 |\n\n## 7.3 CI/CD Pipeline\n\n```mermaid\ngraph LR\n    subgraph GitHub Actions Workflows\n        PR[Pull Request] -->|trigger| CI\n        Push[Push to main] -->|trigger| CI\n        Tag[Tag creation] -->|trigger| Publish\n\n        CI[CI Workflow]\n        Publish[Publish Workflow]\n        Snapshots[Update Snapshots]\n\n        CI -->|on success| Merge\n        Merge[Merge to main]\n        Merge -->|trigger| Tag\n        Tag -->|trigger| Publish\n    end\n\n    subgraph CI Steps\n        Install[Install Dependencies]\n        Build[Build All Packages]\n        Lint[Lint Code]\n        Test[Run Tests]\n        Security[Security Scans]\n\n        Install --> Build\n        Build --> Lint\n        Lint --> Test\n        Test --> Security\n    end\n\n    subgraph Publish Steps\n        VerifyBuild[Verify Build]\n        Pack[Pack Packages]\n        Provenance[Generate Provenance]\n        NPMPublish[Publish to npm]\n\n        VerifyBuild --> Pack\n        Pack --> Provenance\n        Provenance --> NPMPublish\n    end\n```\n\n### GitHub Actions Workflows\n\n| Workflow                 | Trigger                      | Purpose                                 |\n| ------------------------ | ---------------------------- | --------------------------------------- |\n| **ci.yml**               | Push, Pull Request           | Run tests, linting, builds              |\n| **publish.yml**          | Tag creation                 | Publish packages to npm with provenance |\n| **update-pnpm-lock.yml** | Manual trigger               | Refresh `pnpm-lock.yaml` for a branch   |\n| **update-snapshots.yml** | Manual trigger               | Update visual regression test snapshots |\n| **codeql.yml**           | Push, Pull Request, Schedule | Security scanning with CodeQL           |\n\n### CI Quality Gates\n\nAll PRs must pass:\n\n1. **Build**: All packages must build without errors\n2. **Linting**: ESLint, Stylelint, TypeScript checks must pass\n3. **Unit Tests**: All Jest tests must pass\n4. **E2E Tests**: Playwright tests must pass\n5. **Security**: CodeQL analysis must pass, no high-severity vulnerabilities\n6. **Formatting**: Code must be formatted with Prettier\n\n## 7.4 Package Distribution\n\n### npm Registry\n\nPrimary distribution channel for KoliBri packages:\n\n```mermaid\ngraph TB\n    subgraph \"Published Packages\"\n        Core[\"@public-ui/components\"]\n        DefaultTheme[\"@public-ui/theme-default\"]\n        ECLTheme[\"@public-ui/theme-ecl\"]\n        ReactAdapter[\"@public-ui/react\"]\n        AngularAdapter[\"@public-ui/angular-v21\"]\n        VueAdapter[\"@public-ui/vue\"]\n        CLI[\"@public-ui/kolibri-cli\"]\n    end\n\n    subgraph \"npm Registry\"\n        Registry[npm Registry]\n    end\n\n    subgraph CDN\n        unpkg[unpkg.com]\n        jsDelivr[jsDelivr.net]\n    end\n\n    Core --> Registry\n    DefaultTheme --> Registry\n    ECLTheme --> Registry\n    ReactAdapter --> Registry\n    AngularAdapter --> Registry\n    VueAdapter --> Registry\n    CLI --> Registry\n\n    Registry -->|mirror| unpkg\n    Registry -->|mirror| jsDelivr\n```\n\n### Package Structure\n\nEach package published to npm includes:\n\n```\n@public-ui/components/\n├── dist/                   # Compiled JavaScript\n│   ├── index.js           # ES module entry\n│   ├── index.cjs.js       # CommonJS entry\n│   ├── types/             # TypeScript definitions\n│   └── esm/               # ES2017 modules\n├── loader/                # Lazy loading wrapper\n├── assets/                # Static assets (icons, etc.)\n├── doc/                   # Generated documentation\n├── custom-elements.json   # Custom Elements Manifest\n└── package.json           # Package metadata\n```\n\n### SLSA Provenance\n\nKoliBri publishes packages with SLSA Build Level 3 provenance:\n\n- Packages built in GitHub Actions with OIDC identity\n- Published with `--provenance` flag\n- Verifiable attestations for all published artifacts\n- Ensures build integrity and supply chain security\n\nVerification:\n\n```bash\n# View provenance metadata\npnpm view @public-ui/components dist.provenance\n\n# Verify signatures (if npm client supports)\npnpm audit signatures --package=@public-ui/components@latest\n```\n\n## 7.5 Application Deployment Scenarios\n\n### Scenario 1: Static Website\n\n```mermaid\ngraph LR\n    Build[Build Process] -->|bundle| Static[Static Assets]\n    Static -->|deploy| CDN[CDN/Static Host]\n    CDN -->|serve| Browser[User Browser]\n    Browser -->|load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Components bundled with application code\n- Deployed to static hosting (Netlify, Vercel, GitHub Pages, S3, etc.)\n- No server-side rendering\n- All assets cached by CDN\n\n**Example:**\n\n```html\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<script type=\"module\" src=\"./kolibri-components.js\"></script>\n\t\t<link rel=\"stylesheet\" href=\"./theme-default.css\" />\n\t</head>\n\t<body>\n\t\t<kol-button _label=\"Click me\"></kol-button>\n\t</body>\n</html>\n```\n\n### Scenario 2: Single Page Application (SPA)\n\n```mermaid\ngraph LR\n    Framework[React/Angular/Vue App] -->|bundle| Webpack[Bundler]\n    Webpack -->|build| Assets[Optimized Assets]\n    Assets -->|deploy| Server[Web Server]\n    Server -->|serve| Browser[User Browser]\n    Browser -->|lazy load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Components imported via framework adapter\n- Bundled with application via Webpack/Vite/Rollup\n- Lazy loading for code splitting\n- Deployed to application server or CDN\n\n**Example (React):**\n\n```typescript\nimport { KolButton } from '@public-ui/react';\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n\nfunction App() {\n\treturn <KolButton _label=\"Click me\" />;\n}\n```\n\n### Scenario 3: Server-Side Rendering (SSR)\n\n```mermaid\ngraph LR\n    SSR[SSR Server] -->|render| HTML[Initial HTML]\n    HTML -->|send| Browser[User Browser]\n    Browser -->|hydrate| Components[KoliBri Components]\n    Browser -->|request| SSR\n```\n\n**Deployment:**\n\n- Components hydrated on client after SSR\n- Initial HTML rendered server-side\n- Client-side hydration for interactivity\n- Deployed to Node.js server or serverless functions\n\n**Considerations:**\n\n- Use hydrate adapter for SSR support\n- Components need client-side hydration\n- Shadow DOM requires careful SSR handling\n\n### Scenario 4: CDN Only (No Build)\n\n```mermaid\ngraph LR\n    CDN[unpkg/jsDelivr] -->|serve| Browser[User Browser]\n    Browser -->|load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Load components directly from CDN\n- No build step required\n- Ideal for prototypes and simple sites\n\n**Example:**\n\n```html\n<script type=\"module\">\n\timport { defineCustomElements } from 'https://unpkg.com/@public-ui/components@latest/loader/index.mjs';\n\timport { register } from 'https://unpkg.com/@public-ui/components@latest/dist/index.js';\n\timport { DEFAULT } from 'https://unpkg.com/@public-ui/theme-default@latest/index.js';\n\n\tawait register(DEFAULT, defineCustomElements);\n</script>\n```\n\n## 7.6 Deployment Topology\n\n### Multi-Tier Architecture\n\n```mermaid\ngraph TB\n    subgraph \"User Tier\"\n        Browser[Web Browser]\n        AT[Assistive Technology]\n    end\n\n    subgraph \"CDN Tier\"\n        CDN[Content Delivery Network]\n    end\n\n    subgraph \"Application Tier\"\n        AppServer[Application Server - Node.js/Static]\n        API[Backend API - optional]\n    end\n\n    subgraph \"Data Tier\"\n        DB[Database - optional]\n    end\n\n    Browser -->|HTTPS| CDN\n    Browser -->|HTTPS| AppServer\n    AT -->|Accessibility API| Browser\n\n    CDN -->|fallback| AppServer\n    AppServer -->|HTTP/REST| API\n    API -->|query| DB\n```\n\n### Component Loading Strategy\n\n1. **Initial Load**:\n   - HTML page with component tags\n   - Core component loader script\n   - Theme CSS\n\n2. **Lazy Loading**:\n   - Individual component bundles loaded on-demand\n   - Only used components downloaded\n   - Browser caching for subsequent loads\n\n3. **Caching Strategy**:\n   - Components: Long cache (immutable versions)\n   - Themes: Long cache (immutable versions)\n   - Application code: Cache with revalidation\n\n## 7.7 Monitoring and Observability\n\n### Client-Side Monitoring\n\nRecommendations for applications using KoliBri:\n\n- **Performance Monitoring**: Web Vitals\n- **Error Tracking**: Sentry, Rollbar (application level)\n- **Accessibility Monitoring**: axe DevTools, automated scans\n- **Bundle Size Tracking**: bundlephobia, webpack-bundle-analyzer\n\n### Build Pipeline Monitoring\n\n- **CI/CD Status**: GitHub Actions status badges\n- **Test Coverage**: Jest coverage reports\n- **Security Alerts**: GitHub Dependabot, CodeQL alerts\n- **Package Health**: npm package health score\n\n### Metrics\n\nKey metrics tracked:\n\n- **Build Time**: Full build duration (~2 minutes)\n- **Test Duration**: Unit + E2E test execution (~3 minutes)\n- **Package Size**: Individual package sizes\n- **Download Stats**: npm download counts\n- **Issue Resolution Time**: Time to close issues/PRs\n",
+      "code": "# 7. Deployment View\n\nThis section describes the infrastructure and deployment scenarios for Public UI - KoliBri. It covers development environments, CI/CD pipelines, package distribution strategies, and various application deployment patterns that consumers can use when integrating KoliBri components into their projects.\n\n## 7.1 Infrastructure Overview\n\n```mermaid\ngraph TB\n    subgraph Development\n        Dev[Developer Workstation]\n        Git[Git Repository<br/>GitHub]\n    end\n\n    subgraph CI/CD\n        Actions[GitHub Actions]\n        Tests[Test Runners]\n        Build[Build Pipeline]\n        Security[Security Scanners<br/>CodeQL]\n    end\n\n    subgraph Distribution\n        NPM[npm Registry]\n        CDN1[unpkg.com]\n        CDN2[jsDelivr]\n    end\n\n    subgraph Deployment\n        StaticSite[Static Sites]\n        SPA[Single Page Apps]\n        SSR[Server-Side Rendered Apps]\n    end\n\n    Dev -->|push code| Git\n    Git -->|trigger| Actions\n    Actions -->|run| Tests\n    Actions -->|run| Build\n    Actions -->|run| Security\n    Actions -->|publish| NPM\n\n    NPM -->|mirror| CDN1\n    NPM -->|mirror| CDN2\n\n    NPM -->|install| StaticSite\n    NPM -->|install| SPA\n    NPM -->|install| SSR\n\n    CDN1 -->|load| StaticSite\n    CDN2 -->|load| StaticSite\n```\n\n## 7.2 Development Environment\n\n### Developer Workstation Requirements\n\n| Component            | Requirement                      | Purpose                              |\n| -------------------- | -------------------------------- | ------------------------------------ |\n| **Operating System** | Windows 10+, macOS 11+, or Linux | Platform-independent development     |\n| **Node.js**          | Version 22.x (required)          | Runtime for build tools              |\n| **pnpm**             | Version 10.x                     | Package manager                      |\n| **Git**              | Version 2.30+                    | Version control                      |\n| **IDE**              | VS Code (recommended)            | Code editing with TypeScript support |\n| **Browser**          | Chrome/Edge (for testing)        | Development and testing              |\n\n### Local Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/public-ui/kolibri.git\ncd kolibri\n\n# Install Node.js 22\n# (platform-specific installation)\n\n# Enable pnpm\ncorepack enable pnpm\n\n# Install dependencies\npnpm i --ignore-scripts\n\n# Build all packages\npnpm -r build\n\n# Start development server\ncd packages/samples/presentation\npnpm dev\n```\n\n### Development Ports\n\n| Port     | Service            | URL                   |\n| -------- | ------------------ | --------------------- |\n| 9191     | React sample app   | http://localhost:9191 |\n| 4200     | Angular sample app | http://localhost:4200 |\n| Variable | Stencil dev server | http://localhost:3333 |\n\n## 7.3 CI/CD Pipeline\n\n```mermaid\ngraph LR\n    subgraph GitHub Actions Workflows\n        PR[Pull Request] -->|trigger| CI\n        Push[Push to main] -->|trigger| CI\n        Tag[Tag creation] -->|trigger| Publish\n\n        CI[CI Workflow]\n        Publish[Publish Workflow]\n        Snapshots[Update Snapshots]\n\n        CI -->|on success| Merge\n        Merge[Merge to main]\n        Merge -->|trigger| Tag\n        Tag -->|trigger| Publish\n    end\n\n    subgraph CI Steps\n        Install[Install Dependencies]\n        Build[Build All Packages]\n        Lint[Lint Code]\n        Test[Run Tests]\n        Security[Security Scans]\n\n        Install --> Build\n        Build --> Lint\n        Lint --> Test\n        Test --> Security\n    end\n\n    subgraph Publish Steps\n        VerifyBuild[Verify Build]\n        Pack[Pack Packages]\n        Provenance[Generate Provenance]\n        NPMPublish[Publish to npm]\n\n        VerifyBuild --> Pack\n        Pack --> Provenance\n        Provenance --> NPMPublish\n    end\n```\n\n### GitHub Actions Workflows\n\n| Workflow                 | Trigger                      | Purpose                                 |\n| ------------------------ | ---------------------------- | --------------------------------------- |\n| **ci.yml**               | Push, Pull Request           | Run tests, linting, builds              |\n| **publish.yml**          | Tag creation                 | Publish packages to npm with provenance |\n| **update-pnpm-lock.yml** | Manual trigger               | Refresh `pnpm-lock.yaml` for a branch   |\n| **update-snapshots.yml** | Manual trigger               | Update visual regression test snapshots |\n| **codeql.yml**           | Push, Pull Request, Schedule | Security scanning with CodeQL           |\n\n### CI Quality Gates\n\nAll PRs must pass:\n\n1. **Build**: All packages must build without errors\n2. **Linting**: ESLint, Stylelint, TypeScript checks must pass\n3. **Unit Tests**: All Jest tests must pass\n4. **E2E Tests**: Playwright tests must pass\n5. **Security**: CodeQL analysis must pass, no high-severity vulnerabilities\n6. **Formatting**: Code must be formatted with Prettier\n\n## 7.4 Package Distribution\n\n### npm Registry\n\nPrimary distribution channel for KoliBri packages:\n\n```mermaid\ngraph TB\n    subgraph \"Published Packages\"\n        Core[\"@public-ui/components\"]\n        DefaultTheme[\"@public-ui/theme-default\"]\n        ECLTheme[\"@public-ui/theme-ecl\"]\n        ReactAdapter[\"@public-ui/react\"]\n        AngularAdapter[\"@public-ui/angular-v21\"]\n        VueAdapter[\"@public-ui/vue\"]\n        CLI[\"@public-ui/kolibri-cli\"]\n    end\n\n    subgraph \"npm Registry\"\n        Registry[npm Registry]\n    end\n\n    subgraph CDN\n        unpkg[unpkg.com]\n        jsDelivr[jsDelivr.net]\n    end\n\n    Core --> Registry\n    DefaultTheme --> Registry\n    ECLTheme --> Registry\n    ReactAdapter --> Registry\n    AngularAdapter --> Registry\n    VueAdapter --> Registry\n    CLI --> Registry\n\n    Registry -->|mirror| unpkg\n    Registry -->|mirror| jsDelivr\n```\n\n### Package Structure\n\nEach package published to npm includes:\n\n```\n@public-ui/components/\n├── dist/                   # Compiled JavaScript\n│   ├── index.js           # ES module entry\n│   ├── index.cjs.js       # CommonJS entry\n│   ├── types/             # TypeScript definitions\n│   └── esm/               # ES2017 modules\n├── loader/                # Lazy loading wrapper\n├── assets/                # Static assets (icons, etc.)\n├── doc/                   # Generated documentation\n├── custom-elements.json   # Custom Elements Manifest\n└── package.json           # Package metadata\n```\n\n### SLSA Provenance\n\nKoliBri publishes packages with SLSA Build Level 3 provenance:\n\n- Packages built in GitHub Actions with OIDC identity\n- Published with `--provenance` flag\n- Verifiable attestations for all published artifacts\n- Ensures build integrity and supply chain security\n\nVerification:\n\n```bash\n# View provenance metadata\npnpm view @public-ui/components dist.provenance\n\n# Verify signatures (if npm client supports)\npnpm audit signatures --package=@public-ui/components@latest\n```\n\n## 7.5 Application Deployment Scenarios\n\n### Scenario 1: Static Website\n\n```mermaid\ngraph LR\n    Build[Build Process] -->|bundle| Static[Static Assets]\n    Static -->|deploy| CDN[CDN/Static Host]\n    CDN -->|serve| Browser[User Browser]\n    Browser -->|load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Components bundled with application code\n- Deployed to static hosting (Netlify, Vercel, GitHub Pages, S3, etc.)\n- No server-side rendering\n- All assets cached by CDN\n\n**Example:**\n\n```html\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<script type=\"module\" src=\"./kolibri-components.js\"></script>\n\t\t<link rel=\"stylesheet\" href=\"./theme-default.css\" />\n\t</head>\n\t<body>\n\t\t<kol-button _label=\"Click me\"></kol-button>\n\t</body>\n</html>\n```\n\n### Scenario 2: Single Page Application (SPA)\n\n```mermaid\ngraph LR\n    Framework[React/Angular/Vue App] -->|bundle| Webpack[Bundler]\n    Webpack -->|build| Assets[Optimized Assets]\n    Assets -->|deploy| Server[Web Server]\n    Server -->|serve| Browser[User Browser]\n    Browser -->|lazy load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Components imported via framework adapter\n- Bundled with application via Webpack/Vite/Rollup\n- Lazy loading for code splitting\n- Deployed to application server or CDN\n\n**Example (React):**\n\n```typescript\nimport { KolButton } from '@public-ui/react';\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n\nfunction App() {\n\treturn <KolButton _label=\"Click me\" />;\n}\n```\n\n### Scenario 3: Server-Side Rendering (SSR)\n\n```mermaid\ngraph LR\n    SSR[SSR Server] -->|render| HTML[Initial HTML]\n    HTML -->|send| Browser[User Browser]\n    Browser -->|hydrate| Components[KoliBri Components]\n    Browser -->|request| SSR\n```\n\n**Deployment:**\n\n- Components hydrated on client after SSR\n- Initial HTML rendered server-side\n- Client-side hydration for interactivity\n- Deployed to Node.js server or serverless functions\n\n**Considerations:**\n\n- Use hydrate adapter for SSR support\n- Components need client-side hydration\n- Shadow DOM requires careful SSR handling\n\n### Scenario 4: CDN Only (No Build)\n\n```mermaid\ngraph LR\n    CDN[unpkg/jsDelivr] -->|serve| Browser[User Browser]\n    Browser -->|load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Load components directly from CDN\n- No build step required\n- Ideal for prototypes and simple sites\n\n**Example:**\n\n```html\n<script type=\"module\">\n\timport { defineCustomElements } from 'https://unpkg.com/@public-ui/components@latest/loader/index.mjs';\n\timport { register } from 'https://unpkg.com/@public-ui/components@latest/dist/index.js';\n\timport { DEFAULT } from 'https://unpkg.com/@public-ui/theme-default@latest/index.js';\n\n\tawait register(DEFAULT, defineCustomElements);\n</script>\n```\n\n## 7.6 Deployment Topology\n\n### Multi-Tier Architecture\n\n```mermaid\ngraph TB\n    subgraph \"User Tier\"\n        Browser[Web Browser]\n        AT[Assistive Technology]\n    end\n\n    subgraph \"CDN Tier\"\n        CDN[Content Delivery Network]\n    end\n\n    subgraph \"Application Tier\"\n        AppServer[Application Server - Node.js/Static]\n        API[Backend API - optional]\n    end\n\n    subgraph \"Data Tier\"\n        DB[Database - optional]\n    end\n\n    Browser -->|HTTPS| CDN\n    Browser -->|HTTPS| AppServer\n    AT -->|Accessibility API| Browser\n\n    CDN -->|fallback| AppServer\n    AppServer -->|HTTP/REST| API\n    API -->|query| DB\n```\n\n### Component Loading Strategy\n\n1. **Initial Load**:\n   - HTML page with component tags\n   - Core component loader script\n   - Theme CSS\n\n2. **Lazy Loading**:\n   - Individual component bundles loaded on-demand\n   - Only used components downloaded\n   - Browser caching for subsequent loads\n\n3. **Caching Strategy**:\n   - Components: Long cache (immutable versions)\n   - Themes: Long cache (immutable versions)\n   - Application code: Cache with revalidation\n\n## 7.7 Monitoring and Observability\n\n### Client-Side Monitoring\n\nRecommendations for applications using KoliBri:\n\n- **Performance Monitoring**: Web Vitals\n- **Error Tracking**: Sentry, Rollbar (application level)\n- **Accessibility Monitoring**: axe DevTools, automated scans\n- **Bundle Size Tracking**: bundlephobia, webpack-bundle-analyzer\n\n### Build Pipeline Monitoring\n\n- **CI/CD Status**: GitHub Actions status badges\n- **Test Coverage**: Jest coverage reports\n- **Security Alerts**: GitHub Dependabot, CodeQL alerts\n- **Package Health**: npm package health score\n\n### Metrics\n\nKey metrics tracked:\n\n- **Build Time**: Full build duration (~2 minutes)\n- **Test Duration**: Unit + E2E test execution (~3 minutes)\n- **Package Size**: Individual package sizes\n- **Download Stats**: npm download counts\n- **Issue Resolution Time**: Time to close issues/PRs\n",
       "kind": "doc"
     },
     {
@@ -245,7 +245,7 @@
       "group": "docs",
       "name": "BASE_STYLING_VS_THEMING_CONCEPT",
       "path": "docs/BASE_STYLING_VS_THEMING_CONCEPT.md",
-      "code": "# Basis-Styling vs. Theming Konzept\n\nBeschreibt die Abgrenzung zwischen dem Basis-Styling der Komponenten (`@public-ui/components`) und dem Theming in den Theme-Paketen (`@public-ui/theme-*`) – mit dem klaren Grundsatz, dass Dark/Light-Color-Schemes ausschließlich im Theme verankert werden.\n\n## Status\n\n- Ist: Das Basis-Styling in `packages/components/src` ist faktisch scheme-frei. Weder dort noch in `packages/themes/*` gibt es `prefers-color-scheme`, `color-scheme` oder `light-dark()`. Ein Dark Mode ist in keinem Theme implementiert.\n- Soll: Die Abgrenzung ist verbindlich festgeschrieben und in allen Konzepten, Agenten-Anweisungen und Skills verankert (siehe [Abschnitt 8](#8-verankerung-in-den-bestehenden-konzepten)). Zukünftige Dark/Light-Umsetzungen entstehen ausschließlich in den Theme-Paketen.\n\n## 1. Leitsatz\n\n> **Das Basis-Styling in `@public-ui/components` (Layer `kol-a11y`, `kol-global`, `kol-component`) ist ausschließlich für Layout und Struktur zuständig. Es kennt kein Dark/Light-Color-Scheme: kein `prefers-color-scheme`, kein `color-scheme`, kein `light-dark()`, keine Scheme-Tokens und keine Scheme-Modifier. Schwarz und Weiß in der Basis sind ein Kontrast-Fallback, keine Farbgestaltung. Dark/Light-Theming wird ausschließlich in den Theme-Paketen (Layer `kol-theme-global`, `kol-theme-component`) verankert und umgesetzt.**\n\nDer Fokus der Basis liegt auf dem Layout. Der Fokus der Themes liegt auf der Optik – dazu gehören alle Farbkombinationen, also auch die Entscheidung für ein helles oder dunkles Erscheinungsbild.\n\n## 2. Ziel\n\n- Komponenten funktionieren strukturell in jedem Theme identisch. Ein Theme-Wechsel ändert nie das Layout.\n- Themes tragen die vollständige visuelle Verantwortung. Ein Theme kann hell, dunkel oder beides anbieten, ohne dass das Komponenten-Paket angefasst werden muss.\n- Die Basis bleibt scheme-neutral. Das `unstyled`-Theme (`packages/unstyled/theme.ts`) rendert nur den Basis-Layer und muss unter der Browser-Einstellung `light` und `dark` identisch aussehen.\n- Es gibt genau eine Stelle, an der Farbentscheidungen getroffen werden. Das vermeidet Konflikte zwischen Basis-Farben und Theme-Farben und hält die Kontrastprüfung (WCAG) beim Theme.\n\n## 3. Verantwortlichkeiten je Schicht\n\nDie Layer-Reihenfolge ist in `packages/components/src/components/_layer-order.scss` definiert:\n\n```scss\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;\n```\n\n| Layer                     | Paket                   | Zuständig für                                                                                    | Ausdrücklich nicht zuständig für                                                      |\n| ------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |\n| `kol-a11y`                | `@public-ui/components` | Barrierefreiheits-Baseline: Mindestgrößen, Schriftvererbung, Schwarz/Weiß als Kontrast-Fallback  | Farbgestaltung, Color Schemes                                                         |\n| `kol-global`              | `@public-ui/components` | Globale Layout-Defaults: `box-sizing`, Basis-`font-size`, Resets                                 | Farben, Abstände (`margin`, `padding`, `gap`), Color Schemes                          |\n| `kol-component`           | `@public-ui/components` | Komponenten-Layout: Display, Flex/Grid, Position, Dimensionen, strukturelle Typografie           | Farben (außer Schwarz/Weiß-Fallback), Abstände, Schatten, Rahmen-Optik, Color Schemes |\n| `kol-theme-global`        | `@public-ui/theme-*`    | Design-Tokens (Farben, Schriften, Abstände, Radien), **Color Schemes (Light/Dark)**, Fokus-Optik | Layout-Regeln, die bereits in der Basis stehen                                        |\n| `kol-theme-component`     | `@public-ui/theme-*`    | Komponentenspezifische Optik: Farben, Rahmen, Schatten, Abstände über Tokens                     | Layout-Regeln der Basis, eigene Scheme-Media-Queries pro Komponente                   |\n| `kol-forced-colors`       | `@public-ui/components` | Barrierefreiheit unter `forced-colors: active` mit System-Farbschlüsselwörtern                   | Dark Mode (siehe [Abschnitt 5](#5-abgrenzung-forced-colors-ist-kein-dark-mode))       |\n| `kol-theme-forced-colors` | `@public-ui/theme-*`    | Theme-spezifische Ergänzungen für Forced Colors                                                  | Dark Mode                                                                             |\n\nDie Verbotsliste für das Komponenten-Paket steht in [`CODE_STYLE_AND_CONVENTIONS.md`](./CODE_STYLE_AND_CONVENTIONS.md). Die fünf Styling-Schichten sind in [`AGENTS.md`](../AGENTS.md#theming) und in der arc42-Dokumentation ([ADR-008](./arc42/09-architecture-decisions.md#adr-008-five-layer-styling-architecture)) beschrieben.\n\n## 4. Dark/Light: Regeln\n\n### 4.1 Komponenten-Paket (`packages/components`)\n\nIn den Basis-Layern sind verboten:\n\n- `@media (prefers-color-scheme: …)` in jeder Form\n- die CSS-Eigenschaft `color-scheme`\n- die CSS-Funktion `light-dark()`\n- Custom Properties, deren Wert vom Scheme abhängt (z. B. `--kol-…-dark`)\n- Scheme-Modifier im Markup oder in BEM-Klassen (z. B. `kol-button--dark`)\n- Props oder States, die ein Color Scheme transportieren\n\nBegründung:\n\n1. Die Basis hat den Fokus auf Layout. Jede Farbentscheidung wäre eine Design-Entscheidung, die nur das Theme treffen darf.\n2. Ein Scheme in der Basis würde mit den Farben jedes Themes kollidieren und die Kontrastprüfung vom Theme zurück in die Basis verlagern.\n3. Das `unstyled`-Theme muss als scheme-neutrale Baseline unter `light` und `dark` identische Snapshots liefern. Nur so bleibt es ein verlässlicher Indikator für DOM-Umbauten (siehe `.claude/skills/zero-visual-delta-handoff/SKILL.md`, Fallstricke).\n\nErlaubt bleibt der Kontrast-Fallback aus dem A11y-Preset: `background-color: white; color: black`. Diese Werte sind keine Farbgestaltung, sondern erzwingen ein geprüftes Kontrastverhältnis, bis ein Theme die Farben setzt. Bestehende `white`/`black`-Stellen in der Basis (z. B. `@shared/_table-stateless.mixin.scss`, `input-checkbox/style.scss`) sind Fallbacks in diesem Sinn und werden nicht in Scheme-Logik überführt.\n\n### 4.2 Theme-Pakete (`packages/themes/*`)\n\nDark/Light wird vollständig im Theme umgesetzt. Empfohlenes Muster:\n\n1. **Tokens im globalen Theme-Layer auf `:host`** – wie heute in `packages/themes/default/src/global.scss`. Alle Farben, die sich zwischen Light und Dark unterscheiden, sind Tokens (`--color-…`), niemals Literale in Komponenten-Styles.\n2. **Scheme-Umschaltung an einer Stelle** – ebenfalls im Layer `kol-theme-global`:\n   - automatisch per `color-scheme: light dark` und `light-dark()` in den Token-Werten, oder\n   - per `@media (prefers-color-scheme: dark)` mit überschriebenen Tokens, oder\n   - per Opt-in über ein Attribut oder eine Klasse am Host, wenn Anwendungen das Scheme selbst steuern sollen.\n3. **Komponenten-Theme-Layer referenziert nur Tokens.** Keine Scheme-Media-Queries pro Komponente. Ändert sich das Scheme, ändern sich nur die Token-Werte.\n4. **Alternative: eigener Theme-Export.** Ein Theme kann zusätzlich einen dunklen Export (z. B. `DEFAULT_DARK`) bereitstellen, der über `register([DEFAULT, DEFAULT_DARK], …)` registriert und zur Laufzeit über das Attribut `kol-theme` umgeschaltet wird (siehe [`HOWTO_REGISTER_COMPONENTS_AND_THEMES.md`](./HOWTO_REGISTER_COMPONENTS_AND_THEMES.md) und arc42 [§6.4 Theme Switching](./arc42/06-runtime-view.md#64-theme-switching)).\n\nBeispiel für Variante 2a im globalen Theme-Layer:\n\n```scss\n@layer kol-theme-global {\n\t:host {\n\t\tcolor-scheme: light dark;\n\t\t--color-text: var(--kolibri-color-text, light-dark(#202020, #f2f3f4));\n\t\t--color-light: var(--kolibri-color-light, light-dark(#ffffff, #1a1a1a));\n\t}\n}\n```\n\nKontrastanforderungen (mindestens 4,5:1 für Text, 3:1 für UI-Komponenten, siehe arc42 [Kapitel 8](./arc42/08-cross-cutting-concepts.md)) gelten für jedes Scheme einzeln und werden vom Theme nachgewiesen.\n\n## 5. Abgrenzung: Forced Colors ist kein Dark Mode\n\n`packages/components/src/components/forced-colors.scss` (Layer `kol-forced-colors`) reagiert auf `@media (forced-colors: active)` und verwendet System-Farbschlüsselwörter wie `Canvas`, `CanvasText`, `ButtonText` oder `Highlight`. Das ist ein Barrierefreiheitsmechanismus für Hochkontrast-Modi des Betriebssystems, keine Gestaltung: Das System liefert die Farben, die Basis stellt nur sicher, dass Struktur und Zustände sichtbar bleiben.\n\nDeshalb bleibt Forced Colors in der Basis erlaubt, während Dark/Light-Schemes ausgeschlossen sind. Die beiden Mechanismen dürfen nicht vermischt werden: `forced-colors` ist kein Ersatz für `prefers-color-scheme` und umgekehrt.\n\n## 6. Entscheidungsregel für Regelverschiebungen\n\nDer Skill `theme-redundancy-check` verschiebt redundante Regeln aus Themes in die Basis. Zusätzlich zur bestehenden Frage „Würde sich die Regel beim Wechsel eines Themes visuell ändern?“ gilt:\n\n> **Würde sich der Wert beim Wechsel Light ↔ Dark ändern?** Ja → die Regel bleibt im Theme. Nein → Kandidat für die Basis.\n\nJede Farbe ist damit automatisch Theme-Sache. Layout-Regeln, die in beiden Schemes gleich sind, sind Basis-Kandidaten.\n\n## 7. Nachweis und Tests\n\n- `packages/unstyled` ist die scheme-neutrale Baseline. Der visuelle Test-Harness unterstützt `KOLIBRI_VISUAL_TESTS_COLOR_SCHEME=light|dark` (`packages/tools/visual-tests/playwright.config.js`). Ein Lauf des `unstyled`-Checks unter `dark` muss gegen die `light`-Baselines 0 Diffs liefern. Das ist der Beweis, dass die Basis kein Scheme kennt.\n- Für Themes, die Dark/Light anbieten, werden Snapshots pro Scheme geführt. Das Layout muss zwischen beiden Snapshot-Sätzen pixelgleich bleiben; nur Farben dürfen sich unterscheiden.\n- Stichprobe für das Komponenten-Paket: eine Suche nach `prefers-color-scheme`, `color-scheme` und `light-dark(` in `packages/components/src` muss leer bleiben.\n\n## 8. Verankerung in den bestehenden Konzepten\n\nDer Leitsatz aus [Abschnitt 1](#1-leitsatz) ist an folgenden Stellen eingearbeitet:\n\n- [`AGENTS.md`](../AGENTS.md#theming): Styling-Schichten, Custom-Theming-Regeln und allgemeine Theme-Regeln.\n- [`docs/CODE_STYLE_AND_CONVENTIONS.md`](./CODE_STYLE_AND_CONVENTIONS.md): Verbotsliste für das Komponenten-Paket, Zuständigkeit der Themes.\n- [`packages/components/AGENTS.md`](../packages/components/AGENTS.md) und [`packages/components/src/components/README.md`](../packages/components/src/components/README.md): Styling-Grenze für Komponenten.\n- [`packages/themes/AGENTS.md`](../packages/themes/AGENTS.md): Dark/Light als Theme-Verantwortung.\n- arc42 (EN und DE): [Lösungsstrategie](./arc42/04-solution-strategy.md), [Bausteinsicht](./arc42/05-building-block-view.md), [Architekturentscheidungen](./arc42/09-architecture-decisions.md) (ADR-008, ADR-018), [Qualitätsanforderungen](./arc42/10-quality-requirements.md) (Szenario P3), [Glossar](./arc42/12-glossary.md).\n- [`docs/HOWTO_REGISTER_COMPONENTS_AND_THEMES.md`](./HOWTO_REGISTER_COMPONENTS_AND_THEMES.md) und [`docs/tutorials/NEW_COMPONENT.md`](./tutorials/NEW_COMPONENT.md).\n- Skeleton-Architektur: [`packages/components/src/components/_skeleton/ARC42.md`](../packages/components/src/components/_skeleton/ARC42.md), `.claude/skills/migrate-to-skeleton/SKILL.md`, `.github/agents/migrate-to-skeleton.agent.md`.\n- Skills und Companion-Pläne: `.claude/skills/theme-redundancy-check/SKILL.md`, `.claude/skills/zero-visual-delta-handoff/SKILL.md`.\n\n## 9. Nicht-Ziele und Folgearbeiten\n\n- Dieses Konzept implementiert kein Dark Theme. Es legt nur fest, wo eine Umsetzung stattfindet.\n- Die bestehenden Schwarz/Weiß-Fallbacks in der Basis bleiben unverändert.\n- Folgearbeit: eine Stylelint-Regel `kolibri/component-no-color-scheme` im Paket `packages/tools/stylelint-rules`, die `prefers-color-scheme`, `color-scheme` und `light-dark()` in `packages/components` verbietet und damit die Regel aus [Abschnitt 4.1](#41-komponenten-paket-packagescomponents) maschinell absichert.\n- Folgearbeit: ein `dark`-Lauf des `unstyled`-Snapshot-Checks in der CI als dauerhafter Nachweis der Scheme-Neutralität.\n",
+      "code": "# Basis-Styling vs. Theming Konzept\n\nBeschreibt die Abgrenzung zwischen dem Basis-Styling der Komponenten (`@public-ui/components`) und dem Theming in den Theme-Paketen (`@public-ui/theme-*`) – mit dem klaren Grundsatz, dass Dark/Light-Color-Schemes ausschließlich im Theme verankert werden.\n\n## Status\n\n- Ist: Das Basis-Styling in `packages/components/src` ist scheme-frei – dort gibt es weder `prefers-color-scheme` noch `color-scheme` oder `light-dark()`. `@public-ui/theme-default` implementiert seit [#10831](https://github.com/public-ui/kolibri/pull/10831) ein Dark Color Scheme über `light-dark()` und `color-scheme.css`; alle übrigen Themes liefern bisher nur eine helle Palette.\n- Soll: Die Abgrenzung ist verbindlich festgeschrieben und in allen Konzepten, Agenten-Anweisungen und Skills verankert (siehe [Abschnitt 8](#8-verankerung-in-den-bestehenden-konzepten)). Zukünftige Dark/Light-Umsetzungen entstehen ausschließlich in den Theme-Paketen.\n\n## 1. Leitsatz\n\n> **Das Basis-Styling in `@public-ui/components` (Layer `kol-a11y`, `kol-global`, `kol-component`) ist ausschließlich für Layout und Struktur zuständig. Es kennt kein Dark/Light-Color-Scheme: kein `prefers-color-scheme`, kein `color-scheme`, kein `light-dark()`, keine Scheme-Tokens und keine Scheme-Modifier. Schwarz und Weiß in der Basis sind ein Kontrast-Fallback, keine Farbgestaltung. Dark/Light-Theming wird ausschließlich in den Theme-Paketen (Layer `kol-theme-global`, `kol-theme-component`) verankert und umgesetzt.**\n\nDer Fokus der Basis liegt auf dem Layout. Der Fokus der Themes liegt auf der Optik – dazu gehören alle Farbkombinationen, also auch die Entscheidung für ein helles oder dunkles Erscheinungsbild.\n\n## 2. Ziel\n\n- Komponenten funktionieren strukturell in jedem Theme identisch. Ein Theme-Wechsel ändert nie das Layout.\n- Themes tragen die vollständige visuelle Verantwortung. Ein Theme kann hell, dunkel oder beides anbieten, ohne dass das Komponenten-Paket angefasst werden muss.\n- Die Basis bleibt scheme-neutral. Das `unstyled`-Theme (`packages/unstyled/theme.ts`) rendert nur den Basis-Layer und muss unter der Browser-Einstellung `light` und `dark` identisch aussehen.\n- Es gibt genau eine Stelle, an der Farbentscheidungen getroffen werden. Das vermeidet Konflikte zwischen Basis-Farben und Theme-Farben und hält die Kontrastprüfung (WCAG) beim Theme.\n\n## 3. Verantwortlichkeiten je Schicht\n\nDie Layer-Reihenfolge ist in `packages/components/src/components/_layer-order.scss` definiert:\n\n```scss\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;\n```\n\n| Layer                     | Paket                   | Zuständig für                                                                                    | Ausdrücklich nicht zuständig für                                                      |\n| ------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |\n| `kol-a11y`                | `@public-ui/components` | Barrierefreiheits-Baseline: Mindestgrößen, Schriftvererbung, Schwarz/Weiß als Kontrast-Fallback  | Farbgestaltung, Color Schemes                                                         |\n| `kol-global`              | `@public-ui/components` | Globale Layout-Defaults: `box-sizing`, Basis-`font-size`, Resets                                 | Farben, Abstände (`margin`, `padding`, `gap`), Color Schemes                          |\n| `kol-component`           | `@public-ui/components` | Komponenten-Layout: Display, Flex/Grid, Position, Dimensionen, strukturelle Typografie           | Farben (außer Schwarz/Weiß-Fallback), Abstände, Schatten, Rahmen-Optik, Color Schemes |\n| `kol-theme-global`        | `@public-ui/theme-*`    | Design-Tokens (Farben, Schriften, Abstände, Radien), **Color Schemes (Light/Dark)**, Fokus-Optik | Layout-Regeln, die bereits in der Basis stehen                                        |\n| `kol-theme-component`     | `@public-ui/theme-*`    | Komponentenspezifische Optik: Farben, Rahmen, Schatten, Abstände über Tokens                     | Layout-Regeln der Basis, eigene Scheme-Media-Queries pro Komponente                   |\n| `kol-forced-colors`       | `@public-ui/components` | Barrierefreiheit unter `forced-colors: active` mit System-Farbschlüsselwörtern                   | Dark Mode (siehe [Abschnitt 5](#5-abgrenzung-forced-colors-ist-kein-dark-mode))       |\n| `kol-theme-forced-colors` | `@public-ui/theme-*`    | Theme-spezifische Ergänzungen für Forced Colors                                                  | Dark Mode                                                                             |\n\nDie Verbotsliste für das Komponenten-Paket steht in [`CODE_STYLE_AND_CONVENTIONS.md`](./CODE_STYLE_AND_CONVENTIONS.md). Die fünf Styling-Schichten sind in [`AGENTS.md`](../AGENTS.md#theming) und in der arc42-Dokumentation ([ADR-008](./arc42/09-architecture-decisions.md#adr-008-five-layer-styling-architecture)) beschrieben.\n\n## 4. Dark/Light: Regeln\n\n### 4.1 Komponenten-Paket (`packages/components`)\n\nIn den Basis-Layern sind verboten:\n\n- `@media (prefers-color-scheme: …)` in jeder Form\n- die CSS-Eigenschaft `color-scheme`\n- die CSS-Funktion `light-dark()`\n- Custom Properties, deren Wert vom Scheme abhängt (z. B. `--kol-…-dark`)\n- Scheme-Modifier im Markup oder in BEM-Klassen (z. B. `kol-button--dark`)\n- Props oder States, die ein Color Scheme transportieren\n\nBegründung:\n\n1. Die Basis hat den Fokus auf Layout. Jede Farbentscheidung wäre eine Design-Entscheidung, die nur das Theme treffen darf.\n2. Ein Scheme in der Basis würde mit den Farben jedes Themes kollidieren und die Kontrastprüfung vom Theme zurück in die Basis verlagern.\n3. Das `unstyled`-Theme muss als scheme-neutrale Baseline unter `light` und `dark` identische Snapshots liefern. Nur so bleibt es ein verlässlicher Indikator für DOM-Umbauten (siehe `.claude/skills/zero-visual-delta-handoff/SKILL.md`, Fallstricke).\n\nErlaubt bleibt der Kontrast-Fallback aus dem A11y-Preset: `background-color: white; color: black`. Diese Werte sind keine Farbgestaltung, sondern erzwingen ein geprüftes Kontrastverhältnis, bis ein Theme die Farben setzt. Bestehende `white`/`black`-Stellen in der Basis (z. B. `@shared/_table-stateless.mixin.scss`, `input-checkbox/style.scss`) sind Fallbacks in diesem Sinn und werden nicht in Scheme-Logik überführt.\n\n### 4.2 Theme-Pakete (`packages/themes/*`)\n\nDark/Light wird vollständig im Theme umgesetzt. Empfohlenes Muster:\n\n1. **Tokens im globalen Theme-Layer auf `:host`** – wie heute in `packages/themes/default/src/global.scss`. Alle Farben, die sich zwischen Light und Dark unterscheiden, sind Tokens (`--color-…`), niemals Literale in Komponenten-Styles.\n2. **Scheme-Umschaltung an einer Stelle** – ebenfalls im Layer `kol-theme-global`:\n   - automatisch per `color-scheme: light dark` und `light-dark()` in den Token-Werten, oder\n   - per `@media (prefers-color-scheme: dark)` mit überschriebenen Tokens, oder\n   - per Opt-in über ein Attribut oder eine Klasse am Host, wenn Anwendungen das Scheme selbst steuern sollen.\n3. **Komponenten-Theme-Layer referenziert nur Tokens.** Keine Scheme-Media-Queries pro Komponente. Ändert sich das Scheme, ändern sich nur die Token-Werte.\n4. **Alternative: eigener Theme-Export.** Ein Theme kann zusätzlich einen dunklen Export (z. B. `DEFAULT_DARK`) bereitstellen, der über `register([DEFAULT, DEFAULT_DARK], …)` registriert und zur Laufzeit über das Attribut `kol-theme` umgeschaltet wird (siehe [`HOWTO_REGISTER_COMPONENTS_AND_THEMES.md`](./HOWTO_REGISTER_COMPONENTS_AND_THEMES.md) und arc42 [§6.4 Theme Switching](./arc42/06-runtime-view.md#64-theme-switching)).\n\nBeispiel für Variante 2a im globalen Theme-Layer:\n\n```scss\n@layer kol-theme-global {\n\t:host {\n\t\tcolor-scheme: light dark;\n\t\t--color-text: var(--kolibri-color-text, light-dark(#202020, #f2f3f4));\n\t\t--color-light: var(--kolibri-color-light, light-dark(#ffffff, #1a1a1a));\n\t}\n}\n```\n\nKontrastanforderungen (mindestens 4,5:1 für Text, 3:1 für UI-Komponenten, siehe arc42 [Kapitel 8](./arc42/08-cross-cutting-concepts.md)) gelten für jedes Scheme einzeln und werden vom Theme nachgewiesen.\n\n## 5. Abgrenzung: Forced Colors ist kein Dark Mode\n\n`packages/components/src/components/forced-colors.scss` (Layer `kol-forced-colors`) reagiert auf `@media (forced-colors: active)` und verwendet System-Farbschlüsselwörter wie `Canvas`, `CanvasText`, `ButtonText` oder `Highlight`. Das ist ein Barrierefreiheitsmechanismus für Hochkontrast-Modi des Betriebssystems, keine Gestaltung: Das System liefert die Farben, die Basis stellt nur sicher, dass Struktur und Zustände sichtbar bleiben.\n\nDeshalb bleibt Forced Colors in der Basis erlaubt, während Dark/Light-Schemes ausgeschlossen sind. Die beiden Mechanismen dürfen nicht vermischt werden: `forced-colors` ist kein Ersatz für `prefers-color-scheme` und umgekehrt.\n\n## 6. Entscheidungsregel für Regelverschiebungen\n\nDer Skill `theme-redundancy-check` verschiebt redundante Regeln aus Themes in die Basis. Zusätzlich zur bestehenden Frage „Würde sich die Regel beim Wechsel eines Themes visuell ändern?“ gilt:\n\n> **Würde sich der Wert beim Wechsel Light ↔ Dark ändern?** Ja → die Regel bleibt im Theme. Nein → Kandidat für die Basis.\n\nJede Farbe ist damit automatisch Theme-Sache. Layout-Regeln, die in beiden Schemes gleich sind, sind Basis-Kandidaten.\n\n## 7. Nachweis und Tests\n\n- `packages/unstyled` ist die scheme-neutrale Baseline. Der visuelle Test-Harness unterstützt `KOLIBRI_VISUAL_TESTS_COLOR_SCHEME=light|dark` (`packages/tools/visual-tests/playwright.config.js`). Ein Lauf des `unstyled`-Checks unter `dark` muss gegen die `light`-Baselines 0 Diffs liefern. Das ist der Beweis, dass die Basis kein Scheme kennt.\n- Für Themes, die Dark/Light anbieten, werden Snapshots pro Scheme geführt. Das Layout muss zwischen beiden Snapshot-Sätzen pixelgleich bleiben; nur Farben dürfen sich unterscheiden.\n- Stichprobe für das Komponenten-Paket: eine Suche nach `prefers-color-scheme`, `color-scheme` und `light-dark(` in `packages/components/src` muss leer bleiben.\n\n## 8. Verankerung in den bestehenden Konzepten\n\nDer Leitsatz aus [Abschnitt 1](#1-leitsatz) ist an folgenden Stellen eingearbeitet:\n\n- [`AGENTS.md`](../AGENTS.md#theming): Styling-Schichten, Custom-Theming-Regeln und allgemeine Theme-Regeln.\n- [`docs/CODE_STYLE_AND_CONVENTIONS.md`](./CODE_STYLE_AND_CONVENTIONS.md): Verbotsliste für das Komponenten-Paket, Zuständigkeit der Themes.\n- [`packages/components/AGENTS.md`](../packages/components/AGENTS.md) und [`packages/components/src/components/README.md`](../packages/components/src/components/README.md): Styling-Grenze für Komponenten.\n- [`packages/themes/AGENTS.md`](../packages/themes/AGENTS.md): Dark/Light als Theme-Verantwortung.\n- arc42 (EN und DE): [Lösungsstrategie](./arc42/04-solution-strategy.md), [Bausteinsicht](./arc42/05-building-block-view.md), [Architekturentscheidungen](./arc42/09-architecture-decisions.md) (ADR-008, ADR-018), [Qualitätsanforderungen](./arc42/10-quality-requirements.md) (Szenario P3), [Glossar](./arc42/12-glossary.md).\n- [`docs/HOWTO_REGISTER_COMPONENTS_AND_THEMES.md`](./HOWTO_REGISTER_COMPONENTS_AND_THEMES.md) und [`docs/tutorials/NEW_COMPONENT.md`](./tutorials/NEW_COMPONENT.md).\n- Skeleton-Architektur: [`packages/components/src/components/_skeleton/ARC42.md`](../packages/components/src/components/_skeleton/ARC42.md), `.claude/skills/migrate-to-skeleton/SKILL.md`, `.github/agents/migrate-to-skeleton.agent.md`.\n- Skills und Companion-Pläne: `.claude/skills/theme-redundancy-check/SKILL.md`, `.claude/skills/zero-visual-delta-handoff/SKILL.md`.\n\n## 9. Nicht-Ziele und Folgearbeiten\n\n- Dieses Konzept implementiert kein Dark Theme. Es legt nur fest, wo eine Umsetzung stattfindet.\n- Die bestehenden Schwarz/Weiß-Fallbacks in der Basis bleiben unverändert.\n- Folgearbeit: eine Stylelint-Regel `kolibri/component-no-color-scheme` im Paket `packages/tools/stylelint-rules`, die `prefers-color-scheme`, `color-scheme` und `light-dark()` in `packages/components` verbietet und damit die Regel aus [Abschnitt 4.1](#41-komponenten-paket-packagescomponents) maschinell absichert.\n- Folgearbeit: ein `dark`-Lauf des `unstyled`-Snapshot-Checks in der CI als dauerhafter Nachweis der Scheme-Neutralität.\n",
       "kind": "doc"
     },
     {
@@ -341,7 +341,7 @@
       "group": "docs",
       "name": "CONTRIBUTING",
       "path": "CONTRIBUTING.md",
-      "code": "# Contributing\n\nWe would love for you to contribute to **KoliBri**and help make it even better than it is today! As a contributor, we ask that you follow the following guidelines:\n\n- [Contributing](#contributing)\n  - [Code of Conduct](#code-of-conduct)\n  - [Questions and problems](#questions-and-problems)\n  - [Report an error](#report-an-error)\n  - [Further development](#further-development)\n    - [Git flow](#git-flow)\n    - [Pull Request Guidelines](#pull-request-guidelines)\n    - [Developing](#developing)\n    - [Develop new component](#develop-new-component)\n    - [Switching between branches](#switching-between-branches)\n    - [Back porting to older Major-Versions](#back-porting-to-older-major-versions)\n    - [Snapshot Testing for Visual Changes](#snapshot-testing-for-visual-changes)\n      - [How to Update Snapshots](#how-to-update-snapshots)\n\n## Code of Conduct\n\nHelp us keep **KoliBri** open and inclusive. Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).\n\n## Questions and problems\n\nPlease do not create issue tickets for general support questions. We want to use the ticket system for tracking bug reports and feature requests.\n\nInstead, we recommend first checking [Stack Overflow](https://stackoverflow.com/questions/tagged/kolibri) to see whether someone else has already solved the question or problem. You can also create new questions with the tag “hummingbird”.\nTo save your time and ours, we will close all general questions in the ticket system and redirect those asking to Stack Overflow.\n\nIf you would like to contact us, please send us an email to [kolibri@itzbund.de](mailto:kolibri@itzbund.de).\n\n## Report an error\n\nIf you find an error in the source code, you can report it to our ticket system.\n\nIt would be even better if you suggested a solution to us as a pull request.\n\n## Further development\n\nYou can request new features by submitting an issue to our ticket system. If you would like to implement a new function, please note the following steps for further action:\n\n- It is helpful to read the KoliBri [architecture concept](https://public-ui.github.io/docs/concepts/architecture) before implementing.\n- For major innovations, please create a ticket with the description of the new function.\n- For small innovations, you can offer and justify the implementation directly as a pull request.\n\n### Git flow\n\nWe work according to the Git flow: https://medium.com/android-news/gitflow-with-github-c675aa4f606a\n\n### Pull Request Guidelines\n\nWhen creating a pull request, please follow these guidelines:\n\n- **PR Title:** The pull request title must follow the [Conventional Commits](https://www.conventionalcommits.org/) specification. This is enforced by automated validation in our CI pipeline.\n- **PR Title Format:** `<type>: <description>` or `<type>(<scope>): <description>`\n- **Allowed Types:** `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore`, `revert`\n- **Description:** The description should start with a lowercase letter and clearly explain the change.\n\n**Examples of valid PR titles:**\n\n- `feat: add new button component`\n- `fix: resolve navigation issue on mobile devices`\n- `docs: update installation instructions`\n- `refactor(components): simplify input validation logic`\n\n**Examples of invalid PR titles:**\n\n- `Add new feature` (missing type prefix)\n- `feat: Add feature` (description should start with lowercase)\n- `feature: add new button` (invalid type, should be `feat`)\n\n### Developing\n\n1. For contributing, you need a [GitHub account](https://github.com/login)\n2. Fork [our repository](https://github.com/public-ui/kolibri) on GitHub\n3. Open your preferred command line interface\n4. Clone the forked repository via HTTPS to your local machine. The VS Code GitHub extension can handle authentication.\n5. Navigate the project root directory\n6. Create a new branch for your changes\n7. Install Node.js version 22\n8. [Install PNPM](https://pnpm.io/installation) on you local machine\n9. Install all packages with `pnpm i`\n10. Build all packages within the mono repository `pnpm -r build`\n11. Navigate to the desired package in our monorepo\n12. When you want to start the project navigate to `packages/components/` and run `pnpm dev`\n13. To watch for changes navigate to `packages/samples/react/` and execute `pnpm start`. `http://localhost:8080/` will open automatically\n\nRun ESLint across the repository with `pnpm lint` (or `pnpm lint:eslint` to invoke ESLint directly); the configuration lives in `packages/*/eslint.config.cjs`. Formatting is handled by Prettier via `pnpm format`, so run format first to keep ESLint focused on code-quality rules rather than style drift.\n\n### VS Code Setup\n\nWe recommend using [Visual Studio Code](https://code.visualstudio.com/):\n\n- Install the Prettier and ESLint extensions.\n- Enable \"Format on Save\" in your settings.\n\n### Tests\n\nAll tests run via GitHub Actions when you open a pull request. Monitor them under the **Actions** tab.\n\n### Develop new component\n\nRefer to [new component](docs/tutorials/NEW_COMPONENT.md) tutorial.\n\n### Switching between branches\n\nWhen changing the current working branch, it is important to reinstall all dependencies, as these may have changed. It is very important that all packages are built when working on dependents. This is because the packages always use the built state of the referenced packages in the mono repo.\nTo avoid unexpected problems, it is therefore always advisable to build all packages once. This can be done with these steps:\n\n- Reinstall all dependencies: `pnpm i`\n- Build all packages: `pnpm -r build`\n- You can then switch to the package to be processed and start it with `pnpm start`.\n\nIf it is also necessary to edit dependent packages such as `@public-ui/components`, these must be rebuilt for each change. Such packages offer the `dev` script for this purpose. This automatically rebuilds the package after each change.\n\n### Back porting to older Major-Versions\n\nBy default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.x.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status.\nThe simplest procedure is therefore to create a new branch from the release branch (e.g. `release/1`) and transfer the individual commits of the feature branch from the `develop` to the new branch using cherry-picking. This branch can then be merged into the release branch as normal with a new pull request.\n\n### Visual Review for Visual Changes\n\nThe Continuous Integration (CI) pipeline takes screenshots of the React sample app in every theme and compares them with the baseline of the base branch. The screenshots are **not** stored in git: every push to `develop`, `main` and `release/*` publishes them as the artifact `visual-baseline-<package>`, and a pull request compares against the artifact of the commit it is merged with.\n\nWhen you introduce visual modifications to components, themes or the React sample app:\n\n1. The `visual-tests (<package>)` jobs report the differences. That is expected – there is nothing to regenerate or commit.\n2. The bot comment **📸 Visual Review** on the pull request links the review page (`https://public-ui.github.io/kolibri/visual/?pr=<number>`), where every changed, added and removed screenshot can be inspected side by side, with a slider, as onion skin or as diff.\n3. A reviewer with write access approves (or rejects) the screenshots there – directly with a fine-grained GitHub token, or by pasting the generated comment on the pull request. The commit status **Visual Review** turns green once everything is approved; approvals are bound to the screenshot content and survive later pushes that do not change the screenshot again.\n\nThe full process is described in [docs/visual-review.md](docs/visual-review.md).\n\n#### Running the visual tests locally\n\n```bash\npnpm snapshots:pull                          # download the current develop baseline into the snapshot folders (needs `gh auth login`)\npnpm --filter @public-ui/theme-default test  # compare; the result is written to packages/themes/default/visual-report/\npnpm test:update:docker default              # regenerate a baseline locally in the pinned Playwright container\n```\n\nScreenshots are platform specific (font rendering), so only the Docker variant produces files that match the CI.\n\n#### Text snapshots of the unit tests\n\nThe `__snapshots__` files of the unit tests (components, hydrate, hydrate-server) stay in git. Update them with `pnpm test:update:unit`, or run the `03 - Update Snapshots` action on your branch:\n\n```bash\ngh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD`\n```\n",
+      "code": "# Contributing\n\nWe would love for you to contribute to **KoliBri**and help make it even better than it is today! As a contributor, we ask that you follow the following guidelines:\n\n- [Contributing](#contributing)\n  - [Code of Conduct](#code-of-conduct)\n  - [Questions and problems](#questions-and-problems)\n  - [Report an error](#report-an-error)\n  - [Further development](#further-development)\n    - [Git flow](#git-flow)\n    - [Pull Request Guidelines](#pull-request-guidelines)\n    - [Developing](#developing)\n    - [Develop new component](#develop-new-component)\n    - [Switching between branches](#switching-between-branches)\n    - [Back porting to older Major-Versions](#back-porting-to-older-major-versions)\n    - [Snapshot Testing for Visual Changes](#snapshot-testing-for-visual-changes)\n      - [How to Update Snapshots](#how-to-update-snapshots)\n\n## Code of Conduct\n\nHelp us keep **KoliBri** open and inclusive. Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).\n\n## Questions and problems\n\nPlease do not create issue tickets for general support questions. We want to use the ticket system for tracking bug reports and feature requests.\n\nInstead, we recommend first checking [Stack Overflow](https://stackoverflow.com/questions/tagged/kolibri) to see whether someone else has already solved the question or problem. You can also create new questions with the tag “hummingbird”.\nTo save your time and ours, we will close all general questions in the ticket system and redirect those asking to Stack Overflow.\n\nIf you would like to contact us, please send us an email to [kolibri@itzbund.de](mailto:kolibri@itzbund.de).\n\n## Report an error\n\nIf you find an error in the source code, you can report it to our ticket system.\n\nIt would be even better if you suggested a solution to us as a pull request.\n\n## Further development\n\nYou can request new features by submitting an issue to our ticket system. If you would like to implement a new function, please note the following steps for further action:\n\n- It is helpful to read the KoliBri [architecture concept](https://public-ui.github.io/docs/concepts/architecture) before implementing.\n- For major innovations, please create a ticket with the description of the new function.\n- For small innovations, you can offer and justify the implementation directly as a pull request.\n\n### Git flow\n\nWe work according to the Git flow: https://medium.com/android-news/gitflow-with-github-c675aa4f606a\n\n### Pull Request Guidelines\n\nWhen creating a pull request, please follow these guidelines:\n\n- **PR Title:** The pull request title must follow the [Conventional Commits](https://www.conventionalcommits.org/) specification. This is enforced by automated validation in our CI pipeline.\n- **PR Title Format:** `<type>: <description>` or `<type>(<scope>): <description>`\n- **Allowed Types:** `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore`, `revert`\n- **Description:** The description must start with a letter (lowercase or uppercase) and clearly explain the change.\n\n**Examples of valid PR titles:**\n\n- `feat: add new button component`\n- `fix: resolve navigation issue on mobile devices`\n- `docs: update installation instructions`\n- `refactor(components): simplify input validation logic`\n- `test(visual-tests): Axe-Verstöße wieder als Build-Breaker auswerten`\n\n**Examples of invalid PR titles:**\n\n- `Add new feature` (missing type prefix)\n- `feat: 1st feature` (description must start with a letter)\n- `feature: add new button` (invalid type, should be `feat`)\n\n### Developing\n\n1. For contributing, you need a [GitHub account](https://github.com/login)\n2. Fork [our repository](https://github.com/public-ui/kolibri) on GitHub\n3. Open your preferred command line interface\n4. Clone the forked repository via HTTPS to your local machine. The VS Code GitHub extension can handle authentication.\n5. Navigate the project root directory\n6. Create a new branch for your changes\n7. Install Node.js version 22\n8. [Install PNPM](https://pnpm.io/installation) on you local machine\n9. Follow the [daily workflow](#daily-workflow) below\n\nRun ESLint across the repository with `pnpm lint` (or `pnpm lint:eslint` to invoke ESLint directly); the configuration lives in `packages/*/eslint.config.cjs`. Formatting is handled by Prettier via `pnpm format`, so run format first to keep ESLint focused on code-quality rules rather than style drift.\n\n### Daily workflow\n\nEvery package in the monorepo builds itself, and dependents always consume the built output of the\npackages they reference. The chain is kolicons → components → adapters → themes → sample →\npresentation. The order comes from the workspace dependencies: `pnpm -r build` builds every package\nexactly once, topologically sorted, and no package's build builds another package. No `dev` or\n`preview` script builds anything for you, so the workflow is always the same:\n\n```bash\ngit pull\npnpm i\npnpm -r build\n\n# One terminal per package you are changing\npnpm --filter @public-ui/components dev\npnpm --filter @public-ui/theme-default dev\n\n# The app to look at, http://localhost:9191\npnpm --filter @public-ui/presentation dev\n```\n\nThen work on the code: each watcher rebuilds its own package and the presentation app reloads.\n\n- A `dev` script exists in `@public-ui/components`, every theme package (`@public-ui/theme-bwst`,\n  `-default`, `-desy`, `-ecl`, `-kern`) and `@public-ui/mcp`. Packages without one, such as the\n  adapters or the icons, are rebuilt with `pnpm --filter <package> build` after a change.\n- Never run a build while a watcher is active. `pnpm -r build`, `pnpm build:deps` and the\n  components `build` start with `pnpm clear` and delete the output the watcher owns. Stop the\n  watchers, build, then start `dev` again.\n\n### VS Code Setup\n\nWe recommend using [Visual Studio Code](https://code.visualstudio.com/):\n\n- Install the Prettier and ESLint extensions.\n- Enable \"Format on Save\" in your settings.\n\n### Tests\n\nAll tests run via GitHub Actions when you open a pull request. Monitor them under the **Actions** tab.\n\n### Develop new component\n\nRefer to [new component](docs/tutorials/NEW_COMPONENT.md) tutorial.\n\n### Switching between branches\n\nAfter a branch switch, dependencies and build output may no longer match the code. Stop all\nwatchers and repeat the [daily workflow](#daily-workflow) from `pnpm i` on: reinstall, build\neverything, then start `dev` in the packages you are working on.\n\n### Back porting to older Major-Versions\n\nBy default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.x.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status.\nThe simplest procedure is therefore to create a new branch from the release branch (e.g. `release/1`) and transfer the individual commits of the feature branch from the `develop` to the new branch using cherry-picking. This branch can then be merged into the release branch as normal with a new pull request.\n\n### Visual Review for Visual Changes\n\nThe Continuous Integration (CI) pipeline takes screenshots of the React sample app in every theme and compares them with the baseline of the base branch. The screenshots are **not** stored in git: every push to `develop`, `main` and `release/*` publishes them as the artifact `visual-baseline-<package>`, and a pull request compares against the artifact of the commit it is merged with.\n\nWhen you introduce visual modifications to components, themes or the React sample app:\n\n1. The `visual-tests (<package>)` jobs report the differences. That is expected – there is nothing to regenerate or commit.\n2. The bot comment **📸 Visual Review** on the pull request links the review page (`https://public-ui.github.io/kolibri/visual/?pr=<number>`), where every changed, added and removed screenshot can be inspected side by side, with a slider, as onion skin or as diff.\n3. A reviewer with write access approves (or rejects) the screenshots there – directly with a fine-grained GitHub token, or by pasting the generated comment on the pull request. The commit status **Visual Review** turns green once everything is approved; approvals are bound to the screenshot content and survive later pushes that do not change the screenshot again.\n\nThe full process is described in [docs/visual-review.md](docs/visual-review.md).\n\n#### Running the visual tests locally\n\n```bash\npnpm snapshots:pull                          # download the current develop baseline into the snapshot folders (needs `gh auth login`)\npnpm --filter @public-ui/theme-default test  # compare; the result is written to packages/themes/default/visual-report/\npnpm test:update:docker default              # regenerate a baseline locally in the pinned Playwright container\n```\n\nScreenshots are platform specific (font rendering), so only the Docker variant produces files that match the CI.\n\n#### Text snapshots of the unit tests\n\nThe `__snapshots__` files of the unit tests (components, hydrate, hydrate-server) stay in git. Update them with `pnpm test:update:unit`, or run the `03 - Update Snapshots` action on your branch:\n\n```bash\ngh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD`\n```\n",
       "kind": "doc"
     },
     {
@@ -368,6 +368,14 @@
       "code": "# Focus Propagation Concept\n\nBeschreibt, wie der Focus durch die KoliBri-Komponentenschichten delegiert wird: Shadow DOM → (optional Light DOM) → HTML5-Element.\n\n## Überblick\n\nKoliBri Web Components verwenden Shadow DOM für Style-Isolation. Da der Browser fokussierbare Elemente innerhalb eines Shadow DOM nicht direkt ansteuern kann, muss der Focus programmatisch von der öffentlichen Shadow-Komponente an das tatsächlich fokussierbare HTML5-Element weitergeleitet werden.\n\nDie zentrale Herausforderung: Bevor der Focus gesetzt werden kann, müssen die Adopted Style Sheets geladen und angewendet sein. Ohne diese Absicherung kann es zu Race Conditions kommen — der Focus wird auf ein Element gesetzt, das noch nicht vollständig gerendert ist.\n\nTechnisch kann ein früher `focus()` im Browser teilweise trotzdem funktionieren. Das ist jedoch nicht authentisch zum realen Nutzerverhalten: Interaktion soll erst auf final sichtbaren und stabil gerenderten Controls stattfinden. Für Tests bedeutet das: Kein Focus auf potenziell noch unsichtbare oder semantisch unvollständige Elemente. Deshalb wird `data-themed` als verbindliche Readiness-Bedingung verwendet.\n\n## Architektur\n\n### Zwei Varianten der Focus-Delegation\n\nEs gibt zwei Varianten, je nach Komponentenaufbau:\n\n**Variante A: Shadow → Light DOM WC → HTML5-Element** (z. B. `kol-button`)\n\n```\n┌─────────────────────────────────────────────────────────┐\n│ Shadow Component: kol-button (shadow: true)             │\n│ focus() → delegateFocus(host, () => setFocus(wcRef))    │\n└─────────────────────────┬───────────────────────────────┘\n                          ↓\n┌─────────────────────────────────────────────────────────┐\n│ Light DOM Component: kol-button-wc (shadow: false)      │\n│ focus() → setFocus(buttonRef)                           │\n└─────────────────────────┬───────────────────────────────┘\n                          ↓\n┌─────────────────────────────────────────────────────────┐\n│ HTML5 Element: <button>                                 │\n│ Tatsächlich fokussierbar                                │\n└─────────────────────────────────────────────────────────┘\n```\n\n**Variante B: Shadow → HTML5-Element direkt** (z. B. `kol-input-text`)\n\n```\n┌─────────────────────────────────────────────────────────┐\n│ Shadow Component: kol-input-text (shadow: true)         │\n│ focus() → delegateFocus(host, () => setFocus(inputRef)) │\n└─────────────────────────┬───────────────────────────────┘\n                          ↓\n┌─────────────────────────────────────────────────────────┐\n│ HTML5 Element: <input>                                  │\n│ Tatsächlich fokussierbar                                │\n└─────────────────────────────────────────────────────────┘\n```\n\n### Das `data-themed`-Attribut\n\nDas Theme-System setzt das `data-themed`-Attribut auf Shadow-Komponenten, sobald die Adopted Style Sheets geladen sind. Der Ablauf:\n\n1. **Theme-Registrierung:** Beim Bootstrapping werden Themes über `register()` aus dem `adopted-style-sheets`-Paket registriert (`packages/components/src/core/bootstrap.ts`).\n\n2. **Style-Anwendung:** Stencils `setMode()`-Callback wird für jede Komponente aufgerufen (`packages/components/src/global/script.ts`). Dort wird `setThemeStyle(elm, getThemeDetails(elm))` aufgerufen, um die Adopted Style Sheets in den Shadow DOM zu injizieren.\n\n3. **Markierung:** `setThemeStyle()` setzt nach erfolgreicher Style-Anwendung das `data-themed`-Attribut auf dem Host-Element.\n\n## Utility Functions\n\nDatei: `packages/components/src/utils/element-focus.ts`\n\n### `delegateFocus(host, callback)`\n\nZentrale Focus-Delegations-Funktion für **Shadow Components** (`shadow: true`). Wartet auf die Theme-Bereitschaft des Host-Elements und führt dann die Focus-Callback-Funktion aus.\n\n```typescript\nexport async function delegateFocus(host: HTMLElement, callback: () => Promise<void>): Promise<void> {\n\ttry {\n\t\tif (!host.hasAttribute('data-themed')) {\n\t\t\tawait waitForThemed(host);\n\t\t}\n\t\tawait callback();\n\t} catch {\n\t\tthrow new Error(\n\t\t\t`The interactive element inside the KoliBri web component could not be focused. Try calling the focus method on the web component after a short delay again.`,\n\t\t);\n\t}\n}\n```\n\n**Parameter:**\n\n- `host` — Das Shadow Component Host-Element (`this.host!`)\n- `callback` — Async Funktion, die `setFocus()` auf dem Ziel-Element aufruft\n\n**Verhalten:**\n\n1. Prüft, ob `data-themed` bereits gesetzt ist\n2. Falls nicht: wartet über `waitForThemed()` (MutationObserver) bis maximal 5 Sekunden\n3. Ruft dann den `callback` auf, der den eigentlichen Focus setzt\n4. Bei Fehler (Timeout oder Focus-Fehler): wirft einen benutzerfreundlichen Fehler\n\nDie Wartephase ist nicht nur technisch motiviert, sondern auch eine Qualitätsgrenze: Sie verhindert, dass Focus-Interaktionen in Tests oder in schneller Initialisierung auf UI-Zuständen stattfinden, die ein Nutzer so noch nicht sieht.\n\n### `setFocus(element)`\n\nFokussiert ein HTML-Element durch wiederholte Versuche pro Animation Frame. Wird sowohl in Shadow- als auch in Light-DOM-Komponenten verwendet.\n\n```typescript\nexport async function setFocus(element: HTMLElement): Promise<void> {\n\tlet attempts = 0;\n\tdo {\n\t\tif (element) {\n\t\t\telement.focus();\n\t\t}\n\t\tawait new Promise((r) => requestAnimationFrame(r));\n\t\tattempts++;\n\t} while (!isActiveElement(element) && attempts < MAX_FOCUS_ATTEMPTS);\n}\n```\n\n**Verhalten:**\n\n- Ruft `element.focus()` auf und prüft pro Animation Frame, ob das Element fokussiert ist\n- Maximal `MAX_FOCUS_ATTEMPTS` (10) Versuche\n- Nutzt `isActiveElement()` für korrekte Focus-Erkennung innerhalb von Shadow DOMs\n\n### `isActiveElement(element)` (intern)\n\nPrüft, ob ein Element aktuell fokussiert ist. Berücksichtigt dabei korrekt die Shadow-DOM-Grenze.\n\n```typescript\nfunction isActiveElement(element: HTMLElement): boolean {\n\tconst root = element.getRootNode();\n\tif (root instanceof ShadowRoot) {\n\t\treturn root.activeElement === element;\n\t}\n\treturn document.activeElement === element;\n}\n```\n\n**Warum nötig:** `document.activeElement` zeigt bei fokussierten Elementen innerhalb eines Shadow DOM nur den Shadow Host, nicht das tatsächlich fokussierte Element. Daher wird `shadowRoot.activeElement` geprüft.\n\n### `waitForThemed(host)` (intern)\n\nWartet per MutationObserver darauf, dass das `data-themed`-Attribut auf dem Host-Element gesetzt wird.\n\n```typescript\nfunction waitForThemed(host: HTMLElement): Promise<void> {\n\treturn new Promise<void>((resolve, reject) => {\n\t\tconst observer = new MutationObserver(() => {\n\t\t\tif (host.hasAttribute('data-themed')) {\n\t\t\t\tclearTimeout(timeoutId);\n\t\t\t\tobserver.disconnect();\n\t\t\t\tresolve();\n\t\t\t}\n\t\t});\n\n\t\tconst timeoutId = setTimeout(() => {\n\t\t\tobserver.disconnect();\n\t\t\treject(new Error('Timeout waiting for data-themed attribute'));\n\t\t}, MAX_TIMEOUT_DURATION);\n\n\t\tobserver.observe(host, {\n\t\t\tattributes: true,\n\t\t\tattributeFilter: ['data-themed'],\n\t\t});\n\t});\n}\n```\n\n**Verhalten:**\n\n- Beobachtet Attribut-Änderungen auf dem Host-Element\n- Resolved sofort, wenn `data-themed` gesetzt wird\n- Timeout nach `MAX_TIMEOUT_DURATION` (5000 ms) mit Error\n\n### Konstanten\n\n```typescript\nconst MAX_FOCUS_ATTEMPTS = 10;\nconst MAX_TIMEOUT_DURATION = 5000;\n```\n\n## Umsetzung in Komponenten\n\n### Interface\n\nAlle fokussierbaren Komponenten implementieren das `FocusableElement`-Interface:\n\n```typescript\nexport interface FocusableElement {\n\tfocus(): Promise<void>;\n}\n```\n\n### Regel 1: Shadow Component (`shadow: true`)\n\n**Immer** `delegateFocus()` mit `setFocus()` verwenden.\n\n#### Variante A: Mit innerem WC-Element\n\nWenn die Shadow-Komponente eine Light-DOM-Komponente (`-wc`) rendert:\n\n```typescript\n@Component({ tag: 'kol-button', shadow: true })\nexport class KolButton implements ButtonProps, FocusableElement {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly setButtonWcRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn delegateFocus(this.host!, () => setFocus(this.buttonWcRef!));\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag ref={this.setButtonWcRef} /* ...props */>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\n}\n```\n\nWeitere Beispiele: `kol-link`, `kol-button-link`, `kol-link-button`, `kol-select`, `kol-accordion`, `kol-details`\n\n#### Variante B: Direkt auf HTML5-Element\n\nWenn die Shadow-Komponente das fokussierbare HTML5-Element direkt rendert (ohne `-wc`-Zwischenschicht):\n\n```typescript\n@Component({ tag: 'kol-input-text', shadow: true })\nexport class KolInputText implements InputTextAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate inputRef?: HTMLInputElement;\n\n\tprivate readonly setInputRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn delegateFocus(this.host!, () => setFocus(this.inputRef!));\n\t}\n}\n```\n\nWeitere Beispiele: `kol-input-email`, `kol-input-number`, `kol-input-file`, `kol-textarea`, `kol-combobox`, `kol-single-select`, `kol-input-radio`\n\n### Regel 2: Light DOM Component (`shadow: false`)\n\n**Nur** `setFocus()` verwenden. Kein `delegateFocus()` nötig, da kein Shadow DOM vorhanden ist und das Theme-System nicht abgewartet werden muss.\n\n```typescript\n@Component({ tag: 'kol-button-wc', shadow: false })\nexport class KolButtonWc implements ButtonAPI, FocusableElement {\n\tprivate buttonRef?: HTMLButtonElement;\n\n\tprivate readonly setButtonRef = (ref?: HTMLButtonElement) => {\n\t\tthis.buttonRef = ref;\n\t};\n\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn setFocus(this.buttonRef!);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button ref={this.setButtonRef}>\n\t\t\t\t\t{/* content */}\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n```\n\n### Zusammenfassung der Regeln\n\n| Komponente          | `shadow` | Focus-Methode                                    |\n| ------------------- | -------- | ------------------------------------------------ |\n| Shadow Component    | `true`   | `delegateFocus(this.host!, () => setFocus(ref))` |\n| Light DOM Component | `false`  | `setFocus(ref)`                                  |\n\n**Wichtig:**\n\n- `delegateFocus` darf **nur** in `shadow: true`-Komponenten verwendet werden\n- `setFocus` wird **in beiden Fällen** als eigentliche Focus-Funktion genutzt\n- Ref-Callbacks speichern die Referenz zum Ziel-Element (`ref={this.setXxxRef}`)\n- Alle `focus()`-Methoden sind `async` und geben `Promise<void>` zurück\n- Die `@Method()`-Dekorator macht die Methode auf dem Custom Element aufrufbar\n",
       "kind": "doc"
     },
+    {
+      "id": "doc/FORM_FIELD_SKELETON_MIGRATION_PLAN",
+      "group": "docs",
+      "name": "FORM_FIELD_SKELETON_MIGRATION_PLAN",
+      "path": "docs/FORM_FIELD_SKELETON_MIGRATION_PLAN.md",
+      "code": "# Migrationsplan: Formularfelder auf Skeleton\n\nÜbergreifender Plan für die Skeleton-Migration der 14 Formularfelder von `kol-combobox` bis `kol-textarea` (Epic #9559). Er schneidet die Felder in Gruppen, legt das gemeinsame Fundament fest und ordnet die Arbeit in parallele Spuren. Jede Gruppe erhält vor der Umsetzung einen eigenen Detailplan.\n\nStand: 27.09.2026, `@public-ui/components` 4.5.0-rc.0.\n\n## Ausgangslage\n\nKeines der 14 Felder ist bisher migriert. Alle laufen noch auf dem Legacy-Stack:\n\n- Controller-Kette `AssociatedInputController → ControlledInputController → InputController → InputIconController → Feld-Controller`\n- State-Wrapper in `functional-component-wrappers/`, die die alten FCs in `functional-components/` rendern\n- Validatoren aus `schema/props/`\n\nAus dem Formularumfeld ist bisher nur `kol-form` auf Skeleton umgestellt.\n\n| Feld                 | LOC `shadow.tsx`            | Render-Stack heute                          | Besonderheit                                                    |\n| -------------------- | --------------------------- | ------------------------------------------- | --------------------------------------------------------------- |\n| `kol-input-color`    | 380                         | FormField + InputContainer + Input („Trio\") | dünnstes Feld, kein `_required`                                 |\n| `kol-input-email`    | 489                         | Trio                                        | Controller erbt von Text → Password, Counter                    |\n| `kol-input-password` | 511                         | Trio + IconButton (`KolButtonWcTag`)        | `_visibilityToggle`, Basisklasse für Text und Email             |\n| `kol-input-text`     | 620                         | Trio + Clear-Button                         | `_type`, Selection-API-Methoden                                 |\n| `kol-textarea`       | 498                         | FormField + InputContainer + TextArea       | `_adjustHeight`, `_resize`, `_rows`, Counter                    |\n| `kol-input-number`   | 551                         | Trio + Step-Buttons                         | Feature-Flag `inputNumberButtons`, genutzt von `table-settings` |\n| `kol-input-range`    | 499                         | 2× Input (range + number) + Suggestions     | min/max/step, zwei synchrone Inputs                             |\n| `kol-input-date`     | 513 (+ 219 Controller)      | Trio                                        | Date↔ISO, 5 `_type`s, `reset()`                                 |\n| `kol-input-file`     | 450                         | Trio + Browse-Button (`KolButtonWcTag`)     | kein `_value`, FileList, `_accept`, Drag & Drop, `reset()`      |\n| `kol-input-checkbox` | 457                         | FormField + FieldControl + Checkbox         | Varianten default/switch/button, genutzt von `table-settings`   |\n| `kol-input-radio`    | 458                         | FormField (fieldset) + FieldControl + Radio | `_options`, `_orientation`, alte Utils `element-click`/`-focus` |\n| `kol-select`         | 222 + 404 (`kol-select-wc`) | FormField + InputContainer + NativeSelect   | `pagination` rendert `kol-select-wc` direkt                     |\n| `kol-combobox`       | 756                         | Trio + CustomSuggestions + `@Listen`        | Listbox, nahezu Zwilling von single-select                      |\n| `kol-single-select`  | 849                         | Trio + CustomSuggestions + `@Listen`        | größtes Feld, offene Bugs #10501/#10617                         |\n\n## Rahmenbedingungen\n\n- **Zero visual delta, BEM bleibt.** DOM und Klassen (`.kol-form-field`, `.kol-input-container`, `.kol-field-control` …) bleiben byte-identisch. Themes werden nicht angefasst, es gibt keinen CLI-/SCSS-Migrations-Task. Das Pixel-Gate verlangt 0 Diffs pro Theme.\n- **Formular-Anbindung 1:1 als Behavior.** Die heutige Semantik (versteckte native Elemente im Light DOM, `_syncValueBySelector`, `ariaDetails` über `attachInternals`) wandert aus der Controller-Kette in ein wiederverwendbares `FormAssociationBehavior`, das auch `kol-button` nutzt. Einen Umstieg auf natives `formAssociated` gibt es in dieser Migration nicht.\n- **Identische öffentliche API.** Gleiche `@Prop`/`@Method`-Member, Alias-Typen, Defaults und JSDoc. Die Oberfläche ist vor der Migration in `_skeleton/public-api/<komponente>.spec.ts` festgenagelt.\n\n## Leitplanken\n\n- **Strangler statt Big Bang.** Der neue Stack entsteht unter `internal/functional-components/form-field/` neben dem alten. Ein Legacy-Modul wird in dem PR gelöscht, der seinen letzten Import entfernt.\n- **Keine Bugfixes in Migrations-PRs.** Bekannte Fehler (z. B. #10501, #10617) bekommen eigene PRs, vor oder nach der Migration.\n- **Innere Tags bleiben.** `KolButtonWcTag` (IconButton, Clear-, Browse- und Visibility-Button) und `KolPopoverButtonWcTag` (Label-`_infoPopover`) bleiben wegen Zero-Delta stehen. Das ist eine begründete Ausnahme nach Fallstrick 8 im Skill `migrate-to-skeleton`.\n- **Grenze von DD16.** Stencil liest Decorators nur aus der konkreten Klasse. Alle `@Prop`/`@Watch`/`@Method` samt JSDoc bleiben in jeder Komponente, Basisklassen bündeln nur Logik. Höchstens zwei Ebenen unter `BaseWebComponent`.\n- **Basisklasse nach G1 eingefroren.** Änderungen an `BaseFormFieldWebComponent` kommen nur als eigenes PR, mit Pixel-Gate über alle bereits migrierten Felder.\n- **Konfliktstellen.** `internal/props/index.ts`, `schema/bem-registry.ts` und die Pin-Dateien: nur anhängen, Reihenfolge zwischen den Spuren absprechen.\n\n### Abnahme-Gates je Komponenten-PR\n\n1. Der Public-API-Pin ist unverändert und zeigt jetzt auf `component.tsx`. Die Klasse implementiert `*Props`.\n2. Die Jest-`.snap`-Dateien sind unverändert.\n3. `node scripts/snapshots-docker.mjs <theme> --check` meldet 0 Diffs für default, bwst, desy, kern und ecl (ec/eu).\n4. Die Verhaltensverträge aus G0 sind grün.\n5. Die geteilten E2E-Helfer `src/e2e/{input-msg,input-value-reflection,input-character-limit}.ts` sind grün.\n6. Keine Imports mehr aus `@deprecated/input`, `input-adapter-leanup`, `functional-component-wrappers` oder den alten `functional-components/*`.\n7. `form.e2e` ist grün: Ein Klick in der Fehlerliste fokussiert das Feld über seinen `focus()`.\n\n## Reihenfolge und Abhängigkeiten\n\n```\nG0 ─► G1.1 ─┬─► G1.2 ──┐\n            └─► G1.3 ──┴─► G1.4 (Pilot input-color)\n                               ├─► G2 Textfelder          (Spur A)\n                               ├─► G3 a | b | c           (Spur B)\n                               └─► G4-Vorbereitung ─► G4 ─► G5   (Spur C)\nRückbau-Inkremente am Ende jeder Gruppe; finaler Rückbau (G6) nach G2–G5\n```\n\n## Gruppen\n\n### G0 – Absicherung\n\nKein Produktivcode, Voraussetzung für alles. Die Gates greifen nur, wenn vorher festgehalten ist, was „unverändert\" heißt: API, Verhalten und Pixel.\n\n- ✅ Public-API-Pins für alle 14 Tags und `kol-select-wc` (als interner Vertrag), zunächst gegen `shadow.tsx`. Jede Komponente hat eine eigene Datei unter `_skeleton/public-api/`, damit parallele Spuren keine Merge-Konflikte bekommen.\n- ✅ Verhaltensverträge pro Feld: Reihenfolge und Payload von `kolChange`/`kolInput`/`kolFocus`/`kolBlur`/`kolKeydown`/`kolClick` und der `_on`-Callbacks; `FormData` eines nativen `<form>` für Checkbox, `select` multiple, File und Radio mit Objektwerten; `_syncValueBySelector`; `_touched` nach Blur. Die Verträge sind Playwright-Tests (`*.e2e.ts`), weil versteckte Light-DOM-Elemente, `attachInternals`, `FormData` sowie Fokus und Tastatur nur im echten Browser verlässlich prüfbar sind. Sie nutzen die Helfer aus `src/e2e/`. Reine Umrechnungen ohne Browserverhalten (z. B. Date↔ISO in G3) werden als Jest-Tests der Hilfsfunktionen geprüft.\n  - Der gemeinsame Helfer `testInputBehaviorContract` in `src/e2e/input-behavior-contract.ts` zeichnet Events und Callbacks auf; jedes Feld pinnt darin sein heutiges Verhalten. Alle 14 Felder sind gepinnt, dazu die Varianten Radio mit Objektwerten und `kol-select` mit `_multiple` (Option `variant`).\n  - Befunde aus den Verträgen: Die gepinnten Abläufe beschreiben den heutigen Stand, auch wo er inkonsistent ist. Korrekturen kommen als eigene PRs nach der jeweiligen Migration.\n    - Standard (G1.4, alle Felder außer den unten genannten Abweichungen): Je Aktion kommt zuerst das KoliBri-Event am Host, dann der `_on`-Callback, dann das native Event. Natives `input`/`change` endet an der Shadow-Grenze.\n    - Startwert ohne Vorgabe: `kol-input-color` `#000000` (aus dem inneren Input in `componentDidLoad`), `kol-input-range` `50`, `kol-input-checkbox` `true`, `kol-input-radio` und `kol-single-select` `null`, alle anderen `undefined`.\n    - G3: Payloads sind typisiert – number und range liefern Zahlen, date den ISO-String, file eine `FileList`. Für file bleibt ein Text-Input als `_syncValueBySelector`-Ziel leer.\n    - G4: checkbox und radio senden kein KoliBri-`click` und keinen `onClick` (`onClick: undefined` in `shadow.tsx`). Stattdessen erreicht das native `click` den Host vor `input`/`change`.\n    - G5: `kol-single-select` sendet beim Blur zuerst das native Event, dann das KoliBri-Event und den Callback. `kol-select` setzt `_touched` am eigenen Host nicht, das innere `kol-select-wc` hält den Zustand. Außerdem überträgt `kol-select` einen Einzelwert weder in `FormData` noch in das `_syncValueBySelector`-Ziel, weil das versteckte `<select multiple>` nur Array-Werte übernimmt. Mit `_multiple` stehen alle gewählten Werte in `FormData`. Issues: #11014 (`_touched`), #11015 (Einzelwert).\n    - Radio mit Objektwerten liefert das Objekt als Payload und überträgt es als JSON-String in `FormData` und an `_syncValueBySelector`.\n  - Formular-Anbindung heute: Das versteckte Element im Light DOM entsteht nur mit `register(…, { reflectInputValues: true })`, seinen `name` setzt der Controller nur im Experimental-Mode. Nur mit beidem steht das Feld in `FormData`. Der Vertrag pinnt alle drei Fälle, der Test ruft `register` dafür aus dem Build unter Test auf.\n- ✅ Visual-Samples ergänzen für msg, hint, disabled, hideLabel, infoPopover, Counter, Icons, `inputNumberButtons` an/aus und die Checkbox-Varianten. Neue Samples erzeugen neue Baselines und gehören in ein eigenes PR vor der ersten Migration.\n  - Vorhanden: msg, hint, disabled, hideLabel, infoPopover und Icons für alle 14 Felder über `partials/cases.tsx`/`variants.tsx`, Counter bei `input-text` und `textarea`, Checkbox-Varianten `basic`/`button`/`switch`.\n  - `inputNumberButtons` setzt das Theme (`theme-default` `'show'`, `theme-kern` `'hide'`); die bestehenden `input-number`-Baselines decken damit beide Zustände ab.\n  - Ergänzt in #11017: Counter-Routen für `kol-input-email` und `kol-input-password`, Hint-Block für `kol-input-number`.\n- ✅ Toten Code löschen: `functional-components/inputs/Combobox/Combobox.tsx`.\n\n### G1 – Fundament + Pilot `kol-input-color` (#9673, #9577)\n\nAlle 14 Felder teilen Basis-Props, die Label/Hint/Msg-Hülle, die Formular-Anbindung und die Event-Logik. Das wird einmal gebaut und am dünnsten Feld geprüft, damit die Basisklasse an einem echten Fall entsteht. G1 besteht aus sechs PRs:\n\n```\nG1.0 Testlücken ───────────────┬──────────────────────────────────────────────┐\nG1.1 Props ─┬─► G1.2 FormAssociationBehavior (+ kol-button) ─► SSR-Fix (eigener PR)\n            │        (braucht G1.0 und G1.1)                                    │\n            └─► G1.3a FormField ─► G1.3b Container/Input ──────────────────────┴─► G1.4 Basis + kol-input-color\n```\n\n0. **Testlücken** (nur Tests):\n   - Formular-Anbindung von `kol-button` gepinnt. Es entsteht kein verstecktes Formularelement, weil der Adapter in `button/base.tsx` `_name` bei der Konstruktion nicht kennt (#11036); `_syncValueBySelector` wirkt im Experimental-Mode.\n   - Gate 7 mit einem `kol-input-color` als Ziel der Fehlerliste.\n   - Tooltip bei `_hideLabel` für `kol-input-color`. Befund: Hat das Feld den Fokus, schließt Escape den Tooltip nicht. Das Feld sendet sein eigenes `keydown`-CustomEvent am Host, das vor der nativen Taste am Dokument ankommt und den einmaligen Escape-Listener des Tooltips verbraucht (#11032, verwandt #11033).\n   - Jest-Snapshots aller Felder zusätzlich mit `_hideLabel`, `_infoPopover`, sichtbarer Msg und `_variant`.\n1. **Basis-Props** in `internal/props/`: ariaDetails, autoComplete, hideMsg, hint, `horizontalIconsProp` (Icons-Objekt der Inputs, `icons.ts` bleibt unverändert), infoPopover, `inputCallbacksProp` (`_on`), msg, readOnly, required, suggestions, syncValueBySelector (nur für das Behavior), touched und der String-Wert. `tooltipAlignProp` wird wiederverwendet, der Feld-Default `'top'` im `apply` neu gesetzt. Der veröffentlichte Typ `FormFieldLabelInfoPopoverProps` zieht in einem Schritt für alle Felder nach `schema/props/`; ein teilweiser Umzug würde in `components.d.ts` einen Alias `…1` erzeugen.\n2. **`FormAssociationBehavior`**: übernimmt `input-adapter-leanup/associated.controller.ts` 1:1, einschließlich der späten Host-Zuweisung im Konstruktor. `AssociatedInputController` wird zur Fassade über das Behavior, damit die G0-Verträge es sofort für alle Felder prüfen. `button/base.tsx` wird im selben PR umgestellt; der Button-Pin bleibt unverändert.\n3. **Shell-FCs** unter `internal/functional-components/form-field/`, nur für die Hülle von `kol-input-color`: G1.3a FormField (Label, Hint, Msg, Counter, Tooltip, Zeichengrenzen-Hinweis) mit dem ARIA-Helfer aus `getRenderStates`, G1.3b InputContainer mit Adornments, IconButton, Input und Suggestions. Neue Blöcke in `schema/bem-registry.ts`. Die alten FCs werden Adapter auf die neuen, damit Hydrate-Snapshot und Pixel-Gate die Hülle sofort über alle Felder prüfen. TextArea kommt in G2, FieldControl/Checkbox/Radio in G4, NativeSelect/Option(List)/CustomSuggestions in G5. Die `fieldset`-Wurzel von radio bleibt bis G4 auf dem alten Pfad, weil `BemRootNodeFC` nur `div` rendert.\n4. **`BaseFormFieldWebComponent`** (DD16): `apply*` der Basis-Props, ein eigenes `TooltipBehavior` pro Instanz statt der modulglobalen Map in `FormField.tsx`, Formular-Anbindung, Event-Behandlung als Ersatz für `InputController` (Reihenfolge: KoliBri-Event, dann Callback) und Render-Helfer. Damit wird `kol-input-color` migriert.\n\nEntscheidungen:\n\n- Die Basis-Config enthält nur Props, die alle 14 Felder identisch haben: ariaDetails, disabled, hideLabel, hideMsg, hint, infoPopover, label, msg, name, on, tooltipAlign, touched. `WebComponentInterface` verlangt für jede Config-Prop einen Watcher.\n- Die Basisklasse ist generisch über die Feld-API. TypeScript löst `ResolvedProps<Api>` für ein generisches `Api` nicht auf, deshalb greift sie über einen einzigen, dokumentierten Self-Cast auf die Basis-Props zu.\n- Bewusste Abweichungen der Prop-Factory, wie in allen bisherigen Skeleton-Migrationen: `undefined` führt zum Default statt den alten Wert zu behalten, `normalizeBoolean` akzeptiert `'true'`/`'false'`, ungültige Werte werden verworfen.\n- `data-testid=\"input-counter\"`/`\"input-counter-aria\"` bleiben bis G2, weil `e2e/input-character-limit.ts` sie braucht und der DOM byte-gleich bleiben muss.\n\nRisiken: Zusammenbau von `aria-describedby` (hint, msg, Counter, Hinweis zur Zeichengrenze; heutige Eigenheiten in #11035); Attribut- und Klassenreihenfolge im Hydrate-Snapshot; die beiden Fokus-Flags aus Controller und Komponente; `attachInternals(undefined)` bei SSR/Hydrate.\n\n### G2 – Textfelder: email → password → text, danach textarea (#9579, #9582, #9585, #9602)\n\nDie vier Felder hängen heute in der Kette `InputPasswordController → InputTextEmailController → InputText/InputEmail` und teilen placeholder, autoComplete, pattern, maxLength/hasCounter/maxLengthBehavior, spellCheck und den Counter.\n\n- `BaseTextInputWebComponent` für email, password und text.\n- `CounterBehavior` ersetzt `utils/counter-dom-updater.ts`; das direkte DOM-Update ohne Re-Render bleibt erhalten.\n- textarea erbt direkt von `BaseFormFieldWebComponent` und nutzt das CounterBehavior.\n- Risiken: Selection-API und `_type` search/url/tel von input-text; Clear-Button und Visibility-Toggle; Datalist-IDs; `_adjustHeight`/`_resize` bei textarea.\n- Zusätzliche Abnahme: `input-character-limit` und `input-text.clear-button.e2e` grün; alle 16 React-Routen von input-text pixelgleich.\n\n### G3 – Wertetypen (#9581, #9584, #9578, #9580)\n\nDrei parallele Spuren: a) number → range, b) date, c) file. Die Felder nutzen die Standard-Hülle, müssen aber ihren Wert umwandeln.\n\n- Eigene Input-Props für min/max/step; die vorhandenen Meter-Props (Defaults 0/100) passen nicht.\n- a) Step-Buttons und Feature-Flag `inputNumberButtons`; range mit zwei synchronen Inputs und Suggestions.\n- b) Date↔ISO-Logik aus `input-date/controller.ts` in Hilfsfunktionen, alle 5 `_type`s, Zeitzonen.\n- c) FileList, Drag-&-Drop-Modifier, Browse-Button, übertragener Formularwert.\n- Zusätzliche Abnahme: `table-settings` pixelgleich; `reset()` bei date und file; Flag an und aus im Pixel-Gate.\n\n### G4 – Auswahl-Controls: checkbox → radio (#9576, #9583)\n\nNur diese beiden nutzen den FieldControl-Stack statt InputContainer und teilen `InputCheckboxRadioController`.\n\n- Vorbereitungs-PR: `options`-Prop und `fillKeyOptionMap` ziehen aus `input-radio/controller.ts` nach `form-field/options.ts`; G5 braucht beides ebenfalls.\n- FieldControlFC einführen, `InputCheckboxRadioController` auflösen.\n- Risiken: Theme-SCSS der Checkbox (300 LOC, verschachtelte Varianten); `indeterminate` nur als Property; Formularwert bei checked/unchecked; Objektwerte, Tastatur- und Fokus-Navigation bei Radio.\n- Zusätzliche Abnahme: alle drei Checkbox-Varianten je Theme; Tastatur-E2E für Radio; `table-settings` pixelgleich.\n\n### G5 – Listen: select → combobox + single-select (#9594, #9569, #9595)\n\n- select: `BaseSelectWebComponent` für `kol-select` und das Übergangs-Tag `kol-select-wc` (DD16, Übergangsmuster `shadow: false`).\n- combobox und single-select: gemeinsame Basis oder ein `ListboxBehavior` für Tastatur, open/close und focusin/out. `@Listen`-Handler folgen der Event-Handler-Policy.\n- Risiken: Options-Sync des versteckten `<select multiple>`; `pagination` hängt am Light DOM von `kol-select-wc`; `:has()`-Selektoren im CustomSuggestions-SCSS.\n- Zusätzliche Abnahme: `pagination` pixelgleich; Tastatur- und Maus-E2E für combobox und single-select; bekannte Bugs bestehen nachweislich unverändert weiter oder wurden vorher gefixt.\n\n### G6 – Rückbau\n\nGelöscht wird, sobald der letzte Import weg ist. Veröffentlichte Schema-Typen bleiben stehen.\n\n| Zeitpunkt | Was gelöscht wird                                                                                                                                                               |\n| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| nach G2   | `utils/counter-dom-updater.ts`, `InputPasswordController`, `InputTextEmailController`, `TextAreaStateWrapper`, alte `inputs/TextArea`                                           |\n| nach G4   | Checkbox-/Radio-Controller inkl. `InputCheckboxRadioController`, `Checkbox`-/`RadioStateWrapper`, altes `FieldControl`, alte `inputs/Checkbox`/`inputs/Radio`, alte Radio-Utils |\n| nach G5   | `SelectStateWrapper`, `NativeSelect`/`NativeOption(List)`, `CustomSuggestions*`, `Suggestions`; `kol-select-wc` erst, wenn `pagination` das FC rendert                          |\n| final     | `@deprecated/input/*`, `input-adapter-leanup/`, `functional-component-wrappers/` inkl. `getRenderStates`, Adapter aus G1.3, alte FormField-/Input-FCs, `*Watches`-Interfaces    |\n\n### G7 – Folge-Epics (außerhalb dieser Migration)\n\n- `KolButtonWcTag`/`KolPopoverButtonWcTag` durch `ButtonFC`/`PopoverButtonFC` ersetzen (erfordert Theme-Änderungen).\n- Umstieg auf natives `formAssociated` mit ElementInternals (Verhaltensänderung, eventuell Breaking).\n- BEM-Bereinigung mit CLI-Tasks `ScssRename*` und Migrationsguide für Custom-Themes.\n\n## Offene Fragen für die Detailpläne\n\n1. ~~Sind die Shell-Adapter (alte FC → neue FC) als Zwischenschicht akzeptabel? (G1.3)~~ Entschieden: ja, siehe G1.3.\n2. ~~ID-Strategie: bisherige Erzeugung für Snapshot-Parität oder DD12 `createUniqueId`? (G1.4)~~ Kein Konflikt: Legacy nutzt bereits `createUniqueId` und `createRelatedUniqueId`. Die Basis-ID wird einmal pro Instanz als `@State()` erzeugt.\n3. ~~`_touched` als `@State` oder als Render-Prop? (G1.4)~~ Entschieden: Render-Prop. `_touched` bleibt `@Prop({ mutable: true, reflect: true })`, der Blur-Handler schreibt die Prop (Vorbild `_open` in `kol-details`).\n4. ~~`_on`: eine gemeinsame Callback-Prop oder typisiert pro Feld? (G1.1)~~ Entschieden: gemeinsam, alle Felder deklarieren `InputTypeOnDefault`.\n5. ~~SSR-Absturz von `attachInternals(undefined)` 1:1 übernehmen oder mit eigenem PR über einen Guard absichern? (G1.2)~~ Entschieden: 1:1 übernehmen, Fix als eigener PR nach G1.2 (#11034). Ursache ist nicht ein leeres `@Element()`: In mock-doc greift `instanceof Element` in `findHostWithShadowRoot` nicht. Betroffen sind im SSR die inneren `kol-button-wc`/`kol-popover-button-wc` und mit `serializeShadowRoot: 'scoped'` alle Legacy-Felder.\n6. ~~Verhaltensverträge in Jest oder in Playwright? (G0)~~ Entschieden: Playwright, siehe G0.\n7. Namen der Input-Props für min/max/step. (G3) Das Icons-Objekt heißt `horizontalIconsProp` (G1.1).\n8. `kol-select-wc` als Übergangs-Tag behalten oder `pagination` direkt auf das FC umstellen? (G5)\n9. combobox und single-select: gemeinsame DD16-Basis oder `ListboxBehavior`? (G5)\n10. #10501 und #10617 vor oder nach der Migration fixen? (G5)\n\n## Grundlagen\n\n- `packages/components/src/components/_skeleton/ARC42.md`\n- Skill `.claude/skills/migrate-to-skeleton/` (inkl. `reference/patterns.md`, `reference/pitfalls.md`)\n- Skill `.claude/skills/zero-visual-delta-handoff/`\n",
+      "kind": "doc"
+    },
     {
       "id": "doc/HOWTO_ICON_FONTS",
       "group": "docs",
@@ -453,7 +461,7 @@
       "group": "docs",
       "name": "README",
       "path": "README.md",
-      "code": "# Welcome to KoliBri\n\n[![npm](https://img.shields.io/npm/v/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)\n[![license](https://img.shields.io/npm/l/@public-ui/components)](https://github.com/public-ui/kolibri/blob/main/LICENSE)\n[![downloads](https://img.shields.io/npm/dt/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)\n[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)\n[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)\n[![size](https://img.shields.io/bundlephobia/min/@public-ui/components)](https://bundlephobia.com/result?p=@public-ui/components)\n![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)\n[![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",
+      "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\nFor working on the monorepo itself, see the [daily workflow](CONTRIBUTING.md#daily-workflow).\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",
       "kind": "doc"
     },
     {
@@ -461,7 +469,7 @@
       "group": "docs",
       "name": "RENOVATE",
       "path": "docs/RENOVATE.md",
-      "code": "# Renovate — Automated Dependency Updates\n\nThis document is the outcome of issue [#10270](https://github.com/public-ui/kolibri/issues/10270)\n(_renovate vs npm-check-updates vs dependabot_). It contains:\n\n1. a comparison of the three candidate tools,\n2. a description of the exemplary [`renovate.json`](../renovate.json) that ships with this repo,\n3. how to enable Renovate, and\n4. the migration checklist for retiring the current tooling.\n\n> **Status:** The `renovate.json` and a self-hosted runner workflow\n> ([`.github/workflows/renovate.yml`](../.github/workflows/renovate.yml)) are committed as an\n> **exemplary, ready-to-run setup**. Renovate stays **idle** until that workflow runs — either on its\n> every-4-hours schedule or via the manual **Run workflow** button (see [Enabling Renovate](#enabling-renovate)).\n> Until then the existing Dependabot + npm-check-updates automation stays in charge.\n\n---\n\n## 1. Tool comparison\n\nKoliBri is a **pnpm-workspace monorepo** with 30+ packages, several intentionally pinned major\nlines (Angular `v20`/`v21`, React 18/19, Stencil 4, ESLint 9) and four maintained branches\n(`develop`, `release/3`, `release/2`, `release/1`). That shapes the comparison:\n\n| Capability                                   |       **Renovate**       |             Dependabot              |  npm-check-updates (ncu)  |\n| -------------------------------------------- | :----------------------: | :---------------------------------: | :-----------------------: |\n| pnpm-workspace aware                         |        ✅ native         |             ⚠️ partial              |  ❌ manual (per-package)  |\n| One PR grouping related packages             |  ✅ fully configurable   |          ⚠️ `groups:` only          |          ❌ none          |\n| Hold a package on a specific major line      |   ✅ per-folder rules    |        ⚠️ `ignore` (global)         | ⚠️ `-x` exclude (global)  |\n| GitHub Actions updates                       |            ✅            |                 ✅                  |            ❌             |\n| Lockfile-only refresh                        | ✅ `lockFileMaintenance` |             ⚠️ limited              | ❌ (needs `pnpm install`) |\n| Automerge (per update type)                  |            ✅            |             ⚠️ limited              |            ❌             |\n| Multi-base-branch (release/\\*) support       | ✅ `baseBranchPatterns`  | ✅ `target-branch` (one entry each) |  ⚠️ matrix in a workflow  |\n| Security / vulnerability remediation         |  ✅ OSV + GitHub alerts  |          ✅ GitHub alerts           |            ❌             |\n| Dependency Dashboard (single overview issue) |            ✅            |                 ❌                  |            ❌             |\n| Schedule / batching                          |            ✅            |              ⚠️ basic               |   ⚠️ via cron workflow    |\n| Self-hostable (no third-party app)           |   ✅ (official Action)   |         ✅ (GitHub-native)          |         ✅ (CLI)          |\n| Config surface                               |          medium          |                 low                 |          minimal          |\n| Cost for open source                         |           free           |                free                 |           free            |\n\n### Verdict\n\n- **Renovate — recommended.** It is the only option that models KoliBri's reality in _one_ config:\n  group the Angular/React/Stencil families, hold each adapter folder on its pinned major, automerge\n  the safe stuff (GitHub Actions, `@types/*`), and route everything risky to a review queue (the\n  Dependency Dashboard). It also folds in what we currently split across **two** systems\n  (Dependabot for Actions + a daily `ncu` workflow for npm).\n- **Dependabot — viable fallback.** Now supports `groups:`, but every package directory needs its\n  own `updates:` entry (≈30 for this monorepo × 4 branches) and it cannot hold a dependency on a\n  specific major _per folder_ — exactly what the `angular/v20|v21` and `react*` adapters need.\n- **npm-check-updates — not an automation tool.** It is a CLI that rewrites version ranges; it has\n  no PR/grouping/scheduling of its own. We only use it _inside_ a hand-written workflow\n  (`.github/workflows/auto-dependency-updater.yml`). Renovate makes that workflow redundant.\n\n---\n\n## 2. What the exemplary `renovate.json` does\n\nThe committed [`renovate.json`](../renovate.json) is tailored to this repo. Highlights:\n\n### Global behaviour\n\n- **`extends: [\"config:recommended\", \"security:openssf-scorecard\"]`** — sensible defaults plus\n  OpenSSF Scorecard badges on PRs.\n- **Conventional Commits** — `chore(deps): …` titles so PRs pass `pr-title-validation.yml`.\n- **`labels: [\"dependencies\", \"renovate\", \"release:engineering\"]`** — the `release:*` label is\n  **required** by `pr-release-label-validation.yml`; `release:engineering` files dependency PRs\n  under _🔧 Engineering_ in the changelog (see `.github/release.yml`).\n- **Every-4-hours cadence** — the workflow cron runs Renovate every 4 hours; `renovate.json` itself\n  allows PR creation `at any time`, so the workflow schedule governs. `prConcurrentLimit: 5` /\n  `prHourlyLimit: 5` cap the number of open PRs **per base branch** (so `develop` and each\n  `release/*` branch have their own budget).\n- **`minimumReleaseAge: \"3 days\"`** — all updates (npm, Actions, …, including security fixes)\n  are held back for three days after release before a PR is opened or auto-merged. This protects\n  against compromised or quickly-revoked releases.\n- **Automerge all non-major updates (merge commit)** — the first package rule enables `automerge` for\n  `patch`/`minor`/`digest`/`pin`/lockfile updates; `automergeStrategy: merge` is the only method the\n  `Production branches` ruleset allows on `develop` (see [Troubleshooting](#troubleshooting-prs-stay-open-although-ci-is-green)). Known-risky rules below (Stencil, kern-ux, ESLint,\n  TypeScript, typescript-eslint) override it back to manual. Majors always keep dashboard approval.\n  Prerequisites: repo setting **Allow auto-merge** enabled, green pipelines enforced via required\n  status checks on `develop`, and the runner GitHub App listed in the branch-protection bypass\n  (see [Enabling Renovate](#enabling-renovate)).\n- **`baseBranchPatterns`** — runs on `develop` **and** `release/3|2|1`; the maintenance branches are\n  **security-only** (all regular npm and GitHub Actions updates are disabled) so released majors stay\n  stable. Security PRs still automerge when non-major; major security updates require dashboard\n  approval.\n- **`lockFileMaintenance`** — weekly `pnpm-lock.yaml` refresh (replaces the manual\n  `04 - Update pnpm Lock` workflow runs).\n- **`configMigration: true`** — Renovate keeps `renovate.json` itself up to date when built-in\n  presets or options change.\n- **`dependencyDashboardOSVVulnerabilitySummary: \"all\"`** — adds an OSV vulnerability table\n  directly to the Dependency Dashboard issue.\n- **`postUpdateOptions: [\"pnpmDedupe\"]`** — keeps the pnpm lockfile tidy.\n\n### Grouping & guard-rails (the important part for this monorepo)\n\n| Rule                                              | Effect                                                                                                                                                                                             |\n| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **All majors**                                    | Require manual approval via the Dependency Dashboard — KoliBri pins majors deliberately.                                                                                                           |\n| **Angular `@angular/*`, `zone.js`, `ng-packagr`** | Major updates **disabled** entirely; within-major updates grouped per adapter folder (_Angular 20/21_). A new Angular major = a new adapter folder, never an auto-bump.                            |\n| **React `react`, `react-dom`, `@types/react*`**   | Major updates **disabled**; within-major React updates of the `react*` adapters grouped and automerged once green.                                                                                 |\n| **Stencil `@stencil/*`, `@stencil-community/*`**  | **All** updates require dashboard approval — every 4.39+ release currently breaks the Popover API, tooltips and visual tests (see [`UPGRADEABLE_DEPENDENCIES.md`](./UPGRADEABLE_DEPENDENCIES.md)). |\n| **`@kern-ux/*`**                                  | Dashboard approval only — upgraded by hand together with theming work.                                                                                                                             |\n| **`@typescript-eslint/*`, ESLint core + plugins** | Minor/major require approval (9 → 10 is a breaking migration).                                                                                                                                     |\n| **`jest*`, `typescript`**                         | Majors/non-patch require approval.                                                                                                                                                                 |\n| **`github-actions`, `@types/*`**                  | Grouped; automerged like every other non-major update.                                                                                                                                             |\n| **Stylelint, Playwright**                         | Grouped into single PRs.                                                                                                                                                                           |\n\n> The pins above mirror exactly what the current `ncu:*` scripts exclude\n> (`@kern-ux/*`, `@stencil/*`, `@typescript-eslint/*`) and what `UPGRADEABLE_DEPENDENCIES.md`\n> documents as breaking — so behaviour is preserved, just expressed declaratively.\n\n### Validate the config locally\n\n```sh\nnpx --yes --package renovate renovate-config-validator renovate.json\n```\n\n---\n\n## 3. Enabling Renovate\n\nTwo ways to run it; **this repo is wired for Option A**.\n\n### Option A — Self-hosted via GitHub Actions (committed in this repo)\n\nThis repo ships [`.github/workflows/renovate.yml`](../.github/workflows/renovate.yml). It runs Renovate\n**every 4 hours** (`0 */4 * * *` UTC) **and** on demand via the **Run workflow** button\n(`workflow_dispatch`, with an optional `dry_run` preview). It authenticates through the existing GitHub\nApp (`APP_ID` / `PRIVATE_KEY` secrets, shared with _04 - Update pnpm Lock_).\n\nTo activate it:\n\n1. Ensure that GitHub App installation grants **contents: write**, **pull-requests: write**,\n   **issues: write** (for the Dependency Dashboard), **workflows: write** (so the `github-actions`\n   manager may update `.github/workflows/*`), **commit statuses: write**, **Dependabot alerts: read**\n   and the mandatory **metadata: read**. Nothing beyond those seven is needed. Changing them at the\n   App is only half of it: the installation has to accept the new set, otherwise the runner keeps\n   working with the old one and the symptoms below stay. _Alternative:_ replace the app-token step\n   with a `RENOVATE_TOKEN` PAT/fine-grained token carrying the same scopes.\n\n   > **Commit statuses: write is not optional.** `minimumReleaseAge` makes Renovate post a\n   > `renovate/stability-days` commit status on every branch that still holds a pending release.\n   > Without the permission that `POST /repos/:owner/:repo/statuses/:sha` returns\n   > `403 integration-unauthorized`, which Renovate reports as `repository-changed` and which\n   > **aborts the whole run**. Because branches are processed sequentially, everything after the\n   > first affected branch is skipped: no automerge check for open PRs, and no PR creation for\n   > branches that already exist. The run still ends as a green workflow, so the failure is silent\n   > — look for `result: \"repository-changed\"` in the log.\n   >\n   > Without **Dependabot alerts: read** every run logs\n   > `Cannot access vulnerability alerts`, and `vulnerabilityAlerts` stays inactive; security PRs\n   > then only come from `osvVulnerabilityAlerts`.\n\n2. Branch protection. What governs `develop` are **rulesets**, not a classic branch protection\n   rule. Keep it that way: a classic rule for the same branch is evaluated on top of the rulesets,\n   and its _bypass required pull requests_ list only waives the need to **open** a pull request. It\n   does not waive the approval a merge needs, so the bot stays blocked while the list suggests\n   otherwise.\n\n   A bypass entry always waives **every rule of its ruleset**, never a single one. Hence the split:\n\n   | Ruleset               | Rules                                                            | Bypass list   |\n   | --------------------- | ---------------------------------------------------------------- | ------------- |\n   | `Production branches` | `pull_request` (approvals, code-owner review, merge methods)     | `publicuibot` |\n   | `Required checks`     | `required_status_checks`, restrict deletions, block force pushes | empty         |\n\n   The runner merges without a human review, but never past a red check. For everyone else nothing\n   changes.\n\n   Three details that cost an evening on 2026-09-09:\n\n   - `allowed_merge_methods` of the `pull_request` rule is `[\"merge\"]`, which is why\n     `automergeStrategy` is `merge`. On the repository itself both squash merges and merge commits\n     are enabled; the ruleset is what narrows it down.\n   - A required status check may never be skipped by a path filter, or the pull request waits\n     forever for a status that nothing will post. `codeql.yml` therefore has no `paths-ignore`, and\n     `visual-review.yml` answers a skipped CI run with `success` (mode `docs-only`, see\n     `scripts/visual-review/resolve-context.mjs`). Anything added to the list has to obey the same\n     rule. `check-results` is deliberately absent: a red pipeline stops Renovate, which refuses to\n     merge a red branch, but it does not stop a human.\n   - Every workflow behind a required check needs `synchronize` in its `pull_request` types.\n     GitHub wants the check on the **current head commit**, so a workflow that only reacts to\n     `opened`/`edited` leaves it unreported after any push and the merge is refused with\n     `Required status check \"…\" is expected`. Renovate runs into this on every rebase; that is what\n     `pr-title-validation.yml` was missing.\n   - In the target patterns of a ruleset GitHub prefixes `refs/heads/` itself. Enter `release/**/*`,\n     never `refs/heads/release/**/*`, otherwise the prefix doubles and the release branches silently\n     lose their protection. `gh api repos/public-ui/kolibri/rules/branches/release/3` shows what is\n     really in effect.\n\n   Repository level, **Settings → General → Pull Requests**: `Allow auto-merge` stays on, Renovate\n   uses `platformAutomerge`.\n\n3. Trigger the workflow once via **Run workflow** (optionally with `dry_run` enabled) to verify it, then\n   let the 4-hours schedule take over.\n\n> **Tip:** The `dry_run` input maps to `RENOVATE_DRY_RUN=full`, so the first manual run previews every PR\n> Renovate _would_ open without creating anything.\n\n### Option B — Mend-hosted GitHub App (alternative, zero maintenance)\n\nIf you would rather not self-host, delete `.github/workflows/renovate.yml` and instead:\n\n1. Have an **org admin** install the [Renovate GitHub App](https://github.com/apps/renovate) on\n   `public-ui` (or just on `public-ui/kolibri`).\n2. Renovate detects `renovate.json` and opens a Dependency Dashboard issue.\n3. Review the dashboard, then let it run on the weekly schedule.\n\n### Troubleshooting: PRs stay open although CI is green\n\nRenovate never explains a refused merge in the PR itself. The runner log does, but only at\n`LOG_LEVEL=debug`: start the workflow via **Run workflow** with `log_level: debug` (and `dry_run`\noff — a dry run logs `DRY-RUN: Would merge PR` and never sends the request that carries the error).\n\nAt `info` level the only trace is one line per PR:\n\n```\nINFO: All merge attempts failed (repository=public-ui/kolibri, baseBranch=develop, branch=…)\n       \"pr\": 10833\n```\n\nIt means Renovate did try. Automerge is configured correctly and the branch is green — GitHub\nrejected the `PUT /repos/:owner/:repo/pulls/:number/merge` call. The cause is therefore always a\nrepository setting or a ruleset, never `renovate.json`. Renovate walks three strategies in order\n(the configured `automergeStrategy` first, then merge commit, then rebase); the debug log holds one\n`Failed to … PR` block per attempt, each with the HTTP status and GitHub's own message:\n\n| Response                                                  | Meaning                                                                   |\n| --------------------------------------------------------- | ------------------------------------------------------------------------- |\n| `405` `Squash merges are not allowed on this repository.` | The merge method is not allowed here — see `allowed_merge_methods` below. |\n| `405` `Rebase merges are not allowed on this repository.` | Same, for rebase.                                                         |\n| `405` `Repository rule violations found: …`               | A ruleset blocks the bot; the text names the rule.                        |\n| `405` `… Required status check \"x\" is expected.`          | Check `x` never ran on the head commit — see `synchronize` in §3.         |\n| `403` `Resource not accessible by integration`            | The App lacks **contents: write**.                                        |\n\nWhich rules actually apply to a branch is readable without admin rights:\n\n```sh\ngh api repos/public-ui/kolibri/rules/branches/develop\n```\n\n> **The case of 2026-09-09.** Every green dependency PR sat blocked with `mergeable_state: blocked`\n> while the pipelines were green and no review existed. All three attempts failed with `405`. The\n> two rules behind it both lived in one ruleset that carried everything at once:\n> `allowed_merge_methods: [\"merge\"]` rejected squash and rebase, and `require_last_push_approval`\n> rejected the merge commit, a rule the bot can never satisfy on its own branches because it is\n> always the last pusher. The App was listed in the bypass list of the **classic** branch\n> protection rule, which looks like the fix and is not one: that list only waives the need to open\n> a pull request.\n>\n> What resolved it: the rules were split into the two rulesets described in\n> [§3](#option-a--self-hosted-via-github-actions-committed-in-this-repo), the App went into the\n> bypass list of the one holding the `pull_request` rule, the classic rule was deleted, and\n> `automergeStrategy` moved from `squash` to `merge`. A bypass entry is worth nothing until it sits\n> on the ruleset that actually carries the failing rule, and `bypass_actors` is only readable with\n> admin rights, so the runner log stays the honest source.\n\nTwo more silent failures show up as warnings rather than as a blocked PR:\n\n- `Cannot access vulnerability alerts` — **Dependabot alerts: read** is missing, `vulnerabilityAlerts`\n  stays inactive and security PRs come from `osvVulnerabilityAlerts` only.\n- `Could not ensure issue … integration-unauthorized` — the Dependency Dashboard issue is not being\n  updated any more. Check **Issues: write** for the App, and whether the issue itself is locked.\n\n---\n\n## 4. Migration checklist (do this only after Renovate is verified)\n\nOnce Renovate runs green for a cycle, retire the overlapping automation to avoid **duplicate PRs**.\nStatus as of the Renovate activation for `develop`:\n\n- [x] Removed `.github/dependabot.yml` (Renovate now manages GitHub Actions — see the\n      `github-actions` group).\n- [x] Removed `.github/workflows/auto-dependency-updater.yml` (the daily `ncu` PR job).\n- [x] Dropped the `ncu:*` / `update` scripts and the `npm-check-updates` devDependency from the root\n      `package.json`, plus `.ncurc.json`.\n- [ ] Keep `04 - Update pnpm Lock` if you still want a manual lockfile-refresh button; otherwise\n      Renovate's `lockFileMaintenance` covers it.\n\nUntil every box is ticked, **leave the existing tooling in place** — Renovate only acts once the\nworkflow (or app) from [§3](#3-enabling-renovate) actually runs, so there is no conflict in the meantime.\n\n---\n\n## 🇩🇪 Zusammenfassung\n\n**Empfehlung: Renovate.** Es ist die einzige Lösung, die das KoliBri-Monorepo in _einer_ Konfiguration\nabbildet — verwandte Pakete gruppieren (z. B. alle `@angular/*`), jeden Adapter-Ordner auf seiner\nfixierten Major-Version halten (`angular/v20|v21`, `react*`), sichere Updates automatisch mergen\n(GitHub Actions, `@types/*`) und alles Riskante (Stencil, kern-ux, ESLint-/Angular-Majors) über das\n**Dependency Dashboard** zur manuellen Freigabe leiten.\n\n- **Dependabot** kann zwar gruppieren, braucht aber pro Paketverzeichnis einen eigenen Eintrag\n  (≈30 × 4 Branches) und kann ein Paket nicht _pro Ordner_ auf einer Major-Version halten.\n- **npm-check-updates** ist nur ein CLI ohne eigene Automatisierung (läuft heute im Workflow\n  `auto-dependency-updater.yml`).\n\nNeu hinzugekommen: `minimumReleaseAge: \"3 Tage\"` schützt vor kompromittierten Releases\n(inklusive Security-Updates), `automergeStrategy: merge` folgt der Merge-Commit-Konvention des Repos,\nund die `release/*`-Branches werden auf **Security-only** umgestellt — reguläre npm- und\nGitHub-Actions-Updates werden dort komplett deaktiviert, während Vulnerability-Alert-PRs\nweiterhin (bei Nicht-Major) automatisch mergen.\n\nDie fertige [`renovate.json`](../renovate.json) liegt im Repo-Root (geprüft mit dem offiziellen\n`renovate-config-validator`), und der self-hosted Runner-Workflow\n[`.github/workflows/renovate.yml`](../.github/workflows/renovate.yml) ist ebenfalls committet.\n**Renovate läuft**, sobald der Workflow startet — alle 4 Stunden per Zeitplan oder manuell über den\n**Run workflow**-Button (Option A); alternativ kann ein Org-Admin die\n[Renovate-GitHub-App](https://github.com/apps/renovate) installieren (Option B). Bis dahin bleibt die\nbestehende Dependabot-/ncu-Automatisierung zuständig; danach greift die Migrations-Checkliste oben.\n",
+      "code": "# Renovate — Automated Dependency Updates\n\nThis document is the outcome of issue [#10270](https://github.com/public-ui/kolibri/issues/10270)\n(_renovate vs npm-check-updates vs dependabot_). It contains:\n\n1. a comparison of the three candidate tools,\n2. a description of the exemplary [`renovate.json`](../renovate.json) that ships with this repo,\n3. how to enable Renovate, and\n4. the migration checklist for retiring the current tooling.\n\n> **Status:** The `renovate.json` and a self-hosted runner workflow\n> ([`.github/workflows/renovate.yml`](../.github/workflows/renovate.yml)) are committed as an\n> **exemplary, ready-to-run setup**. Renovate stays **idle** until that workflow runs — either on its\n> nightly schedule (every 3 hours between 18:00 and 06:00 Europe/Berlin) or via the manual\n> **Run workflow** button (see [Enabling Renovate](#enabling-renovate)).\n> Until then the existing Dependabot + npm-check-updates automation stays in charge.\n\n---\n\n## 1. Tool comparison\n\nKoliBri is a **pnpm-workspace monorepo** with 30+ packages, several intentionally pinned major\nlines (Angular `v20`/`v21`, React 18/19, Stencil 4, ESLint 9) and four maintained branches\n(`develop`, `release/3`, `release/2`, `release/1`). That shapes the comparison:\n\n| Capability                                   |       **Renovate**       |             Dependabot              |  npm-check-updates (ncu)  |\n| -------------------------------------------- | :----------------------: | :---------------------------------: | :-----------------------: |\n| pnpm-workspace aware                         |        ✅ native         |             ⚠️ partial              |  ❌ manual (per-package)  |\n| One PR grouping related packages             |  ✅ fully configurable   |          ⚠️ `groups:` only          |          ❌ none          |\n| Hold a package on a specific major line      |   ✅ per-folder rules    |        ⚠️ `ignore` (global)         | ⚠️ `-x` exclude (global)  |\n| GitHub Actions updates                       |            ✅            |                 ✅                  |            ❌             |\n| Lockfile-only refresh                        | ✅ `lockFileMaintenance` |             ⚠️ limited              | ❌ (needs `pnpm install`) |\n| Automerge (per update type)                  |            ✅            |             ⚠️ limited              |            ❌             |\n| Multi-base-branch (release/\\*) support       | ✅ `baseBranchPatterns`  | ✅ `target-branch` (one entry each) |  ⚠️ matrix in a workflow  |\n| Security / vulnerability remediation         |  ✅ OSV + GitHub alerts  |          ✅ GitHub alerts           |            ❌             |\n| Dependency Dashboard (single overview issue) |            ✅            |                 ❌                  |            ❌             |\n| Schedule / batching                          |            ✅            |              ⚠️ basic               |   ⚠️ via cron workflow    |\n| Self-hostable (no third-party app)           |   ✅ (official Action)   |         ✅ (GitHub-native)          |         ✅ (CLI)          |\n| Config surface                               |          medium          |                 low                 |          minimal          |\n| Cost for open source                         |           free           |                free                 |           free            |\n\n### Verdict\n\n- **Renovate — recommended.** It is the only option that models KoliBri's reality in _one_ config:\n  group the Angular/React/Stencil families, hold each adapter folder on its pinned major, automerge\n  the safe stuff (GitHub Actions, `@types/*`), and route everything risky to a review queue (the\n  Dependency Dashboard). It also folds in what we currently split across **two** systems\n  (Dependabot for Actions + a daily `ncu` workflow for npm).\n- **Dependabot — viable fallback.** Now supports `groups:`, but every package directory needs its\n  own `updates:` entry (≈30 for this monorepo × 4 branches) and it cannot hold a dependency on a\n  specific major _per folder_ — exactly what the `angular/v20|v21` and `react*` adapters need.\n- **npm-check-updates — not an automation tool.** It is a CLI that rewrites version ranges; it has\n  no PR/grouping/scheduling of its own. We only use it _inside_ a hand-written workflow\n  (`.github/workflows/auto-dependency-updater.yml`). Renovate makes that workflow redundant.\n\n---\n\n## 2. What the exemplary `renovate.json` does\n\nThe committed [`renovate.json`](../renovate.json) is tailored to this repo. Highlights:\n\n### Global behaviour\n\n- **`extends: [\"config:recommended\", \"security:openssf-scorecard\"]`** — sensible defaults plus\n  OpenSSF Scorecard badges on PRs.\n- **Conventional Commits** — `chore(deps): …` titles so PRs pass `pr-title-validation.yml`.\n- **`labels: [\"dependencies\", \"renovate\", \"release:engineering\"]`** — the `release:*` label is\n  **required** by `pr-release-label-validation.yml`; `release:engineering` files dependency PRs\n  under _🔧 Engineering_ in the changelog (see `.github/release.yml`).\n- **Night-only cadence (18:00–06:00, every 3 hours)** — Renovate must not open PRs or automerge\n  during working hours. Two settings enforce this together:\n  - `renovate.json` → `\"schedule\": [\"after 6pm\", \"before 6am\"]` with `timezone: \"Europe/Berlin\"`.\n    The window crosses midnight, so it is written as **two** entries (Renovate ORs them); a single\n    `\"after 6pm before 6am\"` string would never match.\n  - the workflow cron `0 16,19,22,1,4 * * *`. GitHub cron only understands UTC, so these hours are\n    chosen to stay inside the local window all year: in CEST (UTC+2) they fire at 18/21/00/03/06\n    Berlin time, in CET (UTC+1) at 17/20/23/02/05. The one run that falls outside the window\n    (17:00 in winter, 06:00 in summer) starts Renovate but produces no PRs, because the\n    `renovate.json` schedule is the authoritative gate.\n\n  **Exception:** `vulnerabilityAlerts` keeps `\"schedule\": [\"at any time\"]`, so a manual\n  **Run workflow** during the day still ships security fixes.\n\n  `prConcurrentLimit: 5` / `prHourlyLimit: 5` cap the number of open PRs **per base branch** (so\n  `develop` and each `release/*` branch have their own budget).\n\n- **Automerge all non-major updates (merge commit)** — the first package rule enables `automerge` for\n  `patch`/`minor`/`digest`/`pin`/lockfile updates; `automergeStrategy: merge` is the only method the\n  `Production branches` ruleset allows on `develop` (see [Troubleshooting](#troubleshooting-prs-stay-open-although-ci-is-green)). Known-risky rules below (Stencil, kern-ux, ESLint,\n  TypeScript, typescript-eslint) override it back to manual. Majors always keep dashboard approval.\n  Prerequisites: repo setting **Allow auto-merge** enabled, green pipelines enforced via required\n  status checks on `develop`, and the runner GitHub App listed in the branch-protection bypass\n  (see [Enabling Renovate](#enabling-renovate)).\n- **`baseBranchPatterns`** — runs on `develop` **and** `release/3|2|1`; the maintenance branches are\n  **security-only** (all regular npm and GitHub Actions updates are disabled) so released majors stay\n  stable. Security PRs still automerge when non-major; major security updates require dashboard\n  approval.\n- **`lockFileMaintenance`** — weekly `pnpm-lock.yaml` refresh (replaces the manual\n  `04 - Update pnpm Lock` workflow runs).\n- **`configMigration: true`** — Renovate keeps `renovate.json` itself up to date when built-in\n  presets or options change.\n- **`dependencyDashboardOSVVulnerabilitySummary: \"all\"`** — adds an OSV vulnerability table\n  directly to the Dependency Dashboard issue.\n- **`postUpdateOptions: [\"pnpmDedupe\"]`** — keeps the pnpm lockfile tidy.\n\n### Grouping & guard-rails (the important part for this monorepo)\n\n| Rule                                              | Effect                                                                                                                                                                                             |\n| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **All majors**                                    | Require manual approval via the Dependency Dashboard — KoliBri pins majors deliberately.                                                                                                           |\n| **Angular `@angular/*`, `zone.js`, `ng-packagr`** | Major updates **disabled** entirely; within-major updates grouped per adapter folder (_Angular 20/21_). A new Angular major = a new adapter folder, never an auto-bump.                            |\n| **React `react`, `react-dom`, `@types/react*`**   | Major updates **disabled**; within-major React updates of the `react*` adapters grouped and automerged once green.                                                                                 |\n| **Stencil `@stencil/*`, `@stencil-community/*`**  | **All** updates require dashboard approval — every 4.39+ release currently breaks the Popover API, tooltips and visual tests (see [`UPGRADEABLE_DEPENDENCIES.md`](./UPGRADEABLE_DEPENDENCIES.md)). |\n| **`@kern-ux/*`**                                  | Dashboard approval only — upgraded by hand together with theming work.                                                                                                                             |\n| **`@typescript-eslint/*`, ESLint core + plugins** | Minor/major require approval (9 → 10 is a breaking migration).                                                                                                                                     |\n| **`jest*`, `typescript`**                         | Majors/non-patch require approval.                                                                                                                                                                 |\n| **`github-actions`, `@types/*`**                  | Grouped; automerged like every other non-major update.                                                                                                                                             |\n| **Stylelint, Playwright**                         | Grouped into single PRs.                                                                                                                                                                           |\n\n> The pins above mirror exactly what the current `ncu:*` scripts exclude\n> (`@kern-ux/*`, `@stencil/*`, `@typescript-eslint/*`) and what `UPGRADEABLE_DEPENDENCIES.md`\n> documents as breaking — so behaviour is preserved, just expressed declaratively.\n\n### Validate the config locally\n\n```sh\nnpx --yes --package renovate renovate-config-validator renovate.json\n```\n\n---\n\n## 3. Enabling Renovate\n\nTwo ways to run it; **this repo is wired for Option A**.\n\n### Option A — Self-hosted via GitHub Actions (committed in this repo)\n\nThis repo ships [`.github/workflows/renovate.yml`](../.github/workflows/renovate.yml). It runs Renovate\n**every 3 hours during the night window 18:00–06:00 Europe/Berlin**\n(`0 16,19,22,1,4 * * *` UTC, see [Global behaviour](#global-behaviour)) **and** on demand via the **Run workflow** button\n(`workflow_dispatch`, with an optional `dry_run` preview). It authenticates through the existing GitHub\nApp (`APP_ID` / `PRIVATE_KEY` secrets, shared with _04 - Update pnpm Lock_).\n\nTo activate it:\n\n1. Ensure that GitHub App installation grants **contents: write**, **pull-requests: write**,\n   **issues: write** (for the Dependency Dashboard), **workflows: write** (so the `github-actions`\n   manager may update `.github/workflows/*`), **commit statuses: write**, **Dependabot alerts: read**\n   and the mandatory **metadata: read**. Nothing beyond those seven is needed. Changing them at the\n   App is only half of it: the installation has to accept the new set, otherwise the runner keeps\n   working with the old one and the symptoms below stay. _Alternative:_ replace the app-token step\n   with a `RENOVATE_TOKEN` PAT/fine-grained token carrying the same scopes.\n\n   > Without **Dependabot alerts: read** every run logs\n   > `Cannot access vulnerability alerts`, and `vulnerabilityAlerts` stays inactive; security PRs\n   > then only come from `osvVulnerabilityAlerts`.\n\n2. Branch protection. What governs `develop` are **rulesets**, not a classic branch protection\n   rule. Keep it that way: a classic rule for the same branch is evaluated on top of the rulesets,\n   and its _bypass required pull requests_ list only waives the need to **open** a pull request. It\n   does not waive the approval a merge needs, so the bot stays blocked while the list suggests\n   otherwise.\n\n   A bypass entry always waives **every rule of its ruleset**, never a single one. Hence the split:\n\n   | Ruleset               | Rules                                                            | Bypass list   |\n   | --------------------- | ---------------------------------------------------------------- | ------------- |\n   | `Production branches` | `pull_request` (approvals, code-owner review, merge methods)     | `publicuibot` |\n   | `Required checks`     | `required_status_checks`, restrict deletions, block force pushes | empty         |\n\n   The runner merges without a human review, but never past a red check. For everyone else nothing\n   changes.\n\n   Three details that cost an evening on 2026-09-09:\n\n   - `allowed_merge_methods` of the `pull_request` rule is `[\"merge\"]`, which is why\n     `automergeStrategy` is `merge`. On the repository itself both squash merges and merge commits\n     are enabled; the ruleset is what narrows it down.\n   - A required status check may never be skipped by a path filter, or the pull request waits\n     forever for a status that nothing will post. `codeql.yml` therefore has no `paths-ignore`, and\n     `visual-review.yml` answers a skipped CI run with `success` (mode `docs-only`, see\n     `scripts/visual-review/resolve-context.mjs`). Anything added to the list has to obey the same\n     rule. `check-results` is deliberately absent: a red pipeline stops Renovate, which refuses to\n     merge a red branch, but it does not stop a human.\n   - Every workflow behind a required check needs `synchronize` in its `pull_request` types.\n     GitHub wants the check on the **current head commit**, so a workflow that only reacts to\n     `opened`/`edited` leaves it unreported after any push and the merge is refused with\n     `Required status check \"…\" is expected`. Renovate runs into this on every rebase; that is what\n     `pr-title-validation.yml` was missing.\n   - In the target patterns of a ruleset GitHub prefixes `refs/heads/` itself. Enter `release/**/*`,\n     never `refs/heads/release/**/*`, otherwise the prefix doubles and the release branches silently\n     lose their protection. `gh api repos/public-ui/kolibri/rules/branches/release/3` shows what is\n     really in effect.\n\n   Repository level, **Settings → General → Pull Requests**: `Allow auto-merge` stays on, Renovate\n   uses `platformAutomerge`.\n\n3. Trigger the workflow once via **Run workflow** (optionally with `dry_run` enabled) to verify it, then\n   let the nightly schedule take over.\n\n> **Tip:** The `dry_run` input maps to `RENOVATE_DRY_RUN=full`, so the first manual run previews every PR\n> Renovate _would_ open without creating anything.\n\n### Option B — Mend-hosted GitHub App (alternative, zero maintenance)\n\nIf you would rather not self-host, delete `.github/workflows/renovate.yml` and instead:\n\n1. Have an **org admin** install the [Renovate GitHub App](https://github.com/apps/renovate) on\n   `public-ui` (or just on `public-ui/kolibri`).\n2. Renovate detects `renovate.json` and opens a Dependency Dashboard issue.\n3. Review the dashboard, then let it run on the weekly schedule.\n\n### Troubleshooting: PRs stay open although CI is green\n\nRenovate never explains a refused merge in the PR itself. The runner log does, but only at\n`LOG_LEVEL=debug`: start the workflow via **Run workflow** with `log_level: debug` (and `dry_run`\noff — a dry run logs `DRY-RUN: Would merge PR` and never sends the request that carries the error).\n\nAt `info` level the only trace is one line per PR:\n\n```\nINFO: All merge attempts failed (repository=public-ui/kolibri, baseBranch=develop, branch=…)\n       \"pr\": 10833\n```\n\nIt means Renovate did try. Automerge is configured correctly and the branch is green — GitHub\nrejected the `PUT /repos/:owner/:repo/pulls/:number/merge` call. The cause is therefore always a\nrepository setting or a ruleset, never `renovate.json`. Renovate walks three strategies in order\n(the configured `automergeStrategy` first, then merge commit, then rebase); the debug log holds one\n`Failed to … PR` block per attempt, each with the HTTP status and GitHub's own message:\n\n| Response                                                  | Meaning                                                                   |\n| --------------------------------------------------------- | ------------------------------------------------------------------------- |\n| `405` `Squash merges are not allowed on this repository.` | The merge method is not allowed here — see `allowed_merge_methods` below. |\n| `405` `Rebase merges are not allowed on this repository.` | Same, for rebase.                                                         |\n| `405` `Repository rule violations found: …`               | A ruleset blocks the bot; the text names the rule.                        |\n| `405` `… Required status check \"x\" is expected.`          | Check `x` never ran on the head commit — see `synchronize` in §3.         |\n| `403` `Resource not accessible by integration`            | The App lacks **contents: write**.                                        |\n\nWhich rules actually apply to a branch is readable without admin rights:\n\n```sh\ngh api repos/public-ui/kolibri/rules/branches/develop\n```\n\n> **The case of 2026-09-09.** Every green dependency PR sat blocked with `mergeable_state: blocked`\n> while the pipelines were green and no review existed. All three attempts failed with `405`. The\n> two rules behind it both lived in one ruleset that carried everything at once:\n> `allowed_merge_methods: [\"merge\"]` rejected squash and rebase, and `require_last_push_approval`\n> rejected the merge commit, a rule the bot can never satisfy on its own branches because it is\n> always the last pusher. The App was listed in the bypass list of the **classic** branch\n> protection rule, which looks like the fix and is not one: that list only waives the need to open\n> a pull request.\n>\n> What resolved it: the rules were split into the two rulesets described in\n> [§3](#option-a--self-hosted-via-github-actions-committed-in-this-repo), the App went into the\n> bypass list of the one holding the `pull_request` rule, the classic rule was deleted, and\n> `automergeStrategy` moved from `squash` to `merge`. A bypass entry is worth nothing until it sits\n> on the ruleset that actually carries the failing rule, and `bypass_actors` is only readable with\n> admin rights, so the runner log stays the honest source.\n\nTwo more silent failures show up as warnings rather than as a blocked PR:\n\n- `Cannot access vulnerability alerts` — **Dependabot alerts: read** is missing, `vulnerabilityAlerts`\n  stays inactive and security PRs come from `osvVulnerabilityAlerts` only.\n- `Could not ensure issue … integration-unauthorized` — the Dependency Dashboard issue is not being\n  updated any more. Check **Issues: write** for the App, and whether the issue itself is locked.\n\n---\n\n## 4. Migration checklist (do this only after Renovate is verified)\n\nOnce Renovate runs green for a cycle, retire the overlapping automation to avoid **duplicate PRs**.\nStatus as of the Renovate activation for `develop`:\n\n- [x] Removed `.github/dependabot.yml` (Renovate now manages GitHub Actions — see the\n      `github-actions` group).\n- [x] Removed `.github/workflows/auto-dependency-updater.yml` (the daily `ncu` PR job).\n- [x] Dropped the `ncu:*` / `update` scripts and the `npm-check-updates` devDependency from the root\n      `package.json`, plus `.ncurc.json`.\n- [ ] Keep `04 - Update pnpm Lock` if you still want a manual lockfile-refresh button; otherwise\n      Renovate's `lockFileMaintenance` covers it.\n\nUntil every box is ticked, **leave the existing tooling in place** — Renovate only acts once the\nworkflow (or app) from [§3](#3-enabling-renovate) actually runs, so there is no conflict in the meantime.\n\n---\n\n## 🇩🇪 Zusammenfassung\n\n**Empfehlung: Renovate.** Es ist die einzige Lösung, die das KoliBri-Monorepo in _einer_ Konfiguration\nabbildet — verwandte Pakete gruppieren (z. B. alle `@angular/*`), jeden Adapter-Ordner auf seiner\nfixierten Major-Version halten (`angular/v20|v21`, `react*`), sichere Updates automatisch mergen\n(GitHub Actions, `@types/*`) und alles Riskante (Stencil, kern-ux, ESLint-/Angular-Majors) über das\n**Dependency Dashboard** zur manuellen Freigabe leiten.\n\n- **Dependabot** kann zwar gruppieren, braucht aber pro Paketverzeichnis einen eigenen Eintrag\n  (≈30 × 4 Branches) und kann ein Paket nicht _pro Ordner_ auf einer Major-Version halten.\n- **npm-check-updates** ist nur ein CLI ohne eigene Automatisierung (läuft heute im Workflow\n  `auto-dependency-updater.yml`).\n\nNeu hinzugekommen: `automergeStrategy: merge` folgt der Merge-Commit-Konvention des Repos,\nund die `release/*`-Branches werden auf **Security-only** umgestellt — reguläre npm- und\nGitHub-Actions-Updates werden dort komplett deaktiviert, während Vulnerability-Alert-PRs\nweiterhin (bei Nicht-Major) automatisch mergen.\n\nDie fertige [`renovate.json`](../renovate.json) liegt im Repo-Root (geprüft mit dem offiziellen\n`renovate-config-validator`), und der self-hosted Runner-Workflow\n[`.github/workflows/renovate.yml`](../.github/workflows/renovate.yml) ist ebenfalls committet.\n**Renovate läuft**, sobald der Workflow startet — nachts alle 3 Stunden zwischen 18:00 und 06:00 Uhr\n(Europe/Berlin) per Zeitplan oder jederzeit manuell über den **Run workflow**-Button (Option A); alternativ kann ein Org-Admin die\n[Renovate-GitHub-App](https://github.com/apps/renovate) installieren (Option B). Bis dahin bleibt die\nbestehende Dependabot-/ncu-Automatisierung zuständig; danach greift die Migrations-Checkliste oben.\n",
       "kind": "doc"
     },
     {
@@ -501,7 +509,7 @@
       "group": "docs/tutorials",
       "name": "NEW_COMPONENT",
       "path": "docs/tutorials/NEW_COMPONENT.md",
-      "code": "# Neue Komponente erstellen\n\n> Schritt-für-Schritt-Anleitung basierend auf dem [Skeleton Blueprint](../../packages/components/src/components/_skeleton/ARC42.md).\n\n## Grundprinzipien\n\n- Auflistungen werden immer alphabetisch sortiert\n- Die [ARC42.md](../../packages/components/src/components/_skeleton/ARC42.md) ist die führende Architektur-Spezifikation — lies sie vollständig, bevor du eine neue Komponente erstellst\n- **2-Schichten-Architektur**: Die Web Component ist der Orchestrator — es gibt keine separate Controller/Aspect-Schicht. Nur wirklich wiederverwendbare Logik wird als Behavior (`BaseBehavior`, z.B. `TooltipBehavior`) ausgegliedert\n- Alle Web Components verwenden `shadow: true` — Komponenten ohne Shadow DOM werden als Functional Components implementiert\n- Props leben in `src/internal/props/` mit eigenem `PropDefinition` pro Prop\n- Kein toter Code, keine Barrel-Files, keine `types.ts`\n\n## Checkliste\n\n| Schritt | Kurzbeschreibung                                                                                              |\n| :-----: | ------------------------------------------------------------------------------------------------------------- |\n|    0    | Projekt starten                                                                                               |\n|    1    | Tag-Name in Stencil-Konfiguration registrieren                                                                |\n|    2    | Props erstellen oder vorhandene wiederverwenden (`src/internal/props/`)                                       |\n|    3    | API-Definition erstellen (`api.tsx`) mit `PropsConfigShape` und `ApiFromConfig`                               |\n|    4    | Functional Component erstellen (`component.tsx`) — stateless Renderer mit `BemRootNodeFC`                     |\n|    5    | Web Component erstellen (`component.tsx`) — erweitert `BaseWebComponent<Api>`, orchestriert alle Logik selbst |\n|    6    | Tests co-lokalisiert neben `component.tsx` erstellen                                                          |\n|    7    | Beispiel in React-Sample-App anlegen                                                                          |\n|    8    | Validierung: `pnpm format && pnpm lint && pnpm --filter @public-ui/components test:unit`                      |\n\n## Schritt 0 — Projekt starten\n\nProjekt starten, wie in [Contribution](../../CONTRIBUTING.md) beschrieben.\n\n## Schritt 1 — Tag-Name registrieren\n\nDen Tag-Namen der neuen Komponente in `packages/components/stencil.config.ts` registrieren.\n\n## Schritt 2 — Props erstellen (Props-First!)\n\n**Bevor die Komponente implementiert wird, müssen alle Props definiert sein.**\n\nPro Prop eine Datei unter `src/internal/props/`:\n\n```typescript\n// src/internal/props/name.ts\nimport type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>('name', '', normalizeString);\n```\n\n- `SimpleProp<K, T>` wenn externer und interner Typ identisch sind\n- `Prop<K, TExternal, TInternal>` wenn sich die Typen unterscheiden (z.B. `ColorProp`)\n- Export in `src/internal/props/index.ts` hinzufügen\n- Bestehende Props aus `index.ts` wiederverwenden, wenn möglich\n\nDetails: [ARC42 §4 — Schema Helper Layer](../../packages/components/src/components/_skeleton/ARC42.md#schema-helper-layer)\n\n## Schritt 3 — API-Definition\n\nDatei: `src/internal/functional-components/<component>/api.tsx`\n\n```typescript\nimport { nameProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const myComponentPropsConfig = {\n\trequired: [nameProp],\n\t// optional: [showProp],\n} as const satisfies PropsConfigShape;\n\nexport type MyComponentApi = ApiFromConfig<\n\ttypeof myComponentPropsConfig,\n\t{\n\t\t// Nur definieren, was die Komponente tatsächlich nutzt:\n\t\t// Callbacks: { click: () => void };\n\t\t// Emitters: { change: string };\n\t\t// Methods: { focus: () => void };\n\t\t// States: { count: number };\n\t\t// Refs: { button: HTMLButtonElement };\n\t\t// Listeners: { keydown: KeyboardEvent };\n\t}\n>;\n```\n\nDetails: [ARC42 §4 — API Definition with PropsConfigShape](../../packages/components/src/components/_skeleton/ARC42.md#api-definition-with-propsconfigshape-and-apifromconfig)\n\n## Schritt 4 — Functional Component\n\nDatei: `src/internal/functional-components/<component>/component.tsx`\n\n```tsx\nimport type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { BemRootNodeFC } from '../bem-root-node/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { MyComponentApi } from './api';\n\nexport const MyComponentFC: FC<FunctionalComponentProps<MyComponentApi>> = ({ name }) => {\n\treturn (\n\t\t<BemRootNodeFC block=\"kol-my-component\">\n\t\t\t<span class=\"kol-my-component__name\">{name}</span>\n\t\t</BemRootNodeFC>\n\t);\n};\n```\n\n- Stateless, keine Seiteneffekte\n- Genau ein Root-Node via `BemRootNodeFC`: Der `block` und die optionalen `modifiers` werden gegen `KoliBriComponentsBemSchema` in `src/schema/bem-registry.ts` typgeprüft — der Block muss dort **zweifach registriert** sein: im exportierten Typ `KoliBriComponentsBemSchema` (Kompilierung) und im Runtime-`BEM`-Const (konsumiert vom kolibri-cli SCSS-Generator). Nur-Typ-Registrierung kompiliert, bricht aber lautlos die Theme-SCSS-Generierung\n- `BemRootNodeFC` rendert immer ein `<div>` als Root. Für FCs mit anderem semantischem Root (z.B. `<button>`, siehe `ClickButtonFC`) stattdessen `bem.forBlock('kol-xxx')(modifiers)` direkt nutzen\n- Die zugehörige `style.scss` ist Basis-Styling: nur Layout und Struktur, keine Farben (außer dem Schwarz/Weiß-Kontrast-Fallback), keine Abstände und **kein Dark/Light-Color-Scheme** (`prefers-color-scheme`, `color-scheme`, `light-dark()`). Farben und Color Schemes werden ausschließlich im Theme umgesetzt — siehe [Basis-Styling vs. Theming Konzept](../BASE_STYLING_VS_THEMING_CONCEPT.md)\n- Details: [ARC42 §4 — Functional Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#functional-component-layer)\n\n## Schritt 5 — Web Component\n\nDatei: `src/components/<component>/component.tsx`\n\nDie Web Component ist der **Orchestrator**: Sie erweitert `BaseWebComponent<Api>` direkt und absorbiert die gesamte Logik (Prop-Normalisierung, State, Lifecycle) — es gibt keine separate Controller/Aspect-Klasse.\n\n```tsx\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { MyComponentApi } from '../../internal/functional-components/my-component/api';\nimport { myComponentPropsConfig } from '../../internal/functional-components/my-component/api';\nimport { MyComponentFC } from '../../internal/functional-components/my-component/component';\nimport { nameProp } from '../../internal/props';\n\n@Component({\n\ttag: 'kol-my-component',\n\tshadow: true,\n})\nexport class KolMyComponent extends BaseWebComponent<MyComponentApi> implements WebComponentInterface<MyComponentApi> {\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => this.setRenderProp('name', v));\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.initRenderProps(myComponentPropsConfig);\n\t\tthis.watchName(this._name);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<MyComponentFC name={this.getRenderProp('name')} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n```\n\n- `componentWillLoad()` ruft zuerst `this.initRenderProps(propsConfig)` auf und wendet danach alle Props an (Prop-Dreieck: Deklaration, `@Watch()`, Init)\n- Watcher rufen die Prop-Factory direkt auf: `nameProp.apply(value, (v) => this.setRenderProp('name', v))`\n- `@State`-Felder werden über `this.setState(key, value)` / `this.getState(key)` verwaltet und im `render()` direkt übergeben\n- Immer `shadow: true` und `<Host>` ohne Klassen-Attribut\n- `@Watch` nur auf unterstrichene Props\n- Wiederverwendbare Logik für mehrere Komponenten wird als Behavior ausgegliedert (`BaseBehavior`, z.B. `TooltipBehavior`): `private readonly tooltipBehavior = new TooltipBehavior(this.stateAccess)` — Details: [ARC42 §4 — Behavior Layer](../../packages/components/src/components/_skeleton/ARC42.md#behavior-layer)\n- Details: [ARC42 §4 — Web Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#web-component-layer)\n\nWenn ein Behavior garantiert kein `@State` benötigt, verwende den Sentinel:\n\n```typescript\nprivate readonly myBehavior = new MyBehavior(BaseWebComponent.stateLess);\n```\n\n## Schritt 6 — Tests\n\nTests liegen **direkt neben** `component.tsx` — kein `test/`-Unterordner.\n\n**Snapshot-Test** (`snapshot.spec.tsx`):\n\n```tsx\nimport { executeSnapshotTests } from '../../utils/testing';\nimport { KolMyComponent } from './component';\n\nconst TAG = 'kol-my-component';\n\ntype Props = {\n\t_name: string;\n};\n\nexecuteSnapshotTests<Props>(TAG, [KolMyComponent], [{ _name: 'Test' }, { _name: '' }]);\n```\n\n**Interaction-Test** (`interaction.e2e.ts`):\n\n```typescript\nimport { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\n\ntest.describe('kol-my-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.setContent('<kol-my-component _name=\"Test\"></kol-my-component>');\n\t});\n\n\ttest('should render the name', async ({ page }) => {\n\t\tawait expect(page.locator('kol-my-component')).toBeVisible();\n\t});\n});\n```\n\nDetails: [ARC42 §9 — Design Decision 11](../../packages/components/src/components/_skeleton/ARC42.md#9-design-decisions)\n\n## Schritt 7 — Beispiel in React-Sample-App\n\nDatei: `packages/samples/react/src/scenarios/<component>.tsx`\n\nAnschließend die Route in `packages/samples/react/src/scenarios/routes.ts` registrieren.\n\nZum Testen:\n\n```bash\ncd packages/samples/react\npnpm start\n# Navigiere zu http://localhost:9191\n```\n\n## Schritt 8 — Validierung\n\n```bash\npnpm format        # ~10 Sekunden\npnpm lint          # ~1 Minute, NICHT abbrechen\npnpm --filter @public-ui/components test:unit # ~2-3 Minuten, NICHT abbrechen\n```\n\nAlle drei Befehle müssen fehlerfrei durchlaufen.\n\n## Referenz\n\nDie vollständige Referenzimplementierung findet sich im Skeleton Blueprint:\n\n- **Architektur**: [`_skeleton/ARC42.md`](../../packages/components/src/components/_skeleton/ARC42.md)\n- **Agent-Instruktionen**: [`_skeleton/AGENTS.md`](../../packages/components/src/components/_skeleton/AGENTS.md)\n- **Refactoring-Leitfaden**: [`_skeleton/REFACTORING_PROMPT.md`](../../packages/components/src/components/_skeleton/REFACTORING_PROMPT.md)\n",
+      "code": "# Neue Komponente erstellen\n\n> Schritt-für-Schritt-Anleitung basierend auf dem [Skeleton Blueprint](../../packages/components/src/components/_skeleton/ARC42.md).\n\n## Grundprinzipien\n\n- Auflistungen werden immer alphabetisch sortiert\n- Die [ARC42.md](../../packages/components/src/components/_skeleton/ARC42.md) ist die führende Architektur-Spezifikation — lies sie vollständig, bevor du eine neue Komponente erstellst\n- **2-Schichten-Architektur**: Die Web Component ist der Orchestrator — es gibt keine separate Controller/Aspect-Schicht. Nur wirklich wiederverwendbare Logik wird als Behavior (`BaseBehavior`, z.B. `TooltipBehavior`) ausgegliedert\n- Alle Web Components verwenden `shadow: true` — Komponenten ohne Shadow DOM werden als Functional Components implementiert\n- Props leben in `src/internal/props/` mit eigenem `PropDefinition` pro Prop\n- Kein toter Code, keine Barrel-Files, keine `types.ts`\n\n## Checkliste\n\n| Schritt | Kurzbeschreibung                                                                                              |\n| :-----: | ------------------------------------------------------------------------------------------------------------- |\n|    0    | Projekt starten                                                                                               |\n|    1    | Tag-Name in Stencil-Konfiguration registrieren                                                                |\n|    2    | Props erstellen oder vorhandene wiederverwenden (`src/internal/props/`)                                       |\n|    3    | API-Definition erstellen (`api.tsx`) mit `PropsConfigShape` und `ApiFromConfig`                               |\n|    4    | Functional Component erstellen (`component.tsx`) — stateless Renderer mit `BemRootNodeFC`                     |\n|    5    | Web Component erstellen (`component.tsx`) — erweitert `BaseWebComponent<Api>`, orchestriert alle Logik selbst |\n|    6    | Tests co-lokalisiert neben `component.tsx` erstellen                                                          |\n|    7    | Beispiel in React-Sample-App anlegen                                                                          |\n|    8    | Validierung: `pnpm format && pnpm lint && pnpm --filter @public-ui/components test:unit`                      |\n\n## Schritt 0 — Projekt starten\n\nProjekt starten, wie in [Contribution](../../CONTRIBUTING.md) beschrieben.\n\n## Schritt 1 — Tag-Name registrieren\n\nDen Tag-Namen der neuen Komponente in `packages/components/stencil.config.ts` registrieren.\n\n## Schritt 2 — Props erstellen (Props-First!)\n\n**Bevor die Komponente implementiert wird, müssen alle Props definiert sein.**\n\nPro Prop eine Datei unter `src/internal/props/`:\n\n```typescript\n// src/internal/props/name.ts\nimport type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>('name', '', normalizeString);\n```\n\n- `SimpleProp<K, T>` wenn externer und interner Typ identisch sind\n- `Prop<K, TExternal, TInternal>` wenn sich die Typen unterscheiden (z.B. `ColorProp`)\n- Export in `src/internal/props/index.ts` hinzufügen\n- Bestehende Props aus `index.ts` wiederverwenden, wenn möglich\n\nDetails: [ARC42 §4 — Schema Helper Layer](../../packages/components/src/components/_skeleton/ARC42.md#schema-helper-layer)\n\n## Schritt 3 — API-Definition\n\nDatei: `src/internal/functional-components/<component>/api.tsx`\n\n```typescript\nimport { nameProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const myComponentPropsConfig = {\n\trequired: [nameProp],\n\t// optional: [showProp],\n} as const satisfies PropsConfigShape;\n\nexport type MyComponentApi = ApiFromConfig<\n\ttypeof myComponentPropsConfig,\n\t{\n\t\t// Nur definieren, was die Komponente tatsächlich nutzt:\n\t\t// Callbacks: { click: () => void };\n\t\t// Emitters: { change: string };\n\t\t// Methods: { focus: () => void };\n\t\t// States: { count: number };\n\t\t// Refs: { button: HTMLButtonElement };\n\t\t// Listeners: { keydown: KeyboardEvent };\n\t}\n>;\n```\n\nDetails: [ARC42 §4 — API Definition with PropsConfigShape](../../packages/components/src/components/_skeleton/ARC42.md#api-definition-with-propsconfigshape-and-apifromconfig)\n\n## Schritt 4 — Functional Component\n\nDatei: `src/internal/functional-components/<component>/component.tsx`\n\n```tsx\nimport type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { BemRootNodeFC } from '../bem-root-node/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { MyComponentApi } from './api';\n\nexport const MyComponentFC: FC<FunctionalComponentProps<MyComponentApi>> = ({ name }) => {\n\treturn (\n\t\t<BemRootNodeFC block=\"kol-my-component\">\n\t\t\t<span class=\"kol-my-component__name\">{name}</span>\n\t\t</BemRootNodeFC>\n\t);\n};\n```\n\n- Stateless, keine Seiteneffekte\n- Genau ein Root-Node via `BemRootNodeFC`: Der `block` und die optionalen `modifiers` werden gegen `KoliBriComponentsBemSchema` in `src/schema/bem-registry.ts` typgeprüft — der Block muss dort **zweifach registriert** sein: im exportierten Typ `KoliBriComponentsBemSchema` (Kompilierung) und im Runtime-`BEM`-Const (konsumiert vom kolibri-cli SCSS-Generator). Nur-Typ-Registrierung kompiliert, bricht aber lautlos die Theme-SCSS-Generierung\n- `BemRootNodeFC` rendert immer ein `<div>` als Root. Für FCs mit anderem semantischem Root (z.B. `<button>`, siehe `ClickButtonFC`) stattdessen `bem.forBlock('kol-xxx')(modifiers)` direkt nutzen\n- Die zugehörige `style.scss` ist Basis-Styling: nur Layout und Struktur, keine Farben (außer dem Schwarz/Weiß-Kontrast-Fallback), keine Abstände und **kein Dark/Light-Color-Scheme** (`prefers-color-scheme`, `color-scheme`, `light-dark()`). Farben und Color Schemes werden ausschließlich im Theme umgesetzt — siehe [Basis-Styling vs. Theming Konzept](../BASE_STYLING_VS_THEMING_CONCEPT.md)\n- Details: [ARC42 §4 — Functional Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#functional-component-layer)\n\n## Schritt 5 — Web Component\n\nDatei: `src/components/<component>/component.tsx`\n\nDie Web Component ist der **Orchestrator**: Sie erweitert `BaseWebComponent<Api>` direkt und absorbiert die gesamte Logik (Prop-Normalisierung, State, Lifecycle) — es gibt keine separate Controller/Aspect-Klasse.\n\n```tsx\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { MyComponentApi } from '../../internal/functional-components/my-component/api';\nimport { myComponentPropsConfig } from '../../internal/functional-components/my-component/api';\nimport { MyComponentFC } from '../../internal/functional-components/my-component/component';\nimport { nameProp } from '../../internal/props';\n\n@Component({\n\ttag: 'kol-my-component',\n\tshadow: true,\n})\nexport class KolMyComponent extends BaseWebComponent<MyComponentApi> implements WebComponentInterface<MyComponentApi> {\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => this.setRenderProp('name', v));\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.initRenderProps(myComponentPropsConfig);\n\t\tthis.watchName(this._name);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<MyComponentFC name={this.getRenderProp('name')} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n```\n\n- `componentWillLoad()` ruft zuerst `this.initRenderProps(propsConfig)` auf und wendet danach alle Props an (Prop-Dreieck: Deklaration, `@Watch()`, Init)\n- Watcher rufen die Prop-Factory direkt auf: `nameProp.apply(value, (v) => this.setRenderProp('name', v))`\n- `@State`-Felder werden über `this.setState(key, value)` / `this.getState(key)` verwaltet und im `render()` direkt übergeben\n- Immer `shadow: true` und `<Host>` ohne Klassen-Attribut\n- `@Watch` nur auf unterstrichene Props\n- Wiederverwendbare Logik für mehrere Komponenten wird als Behavior ausgegliedert (`BaseBehavior`, z.B. `TooltipBehavior`): `private readonly tooltipBehavior = new TooltipBehavior(this.stateAccess)` — Details: [ARC42 §4 — Behavior Layer](../../packages/components/src/components/_skeleton/ARC42.md#behavior-layer)\n- Details: [ARC42 §4 — Web Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#web-component-layer)\n\nWenn ein Behavior garantiert kein `@State` benötigt, verwende den Sentinel:\n\n```typescript\nprivate readonly myBehavior = new MyBehavior(BaseWebComponent.stateLess);\n```\n\n## Schritt 6 — Tests\n\nTests liegen **direkt neben** `component.tsx` — kein `test/`-Unterordner.\n\n**Snapshot-Test** (`snapshot.spec.tsx`):\n\n```tsx\nimport { executeSnapshotTests } from '../../utils/testing';\nimport { KolMyComponent } from './component';\n\nconst TAG = 'kol-my-component';\n\ntype Props = {\n\t_name: string;\n};\n\nexecuteSnapshotTests<Props>(TAG, [KolMyComponent], [{ _name: 'Test' }, { _name: '' }]);\n```\n\n**Interaction-Test** (`interaction.e2e.ts`):\n\n```typescript\nimport { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\n\ntest.describe('kol-my-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.setContent('<kol-my-component _name=\"Test\"></kol-my-component>');\n\t});\n\n\ttest('should render the name', async ({ page }) => {\n\t\tawait expect(page.locator('kol-my-component')).toBeVisible();\n\t});\n});\n```\n\nDetails: [ARC42 §9 — Design Decision 11](../../packages/components/src/components/_skeleton/ARC42.md#9-design-decisions)\n\n## Schritt 7 — Beispiel in React-Sample-App\n\nDatei: `packages/samples/react/src/scenarios/<component>.tsx`\n\nAnschließend die Route in `packages/samples/react/src/scenarios/routes.ts` registrieren.\n\nZum Testen:\n\n```bash\ncd packages/samples/presentation\npnpm dev\n# Navigiere zu http://localhost:9191\n```\n\n## Schritt 8 — Validierung\n\n```bash\npnpm format        # ~10 Sekunden\npnpm lint          # ~1 Minute, NICHT abbrechen\npnpm --filter @public-ui/components test:unit # ~2-3 Minuten, NICHT abbrechen\n```\n\nAlle drei Befehle müssen fehlerfrei durchlaufen.\n\n## Referenz\n\nDie vollständige Referenzimplementierung findet sich im Skeleton Blueprint:\n\n- **Architektur**: [`_skeleton/ARC42.md`](../../packages/components/src/components/_skeleton/ARC42.md)\n- **Agent-Instruktionen**: [`_skeleton/AGENTS.md`](../../packages/components/src/components/_skeleton/AGENTS.md)\n- **Refactoring-Leitfaden**: [`_skeleton/REFACTORING_PROMPT.md`](../../packages/components/src/components/_skeleton/REFACTORING_PROMPT.md)\n",
       "kind": "doc"
     },
     {
@@ -525,7 +533,7 @@
       "group": "docs",
       "name": "visual-review",
       "path": "docs/visual-review.md",
-      "code": "# Visual Review\n\nHow screenshot changes of the KoliBri themes are detected, published and approved.\n\n## In one picture\n\n```\npush to develop ──► Visual Baseline workflow ──► artifact visual-baseline-<package> (per commit, 90 days)\n\npull request push ──► CI-Pipeline, job visual-tests (<package>)\n                        compares against the baseline of the base commit\n                        ──► artifact visual-review-<package> (report.json + changed images)\n                                  │\n                                  ▼\n                       Visual Review workflow (base repository context)\n                         publishes visual/pr-<n>/ on GitHub Pages\n                         reads the reviewers' comments\n                         sets the commit status \"Visual Review\"\n                                  │\n                                  ▼\nreviewer ──► https://public-ui.github.io/kolibri/visual/?pr=<n>\n               inspects baseline / actual / diff, approves or rejects, leaves notes\n               saves the review as a pull-request comment (directly with a token, or by pasting it)\n```\n\n## What a contributor sees\n\n- The job `visual-tests (<package>)` of the CI-Pipeline fails when screenshots differ – that is\n  expected and not something to \"fix\" by regenerating snapshots. The job summary lists what changed.\n- The bot comment **📸 Visual Review** on the pull request links the review page and shows the counts\n  per package.\n- The commit status **Visual Review** stays `pending` until a reviewer with write access approved every\n  changed, added and removed screenshot, turns `success` then, and `failure` when a screenshot was\n  rejected or a route could not be compared at all (missing block, timeout).\n- Docs-only pull requests get `success` immediately; nothing to review.\n\nNothing has to be committed: the baseline is regenerated from `develop` after the merge.\n\n## What a reviewer does\n\n1. Open the review page from the bot comment (or the status link).\n2. Walk through the changed, added and removed snapshots (`j`/`k` or the list). Compare with\n   _side by side_, _slider_, _onion skin_, _diff_ or _blink_; zoom in for subpixel changes.\n3. Approve (`a`), reject or annotate each one – or **Approve all open changes** for an intentional\n   sweep such as a browser upgrade.\n4. Save the review:\n   - **with a token**: enter a fine-grained personal access token with _Pull requests: read and write_\n     for `public-ui/kolibri` at the bottom of the page. The page posts (and later edits) one comment\n     in your name. The token stays in this browser session unless you tick \"remember\".\n   - **without a token**: click _Copy comment for the pull request_ and paste it as a comment on the\n     pull request. To change your verdict later, edit that comment or post a new one – only your\n     newest comment counts.\n\nThe comment carries a machine-readable block, for example:\n\n```markdown\n<!-- visual-review:v1\n{\"approveAll\":{\"digest\":\"sha256:…\"},\"approvals\":[{\"item\":\"theme-default/button-basic--variants\",\"hash\":\"sha256:…\"}],\"rejects\":[],\"notes\":[]}\n-->\n\n**Visual Review** – all changes approved ([review page](…))\n```\n\nApprovals bind to the **content hash** of a screenshot, not to a commit: a later push that leaves an\napproved screenshot untouched keeps its approval, a push that changes it again reopens exactly that\none. `approveAll` binds to the digest of the whole report and therefore expires with the next change.\n\nA rejected (or approved) screenshot that a later push fixes back to the baseline turns `unchanged` and\ndrops out of what the commit status checks – nothing is left to approve. The review page still lists it\n(marked `↺`, even with the `unchanged` filter off) so you can confirm it is fixed and clear the now-stale\nverdict from your draft; it otherwise keeps piling up unseen in your local review comment.\n\nOnly comments of users with write access count. Bots are ignored. A rejection wins over an approval.\n\n## Where things live\n\n| What                             | Where                                                                                 |\n| -------------------------------- | ------------------------------------------------------------------------------------- |\n| Report per package (CI artifact) | `visual-review-<package>` – `report.json` + PNGs of changed items, 14 days            |\n| Baseline per base commit         | `visual-baseline-<package>` – snapshots + `meta.json`, 90 days                        |\n| Published review data            | `gh-pages`: `visual/pr-<n>/report.json`, `status.json`, `<package>/<name>.<kind>.png` |\n| Review page                      | `gh-pages`: `visual/` (built from `packages/tools/visual-tests/review-ui`)            |\n| Reporter                         | `packages/tools/visual-tests/src/visual-reporter.js`                                  |\n| Workflow scripts                 | `scripts/visual-review/` (see `scripts/README.md`)                                    |\n| Workflows                        | `visual-baseline.yml`, `visual-review.yml`, `visual-review-ui.yml`, job in `ci.yml`   |\n\nThe folder `visual/pr-<n>/` is removed when the pull request closes (`pr-preview-cleanup.yml`). The same\nworkflow can be started manually to clean up leftovers: `delete_closed` removes the deployments of all\npull requests that are already closed (together with folders that belong to no pull request at all),\n`stale_days` those without activity for a given number of days – open pull requests included, so their\npublished report is gone until the next CI run republishes it –, `delete_all` every deployment regardless\nof state, and `purge_history` squashes the whole `gh-pages` history into a single commit to reclaim clone\nsize. The review page in `visual/` and the `.nojekyll` marker are never touched.\n\n## Trust boundary\n\nThe reports come from the pull request's own CI run, i.e. from code the pull request controls. The\nVisual Review workflow never executes that code: it downloads the artifacts, validates every field and\nfile name (`merge-reports.mjs`) and publishes only what passes. A pull request could still upload a\nreport that claims \"no changes\" – the human review of the code and the branch protection remain the\nactual safeguard; the visual review makes intentional changes visible and reviewable, it does not\nreplace code review.\n\n## Local work\n\n```bash\npnpm snapshots:pull                        # fetch the current develop baseline into the snapshot folders\npnpm --filter @public-ui/theme-default test\npnpm --filter @public-ui/visual-tests review-ui:dev   # the review page against a local report: ?src=<folder>\n```\n\n`pnpm test:update:docker <theme>` regenerates a baseline locally in the pinned Playwright container.\n",
+      "code": "# Visual Review\n\nHow screenshot changes of the KoliBri themes are detected, published and approved.\n\n## In one picture\n\n```\npush to develop ──► Visual Baseline workflow ──► artifact visual-baseline-<package> (per commit, 90 days)\n\npull request push ──► CI-Pipeline, job visual-tests (<package>)\n                        compares against the baseline of the base commit\n                        ──► artifact visual-review-<package> (report.json + changed images)\n                                  │\n                                  ▼\n                       Visual Review workflow (base repository context)\n                         publishes visual/pr-<n>/ on GitHub Pages\n                         reads the reviewers' comments\n                         sets the commit status \"Visual Review\"\n                                  │\n                                  ▼\nreviewer ──► https://public-ui.github.io/kolibri/visual/?pr=<n>\n               inspects baseline / actual / diff, approves or rejects, leaves notes\n               saves the review as a pull-request comment (directly with a token, or by pasting it)\n```\n\n## What a contributor sees\n\n- The job `visual-tests (<package>)` of the CI-Pipeline fails when screenshots differ – that is\n  expected and not something to \"fix\" by regenerating snapshots. The job summary lists what changed.\n- The bot comment **📸 Visual Review** on the pull request links the review page and shows the counts\n  per package.\n- The commit status **Visual Review** stays `pending` until a reviewer with write access approved every\n  changed, added and removed screenshot, turns `success` then, and `failure` when a screenshot was\n  rejected or a route could not be compared at all (missing block, timeout).\n- Docs-only pull requests get `success` immediately; nothing to review.\n\nNothing has to be committed: the baseline is regenerated from `develop` after the merge.\n\n## What a reviewer does\n\n1. Open the review page from the bot comment (or the status link).\n2. Walk through the changed, added and removed snapshots (`j`/`k` or the list). Compare with\n   _side by side_, _slider_, _onion skin_, _diff_ or _blink_; zoom in for subpixel changes.\n3. Approve (`a`), reject (`r`) or annotate each one – or **Approve all open changes** for an intentional\n   sweep such as a browser upgrade. `a` and `r` move on to the next snapshot.\n4. Save the review:\n   - **with a token**: enter a fine-grained personal access token with _Pull requests: read and write_\n     for `public-ui/kolibri` at the bottom of the page. The page posts (and later edits) one comment\n     in your name. The token stays in this browser session unless you tick \"remember\".\n   - **without a token**: click _Copy comment for the pull request_ and paste it as a comment on the\n     pull request. To change your verdict later, edit that comment or post a new one – only your\n     newest comment counts.\n\nThe comment carries a machine-readable block, for example:\n\n```markdown\n<!-- visual-review:v1\n{\"approveAll\":{\"digest\":\"sha256:…\"},\"approvals\":[{\"item\":\"theme-default/button-basic--variants\",\"hash\":\"sha256:…\"}],\"rejects\":[],\"notes\":[]}\n-->\n\n**Visual Review** – all changes approved ([review page](…))\n```\n\nApprovals bind to the **content hash** of a screenshot, not to a commit: a later push that leaves an\napproved screenshot untouched keeps its approval, a push that changes it again reopens exactly that\none. `approveAll` binds to the digest of the whole report and therefore expires with the next change.\n\nA rejected (or approved) screenshot that a later push fixes back to the baseline turns `unchanged` and\ndrops out of what the commit status checks – nothing is left to approve. The review page still lists it\n(marked `↺`, even with the `unchanged` filter off) so you can confirm it is fixed and clear the now-stale\nverdict from your draft; it otherwise keeps piling up unseen in your local review comment.\n\nOnly comments of users with write access count. Bots are ignored. A rejection wins over an approval.\n\n## Where things live\n\n| What                             | Where                                                                                 |\n| -------------------------------- | ------------------------------------------------------------------------------------- |\n| Report per package (CI artifact) | `visual-review-<package>` – `report.json` + PNGs of changed items, 14 days            |\n| Baseline per base commit         | `visual-baseline-<package>` – snapshots + `meta.json`, 90 days                        |\n| Published review data            | `gh-pages`: `visual/pr-<n>/report.json`, `status.json`, `<package>/<name>.<kind>.png` |\n| Review page                      | `gh-pages`: `visual/` (built from `packages/tools/visual-tests/review-ui`)            |\n| Reporter                         | `packages/tools/visual-tests/src/visual-reporter.js`                                  |\n| Workflow scripts                 | `scripts/visual-review/` (see `scripts/README.md`)                                    |\n| Workflows                        | `visual-baseline.yml`, `visual-review.yml`, `visual-review-ui.yml`, job in `ci.yml`   |\n\nThe folder `visual/pr-<n>/` is removed when the pull request closes (`pr-preview-cleanup.yml`). The same\nworkflow can be started manually to clean up leftovers: `delete_closed` removes the deployments of all\npull requests that are already closed (together with folders that belong to no pull request at all),\n`stale_days` those without activity for a given number of days – open pull requests included, so their\npublished report is gone until the next CI run republishes it –, `delete_all` every deployment regardless\nof state, and `purge_history` squashes the whole `gh-pages` history into a single commit to reclaim clone\nsize. The review page in `visual/` and the `.nojekyll` marker are never touched.\n\n## Trust boundary\n\nThe reports come from the pull request's own CI run, i.e. from code the pull request controls. The\nVisual Review workflow never executes that code: it downloads the artifacts, validates every field and\nfile name (`merge-reports.mjs`) and publishes only what passes. A pull request could still upload a\nreport that claims \"no changes\" – the human review of the code and the branch protection remain the\nactual safeguard; the visual review makes intentional changes visible and reviewable, it does not\nreplace code review.\n\n## Local work\n\n```bash\npnpm snapshots:pull                        # fetch the current develop baseline into the snapshot folders\npnpm --filter @public-ui/theme-default test\npnpm --filter @public-ui/visual-tests review-ui:dev   # the review page against a local report: ?src=<folder>\n```\n\n`pnpm test:update:docker <theme>` regenerates a baseline locally in the pinned Playwright container.\n",
       "kind": "doc"
     },
     {
@@ -1096,6 +1104,14 @@
       "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { SampleDescription } from '../SampleDescription';\nimport { InputEmailVariants } from './partials/variants';\n\nexport const InputEmailBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputEmail renders an email input field. The sample shows KolInputEmail in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputEmailVariants} showButtons={false} />\n\t</>\n);\n",
       "kind": "sample"
     },
+    {
+      "id": "sample/input-email/counter",
+      "group": "input-email",
+      "name": "counter",
+      "path": "packages/samples/react/src/components/input-email/counter.tsx",
+      "code": "import { KolInputEmail } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputEmailCounter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases an email input with a counter for the chars in the field. Maximal length is 30.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"counter\">\n\t\t\t<KolInputEmail _label=\"E-Mail\" _value=\"anderson@example.com\" _hasCounter _maxLength={30} />\n\t\t</SampleBlock>\n\t</>\n);\n",
+      "kind": "sample"
+    },
     {
       "id": "sample/input-email/get-value",
       "group": "input-email",
@@ -1152,6 +1168,14 @@
       "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { SampleDescription } from '../SampleDescription';\nimport { InputPasswordVariants } from './partials/variants';\n\nexport const InputPasswordBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputPassword renders a password input field. The sample shows KolInputPassword in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputPasswordVariants} showButtons={false} />\n\t</>\n);\n",
       "kind": "sample"
     },
+    {
+      "id": "sample/input-password/counter",
+      "group": "input-password",
+      "name": "counter",
+      "path": "packages/samples/react/src/components/input-password/counter.tsx",
+      "code": "import { KolInputPassword } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputPasswordCounter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases a password input with a counter for the chars in the field. Maximal length is 30.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"counter\">\n\t\t\t<KolInputPassword _label=\"Password\" _value=\"Hunter2\" _hasCounter _maxLength={30} />\n\t\t</SampleBlock>\n\t</>\n);\n",
+      "kind": "sample"
+    },
     {
       "id": "sample/input-password/get-value",
       "group": "input-password",
@@ -1253,7 +1277,7 @@
       "group": "input-text",
       "name": "clear-button",
       "path": "packages/samples/react/src/components/input-text/clear-button.tsx",
-      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextClearButton: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>This sample demonstrates the clear button for search type input fields.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"search-empty\">\n\t\t\t<KolInputText _label=\"Search\" _type=\"search\" _placeholder=\"Enter search term\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"search-value\">\n\t\t\t<KolInputText _label=\"Search (with value)\" _type=\"search\" _value=\"test\" _placeholder=\"Enter search term\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"search-disabled\">\n\t\t\t<KolInputText _label=\"Search (disabled)\" _type=\"search\" _disabled _value=\"test\" _placeholder=\"Disabled search\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"text-no-clear-button\">\n\t\t\t<KolInputText _label=\"Text (no clear button)\" _type=\"text\" _value=\"test\" _placeholder=\"Regular text input\" />\n\t\t</SampleBlock>\n\t</div>\n);\n",
+      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextClearButton: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>This sample demonstrates the clear button for search type input fields.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"search-empty\">\n\t\t\t<KolInputText _label=\"Search\" _type=\"search\" _placeholder=\"Enter search term\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"search-value\">\n\t\t\t<KolInputText _label=\"Search (with value)\" _type=\"search\" _value=\"test\" _placeholder=\"Enter search term\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"search-disabled\">\n\t\t\t<KolInputText _label=\"Search (disabled)\" _type=\"search\" _disabled _value=\"test\" _placeholder=\"Disabled search\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"search-read-only\">\n\t\t\t<KolInputText _label=\"Search (read only)\" _type=\"search\" _readOnly _value=\"test\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"text-no-clear-button\">\n\t\t\t<KolInputText _label=\"Text (no clear button)\" _type=\"text\" _value=\"test\" _placeholder=\"Regular text input\" />\n\t\t</SampleBlock>\n\t</div>\n);\n",
       "kind": "sample"
     },
     {
@@ -2005,7 +2029,7 @@
       "group": "tabs",
       "name": "basic",
       "path": "packages/samples/react/src/components/tabs/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\n\nconst tabsWithoutIcons = tabs.map((tab) => ({\n\t...tab,\n\t_icons: undefined,\n}));\n\nexport const TabsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"regular\" fitContent>\n\t\t\t<KolTabs _tabs={tabsWithoutIcons} _label=\"Regular tabs\">\n\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t</KolTabs>\n\t\t</SampleBlock>\n\n\t\t<SampleBlock id=\"icons\" fitContent>\n\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with icons\">\n\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t</KolTabs>\n\t\t</SampleBlock>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\n\nconst tabsWithoutIcons = tabs.map((tab) => ({\n\t...tab,\n\t_icons: undefined,\n}));\n\nexport const TabsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"regular\">\n\t\t\t<KolTabs _tabs={tabsWithoutIcons} _label=\"Regular tabs\">\n\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t</KolTabs>\n\t\t</SampleBlock>\n\n\t\t<SampleBlock id=\"icons\">\n\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with icons\">\n\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t</KolTabs>\n\t\t</SampleBlock>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -2021,7 +2045,7 @@
       "group": "tabs",
       "name": "create-button",
       "path": "packages/samples/react/src/components/tabs/create-button.tsx",
-      "code": "import { KolTabs } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CreateButton: FC = () => {\n\tconst [tabs, setTabs] = useState([\n\t\t{\n\t\t\t_label: 'First tab',\n\t\t},\n\t\t{\n\t\t\t_label: 'Second Tab',\n\t\t},\n\t]);\n\n\tconst addTab = () => {\n\t\tsetTabs([\n\t\t\t...tabs,\n\t\t\t{\n\t\t\t\t_label: `Tab #${tabs.length + 1}`,\n\t\t\t},\n\t\t]);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"create-button\" fitContent>\n\t\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with create button\" _hasCreateButton _on={{ onCreate: addTab }}>\n\t\t\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t\t\t<div key={`tab-${index}`} slot={`tab-${index}`}>\n\t\t\t\t\t\t\tContents of {tab._label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t</KolTabs>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
+      "code": "import { KolTabs } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CreateButton: FC = () => {\n\tconst [tabs, setTabs] = useState([\n\t\t{\n\t\t\t_label: 'First tab',\n\t\t},\n\t\t{\n\t\t\t_label: 'Second Tab',\n\t\t},\n\t]);\n\n\tconst addTab = () => {\n\t\tsetTabs([\n\t\t\t...tabs,\n\t\t\t{\n\t\t\t\t_label: `Tab #${tabs.length + 1}`,\n\t\t\t},\n\t\t]);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"create-button\">\n\t\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with create button\" _hasCreateButton _on={{ onCreate: addTab }}>\n\t\t\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t\t\t<div key={`tab-${index}`} slot={`tab-${index}`}>\n\t\t\t\t\t\t\tContents of {tab._label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t</KolTabs>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -2029,7 +2053,7 @@
       "group": "tabs",
       "name": "icons-only",
       "path": "packages/samples/react/src/components/tabs/icons-only.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\nexport const TabsIconsOnly: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTabs with hidden labels.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"icons-only\" fitContent>\n\t\t\t<KolTabs _label=\"Tabs with icons\" _tabs={tabs}>\n\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t</KolTabs>\n\t\t</SampleBlock>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\nexport const TabsIconsOnly: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTabs with hidden labels.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"icons-only\">\n\t\t\t<KolTabs _label=\"Tabs with icons\" _tabs={tabs}>\n\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t</KolTabs>\n\t\t</SampleBlock>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -2037,7 +2061,7 @@
       "group": "textarea",
       "name": "adjust-height",
       "path": "packages/samples/react/src/components/textarea/adjust-height.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolForm, KolTextarea } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore\nmagna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd\ngubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing\nelitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos\net accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor\nsit amet.`;\n\nexport const TextareaAdjustHeight: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_adjustHeight</code>-property of KolTextarea. The textarea automatically grows with its content.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"adjust-height\">\n\t\t\t<KolForm className=\"w-full\">\n\t\t\t\t<KolTextarea _adjustHeight={true} _value={VALUE} _label=\"Text input (auto grow)\" />\n\t\t\t</KolForm>\n\t\t</SampleBlock>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTextarea } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore\nmagna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd\ngubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing\nelitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos\net accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor\nsit amet.`;\n\nexport const TextareaAdjustHeight: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_adjustHeight</code>-property of KolTextarea. The textarea automatically grows with its content.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleBlock id=\"adjust-height\">\n\t\t\t\t<KolTextarea _adjustHeight={true} _value={VALUE} _label=\"Text input (auto grow with value)\" />\n\t\t\t</SampleBlock>\n\t\t\t<KolTextarea _adjustHeight={true} _label=\"Text input (auto grow with initial 3 rows)\" _rows={3} />\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -2309,7 +2333,7 @@
       "group": "spec",
       "name": "abbr",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/abbr.md",
-      "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",
+      "code": "# kol-abbr\n\n\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",
       "kind": "spec"
     },
     {
@@ -2317,7 +2341,7 @@
       "group": "spec",
       "name": "accordion",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/accordion.md",
-      "code": "# kol-accordion\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n\nAccordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.\n\n## Properties\n\n| Property              | Attribute   | Description                                                                                                        | Type                                                                                                                                                              | Default     |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \\| undefined`                                                                                                                                            | `false`     |\n| `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                          | `undefined` |\n| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                                                                                                    | `0`         |\n| `_on`                 | --          | Defines the callback functions for the collapsible.                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \\| undefined`                                                                                                                                            | `false`     |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the heading toggle button.\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|      | Allows arbitrary HTML to be inserted into the content area of the accordion. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-accordion\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n\nAccordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.\n\n## Properties\n\n| Property              | Attribute   | Description                                                                                                        | Type                                                                                                                                                              | Default     |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \\| undefined`                                                                                                                                            | `false`     |\n| `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                          | `undefined` |\n| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                                                                                                    | `0`         |\n| `_on`                 | --          | Defines the callback functions for the collapsible.                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \\| undefined`                                                                                                                                            | `false`     |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the heading toggle button.\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|      | Allows arbitrary HTML to be inserted into the content area of the accordion. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2325,7 +2349,7 @@
       "group": "spec",
       "name": "alert",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/alert.md",
-      "code": "# kol-alert\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Alert** component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the `_type` of the alert.\n\n## Properties\n\n| Property     | Attribute     | Description                                                                                                        | Type                                                                    | Default     |\n| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ----------- |\n| `_alert`     | `_alert`      | Defines whether the screen-readers should read out the notification.                                               | `boolean \\| undefined`                                                  | `false`     |\n| `_hasCloser` | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean \\| undefined`                                                  | `false`     |\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| `_level`     | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                          | `0`         |\n| `_on`        | --            | Defines the event callback functions for closing the alert.                                                        | `undefined \\| { onClose?: EventCallback<Event> \\| undefined; }`         | `undefined` |\n| `_type`      | `_type`       | Defines either the type of the component or of the components interactive element.                                 | `\"default\" \\| \"error\" \\| \"info\" \\| \"success\" \\| \"warning\" \\| undefined` | `'default'` |\n| `_variant`   | `_variant`    | Defines which variant should be used for presentation.                                                             | `\"card\" \\| \"msg\" \\| undefined`                                          | `'msg'`     |\n\n\n## Slots\n\n| Slot | Description                      |\n| ---- | -------------------------------- |\n|      | The content of the notification. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-alert\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Alert** component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the `_type` of the alert.\n\n## Properties\n\n| Property     | Attribute     | Description                                                                                                        | Type                                                                    | Default     |\n| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ----------- |\n| `_alert`     | `_alert`      | Defines whether the screen-readers should read out the notification.                                               | `boolean \\| undefined`                                                  | `false`     |\n| `_hasCloser` | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean \\| undefined`                                                  | `false`     |\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| `_level`     | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                          | `0`         |\n| `_on`        | --            | Defines the event callback functions for closing the alert.                                                        | `undefined \\| { onClose?: EventCallback<Event> \\| undefined; }`         | `undefined` |\n| `_type`      | `_type`       | Defines either the type of the component or of the components interactive element.                                 | `\"default\" \\| \"error\" \\| \"info\" \\| \"success\" \\| \"warning\" \\| undefined` | `'default'` |\n| `_variant`   | `_variant`    | Defines which variant should be used for presentation.                                                             | `\"card\" \\| \"msg\" \\| undefined`                                          | `'msg'`     |\n\n\n## Slots\n\n| Slot | Description                      |\n| ---- | -------------------------------- |\n|      | The content of the notification. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2333,7 +2357,7 @@
       "group": "spec",
       "name": "avatar",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/avatar.md",
-      "code": "# kol-avatar\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Avatar** component displays either a small image of the user or their initials if no image is available.\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; }` | `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| `_src`                | `_src`    | Sets the image `src` attribute to the given string.                                                                | `string \\| undefined`                                                          | `undefined` |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-avatar\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Avatar** component displays either a small image of the user or their initials if no image is available.\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; }` | `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| `_src`                | `_src`    | Sets the image `src` attribute to the given string.                                                                | `string \\| undefined`                                                          | `undefined` |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2341,7 +2365,7 @@
       "group": "spec",
       "name": "badge",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/badge.md",
-      "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.                                                                                       | `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## Slots\n\n| Slot       | Description                                                                                              |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-badge\n\n\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.                                                                                       | `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## Slots\n\n| Slot       | Description                                                                                              |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2349,7 +2373,7 @@
       "group": "spec",
       "name": "breadcrumb",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/breadcrumb.md",
-      "code": "# kol-breadcrumb\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure.\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type                              | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------- | ----------- |\n| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                          | `undefined` |\n| `_links` _(required)_ | `_links`  | Defines the list of links combined with their labels to render.                                                    | `BreadcrumbLinkProps[] \\| string` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-breadcrumb\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure.\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type                              | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------- | ----------- |\n| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                          | `undefined` |\n| `_links` _(required)_ | `_links`  | Defines the list of links combined with their labels to render.                                                    | `BreadcrumbLinkProps[] \\| string` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2357,7 +2381,7 @@
       "group": "spec",
       "name": "button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button.md",
-      "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.                                                                                                                                                                                                             | `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. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-button\n\n\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.                                                                                                                                                                                                             | `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. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2365,7 +2389,7 @@
       "group": "spec",
       "name": "button-link",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button-link.md",
-      "code": "# kol-button-link\n\n<!-- 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.                                                                                                                                                                                                             | `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`                 | --                  | 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",
+      "code": "# kol-button-link\n\n\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.                                                                                                                                                                                                             | `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`                 | --                  | 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",
       "kind": "spec"
     },
     {
@@ -2373,7 +2397,7 @@
       "group": "spec",
       "name": "card",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/card.md",
-      "code": "# kol-card\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.\n\nThe **Card** component consists of a **_title area_** and a **_content area_**.\n\nThe **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font.\n\n## Properties\n\n| Property              | Attribute     | Description                                                                                                        | Type                                                                                                                                                               | Default     |\n| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_hasCloser`          | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean \\| undefined`                                                                                                                                             | `false`     |\n| `_href`               | `_href`       | Sets the target URI of the link or citation source.                                                                | `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| `_level`              | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                                                                                                     | `0`         |\n| `_on`                 | --            | Defines the event callback functions for the component.                                                            | `undefined \\| { onClose?: EventCallback<Event> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_target`             | `_target`     | Defines where to open the link.                                                                                    | `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\n## Slots\n\n| Slot | Description                                                             |\n| ---- | ----------------------------------------------------------------------- |\n|      | Allows arbitrary HTML to be inserted into the content area of the card. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-card\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.\n\nThe **Card** component consists of a **_title area_** and a **_content area_**.\n\nThe **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font.\n\n## Properties\n\n| Property              | Attribute     | Description                                                                                                        | Type                                                                                                                                                               | Default     |\n| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_hasCloser`          | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean \\| undefined`                                                                                                                                             | `false`     |\n| `_href`               | `_href`       | Sets the target URI of the link or citation source.                                                                | `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| `_level`              | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                                                                                                     | `0`         |\n| `_on`                 | --            | Defines the event callback functions for the component.                                                            | `undefined \\| { onClose?: EventCallback<Event> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_target`             | `_target`     | Defines where to open the link.                                                                                    | `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\n## Slots\n\n| Slot | Description                                                             |\n| ---- | ----------------------------------------------------------------------- |\n|      | Allows arbitrary HTML to be inserted into the content area of the card. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2381,7 +2405,7 @@
       "group": "spec",
       "name": "combobox",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/combobox.md",
-      "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.                                                                                                                                 | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_infoPopover`              | `_info-popover`     | Defines the informational popover after the label.                                                                                                           | `any`                                                                                                                              | `undefined` |\n| `_label` _(required)_       | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |\n| `_msg`                      | `_msg`              | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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",
+      "code": "# kol-combobox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute           | Description                                                                                                                                                  | Type                                                                                                                               | Default     |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`                | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                              | `undefined` |\n| `_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.                                                                                                                                 | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_infoPopover`              | --                  | Defines the informational popover after the label.                                                                                                           | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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",
       "kind": "spec"
     },
     {
@@ -2397,7 +2421,7 @@
       "group": "spec",
       "name": "details",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/details.md",
-      "code": "# kol-details\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Details** component allows additional information to be initially shown with a short introductory text,\nwhich is only fully expanded after the user clicks on an arrow icon.\n\nBy default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\nfollowed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\nchanges its orientation from **_right_** to **_down_**.\nThe component can also be closed again to hide the content.\n\n## Properties\n\n| Property              | Attribute   | Description                                                                                                        | Type                                                                                                                                                              | Default     |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \\| undefined`                                                                                                                                            | `false`     |\n| `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                          | `undefined` |\n| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                                                                                                    | `0`         |\n| `_on`                 | --          | Defines the callback functions for the collapsible.                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \\| undefined`                                                                                                                                            | `false`     |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the heading toggle button.\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|      | The content displayed in the detail description. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-details\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Details** component allows additional information to be initially shown with a short introductory text,\nwhich is only fully expanded after the user clicks on an arrow icon.\n\nBy default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\nfollowed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\nchanges its orientation from **_right_** to **_down_**.\nThe component can also be closed again to hide the content.\n\n## Properties\n\n| Property              | Attribute   | Description                                                                                                        | Type                                                                                                                                                              | Default     |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \\| undefined`                                                                                                                                            | `false`     |\n| `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                          | `undefined` |\n| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                                                                                                    | `0`         |\n| `_on`                 | --          | Defines the callback functions for the collapsible.                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \\| undefined`                                                                                                                                            | `false`     |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the heading toggle button.\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|      | The content displayed in the detail description. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2405,7 +2429,7 @@
       "group": "spec",
       "name": "dialog",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/dialog.md",
-      "code": "# kol-dialog\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute  | Description                                                                                                        | Type                                                                                                                                                           | Default     |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                       | `undefined` |\n| `_level`              | `_level`   | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                                                                                                 | `0`         |\n| `_on`                 | --         | Defines the modal callback functions.                                                                              | `undefined \\| ({ onCancel?: ((event: Event) => void) \\| undefined; onClose?: (() => void) \\| undefined; onToggle?: ((open: boolean) => void) \\| undefined; })` | `undefined` |\n| `_variant`            | `_variant` | Defines the variant of the modal.                                                                                  | `\"blank\" \\| \"card\" \\| undefined`                                                                                                                               | `'blank'`   |\n| `_width`              | `_width`   | Defines the width of the modal. (max-width: 100%)                                                                  | `string \\| undefined`                                                                                                                                          | `'100%'`    |\n\n\n## Methods\n\n### `close() => Promise<void>`\n\nCloses the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `closeModal() => Promise<void>`\n\n<span class=\"text-red-500\">**[DEPRECATED]**</span> Use close() instead.<br/><br/>Closes the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `openModal() => Promise<void>`\n\n<span style=\"color:red\">**[DEPRECATED]**</span> Use showModal() instead.<br/><br/>Opens the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `show(modal?: boolean) => Promise<void>`\n\nOpens the dialog. Pass true to open as a modal dialog.\n\n#### Parameters\n\n| Name    | Type      | Description |\n| ------- | --------- | ----------- |\n| `modal` | `boolean` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showModal() => Promise<void>`\n\nOpens the dialog as a modal.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description            |\n| ---- | ---------------------- |\n|      | The dialog's contents. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-dialog\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute  | Description                                                                                                        | Type                                                                                                                                                           | Default     |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                       | `undefined` |\n| `_level`              | `_level`   | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                                                                                                 | `0`         |\n| `_on`                 | --         | Defines the modal callback functions.                                                                              | `undefined \\| ({ onCancel?: ((event: Event) => void) \\| undefined; onClose?: (() => void) \\| undefined; onToggle?: ((open: boolean) => void) \\| undefined; })` | `undefined` |\n| `_variant`            | `_variant` | Defines the variant of the modal.                                                                                  | `\"blank\" \\| \"card\" \\| undefined`                                                                                                                               | `'blank'`   |\n| `_width`              | `_width`   | Defines the width of the modal. (max-width: 100%)                                                                  | `string \\| undefined`                                                                                                                                          | `'100%'`    |\n\n\n## Methods\n\n### `close() => Promise<void>`\n\nCloses the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `closeModal() => Promise<void>`\n\n<span class=\"text-red-500\">**[DEPRECATED]**</span> Use close() instead.<br/><br/>Closes the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `openModal() => Promise<void>`\n\n<span style=\"color:red\">**[DEPRECATED]**</span> Use showModal() instead.<br/><br/>Opens the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `show(modal?: boolean) => Promise<void>`\n\nOpens the dialog. Pass true to open as a modal dialog.\n\n#### Parameters\n\n| Name    | Type      | Description |\n| ------- | --------- | ----------- |\n| `modal` | `boolean` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showModal() => Promise<void>`\n\nOpens the dialog as a modal.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description            |\n| ---- | ---------------------- |\n|      | The dialog's contents. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2413,7 +2437,7 @@
       "group": "spec",
       "name": "drawer",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/drawer.md",
-      "code": "# kol-drawer\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute     | Description                                                                                                        | Type                                                                                                                                                           | Default     |\n| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_align`              | `_align`      | Defines the visual orientation of the component.                                                                   | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                          | `undefined` |\n| `_hasCloser`          | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean \\| undefined`                                                                                                                                         | `false`     |\n| `_label` _(required)_ | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                       | `undefined` |\n| `_level`              | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                                                                                                 | `0`         |\n| `_on`                 | --            | Specifies the EventCallback function to be called when the drawer is closing.                                      | `undefined \\| ({ onCancel?: ((event: Event) => void) \\| undefined; onClose?: (() => void) \\| undefined; onToggle?: ((open: boolean) => void) \\| undefined; })` | `undefined` |\n| `_open`               | `_open`       | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \\| undefined`                                                                                                                                         | `undefined` |\n\n\n## Methods\n\n### `close() => Promise<void>`\n\nCloses the drawer.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `open() => Promise<void>`\n\n<span class=\"text-red-500\">**[DEPRECATED]**</span> Use show() or showModal() instead.<br/><br/>Opens the drawer.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `show(modal?: boolean) => Promise<void>`\n\nOpens the drawer. Pass true to open as a modal drawer.\n\n#### Parameters\n\n| Name    | Type      | Description |\n| ------- | --------- | ----------- |\n| `modal` | `boolean` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showModal() => Promise<void>`\n\nOpens the drawer as a modal.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description            |\n| ---- | ---------------------- |\n|      | The Content of drawer. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-drawer\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute     | Description                                                                                                        | Type                                                                                                                                                           | Default     |\n| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_align`              | `_align`      | Defines the visual orientation of the component.                                                                   | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                          | `undefined` |\n| `_hasCloser`          | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean \\| undefined`                                                                                                                                         | `false`     |\n| `_label` _(required)_ | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                       | `undefined` |\n| `_level`              | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                                                                                                 | `0`         |\n| `_on`                 | --            | Specifies the EventCallback function to be called when the drawer is closing.                                      | `undefined \\| ({ onCancel?: ((event: Event) => void) \\| undefined; onClose?: (() => void) \\| undefined; onToggle?: ((open: boolean) => void) \\| undefined; })` | `undefined` |\n| `_open`               | `_open`       | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \\| undefined`                                                                                                                                         | `undefined` |\n\n\n## Methods\n\n### `close() => Promise<void>`\n\nCloses the drawer.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `open() => Promise<void>`\n\n<span class=\"text-red-500\">**[DEPRECATED]**</span> Use show() or showModal() instead.<br/><br/>Opens the drawer.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `show(modal?: boolean) => Promise<void>`\n\nOpens the drawer. Pass true to open as a modal drawer.\n\n#### Parameters\n\n| Name    | Type      | Description |\n| ------- | --------- | ----------- |\n| `modal` | `boolean` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showModal() => Promise<void>`\n\nOpens the drawer as a modal.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description            |\n| ---- | ---------------------- |\n|      | The Content of drawer. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2421,7 +2445,7 @@
       "group": "spec",
       "name": "form",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/form.md",
-      "code": "# kol-form\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.\n\n## Properties\n\n| Property        | Attribute        | Description                                                                                                                                                                             | Type                                                                                                          | Default     |\n| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_errorList`    | --               | A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error. | `ErrorListPropType[] \\| undefined`                                                                            | `undefined` |\n| `_on`           | --               | Defines the callback functions for form events.                                                                                                                                         | `undefined \\| { onSubmit?: EventCallback<Event> \\| undefined; onReset?: EventCallback<Event> \\| undefined; }` | `undefined` |\n| `_requiredText` | `_required-text` | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.                                                                                         | `boolean \\| string \\| undefined`                                                                              | `true`      |\n\n\n## Methods\n\n### `focusErrorList(options?: KolFocusOptions) => Promise<void>`\n\nScrolls to the error list and focuses the first link.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description              |\n| ---- | ------------------------ |\n|      | The content of the form. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-form\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.\n\n## Properties\n\n| Property        | Attribute        | Description                                                                                                                                                                             | Type                                                                                                          | Default     |\n| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_errorList`    | --               | A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error. | `ErrorListPropType[] \\| undefined`                                                                            | `undefined` |\n| `_on`           | --               | Defines the callback functions for form events.                                                                                                                                         | `undefined \\| { onSubmit?: EventCallback<Event> \\| undefined; onReset?: EventCallback<Event> \\| undefined; }` | `undefined` |\n| `_requiredText` | `_required-text` | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.                                                                                         | `boolean \\| string \\| undefined`                                                                              | `true`      |\n\n\n## Methods\n\n### `focusErrorList(options?: KolFocusOptions) => Promise<void>`\n\nScrolls to the error list and focuses the first link.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description              |\n| ---- | ------------------------ |\n|      | The content of the form. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2429,7 +2453,7 @@
       "group": "spec",
       "name": "heading",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/heading.md",
-      "code": "# kol-heading\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute             | Description                                                                                                                                                  | Type                                           | Default     |\n| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                       | `undefined` |\n| `_level`              | `_level`              | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                            | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0`         |\n| `_secondaryHeadline`  | `_secondary-headline` | Defines the text of the secondary headline.                                                                                                                  | `string \\| undefined`                          | `undefined` |\n\n\n## Slots\n\n| Slot       | Description                                                                                              |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-heading\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute             | Description                                                                                                                                                  | Type                                           | Default     |\n| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                       | `undefined` |\n| `_level`              | `_level`              | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                            | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0`         |\n| `_secondaryHeadline`  | `_secondary-headline` | Defines the text of the secondary headline.                                                                                                                  | `string \\| undefined`                          | `undefined` |\n\n\n## Slots\n\n| Slot       | Description                                                                                              |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2437,7 +2461,7 @@
       "group": "spec",
       "name": "icon",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/icon.md",
-      "code": "# kol-icon\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Icon** component allows icons from included icon fonts to be displayed at any position.\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type     | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |\n| `_icons` _(required)_ | `_icons`  | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                    | `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\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-icon\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Icon** component allows icons from included icon fonts to be displayed at any position.\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type     | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |\n| `_icons` _(required)_ | `_icons`  | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                    | `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\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2445,7 +2469,7 @@
       "group": "spec",
       "name": "image",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/image.md",
-      "code": "# kol-image\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.\n\n## Properties\n\n| Property            | Attribute  | Description                                                                   | Type                                                                                                        | Default     |\n| ------------------- | ---------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |\n| `_alt` _(required)_ | `_alt`     | Sets the alternative text of the image.                                       | `string`                                                                                                    | `undefined` |\n| `_loading`          | `_loading` | Defines the loading mode for the image.                                       | `\"eager\" \\| \"lazy\" \\| undefined`                                                                            | `undefined` |\n| `_on`               | --         | Defines callbacks for image load events (`onError`, `onLoad`).                | `undefined \\| { onError?: EventCallback<Event> \\| undefined; onLoad?: EventCallback<Event> \\| undefined; }` | `undefined` |\n| `_sizes`            | `_sizes`   | Defines the image sizes for different screen resolutions, supporting _srcset. | `string \\| undefined`                                                                                       | `undefined` |\n| `_src` _(required)_ | `_src`     | Sets the image `src` attribute to the given string.                           | `string`                                                                                                    | `undefined` |\n| `_srcset`           | `_srcset`  | Sets a list of source URLs with widths of the images.                         | `string \\| undefined`                                                                                       | `undefined` |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-image\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.\n\n## Properties\n\n| Property            | Attribute  | Description                                                                   | Type                                                                                                        | Default     |\n| ------------------- | ---------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |\n| `_alt` _(required)_ | `_alt`     | Sets the alternative text of the image.                                       | `string`                                                                                                    | `undefined` |\n| `_loading`          | `_loading` | Defines the loading mode for the image.                                       | `\"eager\" \\| \"lazy\" \\| undefined`                                                                            | `undefined` |\n| `_on`               | --         | Defines callbacks for image load events (`onError`, `onLoad`).                | `undefined \\| { onError?: EventCallback<Event> \\| undefined; onLoad?: EventCallback<Event> \\| undefined; }` | `undefined` |\n| `_sizes`            | `_sizes`   | Defines the image sizes for different screen resolutions, supporting _srcset. | `string \\| undefined`                                                                                       | `undefined` |\n| `_src` _(required)_ | `_src`     | Sets the image `src` attribute to the given string.                           | `string`                                                                                                    | `undefined` |\n| `_srcset`           | `_srcset`  | Sets a list of source URLs with widths of the images.                         | `string \\| undefined`                                                                                       | `undefined` |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2453,7 +2477,7 @@
       "group": "spec",
       "name": "input-checkbox",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-checkbox.md",
-      "code": "# kol-input-checkbox\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                            | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                                                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_ariaDetails`        | `_aria-details`  | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_checked`            | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                                                                                                                                                                      | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                                                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_indeterminate`      | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                                                                                                                                                                          | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_infoPopover`        | `_info-popover`  | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `any`                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                                                                                                                                                                                                        | `undefined` |\n| `_labelAlign`         | `_label-align`   | Defines which alignment should be used for presentation.                                                                                                                                                                                                                                                      | `\"left\" \\| \"right\" \\| undefined`                                                                                                                                                                                                                                                                                | `'right'`   |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                              | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                                                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                | `undefined` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                                                                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                           | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                                                                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                                                                                                                                                                             | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                                                                                    | `true`      |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                                                                                                                                                        | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined`                                                                                                                                                                                                                                                                | `'default'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot       | Description                                                                                              |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n|            | The label of the input field.                                                                            |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-checkbox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                            | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                                                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_ariaDetails`        | `_aria-details`  | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_checked`            | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                                                                                                                                                                      | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                                                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_indeterminate`      | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                                                                                                                                                                          | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_infoPopover`        | --               | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| undefined`                                                                                                                                                                                   | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                                                                                                                                                                                                        | `undefined` |\n| `_labelAlign`         | `_label-align`   | Defines which alignment should be used for presentation.                                                                                                                                                                                                                                                      | `\"left\" \\| \"right\" \\| undefined`                                                                                                                                                                                                                                                                                | `'right'`   |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                              | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                                                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                | `undefined` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                                                                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                           | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                                                                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                                                                                                                                                                             | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                                                                                    | `true`      |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                                                                                                                                                        | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined`                                                                                                                                                                                                                                                                | `'default'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot       | Description                                                                                              |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n|            | The label of the input field.                                                                            |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2461,7 +2485,7 @@
       "group": "spec",
       "name": "input-color",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-color.md",
-      "code": "# kol-input-color\n\n<!-- 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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | `_info-popover`  | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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",
+      "code": "# kol-input-color\n\n\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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | --               | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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",
       "kind": "spec"
     },
     {
@@ -2469,7 +2493,7 @@
       "group": "spec",
       "name": "input-date",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-date.md",
-      "code": "# kol-input-date\n\n<!-- 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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | `_info-popover`  | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                                                                                                                                                                     | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                                                                                                                                                                    | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-date\n\n\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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | --               | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2477,7 +2501,7 @@
       "group": "spec",
       "name": "input-email",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-email.md",
-      "code": "# kol-input-email\n\n<!-- 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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | `_info-popover`        | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                                                                                                                                                                               | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                                                                                                                                                                   | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-email\n\n\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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | --                     | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2485,7 +2509,7 @@
       "group": "spec",
       "name": "input-file",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-file.md",
-      "code": "# kol-input-file\n\n<!-- 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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | `_info-popover`  | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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",
+      "code": "# kol-input-file\n\n\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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | --               | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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",
       "kind": "spec"
     },
     {
@@ -2493,7 +2517,7 @@
       "group": "spec",
       "name": "input-number",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-number.md",
-      "code": "# kol-input-number\n\n<!-- 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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | `_info-popover`  | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                                                                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                                                                                                                                                                    | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-number\n\n\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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | --               | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2501,7 +2525,7 @@
       "group": "spec",
       "name": "input-password",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-password.md",
-      "code": "# kol-input-password\n\n<!-- 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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | `_info-popover`        | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                                                                                                                                                                               | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                                                                                                                                                                   | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-password\n\n\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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | --                     | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2509,7 +2533,7 @@
       "group": "spec",
       "name": "input-radio",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-radio.md",
-      "code": "# kol-input-radio\n\n<!-- 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| `_infoPopover`        | `_info-popover`  | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `any`                                                                                                                              | `undefined`  |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                           | `undefined`  |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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 label of the input field.                                                                            |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-radio\n\n\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| `_infoPopover`        | --               | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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 label of the input field.                                                                            |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2517,7 +2541,7 @@
       "group": "spec",
       "name": "input-range",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-range.md",
-      "code": "# kol-input-range\n\n<!-- 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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_infoPopover`        | `_info-popover`  | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `any`                                                                                                                              | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                           | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                                                                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `100`       |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                                                                                                                                                                    | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `0`         |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-range\n\n\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.                                                                                                                                                                                                                                                                                  | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_infoPopover`        | --               | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2525,7 +2549,7 @@
       "group": "spec",
       "name": "input-text",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-text.md",
-      "code": "# kol-input-text\n\n<!-- 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.                                                                                                                                 | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | --                     | Defines the informational popover after the label.                                                                                                           | `Omit<PopoverButtonProps, \"_icons\" \\| \"_hideLabel\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                              | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                  | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-text\n\n\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.                                                                                                                                 | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_infoPopover`        | --                     | Defines the informational popover after the label.                                                                                                           | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2533,7 +2557,7 @@
       "group": "spec",
       "name": "kolibri",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/kolibri.md",
-      "code": "# kol-kolibri\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property   | Attribute  | Description                                | Type                                                                           | Default     |\n| ---------- | ---------- | ------------------------------------------ | ------------------------------------------------------------------------------ | ----------- |\n| `_color`   | `_color`   | Defines the color of the logo and label.   | `string \\| undefined \\| { backgroundColor: string; foregroundColor: string; }` | `'#003c78'` |\n| `_labeled` | `_labeled` | Defines whether the component has a label. | `boolean \\| undefined`                                                         | `true`      |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-kolibri\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property   | Attribute  | Description                                | Type                                                                           | Default     |\n| ---------- | ---------- | ------------------------------------------ | ------------------------------------------------------------------------------ | ----------- |\n| `_color`   | `_color`   | Defines the color of the logo and label.   | `string \\| undefined \\| { backgroundColor: string; foregroundColor: string; }` | `'#003c78'` |\n| `_labeled` | `_labeled` | Defines whether the component has a label. | `boolean \\| undefined`                                                         | `true`      |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2541,7 +2565,7 @@
       "group": "spec",
       "name": "link",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link.md",
-      "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.                                                                                                                                            | `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| `_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## Slots\n\n| Slot       | Description                                                                                              |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property             | Attribute             | Description                                                                                                                                                             | Type                                                                                   | Default     |\n| -------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`         | `_access-key`         | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                   | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaControls`      | `_aria-controls`      | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                     | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                                       | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription`   | `_aria-description`   | Defines the value for the aria-description attribute.                                                                                                                   | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaExpanded`      | `_aria-expanded`      | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined`                                                                 | `undefined` |\n| `_disabled`          | `_disabled`           | Makes the element not focusable and ignore all events.                                                                                                                  | `boolean \\| undefined`                                                                 | `false`     |\n| `_download`          | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                                          | `string \\| undefined`                                                                  | `undefined` |\n| `_hideLabel`         | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                              | `boolean \\| undefined`                                                                 | `false`     |\n| `_href` _(required)_ | `_href`               | Sets the target URI of the link or citation source.                                                                                                                     | `string`                                                                               | `undefined` |\n| `_icons`             | `_icons`              | Defines the icon classnames.                                                                                                                                            | `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| `_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## Slots\n\n| Slot       | Description                                                                                              |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2549,7 +2573,7 @@
       "group": "spec",
       "name": "link-button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link-button.md",
-      "code": "# kol-link-button\n\n<!-- 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.                                                                                                                                                                                                             | `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",
+      "code": "# kol-link-button\n\n\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.                                                                                                                                                                                                             | `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",
       "kind": "spec"
     },
     {
@@ -2557,7 +2581,7 @@
       "group": "spec",
       "name": "meter",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/meter.md",
-      "code": "# kol-meter\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute      | Description                                                                                                                                                                                                                                                                                                                                                                                                                           | Type                         | Default        |\n| --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |\n| `_high`               | `_high`        | From this value to the max value is the high range of the meter. Below this value is the middle range.                                                                                                                                                                                                                                                                                                                                | `number \\| 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| `_low`                | `_low`         | From this value to the min value is the low range of the meter. Above this value is the middle range.                                                                                                                                                                                                                                                                                                                                 | `number \\| undefined`        | `undefined`    |\n| `_max`                | `_max`         | Defines the maximum value of the element. Default like native component.                                                                                                                                                                                                                                                                                                                                                              | `number`                     | `1`            |\n| `_min`                | `_min`         | Defines the minimum value of the element. Default like native component.                                                                                                                                                                                                                                                                                                                                                              | `number`                     | `0`            |\n| `_optimum`            | `_optimum`     | Indicates the optimal range of the element. If this lies in the high range, the high range will be optimum, the middle range will be suboptimum and the low range will be critical. If this lies in the low range, the low range will be optimum, the middle range will be suboptimum and the high range will be critical. If this lies in the middle range, both low and high range will be suboptimum and nothing will be critical. | `number \\| undefined`        | `undefined`    |\n| `_orientation`        | `_orientation` | Defines whether the meter bar is displayed horizontally or vertically.                                                                                                                                                                                                                                                                                                                                                                | `\"horizontal\" \\| \"vertical\"` | `'horizontal'` |\n| `_unit`               | `_unit`        | Defines the unit of the value.                                                                                                                                                                                                                                                                                                                                                                                                        | `string`                     | `'%'`          |\n| `_value` _(required)_ | `_value`       | Defines the value of the element. Is capped between min and max.                                                                                                                                                                                                                                                                                                                                                                      | `number`                     | `undefined`    |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-meter\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute      | Description                                                                                                                                                                                                                                                                                                                                                                                                                           | Type                         | Default        |\n| --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |\n| `_high`               | `_high`        | From this value to the max value is the high range of the meter. Below this value is the middle range.                                                                                                                                                                                                                                                                                                                                | `number \\| 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| `_low`                | `_low`         | From this value to the min value is the low range of the meter. Above this value is the middle range.                                                                                                                                                                                                                                                                                                                                 | `number \\| undefined`        | `undefined`    |\n| `_max`                | `_max`         | Defines the maximum value of the element. Default like native component.                                                                                                                                                                                                                                                                                                                                                              | `number`                     | `1`            |\n| `_min`                | `_min`         | Defines the minimum value of the element. Default like native component.                                                                                                                                                                                                                                                                                                                                                              | `number`                     | `0`            |\n| `_optimum`            | `_optimum`     | Indicates the optimal range of the element. If this lies in the high range, the high range will be optimum, the middle range will be suboptimum and the low range will be critical. If this lies in the low range, the low range will be optimum, the middle range will be suboptimum and the high range will be critical. If this lies in the middle range, both low and high range will be suboptimum and nothing will be critical. | `number \\| undefined`        | `undefined`    |\n| `_orientation`        | `_orientation` | Defines whether the meter bar is displayed horizontally or vertically.                                                                                                                                                                                                                                                                                                                                                                | `\"horizontal\" \\| \"vertical\"` | `'horizontal'` |\n| `_unit`               | `_unit`        | Defines the unit of the value.                                                                                                                                                                                                                                                                                                                                                                                                        | `string`                     | `'%'`          |\n| `_value` _(required)_ | `_value`       | Defines the value of the element. Is capped between min and max.                                                                                                                                                                                                                                                                                                                                                                      | `number`                     | `undefined`    |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2565,7 +2589,7 @@
       "group": "spec",
       "name": "modal",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/modal.md",
-      "code": "# kol-modal\n\n<!-- Auto Generated Below -->\n\n\n> **[DEPRECATED]** Use `kol-dialog` instead.\n\n## Overview\n\nThe **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility.\n\n## Properties\n\n| Property              | Attribute  | Description                                                                                                        | Type                                                                                                                                                           | Default     |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                       | `undefined` |\n| `_on`                 | --         | Defines the modal callback functions.                                                                              | `undefined \\| ({ onCancel?: ((event: Event) => void) \\| undefined; onClose?: (() => void) \\| undefined; onToggle?: ((open: boolean) => void) \\| undefined; })` | `undefined` |\n| `_variant`            | `_variant` | Defines the variant of the modal.                                                                                  | `\"blank\" \\| \"card\" \\| undefined`                                                                                                                               | `'blank'`   |\n| `_width`              | `_width`   | Defines the width of the modal. (max-width: 100%)                                                                  | `string \\| undefined`                                                                                                                                          | `'100%'`    |\n\n\n## Methods\n\n### `close() => Promise<void>`\n\nCloses the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `closeModal() => Promise<void>`\n\n<span class=\"text-red-500\">**[DEPRECATED]**</span> Use close() instead.<br/><br/>Closes the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `openModal() => Promise<void>`\n\n<span style=\"color:red\">**[DEPRECATED]**</span> Use showModal() instead.<br/><br/>Opens the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `show(modal?: boolean) => Promise<void>`\n\nOpens the dialog. Pass true to open as a modal dialog.\n\n#### Parameters\n\n| Name    | Type      | Description |\n| ------- | --------- | ----------- |\n| `modal` | `boolean` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showModal() => Promise<void>`\n\nOpens the dialog as a modal.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description           |\n| ---- | --------------------- |\n|      | The modal's contents. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-modal\n\n\n\n<!-- Auto Generated Below -->\n\n\n> **[DEPRECATED]** Use `kol-dialog` instead.\n\n## Overview\n\nThe **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility.\n\n## Properties\n\n| Property              | Attribute  | Description                                                                                                        | Type                                                                                                                                                           | Default     |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                       | `undefined` |\n| `_on`                 | --         | Defines the modal callback functions.                                                                              | `undefined \\| ({ onCancel?: ((event: Event) => void) \\| undefined; onClose?: (() => void) \\| undefined; onToggle?: ((open: boolean) => void) \\| undefined; })` | `undefined` |\n| `_variant`            | `_variant` | Defines the variant of the modal.                                                                                  | `\"blank\" \\| \"card\" \\| undefined`                                                                                                                               | `'blank'`   |\n| `_width`              | `_width`   | Defines the width of the modal. (max-width: 100%)                                                                  | `string \\| undefined`                                                                                                                                          | `'100%'`    |\n\n\n## Methods\n\n### `close() => Promise<void>`\n\nCloses the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `closeModal() => Promise<void>`\n\n<span class=\"text-red-500\">**[DEPRECATED]**</span> Use close() instead.<br/><br/>Closes the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `openModal() => Promise<void>`\n\n<span style=\"color:red\">**[DEPRECATED]**</span> Use showModal() instead.<br/><br/>Opens the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `show(modal?: boolean) => Promise<void>`\n\nOpens the dialog. Pass true to open as a modal dialog.\n\n#### Parameters\n\n| Name    | Type      | Description |\n| ------- | --------- | ----------- |\n| `modal` | `boolean` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showModal() => Promise<void>`\n\nOpens the dialog as a modal.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description           |\n| ---- | --------------------- |\n|      | The modal's contents. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2573,7 +2597,7 @@
       "group": "spec",
       "name": "nav",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/nav.md",
-      "code": "# kol-nav\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.\nIt provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.\n\n## Properties\n\n| Property                | Attribute                  | Description                                                                                                                                | Type                                              | Default     |\n| ----------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ----------- |\n| `_collapsible`          | `_collapsible`             | Defines if navigation nodes can be collapsed or not. Enabled by default.                                                                   | `boolean \\| undefined`                            | `true`      |\n| `_hasCompactButton`     | `_has-compact-button`      | Creates a button below the navigation, that toggles _collapsible.                                                                          | `boolean \\| undefined`                            | `false`     |\n| `_hasIconsWhenExpanded` | `_has-icons-when-expanded` | Shows icons next to the navigation item labels, even when the navigation is not collapsed.                                                 | `boolean \\| undefined`                            | `false`     |\n| `_hideLabel`            | `_hide-label`              | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined`                            | `false`     |\n| `_label` _(required)_   | `_label`                   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                         | `string`                                          | `undefined` |\n| `_links` _(required)_   | `_links`                   | Defines the list of links, buttons or texts to render.                                                                                     | `ButtonOrLinkOrTextWithChildrenProps[] \\| string` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-nav\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.\nIt provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.\n\n## Properties\n\n| Property                | Attribute                  | Description                                                                                                                                | Type                                              | Default     |\n| ----------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ----------- |\n| `_collapsible`          | `_collapsible`             | Defines if navigation nodes can be collapsed or not. Enabled by default.                                                                   | `boolean \\| undefined`                            | `true`      |\n| `_hasCompactButton`     | `_has-compact-button`      | Creates a button below the navigation, that toggles _collapsible.                                                                          | `boolean \\| undefined`                            | `false`     |\n| `_hasIconsWhenExpanded` | `_has-icons-when-expanded` | Shows icons next to the navigation item labels, even when the navigation is not collapsed.                                                 | `boolean \\| undefined`                            | `false`     |\n| `_hideLabel`            | `_hide-label`              | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined`                            | `false`     |\n| `_label` _(required)_   | `_label`                   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                         | `string`                                          | `undefined` |\n| `_links` _(required)_   | `_links`                   | Defines the list of links, buttons or texts to render.                                                                                     | `ButtonOrLinkOrTextWithChildrenProps[] \\| string` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2581,7 +2605,7 @@
       "group": "spec",
       "name": "pagination",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/pagination.md",
-      "code": "# kol-pagination\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property             | Attribute            | Description                                                                                                        | Type                                                                                                                                                                                                                   | Default     |\n| -------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_boundaryCount`     | `_boundary-count`    | Defines the amount of pages to show next to the outer arrow buttons.                                               | `number \\| undefined`                                                                                                                                                                                                  | `1`         |\n| `_customClass`       | `_custom-class`      | Defines the custom class attribute if _variant=\"custom\" is set.                                                    | `string \\| undefined`                                                                                                                                                                                                  | `undefined` |\n| `_hasButtons`        | `_has-buttons`       | Defines which navigation buttons to render (first, last, next, previous buttons).                                  | `boolean \\| string \\| undefined \\| { first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                                               | `true`      |\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| `_max` _(required)_  | `_max`               | Defines the maximum value of the element.                                                                          | `number`                                                                                                                                                                                                               | `undefined` |\n| `_on` _(required)_   | --                   | Gibt an, auf welche Callback-Events reagiert werden.                                                               | `{ onChangePage?: EventValueOrEventCallback<Event, number> \\| undefined; onChangePageSize?: EventValueOrEventCallback<Event, number> \\| undefined; onClick?: EventValueOrEventCallback<Event, number> \\| undefined; }` | `undefined` |\n| `_page` _(required)_ | `_page`              | Defines the current page.                                                                                          | `number`                                                                                                                                                                                                               | `undefined` |\n| `_pageSize`          | `_page-size`         | Defines the amount of entries to show per page.                                                                    | `number`                                                                                                                                                                                                               | `1`         |\n| `_pageSizeOptions`   | `_page-size-options` | Defines the options for the page-size-select.                                                                      | `number[] \\| string`                                                                                                                                                                                                   | `[]`        |\n| `_siblingCount`      | `_sibling-count`     | Defines the amount of pages to show next to the current page.                                                      | `number \\| undefined`                                                                                                                                                                                                  | `1`         |\n| `_tooltipAlign`      | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.                                          | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                  | `'top'`     |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-pagination\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property             | Attribute            | Description                                                                                                        | Type                                                                                                                                                                                                                   | Default     |\n| -------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_boundaryCount`     | `_boundary-count`    | Defines the amount of pages to show next to the outer arrow buttons.                                               | `number \\| undefined`                                                                                                                                                                                                  | `1`         |\n| `_customClass`       | `_custom-class`      | Defines the custom class attribute if _variant=\"custom\" is set.                                                    | `string \\| undefined`                                                                                                                                                                                                  | `undefined` |\n| `_hasButtons`        | `_has-buttons`       | Defines which navigation buttons to render (first, last, next, previous buttons).                                  | `boolean \\| string \\| undefined \\| { first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                                               | `true`      |\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| `_max` _(required)_  | `_max`               | Defines the maximum value of the element.                                                                          | `number`                                                                                                                                                                                                               | `undefined` |\n| `_on` _(required)_   | --                   | Gibt an, auf welche Callback-Events reagiert werden.                                                               | `{ onChangePage?: EventValueOrEventCallback<Event, number> \\| undefined; onChangePageSize?: EventValueOrEventCallback<Event, number> \\| undefined; onClick?: EventValueOrEventCallback<Event, number> \\| undefined; }` | `undefined` |\n| `_page` _(required)_ | `_page`              | Defines the current page.                                                                                          | `number`                                                                                                                                                                                                               | `undefined` |\n| `_pageSize`          | `_page-size`         | Defines the amount of entries to show per page.                                                                    | `number`                                                                                                                                                                                                               | `1`         |\n| `_pageSizeOptions`   | `_page-size-options` | Defines the options for the page-size-select.                                                                      | `number[] \\| string`                                                                                                                                                                                                   | `[]`        |\n| `_siblingCount`      | `_sibling-count`     | Defines the amount of pages to show next to the current page.                                                      | `number \\| undefined`                                                                                                                                                                                                  | `1`         |\n| `_tooltipAlign`      | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.                                          | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                  | `'top'`     |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2589,7 +2613,7 @@
       "group": "spec",
       "name": "popover-button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/popover-button.md",
-      "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.                                                                                                                                 | `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.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShows the popover programmatically.\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",
+      "code": "# kol-popover-button\n\n\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.                                                                                                                                 | `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.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShows the popover programmatically.\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",
       "kind": "spec"
     },
     {
@@ -2597,7 +2621,7 @@
       "group": "spec",
       "name": "progress",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/progress.md",
-      "code": "# kol-progress\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.\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| `_max` _(required)_   | `_max`     | Defines the maximum value of the element.                                                                          | `number`                        | `undefined` |\n| `_unit`               | `_unit`    | Defines the unit of the step values (not shown).                                                                   | `string \\| undefined`           | `undefined` |\n| `_value` _(required)_ | `_value`   | Defines the value of the element.                                                                                  | `number`                        | `undefined` |\n| `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                             | `\"bar\" \\| \"cycle\" \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-progress\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.\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| `_max` _(required)_   | `_max`     | Defines the maximum value of the element.                                                                          | `number`                        | `undefined` |\n| `_unit`               | `_unit`    | Defines the unit of the step values (not shown).                                                                   | `string \\| undefined`           | `undefined` |\n| `_value` _(required)_ | `_value`   | Defines the value of the element.                                                                                  | `number`                        | `undefined` |\n| `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                             | `\"bar\" \\| \"cycle\" \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2605,7 +2629,7 @@
       "group": "spec",
       "name": "quote",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/quote.md",
-      "code": "# kol-quote\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote.\n\n## Properties\n\n| Property              | Attribute  | Description                                                                                                        | Type                               | Default     |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | ----------- |\n| `_href` _(required)_  | `_href`    | Sets the target URI of the link or citation source.                                                                | `string`                           | `undefined` |\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| `_quote` _(required)_ | `_quote`   | Defines the text of the quote.                                                                                     | `string`                           | `undefined` |\n| `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                             | `\"block\" \\| \"inline\" \\| undefined` | `'inline'`  |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-quote\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote.\n\n## Properties\n\n| Property              | Attribute  | Description                                                                                                        | Type                               | Default     |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | ----------- |\n| `_href` _(required)_  | `_href`    | Sets the target URI of the link or citation source.                                                                | `string`                           | `undefined` |\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| `_quote` _(required)_ | `_quote`   | Defines the text of the quote.                                                                                     | `string`                           | `undefined` |\n| `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                             | `\"block\" \\| \"inline\" \\| undefined` | `'inline'`  |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2613,7 +2637,7 @@
       "group": "spec",
       "name": "select",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/select.md",
-      "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.                                                                                                                                 | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_infoPopover`          | `_info-popover`  | Defines the informational popover after the label.                                                                                                           | `any`                                                                                                                              | `undefined` |\n| `_label` _(required)_   | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |\n| `_msg`                  | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-select\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                | Attribute        | Description                                                                                                                                                  | Type                                                                                                                               | Default     |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`            | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                              | `undefined` |\n| `_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.                                                                                                                                 | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_infoPopover`          | --               | Defines the informational popover after the label.                                                                                                           | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2621,7 +2645,7 @@
       "group": "spec",
       "name": "single-select",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/single-select.md",
-      "code": "# kol-single-select\n\n<!-- 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| `_infoPopover`          | `_info-popover`     | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `any`                                                                                                                              | `undefined` |\n| `_label` _(required)_   | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                           | `undefined` |\n| `_msg`                  | `_msg`              | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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",
+      "code": "# kol-single-select\n\n\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| `_infoPopover`          | --                  | Defines the informational popover after the label.                                                                                                                                                                                                                                                            | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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",
       "kind": "spec"
     },
     {
@@ -2629,7 +2653,7 @@
       "group": "spec",
       "name": "skeleton",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/skeleton.md",
-      "code": "# kol-skeleton\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property             | Attribute | Description                              | Type     | Default     |\n| -------------------- | --------- | ---------------------------------------- | -------- | ----------- |\n| `_name` _(required)_ | `_name`   | Sets the name of the skeleton component. | `string` | `undefined` |\n\n\n## Events\n\n| Event      | Description                                                     | Type                  |\n| ---------- | --------------------------------------------------------------- | --------------------- |\n| `loaded`   | Emitted when the skeleton has finished loading.                 | `CustomEvent<number>` |\n| `rendered` | Emitted when the skeleton has been rendered for the first time. | `CustomEvent<void>`   |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nFocuses the interactive element of the component.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `toggle() => Promise<void>`\n\nToggles the visibility of the skeleton component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-skeleton\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property             | Attribute | Description                              | Type     | Default     |\n| -------------------- | --------- | ---------------------------------------- | -------- | ----------- |\n| `_name` _(required)_ | `_name`   | Sets the name of the skeleton component. | `string` | `undefined` |\n\n\n## Events\n\n| Event      | Description                                                     | Type                  |\n| ---------- | --------------------------------------------------------------- | --------------------- |\n| `loaded`   | Emitted when the skeleton has finished loading.                 | `CustomEvent<number>` |\n| `rendered` | Emitted when the skeleton has been rendered for the first time. | `CustomEvent<void>`   |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nFocuses the interactive element of the component.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `toggle() => Promise<void>`\n\nToggles the visibility of the skeleton component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2637,7 +2661,7 @@
       "group": "spec",
       "name": "skip-nav",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/skip-nav.md",
-      "code": "# kol-skip-nav\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SkipNav** component renders a hidden navigation that allows keyboard and assistive\ntechnology users to skip repetitive navigation sections and jump directly to the main\ncontent. It only becomes visible when reached via the Tab key.\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type                    | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- |\n| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                | `undefined` |\n| `_links` _(required)_ | `_links`  | Defines the list of links combined with their labels to render.                                                    | `LinkProps[] \\| string` | `undefined` |\n\n\n## Methods\n\n### `focus(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",
+      "code": "# kol-skip-nav\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SkipNav** component renders a hidden navigation that allows keyboard and assistive\ntechnology users to skip repetitive navigation sections and jump directly to the main\ncontent. It only becomes visible when reached via the Tab key.\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type                    | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- |\n| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                | `undefined` |\n| `_links` _(required)_ | `_links`  | Defines the list of links combined with their labels to render.                                                    | `LinkProps[] \\| string` | `undefined` |\n\n\n## Methods\n\n### `focus(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",
       "kind": "spec"
     },
     {
@@ -2645,7 +2669,7 @@
       "group": "spec",
       "name": "spin",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/spin.md",
-      "code": "# kol-spin\n\n<!-- Auto Generated Below -->\n\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| `_show`    | `_show`    | Makes the element show up.                                                                                         | `boolean \\| undefined`                    | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation.                                                             | `\"cycle\" \\| \"dot\" \\| \"none\" \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-spin\n\n\n\n<!-- Auto Generated Below -->\n\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| `_show`    | `_show`    | Makes the element show up.                                                                                         | `boolean \\| undefined`                    | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation.                                                             | `\"cycle\" \\| \"dot\" \\| \"none\" \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2653,7 +2677,7 @@
       "group": "spec",
       "name": "split-button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/split-button.md",
-      "code": "# kol-split-button\n\n<!-- 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.                                                                                                                                                                                                             | `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",
+      "code": "# kol-split-button\n\n\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.                                                                                                                                                                                                             | `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",
       "kind": "spec"
     },
     {
@@ -2661,7 +2685,7 @@
       "group": "spec",
       "name": "table-stateful",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateful.md",
-      "code": "# kol-table-stateful\n\n<!-- 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| `_loading`              | `_loading`             | Wether the table shows a loading spinner (default: false).                                                                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `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",
+      "code": "# kol-table-stateful\n\n\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| `_loading`              | `_loading`             | Wether the table shows a loading spinner (default: false).                                                                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `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",
       "kind": "spec"
     },
     {
@@ -2669,7 +2693,7 @@
       "group": "spec",
       "name": "table-stateless",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateless.md",
-      "code": "# kol-table-stateless\n\n<!-- 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`        | `_header-cells`      | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the future. Use _headers instead. Defines the horizontal and vertical table headers.<br/><br/>                                                                                                                                                                          | `string \\| undefined \\| { horizontal?: KoliBriTableHeaderCell[][] \\| undefined; vertical?: KoliBriTableHeaderCell[][] \\| undefined; }`                                                                                                                                                 | `undefined` |\n| `_headers`            | `_headers`           | Defines the horizontal and vertical table headers.                                                                                                                                                                                                                                                                                         | `string \\| undefined \\| { 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| `_loading`            | `_loading`           | Wether the table shows a loading spinner (default: false).                                                                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                                                                                                                                                                                 | `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",
+      "code": "# kol-table-stateless\n\n\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`        | `_header-cells`      | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the future. Use _headers instead. Defines the horizontal and vertical table headers.<br/><br/>                                                                                                                                                                          | `string \\| undefined \\| { horizontal?: KoliBriTableHeaderCell[][] \\| undefined; vertical?: KoliBriTableHeaderCell[][] \\| undefined; }`                                                                                                                                                 | `undefined` |\n| `_headers`            | `_headers`           | Defines the horizontal and vertical table headers.                                                                                                                                                                                                                                                                                         | `string \\| undefined \\| { 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| `_loading`            | `_loading`           | Wether the table shows a loading spinner (default: false).                                                                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                                                                                                                                                                                 | `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",
       "kind": "spec"
     },
     {
@@ -2677,7 +2701,7 @@
       "group": "spec",
       "name": "tabs",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/tabs.md",
-      "code": "# kol-tabs\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users.\n\n## Properties\n\n| Property              | Attribute            | Description                                                                                                        | Type                                                                                                                                                                                               | Default     |\n| --------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_align`              | `_align`             | Defines the visual orientation of the component.                                                                   | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                              | `'top'`     |\n| `_behavior`           | `_behavior`          | Defines which behavior is active.                                                                                  | `\"select-automatic\" \\| \"select-manual\" \\| undefined`                                                                                                                                               | `undefined` |\n| `_hasCreateButton`    | `_has-create-button` | Defines whether the element has a create button.                                                                   | `boolean \\| undefined`                                                                                                                                                                             | `false`     |\n| `_label` _(required)_ | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                           | `undefined` |\n| `_on`                 | --                   | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.                                | `undefined \\| { onCreate?: EventCallback<Event> \\| undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent \\| KeyboardEvent \\| CustomEvent<any> \\| PointerEvent, number> \\| undefined; }` | `undefined` |\n| `_selected`           | `_selected`          | Defines which tab is active.                                                                                       | `number \\| undefined`                                                                                                                                                                              | `0`         |\n| `_tabs` _(required)_  | `_tabs`              | Defines the tab captions.                                                                                          | `TabButtonProps[] \\| string`                                                                                                                                                                       | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the currently selected tab.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the current tab button.\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",
+      "code": "# kol-tabs\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users.\n\n## Properties\n\n| Property              | Attribute            | Description                                                                                                        | Type                                                                                                                                                                                               | Default     |\n| --------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_align`              | `_align`             | Defines the visual orientation of the component.                                                                   | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                              | `'top'`     |\n| `_behavior`           | `_behavior`          | Defines which behavior is active.                                                                                  | `\"select-automatic\" \\| \"select-manual\" \\| undefined`                                                                                                                                               | `undefined` |\n| `_hasCreateButton`    | `_has-create-button` | Defines whether the element has a create button.                                                                   | `boolean \\| undefined`                                                                                                                                                                             | `false`     |\n| `_label` _(required)_ | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                           | `undefined` |\n| `_on`                 | --                   | Defines the callback functions for tabs events.                                                                    | `undefined \\| { onCreate?: EventCallback<Event> \\| undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent \\| KeyboardEvent \\| CustomEvent<any> \\| PointerEvent, number> \\| undefined; }` | `undefined` |\n| `_selected`           | `_selected`          | Defines which tab is active.                                                                                       | `number \\| undefined`                                                                                                                                                                              | `0`         |\n| `_tabs` _(required)_  | `_tabs`              | Defines the tab captions.                                                                                          | `TabButtonProps[] \\| string`                                                                                                                                                                       | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the currently selected tab.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the current tab button.\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",
       "kind": "spec"
     },
     {
@@ -2685,7 +2709,7 @@
       "group": "spec",
       "name": "textarea",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/textarea.md",
-      "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.                                                                                                                                                                                                                                                                       | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined`  |\n| `_infoPopover`        | `_info-popover`        | Defines the informational popover after the label.                                                                                                                                                                                                                                                 | `any`                                                                                                                              | `undefined`  |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                       | `string`                                                                                                                           | `undefined`  |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                                                                                                                                                                    | `number \\| undefined`                                                                                                              | `undefined`  |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                                                                                                                                                        | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                    | `'hard'`     |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                  | `Omit<AlertProps, \"_label\" \\| \"_level\" \\| \"_on\" \\| \"_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",
+      "code": "# kol-textarea\n\n\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.                                                                                                                                                                                                                                                                       | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined`  |\n| `_infoPopover`        | --                     | Defines the informational popover after the label.                                                                                                                                                                                                                                                 | `Omit<PopoverButtonProps, \"_hideLabel\" \\| \"_icons\" \\| \"_inline\"> & { _content: string; _icons: IconsPropType; } \\| 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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_level\" \\| \"_label\"> & { _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| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2693,7 +2717,7 @@
       "group": "spec",
       "name": "toolbar",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/toolbar.md",
-      "code": "# kol-toolbar\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute      | Description                                                                                                        | Type                                      | Default     |\n| --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | ----------- |\n| `_items` _(required)_ | --             | Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).                                  | `ToolbarItemPropType[]`                   | `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| `_orientation`        | `_orientation` | Defines whether the orientation of the component is horizontal or vertical.                                        | `\"horizontal\" \\| \"vertical\" \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the currently active toolbar item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the currently active toolbar item.\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",
+      "code": "# kol-toolbar\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute      | Description                                                                                                        | Type                                      | Default     |\n| --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | ----------- |\n| `_items` _(required)_ | --             | Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).                                  | `ToolbarItemPropType[]`                   | `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| `_orientation`        | `_orientation` | Defines whether the orientation of the component is horizontal or vertical.                                        | `\"horizontal\" \\| \"vertical\" \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the currently active toolbar item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the currently active toolbar item.\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",
       "kind": "spec"
     },
     {
@@ -2701,7 +2725,7 @@
       "group": "spec",
       "name": "tree",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/tree.md",
-      "code": "# kol-tree\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type     | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |\n| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the first focusable tree item.\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|      | Children as TreeItem Components |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-tree\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type     | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |\n| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the first focusable tree item.\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|      | Children as TreeItem Components |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2709,7 +2733,7 @@
       "group": "spec",
       "name": "tree-item",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/tree-item.md",
-      "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## Slots\n\n| Slot | Description                             |\n| ---- | --------------------------------------- |\n|      | Further Children as TreeItem Components |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-tree-item\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type                   | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |\n| `_active`             | `_active` | If set (to true) the tree item is the active one.                                                                  | `boolean \\| undefined` | `undefined` |\n| `_href` _(required)_  | `_href`   | Defines the target URI of the link.                                                                                | `string`               | `undefined` |\n| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`               | `undefined` |\n| `_open`               | `_open`   | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `collapse() => Promise<void>`\n\nCollapses the tree item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `expand() => Promise<void>`\n\nExpands the tree item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\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>`\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## Slots\n\n| Slot | Description                             |\n| ---- | --------------------------------------- |\n|      | Further Children as TreeItem Components |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2717,7 +2741,7 @@
       "group": "spec",
       "name": "version",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/version.md",
-      "code": "# kol-version\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Version** component renders the application version as a badge with a leading version icon.\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type     | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |\n| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n\n\n## Slots\n\n| Slot       | Description                                                                                              |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-version\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Version** component renders the application version as a badge with a leading version icon.\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type     | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |\n| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n\n\n## Slots\n\n| Slot       | Description                                                                                              |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     }
   ]