@public-ui/mcp 4.2.1 → 4.3.0-rc.0

package/shared/sample-index.json

@@ -1,16 +1,16 @@
 {
   "metadata": {
-    "generatedAt": "2026-06-04T11:13:32.523Z",
+    "generatedAt": "2026-06-08T10:22:53.076Z",
     "buildMode": "ci",
     "counts": {
-      "total": 318,
-      "totalDocs": 58,
+      "total": 323,
+      "totalDocs": 59,
       "totalSpecs": 53,
-      "totalSamples": 188,
+      "totalSamples": 192,
       "totalScenarios": 19
     },
     "repo": {
-      "commit": "903b85baecf5700095e7b28268b2cfcadd407250",
+      "commit": "6f50ffdf7f0d0b52e19c4f1db16a19d55e9bcd0a",
       "branch": "develop",
       "repoUrl": "https://github.com/public-ui/kolibri"
     }
@@ -197,7 +197,7 @@
       "group": "docs/arc42",
       "name": "09-architecture-decisions",
       "path": "docs/arc42/09-architecture-decisions.md",
-      "code": "# 9. Architecture Decisions\n\nThis section documents the significant architectural decisions made during the development of Public UI - KoliBri. Each Architecture Decision Record (ADR) captures the context, decision, and consequences of important choices, providing transparency and rationale for future maintainers and contributors.\n\n## 9.1 Decision Records\n\n### ADR-001: Use Web Components as Foundation\n\n**Status:** Accepted\n\n**Context:**\nKoliBri needs to be framework-agnostic and work with any JavaScript framework (React, Angular, Vue) or vanilla JavaScript. We need a technology that is standardized and will be supported long-term.\n\n**Decision:**\nUse Web Components (Custom Elements, Shadow DOM) as the foundation for all components.\n\n**Consequences:**\n\n- ✅ Framework-agnostic by design\n- ✅ Based on W3C standards (long-term stability)\n- ✅ Native browser support (no framework overhead)\n- ✅ True encapsulation via Shadow DOM\n- ❌ Requires polyfills for older browsers\n- ❌ Shadow DOM can complicate certain styling scenarios\n- ❌ Limited to Custom Elements API capabilities\n\n**Alternatives Considered:**\n\n- React components: Too coupled to React ecosystem\n- Framework-specific libraries: Violates framework-agnostic goal\n- Pure HTML/CSS: No component logic or reusability\n\n### ADR-002: Use Stencil.js as Compiler\n\n**Status:** Accepted\n\n**Context:**\nWriting Web Components directly is verbose and error-prone. We need a tool that improves developer experience while still generating standard Web Components.\n\n**Decision:**\nUse Stencil.js as the Web Component compiler.\n\n**Consequences:**\n\n- ✅ Excellent developer experience (TypeScript, JSX, decorators)\n- ✅ Generates framework adapters automatically\n- ✅ Optimized output (lazy loading, code splitting)\n- ✅ Strong TypeScript support\n- ❌ Dependency on Stencil project\n- ❌ Learning curve for contributors\n- ❌ Build step required\n\n**Alternatives Considered:**\n\n- Lit: Good DX, but no automatic framework adapter generation\n- Native Web Components: Too verbose, poor DX\n- Polymer: Deprecated and not actively maintained\n- Custom solution: Too much maintenance overhead\n\n### ADR-003: Separate Themes from Components\n\n**Status:** Accepted\n\n**Context:**\nDifferent organizations need different visual designs (corporate design, design systems). Coupling styling with components makes customization difficult.\n\n**Decision:**\nSeparate themes into independent packages that can be registered at runtime.\n\n**Consequences:**\n\n- ✅ Organizations can create custom themes without forking\n- ✅ Runtime theme switching possible\n- ✅ Multiple themes can be maintained independently\n- ✅ Theme updates don't require component rebuilds\n- ❌ More complex architecture\n- ❌ Theme and component versions must be synchronized\n- ❌ Additional packages to maintain\n\n**Alternatives Considered:**\n\n- CSS variables only: Insufficient for complex theming\n- Inline styles: Couples styling with logic\n- Multiple component versions: Maintenance nightmare\n- Fork per organization: Fragmentation, no collaboration\n\n### ADR-004: Use Shadow DOM for Encapsulation\n\n**Status:** Accepted\n\n**Context:**\nComponents need style isolation to prevent CSS conflicts. Global CSS in large applications often leads to unintended side effects.\n\n**Decision:**\nUse Shadow DOM for all components to achieve true style encapsulation.\n\n**Consequences:**\n\n- ✅ Perfect style isolation\n- ✅ No CSS naming conflicts\n- ✅ Components can't be accidentally broken by global styles\n- ✅ Predictable rendering behavior\n- ❌ Can't style component internals from outside (by design)\n- ❌ Some CSS selectors don't work across shadow boundary\n- ❌ Slightly more complex debugging\n\n**Alternatives Considered:**\n\n- No Shadow DOM: Style conflicts and unpredictable behavior\n- Scoped styles (like Vue): Not true encapsulation\n- CSS Modules: Requires build tooling, not standards-based\n- BEM naming: Conventions can be broken, not enforced\n\n### ADR-005: Use Adopted Style Sheets\n\n**Status:** Accepted\n\n**Context:**\nThemes need to be applied efficiently to many component instances. Traditional style injection would be inefficient and create many duplicate style elements.\n\n**Decision:**\nUse Adopted Style Sheets API for theme application.\n\n**Consequences:**\n\n- ✅ Efficient style sharing across components\n- ✅ Runtime theme switching without re-rendering\n- ✅ Memory efficient (styles shared, not duplicated)\n- ✅ Fast theme changes\n- ❌ Requires modern browser (or polyfill)\n- ❌ More complex theming implementation\n\n**Alternatives Considered:**\n\n- Style tags in each component: Inefficient, memory intensive\n- Global styles with CSS custom properties: Breaks encapsulation\n- Inline styles: Not maintainable, no CSS features\n- Single style tag: Difficult to manage, no encapsulation\n\n### ADR-006: Use TypeScript\n\n**Status:** Accepted\n\n**Context:**\nJavaScript's dynamic nature leads to runtime errors that could be caught at compile time. Component APIs need strong typing for good developer experience.\n\n**Decision:**\nWrite all code in TypeScript with strict mode enabled.\n\n**Consequences:**\n\n- ✅ Type safety catches errors early\n- ✅ Excellent IDE support (autocomplete, refactoring)\n- ✅ Self-documenting code via types\n- ✅ Better maintainability\n- ❌ Compilation step required\n- ❌ Learning curve for contributors\n- ❌ More verbose code\n\n**Alternatives Considered:**\n\n- JavaScript with JSDoc: Limited type checking\n- Flow: Less ecosystem support than TypeScript\n- Plain JavaScript: Too error-prone for large codebase\n- Reason/ReScript: Too niche, limited adoption\n\n### ADR-007: Use pnpm Workspace Monorepo\n\n**Status:** Accepted\n\n**Context:**\nKoliBri consists of many packages (components, themes, adapters, tools) that need to be developed together but released independently.\n\n**Decision:**\nUse pnpm workspace as the monorepo solution with Nx for build orchestration.\n\n**Consequences:**\n\n- ✅ Efficient dependency management\n- ✅ Shared dependencies (disk space savings)\n- ✅ Strict dependency resolution (no phantom dependencies)\n- ✅ Fast installs\n- ✅ Nx provides intelligent caching and task orchestration\n- ❌ More complex setup than single package\n- ❌ pnpm less common than npm/yarn\n- ❌ Steeper learning curve for new contributors\n\n**Alternatives Considered:**\n\n- npm workspaces: Less efficient than pnpm\n- Yarn workspaces: Phantom dependencies issue\n- Lerna: Overhead without pnpm's benefits\n- Separate repositories: Coordination nightmare\n\n### ADR-008: Five-Layer Styling Architecture\n\n**Status:** Accepted\n\n**Context:**\nStyling needs to be separated between accessibility requirements, layout structure, and visual design. Teams need to customize appearance without breaking accessibility or layout.\n\n**Decision:**\nImplement a five-layer styling architecture:\n\n1. A11y Preset Layer (accessibility baseline)\n2. Basis Global Layer (global layout)\n3. Basis Component Layer (component layout)\n4. Theme Global Layer (global theme)\n5. Theme Component Layer (component theme)\n\n**Consequences:**\n\n- ✅ Clear separation of concerns\n- ✅ Accessibility can't be accidentally broken\n- ✅ Themes can customize appearance without breaking layout\n- ✅ Predictable style precedence\n- ❌ More complex to understand initially\n- ❌ More files to maintain\n- ❌ Strict conventions required\n\n**Alternatives Considered:**\n\n- Flat CSS structure: Too easy to break things\n- Two-layer (component + theme): Insufficient separation\n- Theme-only styling: Accessibility not guaranteed\n- Inline styles with theme tokens: Not maintainable\n\n### ADR-009: Minimize CSS Custom Properties\n\n**Status:** Accepted\n\n**Context:**\nCSS custom properties (variables) cross the shadow DOM boundary and remain in the global cascade. Overuse can lead to naming conflicts and unpredictable behavior.\n\n**Decision:**\nUse CSS custom properties sparingly, only for values that must be customizable from outside. Use SASS variables for internal calculations.\n\n**Consequences:**\n\n- ✅ Prevents variable name conflicts\n- ✅ More robust components\n- ✅ Clearer API surface\n- ✅ Less confusion about what can be customized\n- ❌ Less flexibility for advanced users\n- ❌ More SASS compilation required\n\n**Alternatives Considered:**\n\n- Heavy use of CSS custom properties: Too many conflicts\n- No CSS custom properties: Not customizable enough\n- Everything as custom properties: Global namespace pollution\n- Component-specific prefixes only: Still risks conflicts\n\n### ADR-010: LTS/STS Release Model\n\n**Status:** Accepted\n\n**Context:**\nEnterprises need stable, long-supported versions. Innovation requires rapid iteration. These needs conflict.\n\n**Decision:**\nImplement a dual release model:\n\n- **LTS (Long-Term Support)**: 3 years support, conservative changes\n- **STS (Short-Term Support)**: 15 months support, rapid innovation\n\n**Consequences:**\n\n- ✅ Enterprises get stability (LTS)\n- ✅ Innovation continues (STS)\n- ✅ Clear expectations for support duration\n- ✅ Predictable upgrade cycles\n- ❌ More versions to maintain\n- ❌ More complex release management\n- ❌ Documentation for multiple versions\n\n**Alternatives Considered:**\n\n- Single release line: Can't balance stability and innovation\n- Only LTS: Slows innovation\n- Only STS: No enterprise adoption\n- Multiple concurrent majors: Too much maintenance\n\n### ADR-011: Semantic Versioning Strict Compliance\n\n**Status:** Accepted\n\n**Context:**\nUsers need to trust that updates won't break their applications unexpectedly. Clear versioning helps with dependency management.\n\n**Decision:**\nStrictly follow Semantic Versioning 2.0:\n\n- Major: Breaking changes\n- Minor: New features, backwards compatible\n- Patch: Bug fixes, backwards compatible\n\n**Consequences:**\n\n- ✅ Predictable upgrade safety\n- ✅ Clear communication of changes\n- ✅ Better dependency management\n- ✅ Trust from community\n- ❌ Major versions can come frequently\n- ❌ Deprecation process takes time\n- ❌ Cannot fix design mistakes easily\n\n**Alternatives Considered:**\n\n- Rolling releases: Unpredictable, risky\n- Calendar versioning: Doesn't communicate breaking changes\n- Loose SemVer: Erodes trust\n- Pre-1.0 forever: Signals instability\n\n### ADR-012: Auto-generate Framework Adapters\n\n**Status:** Accepted\n\n**Context:**\nSupporting multiple frameworks (React, Angular, Vue, etc.) requires framework-specific wrappers. Manually maintaining these would be time-consuming and error-prone.\n\n**Decision:**\nUse Stencil output targets to automatically generate framework adapters from component definitions.\n\n**Consequences:**\n\n- ✅ No manual adapter maintenance\n- ✅ Consistent APIs across frameworks\n- ✅ Automatic updates when components change\n- ✅ Less code to maintain\n- ❌ Dependent on Stencil output target quality\n- ❌ Limited control over generated code\n- ❌ Framework-specific quirks harder to address\n\n**Alternatives Considered:**\n\n- Manual adapters: Too much maintenance\n- Single framework: Violates framework-agnostic goal\n- No adapters (use web components directly): Poor DX in some frameworks\n- Separate adapter projects: Coordination overhead\n\n### ADR-013: SLSA Build Level 3 for Supply Chain Security\n\n**Status:** Accepted\n\n**Context:**\nSupply chain attacks are increasing. Users need assurance that published packages haven't been tampered with and were built from verified source code.\n\n**Decision:**\nImplement SLSA Build Level 3 with npm provenance for all published packages.\n\n**Consequences:**\n\n- ✅ Verifiable build provenance\n- ✅ Supply chain security\n- ✅ Increased trust from users\n- ✅ Meets government/enterprise security requirements\n- ❌ More complex CI/CD setup\n- ❌ Requires GitHub OIDC configuration\n- ❌ npm provenance support required\n\n**Alternatives Considered:**\n\n- No provenance: Less secure, doesn't meet some requirements\n- SLSA Level 1/2: Insufficient security guarantees\n- Self-signed signatures: Not verifiable by ecosystem\n- Package signing only: Doesn't prove source\n\n### ADR-014: Use Playwright for E2E Testing\n\n**Status:** Accepted\n\n**Context:**\nComponents need end-to-end testing across multiple browsers. Testing framework should support modern web technologies including Web Components and Shadow DOM.\n\n**Decision:**\nUse Playwright as the E2E testing framework.\n\n**Consequences:**\n\n- ✅ Excellent Shadow DOM support\n- ✅ Multi-browser testing (Chromium, Firefox, WebKit)\n- ✅ Fast and reliable\n- ✅ Good developer experience\n- ✅ Built-in accessibility testing (axe-core integration)\n- ❌ Learning curve for contributors\n- ❌ Test maintenance overhead\n\n**Alternatives Considered:**\n\n- Cypress: Weaker Shadow DOM support at the time\n- Puppeteer: Chrome-only, less features\n- Selenium: Older, slower, more complex\n- TestCafe: Less ecosystem support\n\n### ADR-015: Automatic Component-Level Lazy Loading via Stencil\n\n**Status:** Accepted\n\n**Context:**\nApplications using KoliBri might not need all 50+ components loaded immediately. Bundle size and performance are critical concerns for web applications.\n\n**Decision:**\nRely on Stencil's built-in lazy loading and code splitting capabilities, which automatically load only the components actually used in the application on a per-component basis.\n\n**Consequences:**\n\n- ✅ Components automatically loaded on-demand when first used\n- ✅ No manual configuration required for lazy loading\n- ✅ Minimal initial bundle size\n- ✅ Optimal performance without developer intervention\n- ✅ Each component compiled to separate bundle for efficient loading\n- ❌ Requires modern bundler support for ES modules\n- ❌ Additional HTTP requests for each component (mitigated by HTTP/2)\n\n**Alternatives Considered:**\n\n- Split into category packages: More complex maintenance, less flexible\n- Single monolithic bundle: Larger initial load, slower performance\n- Manual lazy loading: More developer burden, error-prone\n\n### ADR-016: SASS Variables for Base Theme (No Design Tokens)\n\n**Status:** Accepted\n\n**Context:**\nDesign tokens (CSS custom properties) are becoming popular for theming, but they cross the Shadow DOM boundary and can be manipulated from outside the component, potentially breaking the component's appearance and reducing robustness.\n\n**Decision:**\nUse SASS variables exclusively for internal calculations and styling in the base theme. Organizations can optionally use design tokens in their custom themes, but the base theme avoids them to maintain component robustness and prevent external manipulation.\n\n**Consequences:**\n\n- ✅ Components remain robust and predictable in all environments\n- ✅ No external manipulation of component internals via CSS variables\n- ✅ Similar maintainability benefits as design tokens (variables, calculations)\n- ✅ Organizations free to use design tokens in custom themes if desired\n- ✅ Clear separation between component-internal styling and external customization\n- ❌ Less runtime flexibility compared to CSS custom properties\n- ❌ Theme changes require recompilation rather than runtime updates\n- ❌ Cannot leverage some modern CSS features that rely on custom properties\n\n**Alternatives Considered:**\n\n- Heavy use of CSS custom properties: External manipulation risk, less robust\n- Design Tokens W3C format: Same issues as CSS custom properties for base theme\n- No variables at all: Poor maintainability, code duplication\n- Component-specific CSS variables only: Still crosses Shadow DOM boundary\n\n## 9.2 Open Decisions\n\nThese decisions are under consideration and will be addressed in future planning cycles as the project evolves and new requirements emerge.\n\n### OD-001: Server-Side Rendering Strategy\n\n**Status:** Open\n\n**Context:**\nSSR support for Web Components is complex. Current hydrate adapter is limited. Full SSR solution needed for some use cases.\n\n**Options:**\n\n1. Improve existing hydrate adapter\n2. Declarative Shadow DOM approach\n3. Partner with SSR framework projects\n4. Document limitations and workarounds\n\n**Decision Timeline:** To be reviewed in upcoming quarterly planning sessions\n",
+      "code": "# 9. Architecture Decisions\n\nThis section documents the significant architectural decisions made during the development of Public UI - KoliBri. Each Architecture Decision Record (ADR) captures the context, decision, and consequences of important choices, providing transparency and rationale for future maintainers and contributors.\n\n## 9.1 Decision Records\n\n### ADR-001: Use Web Components as Foundation\n\n**Status:** Accepted\n\n**Context:**\nKoliBri needs to be framework-agnostic and work with any JavaScript framework (React, Angular, Vue) or vanilla JavaScript. We need a technology that is standardized and will be supported long-term.\n\n**Decision:**\nUse Web Components (Custom Elements, Shadow DOM) as the foundation for all components.\n\n**Consequences:**\n\n- ✅ Framework-agnostic by design\n- ✅ Based on W3C standards (long-term stability)\n- ✅ Native browser support (no framework overhead)\n- ✅ True encapsulation via Shadow DOM\n- ❌ Requires polyfills for older browsers\n- ❌ Shadow DOM can complicate certain styling scenarios\n- ❌ Limited to Custom Elements API capabilities\n\n**Alternatives Considered:**\n\n- React components: Too coupled to React ecosystem\n- Framework-specific libraries: Violates framework-agnostic goal\n- Pure HTML/CSS: No component logic or reusability\n\n### ADR-002: Use Stencil.js as Compiler\n\n**Status:** Accepted\n\n**Context:**\nWriting Web Components directly is verbose and error-prone. We need a tool that improves developer experience while still generating standard Web Components.\n\n**Decision:**\nUse Stencil.js as the Web Component compiler.\n\n**Consequences:**\n\n- ✅ Excellent developer experience (TypeScript, JSX, decorators)\n- ✅ Generates framework adapters automatically\n- ✅ Optimized output (lazy loading, code splitting)\n- ✅ Strong TypeScript support\n- ❌ Dependency on Stencil project\n- ❌ Learning curve for contributors\n- ❌ Build step required\n\n**Alternatives Considered:**\n\n- Lit: Good DX, but no automatic framework adapter generation\n- Native Web Components: Too verbose, poor DX\n- Polymer: Deprecated and not actively maintained\n- Custom solution: Too much maintenance overhead\n\n### ADR-003: Separate Themes from Components\n\n**Status:** Accepted\n\n**Context:**\nDifferent organizations need different visual designs (corporate design, design systems). Coupling styling with components makes customization difficult.\n\n**Decision:**\nSeparate themes into independent packages that can be registered at runtime.\n\n**Consequences:**\n\n- ✅ Organizations can create custom themes without forking\n- ✅ Runtime theme switching possible\n- ✅ Multiple themes can be maintained independently\n- ✅ Theme updates don't require component rebuilds\n- ❌ More complex architecture\n- ❌ Theme and component versions must be synchronized\n- ❌ Additional packages to maintain\n\n**Alternatives Considered:**\n\n- CSS variables only: Insufficient for complex theming\n- Inline styles: Couples styling with logic\n- Multiple component versions: Maintenance nightmare\n- Fork per organization: Fragmentation, no collaboration\n\n### ADR-004: Use Shadow DOM for Encapsulation\n\n**Status:** Accepted\n\n**Context:**\nComponents need style isolation to prevent CSS conflicts. Global CSS in large applications often leads to unintended side effects.\n\n**Decision:**\nUse Shadow DOM for all components to achieve true style encapsulation.\n\n**Consequences:**\n\n- ✅ Perfect style isolation\n- ✅ No CSS naming conflicts\n- ✅ Components can't be accidentally broken by global styles\n- ✅ Predictable rendering behavior\n- ❌ Can't style component internals from outside (by design)\n- ❌ Some CSS selectors don't work across shadow boundary\n- ❌ Slightly more complex debugging\n\n**Alternatives Considered:**\n\n- No Shadow DOM: Style conflicts and unpredictable behavior\n- Scoped styles (like Vue): Not true encapsulation\n- CSS Modules: Requires build tooling, not standards-based\n- BEM naming: Conventions can be broken, not enforced\n\n### ADR-005: Use Adopted Style Sheets\n\n**Status:** Accepted\n\n**Context:**\nThemes need to be applied efficiently to many component instances. Traditional style injection would be inefficient and create many duplicate style elements.\n\n**Decision:**\nUse Adopted Style Sheets API for theme application.\n\n**Consequences:**\n\n- ✅ Efficient style sharing across components\n- ✅ Runtime theme switching without re-rendering\n- ✅ Memory efficient (styles shared, not duplicated)\n- ✅ Fast theme changes\n- ❌ Requires modern browser (or polyfill)\n- ❌ More complex theming implementation\n\n**Alternatives Considered:**\n\n- Style tags in each component: Inefficient, memory intensive\n- Global styles with CSS custom properties: Breaks encapsulation\n- Inline styles: Not maintainable, no CSS features\n- Single style tag: Difficult to manage, no encapsulation\n\n### ADR-006: Use TypeScript\n\n**Status:** Accepted\n\n**Context:**\nJavaScript's dynamic nature leads to runtime errors that could be caught at compile time. Component APIs need strong typing for good developer experience.\n\n**Decision:**\nWrite all code in TypeScript with strict mode enabled.\n\n**Consequences:**\n\n- ✅ Type safety catches errors early\n- ✅ Excellent IDE support (autocomplete, refactoring)\n- ✅ Self-documenting code via types\n- ✅ Better maintainability\n- ❌ Compilation step required\n- ❌ Learning curve for contributors\n- ❌ More verbose code\n\n**Alternatives Considered:**\n\n- JavaScript with JSDoc: Limited type checking\n- Flow: Less ecosystem support than TypeScript\n- Plain JavaScript: Too error-prone for large codebase\n- Reason/ReScript: Too niche, limited adoption\n\n### ADR-007: Use pnpm Workspace Monorepo\n\n**Status:** Accepted\n\n**Context:**\nKoliBri consists of many packages (components, themes, adapters, tools) that need to be developed together but released independently.\n\n**Decision:**\nUse pnpm workspace as the monorepo solution with Nx for build orchestration.\n\n**Consequences:**\n\n- ✅ Efficient dependency management\n- ✅ Shared dependencies (disk space savings)\n- ✅ Strict dependency resolution (no phantom dependencies)\n- ✅ Fast installs\n- ✅ Nx provides intelligent caching and task orchestration\n- ❌ More complex setup than single package\n- ❌ pnpm less common than npm/yarn\n- ❌ Steeper learning curve for new contributors\n\n**Alternatives Considered:**\n\n- npm workspaces: Less efficient than pnpm\n- Yarn workspaces: Phantom dependencies issue\n- Lerna: Overhead without pnpm's benefits\n- Separate repositories: Coordination nightmare\n\n### ADR-008: Five-Layer Styling Architecture\n\n**Status:** Accepted\n\n**Context:**\nStyling needs to be separated between accessibility requirements, layout structure, and visual design. Teams need to customize appearance without breaking accessibility or layout.\n\n**Decision:**\nImplement a five-layer styling architecture:\n\n1. A11y Preset Layer (accessibility baseline)\n2. Basis Global Layer (global layout)\n3. Basis Component Layer (component layout)\n4. Theme Global Layer (global theme)\n5. Theme Component Layer (component theme)\n\n**Consequences:**\n\n- ✅ Clear separation of concerns\n- ✅ Accessibility can't be accidentally broken\n- ✅ Themes can customize appearance without breaking layout\n- ✅ Predictable style precedence\n- ❌ More complex to understand initially\n- ❌ More files to maintain\n- ❌ Strict conventions required\n\n**Alternatives Considered:**\n\n- Flat CSS structure: Too easy to break things\n- Two-layer (component + theme): Insufficient separation\n- Theme-only styling: Accessibility not guaranteed\n- Inline styles with theme tokens: Not maintainable\n\n### ADR-009: Minimize CSS Custom Properties\n\n**Status:** Accepted\n\n**Context:**\nCSS custom properties (variables) cross the shadow DOM boundary and remain in the global cascade. Overuse can lead to naming conflicts and unpredictable behavior.\n\n**Decision:**\nUse CSS custom properties sparingly, only for values that must be customizable from outside. Use SASS variables for internal calculations.\n\n**Consequences:**\n\n- ✅ Prevents variable name conflicts\n- ✅ More robust components\n- ✅ Clearer API surface\n- ✅ Less confusion about what can be customized\n- ❌ Less flexibility for advanced users\n- ❌ More SASS compilation required\n\n**Alternatives Considered:**\n\n- Heavy use of CSS custom properties: Too many conflicts\n- No CSS custom properties: Not customizable enough\n- Everything as custom properties: Global namespace pollution\n- Component-specific prefixes only: Still risks conflicts\n\n### ADR-010: LTS/STS Release Model\n\n**Status:** Accepted\n\n**Context:**\nEnterprises need stable, long-supported versions. Innovation requires rapid iteration. These needs conflict.\n\n**Decision:**\nImplement a dual release model:\n\n- **LTS (Long-Term Support)**: 3 years support, conservative changes\n- **STS (Short-Term Support)**: 15 months support, rapid innovation\n\n**Consequences:**\n\n- ✅ Enterprises get stability (LTS)\n- ✅ Innovation continues (STS)\n- ✅ Clear expectations for support duration\n- ✅ Predictable upgrade cycles\n- ❌ More versions to maintain\n- ❌ More complex release management\n- ❌ Documentation for multiple versions\n\n**Alternatives Considered:**\n\n- Single release line: Can't balance stability and innovation\n- Only LTS: Slows innovation\n- Only STS: No enterprise adoption\n- Multiple concurrent majors: Too much maintenance\n\n### ADR-011: Semantic Versioning Strict Compliance\n\n**Status:** Accepted\n\n**Context:**\nUsers need to trust that updates won't break their applications unexpectedly. Clear versioning helps with dependency management.\n\n**Decision:**\nStrictly follow Semantic Versioning 2.0:\n\n- Major: Breaking changes\n- Minor: New features, backwards compatible\n- Patch: Bug fixes, backwards compatible\n\n**Consequences:**\n\n- ✅ Predictable upgrade safety\n- ✅ Clear communication of changes\n- ✅ Better dependency management\n- ✅ Trust from community\n- ❌ Major versions can come frequently\n- ❌ Deprecation process takes time\n- ❌ Cannot fix design mistakes easily\n\n**Alternatives Considered:**\n\n- Rolling releases: Unpredictable, risky\n- Calendar versioning: Doesn't communicate breaking changes\n- Loose SemVer: Erodes trust\n- Pre-1.0 forever: Signals instability\n\n### ADR-012: Auto-generate Framework Adapters\n\n**Status:** Accepted\n\n**Context:**\nSupporting multiple frameworks (React, Angular, Vue, etc.) requires framework-specific wrappers. Manually maintaining these would be time-consuming and error-prone.\n\n**Decision:**\nUse Stencil output targets to automatically generate framework adapters from component definitions.\n\n**Consequences:**\n\n- ✅ No manual adapter maintenance\n- ✅ Consistent APIs across frameworks\n- ✅ Automatic updates when components change\n- ✅ Less code to maintain\n- ❌ Dependent on Stencil output target quality\n- ❌ Limited control over generated code\n- ❌ Framework-specific quirks harder to address\n\n**Alternatives Considered:**\n\n- Manual adapters: Too much maintenance\n- Single framework: Violates framework-agnostic goal\n- No adapters (use web components directly): Poor DX in some frameworks\n- Separate adapter projects: Coordination overhead\n\n### ADR-013: SLSA Build Level 3 for Supply Chain Security\n\n**Status:** Accepted\n\n**Context:**\nSupply chain attacks are increasing. Users need assurance that published packages haven't been tampered with and were built from verified source code.\n\n**Decision:**\nImplement SLSA Build Level 3 with npm provenance for all published packages.\n\n**Consequences:**\n\n- ✅ Verifiable build provenance\n- ✅ Supply chain security\n- ✅ Increased trust from users\n- ✅ Meets government/enterprise security requirements\n- ❌ More complex CI/CD setup\n- ❌ Requires GitHub OIDC configuration\n- ❌ npm provenance support required\n\n**Alternatives Considered:**\n\n- No provenance: Less secure, doesn't meet some requirements\n- SLSA Level 1/2: Insufficient security guarantees\n- Self-signed signatures: Not verifiable by ecosystem\n- Package signing only: Doesn't prove source\n\n### ADR-014: Use Playwright for E2E Testing\n\n**Status:** Accepted\n\n**Context:**\nComponents need end-to-end testing across multiple browsers. Testing framework should support modern web technologies including Web Components and Shadow DOM.\n\n**Decision:**\nUse Playwright as the E2E testing framework.\n\n**Consequences:**\n\n- ✅ Excellent Shadow DOM support\n- ✅ Multi-browser testing (Chromium, Firefox, WebKit)\n- ✅ Fast and reliable\n- ✅ Good developer experience\n- ✅ Built-in accessibility testing (axe-core integration)\n- ❌ Learning curve for contributors\n- ❌ Test maintenance overhead\n\n**Alternatives Considered:**\n\n- Cypress: Weaker Shadow DOM support at the time\n- Puppeteer: Chrome-only, less features\n- Selenium: Older, slower, more complex\n- TestCafe: Less ecosystem support\n\n### ADR-015: Automatic Component-Level Lazy Loading via Stencil\n\n**Status:** Accepted\n\n**Context:**\nApplications using KoliBri might not need all 50+ components loaded immediately. Bundle size and performance are critical concerns for web applications.\n\n**Decision:**\nRely on Stencil's built-in lazy loading and code splitting capabilities, which automatically load only the components actually used in the application on a per-component basis.\n\n**Consequences:**\n\n- ✅ Components automatically loaded on-demand when first used\n- ✅ No manual configuration required for lazy loading\n- ✅ Minimal initial bundle size\n- ✅ Optimal performance without developer intervention\n- ✅ Each component compiled to separate bundle for efficient loading\n- ❌ Requires modern bundler support for ES modules\n- ❌ Additional HTTP requests for each component (mitigated by HTTP/2)\n\n**Alternatives Considered:**\n\n- Split into category packages: More complex maintenance, less flexible\n- Single monolithic bundle: Larger initial load, slower performance\n- Manual lazy loading: More developer burden, error-prone\n\n### ADR-016: SASS Variables for Base Theme (No Design Tokens)\n\n**Status:** Accepted\n\n**Context:**\nDesign tokens (CSS custom properties) are becoming popular for theming, but they cross the Shadow DOM boundary and can be manipulated from outside the component, potentially breaking the component's appearance and reducing robustness.\n\n**Decision:**\nUse SASS variables exclusively for internal calculations and styling in the base theme. Organizations can optionally use design tokens in their custom themes, but the base theme avoids them to maintain component robustness and prevent external manipulation.\n\n**Consequences:**\n\n- ✅ Components remain robust and predictable in all environments\n- ✅ No external manipulation of component internals via CSS variables\n- ✅ Similar maintainability benefits as design tokens (variables, calculations)\n- ✅ Organizations free to use design tokens in custom themes if desired\n- ✅ Clear separation between component-internal styling and external customization\n- ❌ Less runtime flexibility compared to CSS custom properties\n- ❌ Theme changes require recompilation rather than runtime updates\n- ❌ Cannot leverage some modern CSS features that rely on custom properties\n\n**Alternatives Considered:**\n\n- Heavy use of CSS custom properties: External manipulation risk, less robust\n- Design Tokens W3C format: Same issues as CSS custom properties for base theme\n- No variables at all: Poor maintainability, code duplication\n- Component-specific CSS variables only: Still crosses Shadow DOM boundary\n\n### ADR-017: Skeleton Component Architecture Pattern\n\n**Status:** Accepted\n\n**Context:**\nComponents in KoliBri follow different architectural patterns (legacy Schema-based vs. modern Skeleton). As components are modernized through skeleton migration, a clear pattern needs to be established to ensure consistency and maintainability across the codebase.\n\n**Decision:**\nAll new and refactored components adopt the **Skeleton Architecture Pattern**:\n\n1. **Web Component** (`src/components/[name]/component.tsx`): Stencil component with lifecycle, property decorators, and event emission\n2. **Controller** (`src/internal/functional-components/[name]/controller.ts`): Pure logic layer, extends `BaseController<Api>`\n3. **Functional Component** (`src/internal/functional-components/[name]/component.tsx`): Stateless render function (`FC<FunctionalComponentProps<Api>>`)\n4. **API Definition** (`src/internal/functional-components/[name]/api.tsx`): Type-safe prop/event/callback contracts via `PropsConfigShape` and `ApiFromConfig`\n\nThis provides:\n\n- Clear separation of concerns (presentation vs. logic)\n- Type-safe component boundaries\n- Reusable controller logic\n- Testable units at each layer\n\n**Consequences:**\n\n- ✅ Consistent architecture across all components\n- ✅ Type safety at compile time via `WebComponentInterface<Api>`\n- ✅ Predictable structure for new contributors\n- ✅ Easier testing (controllers independent of Stencil)\n- ✅ Clear contract enforcement (`PropsConfigShape` prevents missing validators/watchers)\n- ❌ Migration effort for legacy components\n- ❌ More boilerplate than legacy patterns\n- ❌ Larger codebase footprint per component\n\n**Related Practice: Dead Schema Detection**\n\nWhen migrating components to Skeleton architecture, legacy Schemas in `packages/components/src/schema/components/*.ts` become obsolete. These must be identified and removed to prevent stale type definitions:\n\n```bash\n# After skeleton migration, check if old schema is still imported:\ngrep -r \"from '../../schema/components/COMPONENT_NAME'\" packages/components/src --include=\"*.ts*\"\n\n# If 0 results → schema is dead → remove from:\n# 1. packages/components/src/schema/components/COMPONENT_NAME.ts (delete file)\n# 2. packages/components/src/schema/index.ts (remove re-export)\n```\n\nRemoving dead schemas prevents:\n\n- Type definition duplication\n- Accidental usage of outdated APIs\n- Confusion between legacy and modern prop patterns\n- Unnecessary compilation overhead\n\n**Alternatives Considered:**\n\n- Flat legacy pattern: Less structure, harder to test and maintain\n- Schema-only definitions: No separation of presentation and logic\n- Incremental patterns: Inconsistency across codebase\n- No forced migration: Maintenance burden, inconsistent DX\n\n**Migration Checklist:**\n\n- [ ] New API definition created with `PropsConfigShape` + `ApiFromConfig`\n- [ ] Controller extends `BaseController<Api>` and implements `componentWillLoad()`\n- [ ] Functional component is stateless and receives all state via props\n- [ ] Web component creates controller and manages Stencil lifecycle\n- [ ] Prop triangle complete (field + `@Prop()` + `@Watch()` + `componentWillLoad()` init)\n- [ ] Old schema file identified and dependency check run\n- [ ] Dead schema file deleted if no dependencies remain\n- [ ] Schema re-export removed from `schema/index.ts`\n- [ ] Tests updated to use new API\n- [ ] Migration documented in `MIGRATION.md` if consumer-facing\n\n---\n\n## 9.2 Open Decisions\n\nThese decisions are under consideration and will be addressed in future planning cycles as the project evolves and new requirements emerge.\n\n### OD-001: Server-Side Rendering Strategy\n\n**Status:** Open\n\n**Context:**\nSSR support for Web Components is complex. Current hydrate adapter is limited. Full SSR solution needed for some use cases.\n\n**Options:**\n\n1. Improve existing hydrate adapter\n2. Declarative Shadow DOM approach\n3. Partner with SSR framework projects\n4. Document limitations and workarounds\n\n**Decision Timeline:** To be reviewed in upcoming quarterly planning sessions\n",
       "kind": "doc"
     },
     {
@@ -448,6 +448,14 @@
       "code": "# Security/Sicherheit\n\n## CVE Overview\n\nSee [CVE_OVERVIEW.md](./CVE_OVERVIEW.md) for an automated overview of security vulnerabilities across all KoliBri versions.\n\n## Report security issues (EN)\n\nIf you believe you have found a security vulnerability in our project, we encourage you to let us know immediately. We will investigate all legitimate reports and do our best to fix the problem quickly.\n\nContact: [kolibri@itzbund.de](mailto:kolibri@itzbund.de)\n\n## Melden von Sicherheitsproblemen (DE)\n\nWenn Sie glauben, dass Sie eine Sicherheitslücke in unserm Projekt gefunden haben, empfehlen wir Ihnen, uns dies umgehend mitzuteilen. Wir werden alle legitimen Meldungen untersuchen und unser Bestes tun, um das Problem schnell zu beheben.\n",
       "kind": "doc"
     },
+    {
+      "id": "doc/SKELETON_AUDIT_REPORT",
+      "group": "docs",
+      "name": "SKELETON_AUDIT_REPORT",
+      "path": "SKELETON_AUDIT_REPORT.md",
+      "code": "# Skeleton Implementation Audit Report\n\n**Datum:** 2026-06-02  \n**Status:** 🚫 Build-Blockade erkannt (Phase 0) — Audit trotzdem vollständig durchgeführt  \n**Umfang:** Alle Skeleton-bezogenen Implementierungen  \n**Effort:** High (systematische Analyse aller Komponenten)\n\n---\n\n## Executive Summary\n\n### Übersicht\n\nDie Skeleton-Implementierungen im Projekt folgen einem **konsistenten Pattern**, sind aber durch mehrere **Mängel** gekennzeichnet:\n\n**Gefundene Implementierungen:**\n1. `_skeleton/web-components/skeleton/` — Template-Komponente (KolSkeleton)\n2. `_skeleton/web-components/click-button/` — Button-Komponente im Template\n3. `internal/functional-components/skeleton/` — Skeleton FC + Controller\n4. `internal/functional-components/click-button/` — ClickButton FC + Controller\n\n**Build-Status (Phase 0):** 🚫 **BLOCKADE**\n- TypeScript-Fehler in `KolFocusOptions` ↔ native `FocusOptions` (systemisch)\n- Build bricht — verhindert Validierung auf echtem Build\n\n**Konsistenz-Grade:**\n- ✅ **Hoch:** Controller-Pattern, Props-Handling, JSDoc-Struktur\n- 🟡 **Mittel:** Event-Propagation, Type-Safety, Error-Handling\n- 🚫 **Niedrig:** Memory-Leak-Risiken, Testing-Abdeckung, Focus-Management\n\n---\n\n## 🔍 Detaillierte Analysen\n\n### 1. KolSkeleton Component (`_skeleton/web-components/skeleton/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/components/_skeleton/web-components/skeleton/component.tsx`\n\n#### ✅ Stärken\n- Korrekte Stencil-Dekoration (`@Component`, `@Prop`, `@Event`, `@Method`, `@Listen`, `@Watch`)\n- JSDoc-Kommentare auf allen `@Prop`, `@Event`, `@Method` vorhanden\n- Korrektes Lifecycle-Pattern (componentWillLoad, componentDidLoad, disconnectedCallback)\n- Typsicher: `SkeletonApi` zentral definiert\n\n#### 🔴 Critical Issues\n\n**1. Fehlerhafte Focus-Delegation (Line 22)**\n```typescript\n@Method()\n@ctrlFocus('ctrl')\npublic async focus(options?: KolFocusOptions): Promise<void> {}\n```\n**Problem:**\n- `@ctrlFocus` Decorator wird verwendet, aber `delegateFocus` ist der aktuelle Standard (lt. memory: focus-delegation-pattern.md)\n- `KolFocusOptions` ist nicht kompatibel mit nativer `FocusOptions` → **Build-Blockade**\n- Decorator-Pattern sollte `delegateFocus('ref')` sein (wie in ClickButton)\n\n**Priorität:** 🔴 **HIGH** (Breaking + systemisch)  \n**Fix:** Focus-Methode korrekt implementieren wie in `ClickButton`\n\n**2. Memory Leak durch `.bind(this)` in handleClick (Line 59)**\n```typescript\n@Listen('keydown')\npublic handleKeyDown(event: KeyboardEvent): void {\n  // ...\n  this.ctrl.handleClick();  // ✅ OK — direkt, kein .bind()\n}\n```\n**Positive Beobachtung:** KolSkeleton nutzt `this.ctrl.handleClick()` korrekt (kein `.bind()`).\n\n**3. Fehlende Error-Handling bei Event-Emits (Lines 84-86)**\n```typescript\nthis.ctrl.setOnLoadedCallback((count: number) => {\n  this.loaded.emit(count);  // Kein try-catch\n});\n```\n**Problem:** Wenn `emit()` wirft → Component crashed still.  \n**Priorität:** 🟡 **MEDIUM**  \n**Fix:** `try-catch` um Event-Emission oder defensive Implementierung\n\n**4. Window-Listener ohne Cleanup (Line 73-76)**\n```typescript\n@Listen('keydown', { target: 'window' })\npublic onKeydown(event: KeyboardEvent): void {\n  this.ctrl.onKeydown(event);\n}\n```\n**Problem:** `@Listen` mit `target: 'window'` wird automatisch von Stencil bereinigt, aber **dokumentation fehlt**.  \n**Priorität:** 🟡 **MEDIUM** (Doku-Mangel)  \n**Fix:** JSDoc-Kommentar: \"Auto-cleaned by Stencil\"\n\n#### 🟡 High Issues\n\n**5. Type-Assertion in SkeletonFC Props (Line 105)**\n```typescript\nname={this.ctrl.getRenderProp('name')}  // ✅ Typsicher\n```\n**Status:** OK — keine Assertions.\n\n**6. Fehlende JSDoc auf State-Feldern (Lines 46-53)**\n```typescript\n@State()\npublic count: number = 0;\n\n@State()\npublic label: string = 'Label';\n```\n**Problem:** State-Felder ohne JSDoc, obwohl sie durch Events exponiert werden.  \n**Priorität:** 🟡 **MEDIUM**  \n**Fix:** JSDoc-Kommentare hinzufügen\n\n---\n\n### 2. KolClickButton Component (`_skeleton/web-components/click-button/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/components/_skeleton/web-components/click-button/component.tsx`\n\n#### ✅ Stärken\n- Minimal, fokussiert (Single Responsibility)\n- Korrekte `delegateFocus` Implementierung (Line 37)\n- Saubere Ref-Handling mit `createCtaRef`\n- Props-Binding korrekt\n\n#### 🚫 Critical Issues\n\n**1. Focus-Options Type-Mismatch (Line 40)**\n```typescript\n@Method()\n@delegateFocus('buttonRef')\npublic async focus(options?: KolFocusOptions): Promise<void> {}\n```\n**Problem:** Decorator erwartet `KolFocusOptions`, aber `delegateFocus` nutzt `setFocus()` welches mit `FocusOptions` arbeitet.  \n**Impact:** Build-Fehler in `accordion/shadow.tsx:48` (type constraint violation)\n\n**Priorität:** 🔴 **HIGH** (systemisch)  \n**Fix:** Type-Signature anpassen oder Decorator aktualisieren\n\n**2. Fehlende JSDoc auf Prop (Lines 23-26)**\n```typescript\n/**\n * Sets the label of the click button component.\n */\n@Prop()\npublic _label!: string;\n```\n**Status:** ✅ OK — JSDoc vorhanden\n\n#### 🟡 High Issues\n\n**3. onClick Handler Type-Safety (Line 57)**\n```typescript\nhandleClick={this.ctrl.handleClick}\n```\n**Problem:** `this.ctrl.handleClick` wird direkt passed — wenn Signature ändert, bricht es still.  \n**Priorität:** 🟡 **MEDIUM**  \n**Fix:** Arrow-Function: `handleClick={() => this.ctrl.handleClick()}`\n\n---\n\n### 3. SkeletonController (`internal/functional-components/skeleton/controller.ts`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/skeleton/controller.ts`\n\n#### 🔴 Critical Issues\n\n**1. Memory Leak: setInterval ohne Cleanup-Dokumentation (Lines 63-68)**\n```typescript\nprivate startLoadedEventInterval(): void {\n  this.intervalId = setInterval(() => {\n    this.emitLoaded(this.getState?.('count') ?? 0);\n  }, 2000);\n}\n```\n**Problem:**\n- ✅ `intervalId` wird in `destroy()` gelöscht (Line 86)\n- 🚫 **Aber:** `destroy()` wird NUR in `disconnectedCallback()` aufgerufen\n- 🚫 **Große Lücke:** Wenn Component nicht destruktiv entfernt wird (z.B. `display: none`), läuft Interval endlos\n- 🚫 **Kein Dokumentation** warum `destroy()` nötig ist\n\n**Priorität:** 🔴 **CRITICAL** (Speicherleck in Production)  \n**Fix:**\n```typescript\n// JSDoc dokumentieren\n/**\n * Startet den Loaded-Event-Interval.\n * WICHTIG: destroy() muss in disconnectedCallback() aufgerufen werden,\n * sonst läuft der Interval im Hintergrund.\n */\n```\n\n**2. Unzureichende State-Initialisierung (Lines 37-39)**\n```typescript\npublic toggle(): void {\n  this.setState('show', !(this.getState?.('show') ?? false));\n}\n```\n**Problem:** `getState?.('show')` kann `undefined` sein — `?? false` ist defensiv, aber:\n- Default sollte in BaseController oder State-Definition sein, nicht hier\n- Keine Konsistenz mit `count` (Line 51 in component.tsx)\n\n**Priorität:** 🟡 **MEDIUM**  \n**Fix:** State-Defaults zentral definieren\n\n**3. Console.log statt Log.debug (Line 44)**\n```typescript\nconsole.log('Show should be toggled');\n```\n**Problem:** Inkonsistent mit anderen Zeilen die `Log.debug()` nutzen (z.B. SkeletonFC).  \n**Priorität:** 🟢 **LOW**  \n**Fix:** `Log.debug()` verwenden\n\n**4. Keine Error-Handling in emitLoaded (Lines 70-77)**\n```typescript\nprivate emitLoaded(count: number): void {\n  if (this.onLoadedCallback) {\n    this.onLoadedCallback(count);  // Kein try-catch\n  }\n}\n```\n**Problem:** Wenn Callback wirft → Component-State wird inkonsistent.  \n**Priorität:** 🟡 **MEDIUM**\n\n#### 🟡 High Issues\n\n**5. ClickButtonController Instanz ohne State-Zugriff (Line 18)**\n```typescript\nthis.clickButtonCtrl = new ClickButtonController(BaseWebComponent.stateLess);\n```\n**Problem:** `stateLess` ist korrekt, aber:\n- Keine Dokumentation **warum** ClickButton stateless\n- Wenn jemand State hinzufügt → silentes Bug\n\n**Priorität:** 🟡 **MEDIUM**  \n**Fix:** JSDoc-Kommentar\n\n---\n\n### 4. ClickButtonController (`internal/functional-components/click-button/controller.ts`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/click-button/controller.ts`\n\n#### ✅ Stärken\n- Minimal, einfach zu verstehen\n- Korrekte Props-Handling (`watchLabel`)\n- Fokus-Delegation delegiert korrekt an `setFocus()`\n\n#### 🔴 Critical Issues\n\n**1. Memory Leak durch `.bind(this)` auf Line 32**\n```typescript\npublic handleClick = (): void => {\n  console.log(this, this.buttonRef, 'button clicked');\n};\n```\n**Status:** ✅ OK — Arrow-Function (kein `.bind()`)\n\n**2. Type-Safety in setButtonRef (Line 37)**\n```typescript\npublic setButtonRef = (element?: HTMLButtonElement): void => {\n  this.buttonRef = element;\n};\n```\n**Status:** ✅ OK — typsicher\n\n#### 🟡 High Issues\n\n**3. Console.log statt Log (Line 34)**\n```typescript\nconsole.log(this, this.buttonRef, 'button clicked');\n```\n**Problem:** \n- Nicht über Log-System\n- Logs `this` (ganze Controller-Instanz) → potenzielle Datenexposition\n\n**Priorität:** 🟡 **MEDIUM**  \n**Fix:** `Log.debug()` mit spezifischen Values\n\n**4. Fehlende JSDoc auf focus() (Line 22)**\n```typescript\npublic async focus(options?: KolFocusOptions): Promise<void> {\n  return setFocus(this.buttonRef, options);\n}\n```\n**Problem:** \n- `KolFocusOptions` Type-Mismatch (systemisch)\n- Keine Dokumentation dass async ist\n\n**Priorität:** 🟡 **MEDIUM**\n\n---\n\n### 5. SkeletonFC (`internal/functional-components/skeleton/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/skeleton/component.tsx`\n\n#### ✅ Stärken\n- Functional Component sauber\n- BEM-Klasse-Generierung konsistent\n- Props korrekt destructured\n\n#### 🟡 High Issues\n\n**1. Event-Propagation nicht dokumentiert (Line 15)**\n```typescript\nexport const SkeletonFC: FC<FunctionalComponentProps<SkeletonApi>> = (props) => {\n  const { count, label, name, show, handleClick, refButton } = props;\n```\n**Problem:**\n- Event `onLoaded`, `onRendered` werden in Props passed, aber **nicht in FC genutzt**\n- Diese Events werden in KolSkeleton component direkt emittet, nicht über FC\n- **Inkonsistenz:** Props definieren Events, aber FC nutzt sie nicht\n\n**Priorität:** 🟡 **MEDIUM**  \n**Fix:** Dokumentation oder Props bereinigen\n\n**2. Props-Typ unsicher (Line 15)**\n```typescript\nFunctionalComponentProps<SkeletonApi>\n```\n**Problem:** `FunctionalComponentProps<T>` ist zu allgemein — was genau wird erwartet?  \n**Priorität:** 🟡 **MEDIUM**\n\n---\n\n### 6. ClickButtonFC (`internal/functional-components/click-button/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/click-button/component.tsx`\n\n#### ✅ Stärken\n- Sehr sauber, minimal\n- onClick Handler korrekt\n- BEM-Klassen konsistent\n\n#### 🟡 High Issues\n\n**1. onKeyDown PreventDefault ohne Dokumentation (Line 13)**\n```typescript\nonKeyDown={(event) => event.preventDefault()}\n```\n**Problem:**\n- **Warum wird keydown preventDefaultet?** Keine Dokumentation\n- Das ist ungewöhnlich für ein Button-Element\n- Könnte Accessibility-Problem sein\n\n**Priorität:** 🟡 **MEDIUM**  \n**Fix:** JSDoc-Kommentar erklären warum\n\n---\n\n### 7. Testing & Snapshots\n\n#### Skeleton Snapshot Tests (`_skeleton/web-components/skeleton/snapshot.spec.tsx`)\n\n```typescript\nexecuteSnapshotTests<SkeletonSnapshotProps>(KOL_SKELETON_TAG, [KolSkeleton], [\n  { _name: 'Ada Lovelace' }, \n  { _name: '' }\n]);\n```\n\n**Status:** 🟡 **Minimal**\n- ✅ Two snapshot variants tested\n- 🚫 **Fehlt:** \n  - `show=true` vs `show=false` variant\n  - `count` variations\n  - Edge case: sehr lange Name\n  - **State wird nicht tested** (nur Props)\n\n**Priorität:** 🟡 **MEDIUM**  \n**Empfehlung:** Snapshots erweitern\n\n#### ClickButton Snapshot Tests (`_skeleton/web-components/click-button/snapshot.spec.tsx`)\n\n```typescript\nexecuteSnapshotTests<ClickButtonSnapshotProps>(KOL_CLICK_BUTTON_TAG, [KolClickButton], [\n  { _label: 'Click me' }, \n  { _label: 'Submit form' }\n]);\n```\n\n**Status:** 🟡 **Minimal**\n- ✅ Two label variants\n- 🚫 **Fehlt:** \n  - Edge cases (empty label, very long label)\n  - Disabled state (if supported)\n  - Focus state\n\n**Priorität:** 🟡 **MEDIUM**\n\n#### E2E Tests (`_skeleton/web-components/click-button/interaction.e2e.ts`)\n\n```typescript\ntest('should call handleClick when clicked', async ({ page }) => {\n  const logMessages: string[] = [];\n  page.on('console', (msg) => {\n    logMessages.push(msg.text());\n  });\n  await page.getByRole('button', { name: 'Click' }).click();\n  expect(logMessages.length).toBeGreaterThan(0);\n});\n```\n\n**Status:** 🟡 **Minimal**\n- ✅ Using accessibility role (correct)\n- 🚫 **Fehlt:**\n  - Keyboard interaction test (Space, Enter)\n  - Focus test\n  - Event-Listener test (addEventListener pattern)\n  - **Log assertion fragile:** `logMessages.length > 0` ist zu vage\n\n**Priorität:** 🟡 **MEDIUM**  \n**Empfehlung:** E2E-Tests erweitern nach team3 Kriterien\n\n---\n\n### 8. API & Type Definitions\n\n#### SkeletonApi (`internal/functional-components/skeleton/api.tsx`)\n\n```typescript\nexport type SkeletonApi = ApiFromConfig<\n  typeof skeletonPropsConfig,\n  {\n    Callbacks: { click: () => void };\n    Emitters: { loaded: number; rendered: void };\n    Listeners: { keydown: KeyboardEvent };\n    Methods: { focus: (options?: KolFocusOptions) => void; toggle: () => void };\n    Refs: { button: HTMLButtonElement };\n    States: { count: number; label: string; show: boolean };\n  }\n>;\n```\n\n**Status:** 🟡 **Konsistent, aber Lücken**\n- ✅ Alle Props typsicher\n- ✅ Alle Emitters definiert\n- 🚫 **Probleme:**\n  - `KolFocusOptions` ist problematisch (systemisch)\n  - `Listeners` mit `keydown` ist ungewöhnlich — sollte über Events handled werden?\n  - `Callbacks: click` wird nie genutzt (nur `handleClick` Arrow-Funktion)\n\n**Priorität:** 🟡 **MEDIUM**\n\n---\n\n## 📊 Konsistenz-Analyse\n\n### Pattern Konsistenz (Web Components ↔ Functional Components)\n\n| Aspekt | KolSkeleton | KolClickButton | Standard | Status |\n|--------|-------------|----------------|----------|--------|\n| **Component-Dekor** | ✅ `@Component` | ✅ `@Component` | — | ✅ OK |\n| **Props** | ✅ `@Prop` + `@Watch` | ✅ `@Prop` + `@Watch` | — | ✅ OK |\n| **Events** | ✅ `@Event` | 🚫 Keine | Required | 🔴 MISMATCH |\n| **Methods** | ✅ `@Method` | ✅ `@Method` | — | ✅ OK |\n| **Listen** | ✅ `@Listen` | 🚫 Keine | Optional | 🟡 OK |\n| **State** | ✅ `@State` | 🚫 Keine | Optional | ✅ OK |\n| **JSDoc** | ✅ `@Prop/@Event` | ✅ `@Prop/@Method` | Pflicht | ✅ OK |\n| **Focus** | 🔴 `@ctrlFocus` | ✅ `@delegateFocus` | `delegateFocus` | 🔴 MISMATCH |\n| **Lifecycle** | ✅ componentWillLoad, componentDidLoad, disconnectedCallback | ✅ componentWillLoad | — | ✅ OK |\n\n**Konsistenz-Probleme:**\n- 🔴 **CRITICAL:** Focus-Pattern unterschiedlich (ctrlFocus vs delegateFocus)\n- 🔴 **CRITICAL:** KolSkeleton hat Events, KolClickButton nicht\n- 🚫 **Wird nicht repariert durch Template** (Template ist Guide, nicht Copy-Paste)\n\n---\n\n## 🔴 Mängelliste (priorisiert)\n\n### 🔴 CRITICAL (Blocker)\n\n#### 1. Focus-Type Mismatch (systemisch)\n**Files:** Alle Komponenten mit `delegateFocus` oder `ctrlFocus`  \n**Issue:** `KolFocusOptions` ↔ native `FocusOptions` Inkompatibilität  \n**Impact:** Build bricht  \n**Fix:** Type-Alignment in `KolFocusOptions` ← `FocusOptions`  \n**Effort:** High (systemisch, viele Dateien betroffen)\n\n#### 2. KolSkeleton: Fehlerhafte Focus-Decoration (Line 22)\n**File:** `_skeleton/web-components/skeleton/component.tsx`  \n**Issue:** `@ctrlFocus('ctrl')` verwenden, aber sollte `delegateFocus('ref')` sein  \n**Fix:** Pattern wie ClickButton übernehmen  \n**Effort:** Low\n\n#### 3. SkeletonController: Memory Leak (Interval ohne Cleanup-Dokumentation)\n**File:** `internal/functional-components/skeleton/controller.ts:63-68`  \n**Issue:** `setInterval()` läuft im Hintergrund wenn Component nicht destruktiv entfernt  \n**Fix:** JSDoc-Dokumentation + Verify Cleanup-Path  \n**Effort:** Low\n\n---\n\n### 🟡 HIGH (Quality / Safety)\n\n#### 4. Event-Emission ohne Error-Handling\n**Files:** \n- `_skeleton/web-components/skeleton/component.tsx:84`\n- `internal/functional-components/skeleton/controller.ts:74`\n\n**Issue:** `emit()` kann werfen, kein try-catch  \n**Fix:** `try-catch` um Event-Emits  \n**Effort:** Low\n\n#### 5. KolClickButton: onClick Handler Type-Safety (Line 57)\n**File:** `_skeleton/web-components/click-button/component.tsx`  \n**Issue:** `handleClick={this.ctrl.handleClick}` direkt passed — keine Arrow-Func  \n**Fix:** `handleClick={() => this.ctrl.handleClick()}`  \n**Effort:** Trivial\n\n#### 6. Console.log statt Log-System\n**Files:**\n- `internal/functional-components/skeleton/controller.ts:44`\n- `internal/functional-components/click-button/controller.ts:34`\n\n**Issue:** Nicht über Log-System, potenzielle Datenexposition  \n**Fix:** `Log.debug()` mit spezifischen Values  \n**Effort:** Trivial\n\n#### 7. ClickButtonFC: onKeyDown preventDefault ohne Dokumentation (Line 13)\n**File:** `internal/functional-components/click-button/component.tsx`  \n**Issue:** **Warum preventDefault?** Keine Dokumentation — könnte A11y-Problem sein  \n**Fix:** JSDoc erklären oder entfernen wenn nicht nötig  \n**Effort:** Low\n\n#### 8. Missing JSDoc on State Fields\n**File:** `_skeleton/web-components/skeleton/component.tsx:46-53`  \n**Issue:** `@State count`, `@State label`, `@State show` ohne JSDoc  \n**Fix:** JSDoc-Kommentare hinzufügen  \n**Effort:** Trivial\n\n#### 9. Window-Listener Stencil Auto-Cleanup nicht dokumentiert\n**File:** `_skeleton/web-components/skeleton/component.tsx:73`  \n**Issue:** `@Listen('keydown', { target: 'window' })` — Auto-Cleanup Stencil-Feature nicht dokumentiert  \n**Fix:** JSDoc-Kommentar  \n**Effort:** Trivial\n\n---\n\n### 🟢 LOW (Code Quality)\n\n#### 10. State Default-Handling inkonsistent\n**File:** `internal/functional-components/skeleton/controller.ts:38`  \n**Issue:** `getState?.('show') ?? false` — Defaults sollten zentral sein  \n**Fix:** Refactor State-Defaults in BaseController  \n**Effort:** Medium (aber nice-to-have)\n\n#### 11. SkeletonFC: Event-Props nicht genutzt\n**File:** `internal/functional-components/skeleton/component.tsx:15-31`  \n**Issue:** `onLoaded`, `onRendered` werden in Props definiert, aber nicht in FC genutzt  \n**Fix:** Dokumentation oder Props-Cleanup  \n**Effort:** Low\n\n#### 12. Testing: Minimal Coverage\n**Files:**\n- `_skeleton/web-components/skeleton/snapshot.spec.tsx`\n- `_skeleton/web-components/click-button/snapshot.spec.tsx`\n- `_skeleton/web-components/click-button/interaction.e2e.ts`\n\n**Issue:** Nur Happy-Path getestet, Edge Cases + State Variations fehlen  \n**Fix:** Tests erweitern (show=false, count variation, empty label, keydown events)  \n**Effort:** Medium\n\n#### 13. ClickButtonController: Type-Generification fragile\n**File:** `internal/functional-components/click-button/controller.ts`  \n**Issue:** `setButtonRef` erwartet `HTMLButtonElement` — was wenn in anderen Komponenten anders?  \n**Fix:** Generische Type-Parameter oder Dokumentation  \n**Effort:** Low (nice-to-have)\n\n---\n\n## 📋 Empfehlungen (Implementierungs-Roadmap)\n\n### Phase 1: Kritische Fixes (BLOCKING)\n\n1. **Fix Focus-Type Mismatch (systemisch)**\n   - `KolFocusOptions` → `FocusOptions` Alignment\n   - Oder: Bridge-Type erstellen\n   - **Effort:** High  \n   - **Impact:** Unblocks Build\n\n2. **Fix KolSkeleton Focus-Decoration**\n   - `@ctrlFocus` → `@delegateFocus('buttonRef')`\n   - **Effort:** Low  \n   - **Impact:** Pattern-Konsistenz\n\n3. **Document SkeletonController Memory Leak**\n   - JSDoc auf `startLoadedEventInterval()`\n   - Verify `destroy()` Call in `disconnectedCallback()`\n   - **Effort:** Trivial  \n   - **Impact:** Prevents Production Issue\n\n### Phase 2: Quality Fixes (Safety)\n\n4. Event-Emission Error-Handling\n   - Try-catch um `emit()` calls\n   - **Effort:** Low\n\n5. Console → Log-System\n   - Replace `console.log` with `Log.debug`\n   - **Effort:** Trivial\n\n6. JSDoc auf State-Feldern + Window-Listener\n   - **Effort:** Trivial\n\n7. ClickButtonFC: preventDefault Dokumentation\n   - **Effort:** Low\n\n### Phase 3: Test Expansion\n\n8. Snapshot Tests erweitern\n   - Edge Cases (empty, very long, state variations)\n   - **Effort:** Medium\n\n9. E2E Tests erweitern\n   - Keyboard interactions (Space, Enter, Tab)\n   - Focus management\n   - Event-Listener pattern testing\n   - **Effort:** Medium\n\n---\n\n## 🎯 Einheitliche Implementierungs-Standards (etabliert)\n\nBasierend auf Audit sollten folgende Standards **template-übergreifend** dokumentiert werden:\n\n### Web Component Standards\n\n```typescript\n// ✅ KORREKT\n@Component({ tag: 'kol-xxx', shadow: true })\nexport class KolXxx extends BaseWebComponent<XxxApi> implements WebComponentInterface<XxxApi> {\n  private readonly ctrl = new XxxController(this.stateAccess);\n\n  @Prop()\n  public _prop!: string;\n\n  @Watch('_prop')\n  public watchProp(value?: string): void {\n    this.ctrl.watchProp(value);\n  }\n\n  @Method()\n  @delegateFocus('ref')  // Neu Standard\n  public async focus(options?: KolFocusOptions): Promise<void> {}\n\n  @Event()\n  public emitted!: EventEmitter<void>;\n\n  @Listen('keydown')\n  public handleKeydown(event: KeyboardEvent): void {\n    this.ctrl.handleKeydown(event);\n  }\n\n  public componentWillLoad(): void {\n    this.ctrl.componentWillLoad({ prop: this._prop });\n  }\n\n  public componentDidLoad(): void {\n    // Cleanup subscriptions, etc.\n  }\n\n  public disconnectedCallback(): void {\n    this.ctrl.destroy();  // Wichtig für Memory Leak Prevention\n  }\n\n  public render(): JSX.Element {\n    return <Host><XxxFC {...props} /></Host>;\n  }\n}\n```\n\n### Controller Standards\n\n```typescript\n// ✅ KORREKT\nexport class XxxController extends BaseController<XxxApi> {\n  public constructor(stateAccess: StateAccess<XxxApi>) {\n    super(stateAccess, xxxPropsConfig);\n  }\n\n  // Props-Watching\n  public watchProp(value?: string): void {\n    propConfig.apply(value, (v) => {\n      this.setRenderProp('prop', v);\n    });\n  }\n\n  // Event-Emitting\n  public handleClick = (): void => {\n    Log.debug('click');  // Nicht console.log\n    // State mutation\n    this.setState('state', newValue);\n    // Event-Emitting mit try-catch\n    try {\n      this.onClickCallback?.();\n    } catch (error) {\n      Log.error('Click callback failed', error);\n    }\n  };\n\n  // Lifecycle Cleanup\n  public destroy(): void {\n    if (this.intervalId) clearInterval(this.intervalId);\n    if (this.subscription) this.subscription.unsubscribe();\n  }\n}\n```\n\n### Type Definition Standards\n\n```typescript\n// ✅ KORREKT API Definition\nexport type XxxApi = ApiFromConfig<\n  typeof xxxPropsConfig,\n  {\n    Callbacks: {\n      click: () => void;\n    };\n    Emitters: {\n      emitted: void;  // Vollständig typisiert\n    };\n    Listeners: {\n      keydown: KeyboardEvent;  // Optional, für Window-Listener\n    };\n    Methods: {\n      focus: (options?: KolFocusOptions) => Promise<void>;\n    };\n    Refs: {\n      primary: HTMLElement;\n    };\n    States: {\n      count: number;\n    };\n  }\n>;\n```\n\n### Testing Standards\n\n**Snapshots:**\n- Min. 3 Varianten pro Prop\n- Edge cases (empty, very long)\n- State variations (enabled/disabled, show/hide)\n- Format: `executeSnapshotTests<Props>(TAG, [Component], [variants])`\n\n**E2E:**\n- Keyboard Interactions (Space, Enter, Escape, Tab)\n- Focus management\n- Event-Listener pattern (addEventListener)\n- Accessibility (ARIA)\n- Format: `test.describe` + `test.skip` mit TODO comments\n\n**JSDoc:**\n- Nur auf Stencil-Decorators (`@Prop`, `@Event`, `@Method`, `@State`)\n- Keine JSDoc auf nicht-Stencil Code\n- Focus-Methoden: **immer dokumentieren dass async**\n- Window-Listener: **dokumentieren Stencil auto-cleanup**\n\n---\n\n## 🚨 Build-Blockade: Focus-Type Root-Cause Analyse\n\n**Systemisches Problem (Phase 0):**\n\n```\nKolFocusOptions (kolibri custom)\n  └─ type KolFocusOptions = { behavior?: 'auto' | 'smooth' }\n\nvs.\n\nFocusOptions (native browser standard)\n  └─ type FocusOptions = { preventScroll?: boolean }\n```\n\n**Wo bricht es:**\n- `accordion/shadow.tsx:48` — `HTMLKolButtonWcElement` extends `HTMLElement`\n- Aber `HTMLElement.focus()` expects native `FocusOptions`\n- Aber `KolButton.focus()` returns `Promise<void>` mit `KolFocusOptions`\n- **Type incompatibility** → Build fails\n\n**Langfristige Lösung:**\n1. **Option A:** `KolFocusOptions` extends native `FocusOptions`\n   ```typescript\n   export type KolFocusOptions = FocusOptions & {\n     behavior?: 'auto' | 'smooth';  // Add custom behaviors\n   };\n   ```\n\n2. **Option B:** Separate Bridge-Type für Web Components\n   ```typescript\n   // In element-interaction.ts\n   export type ComponentFocusOptions = KolFocusOptions;  // Ist 'auto' | 'smooth'\n   ```\n\n3. **Option C:** Focus-Methods nie native `focus()` überschreiben\n   ```typescript\n   // Nicht:\n   // public focus(options?: FocusOptions): void { }\n   // Sondern:\n   // public kolFocus(options?: KolFocusOptions): Promise<void> { }\n   ```\n\n**Recommendation:** Option A (least breaking)\n\n---\n\n## 📌 Summary & Next Steps\n\n### Aktueller Status\n- ✅ Skeleton-Pattern konsistent implementiert\n- ✅ TypeScript-Typen sauber (bis auf FocusOptions)\n- ✅ JSDoc auf Stencil-Decorators vorhanden\n- 🚫 Build-Blockade durch Focus-Type-Mismatch\n- 🚫 Memory-Leak-Risiken nicht dokumentiert\n- 🚫 Testing minimal\n\n### Sofort-Maßnahmen (High Priority)\n1. Focus-Type Fix (unblocks Build)\n2. SkeletonController Memory-Leak dokumentieren\n3. Event-Emission Error-Handling\n4. Console → Log-System\n\n### Mittelfristig (Phase 2)\n5. JSDoc-Vollständigkeit (State-Felder, Window-Listener)\n6. Test-Expansion (E2E, Snapshots)\n7. onClick Handler Binding fixen\n\n### Langfristig (Code Quality)\n8. State-Defaults zentral definieren\n9. Generic Type-Handling refactoren\n10. Documentation: Einheitliche Skeleton-Implementation Guidelines\n\n---\n\n**Report erstellt:** 2026-06-02  \n**Auditor:** Claude Code (team3-Framework)  \n**Status:** Bereit zur Umsetzung nach Build-Fix\n",
+      "kind": "doc"
+    },
     {
       "id": "doc/STYLELINT",
       "group": "docs",
@@ -645,7 +653,15 @@
       "group": "button",
       "name": "expert-slot",
       "path": "packages/samples/react/src/components/button/expert-slot.tsx",
-      "code": "import { KolButton, KolHeading, KolIcon } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nimport './expert-slot.tooltip.scss';\n\nconst KolTooltip = 'kol-tooltip-wc' as unknown as React.FC<{ _label: string }>;\n\nexport const ButtonExpertSlot: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the expert slot feature of KolButton. The expert slot allows you to insert custom content into the button, providing advanced\n\t\t\t\t\tcustomization options beyond the standard label and icon properties.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Expert Slot Content\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">I am more than just a button</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"\" _variant=\"secondary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Custom content here</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Delete with custom text</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _hideLabel _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<KolIcon _icons=\"kolicon-alert-warning\" _label=\"\" slot=\"expert\" />\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolTooltip _label=\"Delete with custom text\" />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled Buttons with Expert Slot\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Disabled expert slot</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-eye-closed\" _label=\"\" _variant=\"ghost\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Another disabled one</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import { KolButton, KolHeading, KolIcon } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nimport './expert-slot.tooltip.scss';\n\nconst KolTooltip = 'kol-tooltip-wc' as unknown as React.FC<{ _label: string }>;\n\nexport const ButtonExpertSlot: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst iconButtonRef = useRef<HTMLElement>(null);\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the expert slot feature of KolButton. The expert slot allows you to insert custom content into the button, providing advanced\n\t\t\t\t\tcustomization options beyond the standard label and icon properties.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Expert Slot Content\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">I am more than just a button</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"\" _variant=\"secondary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Custom content here</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Delete with custom text</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton ref={iconButtonRef as React.Ref<never>} _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<KolIcon _icons=\"kolicon-alert-warning\" _label=\"Delete with custom text\" slot=\"expert\" />\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolTooltip _label=\"Delete with custom text\" />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled Buttons with Expert Slot\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Disabled expert slot</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-eye-closed\" _label=\"\" _variant=\"ghost\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Another disabled one</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/button/focus-options",
+      "group": "button",
+      "name": "focus-options",
+      "path": "packages/samples/react/src/components/button/focus-options.tsx",
+      "code": "import type { KolFocusOptions, SelectOption } from '@public-ui/components';\nimport { KolButton, KolHeading, KolSelect } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst BEHAVIOR_OPTIONS: SelectOption<string>[] = [\n\t{ label: 'Auto (instant)', value: 'auto' },\n\t{ label: 'Smooth (animated)', value: 'smooth' },\n];\n\nconst ALIGNMENT_OPTIONS: SelectOption<string>[] = [\n\t{ label: 'Start', value: 'start' },\n\t{ label: 'Center', value: 'center' },\n\t{ label: 'End', value: 'end' },\n\t{ label: 'Nearest', value: 'nearest' },\n];\n\nconst SELECT_CONFIGS = [\n\t{ label: 'Behavior', key: 'behavior' as const, options: BEHAVIOR_OPTIONS },\n\t{ label: 'Block (vertical alignment)', key: 'block' as const, options: ALIGNMENT_OPTIONS },\n\t{ label: 'Inline (horizontal alignment)', key: 'inline' as const, options: ALIGNMENT_OPTIONS },\n];\n\nconst SCROLL_CONTAINER_STYLE: React.CSSProperties = {\n\tpadding: '1rem',\n\tmarginTop: '1rem',\n\tborder: '1px solid #ccc',\n};\n\nexport const ButtonFocusOptions: FC = () => {\n\tconst backToTopRef = useRef<HTMLKolButtonElement>(null);\n\tconst behaviorSelectRef = useRef<HTMLKolSelectElement>(null);\n\tconst [focusOptions, setFocusOptions] = useState<KolFocusOptions>({\n\t\tbehavior: 'auto',\n\t\tblock: 'start',\n\t\tinline: 'start',\n\t});\n\tconst [afterFocusCalled, setAfterFocusCalled] = useState(false);\n\n\tconst handleFocus = useCallback(async () => {\n\t\tif (backToTopRef.current) {\n\t\t\tsetAfterFocusCalled(false);\n\n\t\t\tawait backToTopRef.current.focus({\n\t\t\t\t...focusOptions,\n\t\t\t\tafterFocus: () => {\n\t\t\t\t\tsetAfterFocusCalled(true);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [focusOptions]);\n\n\tconst handleBackToTop = useCallback(async () => {\n\t\tif (behaviorSelectRef.current) {\n\t\t\tsetAfterFocusCalled(false);\n\n\t\t\tawait behaviorSelectRef.current.focus({\n\t\t\t\t...focusOptions,\n\t\t\t\tafterFocus: () => {\n\t\t\t\t\tsetAfterFocusCalled(true);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [focusOptions]);\n\n\tconst setSelectOption = useCallback((key: 'behavior' | 'block' | 'inline', value: string) => {\n\t\tsetFocusOptions((prev) => ({\n\t\t\t...prev,\n\t\t\t[key]: value,\n\t\t}));\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates KolFocusOptions for manual focus control with scroll-into-view behavior. It showcases vertical scrolling (element positioned\n\t\t\t\t\tbelow viewport) and horizontal scrolling (element positioned outside viewport). The focus options control how the element is scrolled into view, with\n\t\t\t\t\tthe afterFocus callback triggering after scrolling completes.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t{/* Scroll Into View Options */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Scroll Behavior Options\" />\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThese options control how elements are scrolled into view. <code>preventScroll</code> and <code>focusVisible</code> are always enabled for optimal\n\t\t\t\t\t\tfocus management. Customize the scroll behavior and alignment below:\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t{SELECT_CONFIGS.map((config, index) => (\n\t\t\t\t\t\t\t<div key={config.key} className=\"grid gap-2\">\n\t\t\t\t\t\t\t\t{/* eslint-disable @typescript-eslint/no-unsafe-member-access */}\n\t\t\t\t\t\t\t\t<KolSelect\n\t\t\t\t\t\t\t\t\tref={index === 0 ? behaviorSelectRef : null}\n\t\t\t\t\t\t\t\t\t_label={config.label}\n\t\t\t\t\t\t\t\t\t_options={config.options}\n\t\t\t\t\t\t\t\t\t_value={focusOptions[config.key as keyof KolFocusOptions]}\n\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\tonChange: (_event, v) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectOption(config.key, v as string);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Scroll Example */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Scroll Example\" />\n\t\t\t\t\t<p>The target button is positioned bottom-right. Scroll down and right to find it, then click &quot;Focus Target&quot; to apply scroll behavior.</p>\n\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Focus Target\" _variant=\"primary\" onClick={handleFocus} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tCallback invoked: <strong>{afterFocusCalled ? 'Yes ✓' : 'No'}</strong>\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...SCROLL_CONTAINER_STYLE,\n\t\t\t\t\t\t\toverflow: 'auto',\n\t\t\t\t\t\t\twidth: '500px',\n\t\t\t\t\t\t\theight: '600px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '2400px',\n\t\t\t\t\t\t\t\theight: '2400px',\n\t\t\t\t\t\t\t\tpadding: '1rem',\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div style={{ padding: '1rem', backgroundColor: '#f9f9f9', borderRadius: '4px' }}>Content area (scroll to find button)</div>\n\t\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t\tref={backToTopRef}\n\t\t\t\t\t\t\t\t_label=\"Back to Top\"\n\t\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={handleBackToTop}\n\t\t\t\t\t\t\t\tstyle={{ position: 'absolute', bottom: '1rem', right: '1rem' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<hr />\n\n\t\t\t\t{/* Description */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"About KolFocusOptions\" />\n\t\t\t\t\t<div className=\"indented-text\">\n\t\t\t\t\t\t<p>KolFocusOptions enables advanced focus control with scroll-into-view behavior:</p>\n\t\t\t\t\t\t<ul className=\"list-disc pl-5\">\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>preventScroll:</strong> Always enabled — prevents browser auto-scroll and uses custom scroll options instead\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>focusVisible:</strong> Always enabled — ensures the focus ring is visible after focus\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>behavior:</strong> &quot;auto&quot; (instant) or &quot;smooth&quot; (animated) scroll\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>block:</strong> Vertical alignment (start, center, end, nearest)\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>inline:</strong> Horizontal alignment (start, center, end, nearest)\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>afterFocus:</strong> Optional callback invoked after focus and scroll complete\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -661,7 +677,7 @@
       "group": "button",
       "name": "icons",
       "path": "packages/samples/react/src/components/button/icons.tsx",
-      "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple\n\t\t\t\t\tpositions at once.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Basic Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Top\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Multiple Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Left & Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Top & Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\ttransform: 'rotate(45deg)',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"All Directions\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Simple Icon String\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Home Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"Heart Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"Trash Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Large Icon on Top\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t'font-size': '400%',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-house',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Home\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple\n\t\t\t\t\tpositions at once.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Basic Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Top\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Multiple Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Left & Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Top & Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"All Directions\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Simple Icon String\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Home Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"Heart Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"Trash Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Large Icon on Top\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t'font-size': '400%',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-house',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Home\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -888,6 +904,14 @@
       "code": "import { KolImage } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ImageBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolImage renders an image. The sample shows an image with alternative text.</p>\n\t\t</SampleDescription>\n\n\t\t<KolImage\n\t\t\t_alt=\"KoliBri design system illustration showing three people working on laptops surrounded by UI components, charts, and the KoliBri hummingbird logo\"\n\t\t\t_src=\"sample-image.png\"\n\t\t\tclassName=\"w-image\"\n\t\t/>\n\t</>\n);\n",
       "kind": "sample"
     },
+    {
+      "id": "sample/image/events",
+      "group": "image",
+      "name": "events",
+      "path": "packages/samples/react/src/components/image/events.tsx",
+      "code": "import type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { KolImage } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ImageEvents: FC = () => {\n\tconst [onErrorLog, setOnErrorLog] = useState<string[]>([]);\n\tconst [onLoadLog, setOnLoadLog] = useState<string[]>([]);\n\tconst [nativeErrorLog, setNativeErrorLog] = useState<string[]>([]);\n\tconst [nativeLoadLog, setNativeLoadLog] = useState<string[]>([]);\n\tconst nativeRef = useRef<HTMLKolImageElement>(null);\n\n\tuseEffect(() => {\n\t\tconst el = nativeRef.current;\n\t\tif (!el) return;\n\t\tconst onError = () => setNativeErrorLog((prev) => [...prev, new Date().toLocaleTimeString()]);\n\t\tconst onLoad = () => setNativeLoadLog((prev) => [...prev, new Date().toLocaleTimeString()]);\n\t\tel.addEventListener('error', onError);\n\t\tel.addEventListener('load', onLoad);\n\t\treturn () => {\n\t\t\tel.removeEventListener('error', onError);\n\t\t\tel.removeEventListener('load', onLoad);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolImage fires both _on.onError / _on.onLoad callbacks and native error / load DOM events on the host element.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<h3>Via _on prop</h3>\n\t\t\t<KolImage\n\t\t\t\t_alt=\"This image will fail to load\"\n\t\t\t\t_src=\"/this-image-does-not-exist.png\"\n\t\t\t\t_on={{\n\t\t\t\t\tonError: () => setOnErrorLog((prev) => [...prev, new Date().toLocaleTimeString()]),\n\t\t\t\t\tonLoad: () => setOnLoadLog((prev) => [...prev, new Date().toLocaleTimeString()]),\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<p>onError fired: {onErrorLog.length === 0 ? 'not yet' : onErrorLog.join(', ')}</p>\n\t\t\t<p>onLoad fired: {onLoadLog.length === 0 ? 'not yet' : onLoadLog.join(', ')}</p>\n\n\t\t\t<h3>Via native addEventListener</h3>\n\t\t\t<KolImage ref={nativeRef} _alt=\"KoliBri design system illustration\" _src=\"sample-image.png\" className=\"w-image\" />\n\t\t\t<p>native error fired: {nativeErrorLog.length === 0 ? 'not yet' : nativeErrorLog.join(', ')}</p>\n\t\t\t<p>native load fired: {nativeLoadLog.length === 0 ? 'not yet' : nativeLoadLog.join(', ')}</p>\n\t\t</>\n\t);\n};\n",
+      "kind": "sample"
+    },
     {
       "id": "sample/input-checkbox/basic",
       "group": "input-checkbox",
@@ -1368,6 +1392,14 @@
       "code": "import { KolHeading, KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolMeter renders a semantic meter element. You can use _min (default 0), _max (default 1) and _unit (default %) to customize it.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Basic\" />\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Storage used\" _value={0.5} />\n\t\t\t\t\t<KolMeter _label=\"Weight\" _max={100} _value={75} _unit=\"kg\" />\n\t\t\t\t\t<KolMeter _label=\"Temperature\" _min={-100} _max={100} _value={-50} _unit=\"°C\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
+    {
+      "id": "sample/meter/dynamic",
+      "group": "meter",
+      "name": "dynamic",
+      "path": "packages/samples/react/src/components/meter/dynamic.tsx",
+      "code": "import { KolButton, KolHeading, KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterDynamic: FC = () => {\n\tconst [usedStorage, setUsedStorage] = useState(120);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolMeter announces value changes immediately to screen readers. Use the buttons below to verify the live region updates without delay.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Dynamic value\" />\n\t\t\t\t\t<KolMeter _label=\"Used hard disk space\" _max={500} _min={0} _unit=\"GB\" _value={usedStorage} />\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"120 GB\" _on={{ onClick: () => setUsedStorage(120) }} _variant=\"secondary\" />\n\t\t\t\t\t\t<KolButton _label=\"240 GB\" _on={{ onClick: () => setUsedStorage(240) }} _variant=\"secondary\" />\n\t\t\t\t\t\t<KolButton _label=\"360 GB\" _on={{ onClick: () => setUsedStorage(360) }} _variant=\"secondary\" />\n\t\t\t\t\t\t<KolButton _label=\"480 GB\" _on={{ onClick: () => setUsedStorage(480) }} _variant=\"secondary\" />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "kind": "sample"
+    },
     {
       "id": "sample/meter/optimum",
       "group": "meter",
@@ -1613,7 +1645,7 @@
       "group": "table",
       "name": "aria-labelledby",
       "path": "packages/samples/react/src/components/table/aria-labelledby.tsx",
-      "code": "import { KolTableStateful, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport '../../@shared/demo-table-wc';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ city: 'Berlin', country: 'Germany' }];\n\nconst HEADERS = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'city', label: 'City' },\n\t\t\t{ key: 'country', label: 'Country' },\n\t\t],\n\t],\n\tvertical: [],\n};\n\nconst PROPS = {\n\t_data: DATA,\n\t_headers: HEADERS,\n\t_headerCells: HEADERS,\n\t_label: 'Label should always be filled',\n\t_minWidth: 'auto',\n};\n\nexport const AriaLabelledby: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tDemonstrates how to label a table using an external heading via <code>_ariaLabelledby</code>. The referenced heading lives outside the component's\n\t\t\t\tShadow DOM. KoliBri resolves the element reference via <code>ElementInternals.ariaLabelledByElements</code>, which crosses the Shadow DOM boundary —\n\t\t\t\tunlike a plain <code>aria-labelledby</code> attribute, which is scoped to the same tree.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col gap-6\">\n\t\t\t{/* Native HTML */}\n\t\t\t<div>\n\t\t\t\t<h2 id=\"caption-native\">Native HTML (no Web Component)</h2>\n\t\t\t\t<p>\n\t\t\t\t\tPlain <code>&lt;table aria-labelledby=\"…\"&gt;</code>. No Shadow DOM — the IDREF resolves directly in the document tree.\n\t\t\t\t</p>\n\t\t\t\t<table aria-labelledby=\"caption-native\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t<th>City</th>\n\t\t\t\t\t\t\t<th>Country</th>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t<td>Berlin</td>\n\t\t\t\t\t\t\t<td>Germany</td>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\n\t\t\t<hr aria-hidden=\"true\" className=\"border-0\" />\n\n\t\t\t{/* Native WC without shadow */}\n\t\t\t<div>\n\t\t\t\t<h2 id=\"caption-wc-light\">Native Web Component — no Shadow DOM</h2>\n\t\t\t\t<p>\n\t\t\t\t\t<code>demo-table-light</code> renders the table into the light DOM (<code>attachShadow</code> not called). The table's <code>aria-labelledby</code>{' '}\n\t\t\t\t\tIDREF resolves in the host document — no boundary to cross.\n\t\t\t\t</p>\n\t\t\t\t{React.createElement('demo-table-light', { 'aria-labelledby': 'caption-wc-light' })}\n\t\t\t</div>\n\n\t\t\t<hr aria-hidden=\"true\" className=\"border-0\" />\n\n\t\t\t{/* Native WC with shadow */}\n\t\t\t<div>\n\t\t\t\t<h2 id=\"caption-wc-shadow\">Native Web Component — with Shadow DOM</h2>\n\t\t\t\t<p>\n\t\t\t\t\t<code>demo-outer-table</code> (shadow: open) resolves the IDREF via <code>getRootNode()</code> and sets{' '}\n\t\t\t\t\t<code>ElementInternals.ariaLabelledByElements</code> on itself and on the inner element. The inner <code>&lt;table&gt;</code> references the inner\n\t\t\t\t\telement via IDREF — valid because both share the same shadow tree.\n\t\t\t\t</p>\n\t\t\t\t{React.createElement('demo-outer-table', { 'aria-labelledby': 'caption-wc-shadow' })}\n\t\t\t</div>\n\n\t\t\t<hr aria-hidden=\"true\" className=\"border-0\" />\n\n\t\t\t{/* kol-table-stateless */}\n\t\t\t<div>\n\t\t\t\t<h2 id=\"caption-stateless\">kol-table-stateless</h2>\n\t\t\t\t<p>\n\t\t\t\t\tThe <code>&lt;h2&gt;</code> above serves as the accessible label via <code>_ariaLabelledby</code>. No internal <code>&lt;caption&gt;</code> is\n\t\t\t\t\trendered.\n\t\t\t\t</p>\n\t\t\t\t<KolTableStateless _ariaLabelledby=\"caption-stateless\" {...PROPS} />\n\t\t\t</div>\n\n\t\t\t<hr aria-hidden=\"true\" className=\"border-0\" />\n\n\t\t\t{/* kol-table-stateful */}\n\t\t\t<div>\n\t\t\t\t<h2 id=\"caption-stateful\">kol-table-stateful</h2>\n\t\t\t\t<p>\n\t\t\t\t\tSame via the stateful wrapper — <code>_ariaLabelledby</code> is forwarded to the internal stateless implementation.\n\t\t\t\t</p>\n\t\t\t\t<KolTableStateful _ariaLabelledby=\"caption-stateful\" {...PROPS} />\n\t\t\t</div>\n\t\t</section>\n\t</>\n);\n",
+      "code": "import { KolTableStateful, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport '../../@shared/demo-table-wc';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ city: 'Berlin', country: 'Germany' }];\n\nconst HEADERS = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'city', label: 'City' },\n\t\t\t{ key: 'country', label: 'Country' },\n\t\t],\n\t],\n\tvertical: [],\n};\n\nconst PROPS = {\n\t_data: DATA,\n\t_headers: HEADERS,\n\t_headerCells: HEADERS,\n\t_label: 'Label should always be filled',\n\t_minWidth: 'auto',\n};\n\nexport const AriaLabelledby: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tDemonstrates how to label a table using an external heading via <code>_ariaLabelledby</code>. The referenced heading lives outside the component's\n\t\t\t\tShadow DOM. KoliBri resolves the element reference via <code>ElementInternals.ariaLabelledByElements</code>, which crosses the Shadow DOM boundary —\n\t\t\t\tunlike a plain <code>aria-labelledby</code> attribute, which is scoped to the same tree.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col gap-6\">\n\t\t\t{/* Native HTML */}\n\t\t\t<div>\n\t\t\t\t<h2 id=\"caption-native\">Native HTML (no Web Component)</h2>\n\t\t\t\t<p>\n\t\t\t\t\tPlain <code>&lt;table aria-labelledby=\"…\"&gt;</code>. No Shadow DOM — the IDREF resolves directly in the document tree.\n\t\t\t\t</p>\n\t\t\t\t<table aria-labelledby=\"caption-native\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t<th>City</th>\n\t\t\t\t\t\t\t<th>Country</th>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t<td>Berlin</td>\n\t\t\t\t\t\t\t<td>Germany</td>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\n\t\t\t<hr aria-hidden=\"true\" className=\"border-0\" />\n\n\t\t\t{/* Native WC without shadow */}\n\t\t\t<div>\n\t\t\t\t<h2 id=\"caption-wc-light\">Native Web Component — no Shadow DOM</h2>\n\t\t\t\t<p>\n\t\t\t\t\t<code>demo-table-light</code> renders the table into the light DOM (<code>attachShadow</code> not called). The table's <code>aria-labelledby</code>{' '}\n\t\t\t\t\tIDREF resolves in the host document — no boundary to cross.\n\t\t\t\t</p>\n\t\t\t\t{React.createElement('demo-table-light', { 'aria-labelledby': 'caption-wc-light' })}\n\t\t\t</div>\n\n\t\t\t<hr aria-hidden=\"true\" className=\"border-0\" />\n\n\t\t\t{/* Native WC with shadow */}\n\t\t\t<div>\n\t\t\t\t<h2 id=\"caption-wc-shadow\">Native Web Component — with Shadow DOM</h2>\n\t\t\t\t<p>\n\t\t\t\t\t<code>demo-outer-table</code> (shadow: open) resolves the IDREF via <code>getRootNode()</code> and sets{' '}\n\t\t\t\t\t<code>ElementInternals.ariaLabelledByElements</code> on itself and on the inner element. The inner <code>&lt;table&gt;</code> references the inner\n\t\t\t\t\telement via IDREF — valid because both share the same shadow tree.\n\t\t\t\t</p>\n\t\t\t\t{React.createElement('demo-outer-table', { 'aria-labelledby': 'caption-wc-shadow' })}\n\t\t\t</div>\n\n\t\t\t<hr aria-hidden=\"true\" className=\"border-0\" />\n\n\t\t\t{/* kol-table-stateless */}\n\t\t\t<div>\n\t\t\t\t<h2 id=\"caption-stateless\">kol-table-stateless</h2>\n\t\t\t\t<p>\n\t\t\t\t\tThe <code>&lt;h2&gt;</code> above serves as the accessible label via <code>_ariaLabelledby</code>. No internal <code>&lt;caption&gt;</code> is\n\t\t\t\t\trendered.\n\t\t\t\t</p>\n\t\t\t\t<KolTableStateless _ariaLabelledby=\"caption-stateless\" {...PROPS} _hasSettingsMenu />\n\t\t\t</div>\n\n\t\t\t<hr aria-hidden=\"true\" className=\"border-0\" />\n\n\t\t\t{/* kol-table-stateful */}\n\t\t\t<div>\n\t\t\t\t<h2 id=\"caption-stateful\">kol-table-stateful</h2>\n\t\t\t\t<p>\n\t\t\t\t\tSame via the stateful wrapper — <code>_ariaLabelledby</code> is forwarded to the internal stateless implementation.\n\t\t\t\t</p>\n\t\t\t\t<KolTableStateful _ariaLabelledby=\"caption-stateful\" {...PROPS} />\n\t\t\t</div>\n\t\t</section>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1744,6 +1776,14 @@
       "code": "import type { FC } from 'react';\nimport React, { useRef } from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolButton, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\ntype Item = { name: string; score: number };\n\nconst DATA: Item[] = [\n\t{ name: 'Charlie', score: 72 },\n\t{ name: 'Alice', score: 95 },\n\t{ name: 'Bob', score: 88 },\n\t{ name: 'Diana', score: 61 },\n\t{ name: 'Eve', score: 84 },\n];\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'name',\n\t\t\t\tlabel: 'Name',\n\t\t\t\tsortDirection: 'ASC',\n\t\t\t\tcompareFn: (a: KoliBriTableDataType, b: KoliBriTableDataType) => (a as Item).name.localeCompare((b as Item).name),\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'score',\n\t\t\t\tlabel: 'Score',\n\t\t\t\ttextAlign: 'right',\n\t\t\t\tcompareFn: (a: KoliBriTableDataType, b: KoliBriTableDataType) => (a as Item).score - (b as Item).score,\n\t\t\t},\n\t\t],\n\t],\n};\n\ntype KolTableStatefulElement = {\n\tresetSort?: () => Promise<void>;\n};\n\nexport const TableStatefulResetSort: FC = () => {\n\tconst tableRef = useRef<HTMLKolTableStatefulElement>(null);\n\n\tconst handleResetSort = () => {\n\t\tconst tableElement = tableRef.current as unknown as KolTableStatefulElement | null;\n\t\tvoid tableElement?.resetSort?.();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates the <code>resetSort()</code> method on <code>KolTableStateful</code>. Sort the table manually by clicking on a column header,\n\t\t\t\t\tthen press &ldquo;Reset Sort&rdquo; to restore the default sort order defined in <code>_headers</code>.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full grid gap-4\">\n\t\t\t\t<KolButton _label=\"Reset Sort\" _on={{ onClick: handleResetSort }} />\n\t\t\t\t<KolTableStateful ref={tableRef} _label=\"Table with resettable sort\" _data={DATA} _headers={HEADERS} className=\"block\" />\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
+    {
+      "id": "sample/table/stateful-settings-persistence",
+      "group": "table",
+      "name": "stateful-settings-persistence",
+      "path": "packages/samples/react/src/components/table/stateful-settings-persistence.tsx",
+      "code": "import type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolButton, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\ntype UserRow = {\n\tid: string;\n\tname: string;\n\tteam: string;\n\temail: string;\n\tstatus: string;\n};\n\nconst DATA: UserRow[] = [\n\t{ id: 'U-001', name: 'Andrea Schmidt', team: 'Design', email: 'andrea@example.org', status: 'Active' },\n\t{ id: 'U-002', name: 'Boris Klein', team: 'Engineering', email: 'boris@example.org', status: 'Active' },\n\t{ id: 'U-003', name: 'Chiara Russo', team: 'Support', email: 'chiara@example.org', status: 'On leave' },\n\t{ id: 'U-004', name: 'Dmitri Volkov', team: 'Engineering', email: 'dmitri@example.org', status: 'Active' },\n\t{ id: 'U-005', name: 'Elena Costa', team: 'Design', email: 'elena@example.org', status: 'On leave' },\n\t{ id: 'U-006', name: 'Farid Haddad', team: 'Support', email: 'farid@example.org', status: 'Active' },\n];\n\nconst compareByKey =\n\t(key: keyof UserRow) =>\n\t(data0: KoliBriTableDataType, data1: KoliBriTableDataType, direction = 'ASC') => {\n\t\tconst result = String((data0 as UserRow)[key]).localeCompare(String((data1 as UserRow)[key]));\n\t\treturn direction === 'DESC' ? -result : result;\n\t};\n\n// Intentionally created inline on every render so the `_headers` prop receives a fresh object\n// reference each time. This mirrors the common React pattern of non-memoized headers and verifies\n// that applied settings survive parent re-renders as long as the column keys stay the same (#10344).\nconst buildHeaders = (): KoliBriTableHeaders => ({\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'id', label: 'ID', visible: true, width: 120 },\n\t\t\t{ key: 'name', label: 'Name', visible: true, width: 240, compareFn: compareByKey('name') },\n\t\t\t{ key: 'team', label: 'Team', visible: true, width: 200, compareFn: compareByKey('team') },\n\t\t\t{ key: 'email', label: 'E-Mail', visible: true, width: 280 },\n\t\t\t{ key: 'status', label: 'Status', visible: true, width: 160, compareFn: compareByKey('status') },\n\t\t],\n\t],\n});\n\nexport const TableStatefulSettingsPersistence: FC = () => {\n\tconst [renderCount, setRenderCount] = useState(0);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis example demonstrates that column settings applied via the settings menu are remembered. Open the settings menu and change a column&apos;s width,\n\t\t\t\t\tvisibility or order and apply. Then sort a column, switch the pagination page, select a row, or use the &quot;Force parent re-render&quot; button\n\t\t\t\t\t&ndash; the customized columns must stay as you configured them and must no longer reset to their defaults (issue #10344).\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolButton _label={`Force parent re-render (${renderCount})`} _on={{ onClick: () => setRenderCount((count) => count + 1) }} className=\"block\" />\n\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table that remembers settings across sorting, pagination and selection\"\n\t\t\t\t_hasSettingsMenu\n\t\t\t\t_pagination={{ _page: 1, _pageSize: 3 }}\n\t\t\t\t_selection={{\n\t\t\t\t\tlabel: (row) => `Select ${(row as UserRow).name}`,\n\t\t\t\t\tkeyPropertyName: 'id',\n\t\t\t\t\tselectedKeys: [],\n\t\t\t\t}}\n\t\t\t\t_headers={buildHeaders()}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '900px' }}\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
+      "kind": "sample"
+    },
     {
       "id": "sample/table/stateful-with-selection",
       "group": "table",
@@ -2157,7 +2197,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`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `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 trigger button of the first section.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                                                                  |\n| ---- | ---------------------------------------------------------------------------- |\n|      | Allows arbitrary HTML to be inserted into the content area of the accordion. |\n\n\n----------------------------------------------\n\n\n",
+      "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`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `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 trigger button of the first section.\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"
     },
     {
@@ -2181,7 +2221,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 (e.g. `_icons=\"fa-solid fa-user\"`).                                                    | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only).                             | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-badge\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Badge** component allows you to visually highlight specific information.\nIn addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n\n## Properties\n\n| Property              | Attribute       | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_color`              | `_color`        | Defines the backgroundColor and foregroundColor.                                                                   | `string \\| undefined \\| { backgroundColor: string; foregroundColor: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `'#000'`    |\n| `_icons`              | `_icons`        | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                    | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only).                             | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2197,7 +2237,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 (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                                                                                                                    | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                    | `false`     |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string`                                                                                                                                                                                                                                                  | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                                                                        | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                                                                                                                        | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                     | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                                                                                                                            | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                                                                                                                      | `'normal'`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\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\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                                                                                                                      | Default     |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                                                                                                                                                                                    | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \\| undefined`                                                                                                                                                                                                                                    | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                                                                          | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                                                                                                                                                    | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                                                                                                                                                                                    | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                                                                                                                    | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                    | `false`     |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string`                                                                                                                                                                                                                                                  | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                                                                        | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                                                                                                                        | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                     | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                                                                                                                            | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                                                                                                                      | `'normal'`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot       | Description                                        |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2205,7 +2245,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 (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                                                                                                                    | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                    | `true`      |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string`                                                                                                                                                                                                                                                  | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_on`                 | --                  | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                              | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                                                                                                                        | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                     | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                                                                                                                            | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\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<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.\n\nA button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.\n\nInstead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.\n\nA link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.\n\nSince a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                                                                                                                      | Default     |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                                                                                                                                                                                    | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \\| undefined`                                                                                                                                                                                                                                    | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                                                                                                                                                    | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                                                                                                                                                                                    | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                                                                                                                    | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                    | `true`      |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string`                                                                                                                                                                                                                                                  | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_on`                 | --                  | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                              | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                                                                                                                        | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                     | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                                                                                                                            | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot       | Description                                        |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2221,7 +2261,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| `_disabled`                 | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hasClearButton`           | `_has-clear-button` | Shows the clear button if enabled.                                                                                                                           | `boolean \\| undefined`                                                                                                             | `true`      |\n| `_hideLabel`                | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`                  | `_hide-msg`         | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`                     | `_hint`             | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`                    | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_label` _(required)_       | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |\n| `_msg`                      | `_msg`              | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name`                     | `_name`             | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                       | --                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_placeholder`              | `_placeholder`      | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                              | `undefined` |\n| `_required`                 | `_required`         | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_shortKey`                 | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                              | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions`      | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string`                                                                                                        | `undefined` |\n| `_tooltipAlign`             | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`                  | `_touched`          | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`                    | `_value`            | Defines the value of the element.                                                                                                                            | `string \\| undefined`                                                                                                              | `undefined` |\n| `_variant`                  | `_variant`          | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\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<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute           | Description                                                                                                                                                  | Type                                                                                                                               | Default     |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`                | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                              | `undefined` |\n| `_disabled`                 | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hasClearButton`           | `_has-clear-button` | Shows the clear button if enabled.                                                                                                                           | `boolean \\| undefined`                                                                                                             | `true`      |\n| `_hideLabel`                | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`                  | `_hide-msg`         | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`                     | `_hint`             | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`                    | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_label` _(required)_       | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |\n| `_msg`                      | `_msg`              | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name`                     | `_name`             | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                       | --                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_placeholder`              | `_placeholder`      | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                              | `undefined` |\n| `_required`                 | `_required`         | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_shortKey`                 | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                              | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions`      | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string`                                                                                                        | `undefined` |\n| `_tooltipAlign`             | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`                  | `_touched`          | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`                    | `_value`            | Defines the value of the element.                                                                                                                            | `string \\| undefined`                                                                                                              | `undefined` |\n| `_variant`                  | `_variant`          | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2237,7 +2277,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 details.                                                                        | `undefined \\| { onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \\| undefined`                                                                     | `false`     |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the summary/toggle button.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                                      |\n| ---- | ------------------------------------------------ |\n|      | The content displayed in the detail description. |\n\n\n----------------------------------------------\n\n\n",
+      "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 details.                                                                        | `undefined \\| { onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \\| undefined`                                                                     | `false`     |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the summary/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"
     },
     {
@@ -2285,7 +2325,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| `_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<!-- 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"
     },
     {
@@ -2293,7 +2333,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| `_checked`            | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_indeterminate`      | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                         | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                        | `undefined` |\n| `_labelAlign`         | `_label-align`   | Defines which alignment should be used for presentation.                                                                                                     | `\"left\" \\| \"right\" \\| undefined`                                                                                                                                                                                                                                                                                | `'right'`   |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                              | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                | `undefined` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                           | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                                                                                    | `true`      |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined`                                                                                                                                                                                                                                                                | `'default'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot       | Description           |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-checkbox\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                            | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_checked`            | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_indeterminate`      | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                         | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                        | `undefined` |\n| `_labelAlign`         | `_label-align`   | Defines which alignment should be used for presentation.                                                                                                     | `\"left\" \\| \"right\" \\| undefined`                                                                                                                                                                                                                                                                                | `'right'`   |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                              | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                | `undefined` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                           | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                                                                                    | `true`      |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined`                                                                                                                                                                                                                                                                | `'default'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot       | Description           |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2301,7 +2341,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| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\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<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2309,7 +2349,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| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                    | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                   | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                           | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `'date'`    |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                    | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                   | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                           | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `'date'`    |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2317,7 +2357,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| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                              | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                  | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_multiple`           | `_multiple`            | Makes the input accept multiple inputs.                                                                                                                      | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_suggestions`        | `_suggestions`         | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\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-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                              | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                  | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_multiple`           | `_multiple`            | Makes the input accept multiple inputs.                                                                                                                      | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_suggestions`        | `_suggestions`         | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2325,7 +2365,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| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_multiple`           | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                      | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\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<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accept`             | `_accept`        | Defines which file formats are accepted.                                                                                                                     | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_multiple`           | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                      | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2333,7 +2373,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| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                    | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                   | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                    | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                   | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2341,7 +2381,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| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                              | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                  | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_visibilityToggle`   | `_visibility-toggle`   | Activates the show password button                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\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-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                              | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                  | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_visibilityToggle`   | `_visibility-toggle`   | Activates the show password button                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2349,7 +2389,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| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                              | `''`         |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined`  |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined`  |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined`  |\n| `_options`            | `_options`       | Options the user can choose from.                                                                                                                            | `RadioOption<StencilUnknown>[] \\| string \\| undefined`                                                                             | `undefined`  |\n| `_orientation`        | `_orientation`   | Defines whether the orientation of the component is horizontal or vertical.                                                                                  | `\"horizontal\" \\| \"vertical\" \\| undefined`                                                                                          | `'vertical'` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`      |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                       | `null`       |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                              | `undefined`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description                              |\n| ---- | ---------------------------------------- |\n|      | The legend/heading of the radio buttons. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                               | Default      |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                              | `''`         |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined`  |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined`  |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined`  |\n| `_options`            | `_options`       | Options the user can choose from.                                                                                                                            | `RadioOption<StencilUnknown>[] \\| string \\| undefined`                                                                             | `undefined`  |\n| `_orientation`        | `_orientation`   | Defines whether the orientation of the component is horizontal or vertical.                                                                                  | `\"horizontal\" \\| \"vertical\" \\| undefined`                                                                                          | `'vertical'` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`      |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                       | `null`       |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                              | `undefined`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description                              |\n| ---- | ---------------------------------------- |\n|      | The legend/heading of the radio buttons. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2357,7 +2397,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| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                    | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `100`       |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                   | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `0`         |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                              | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `undefined` |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                               | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                              | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                    | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `100`       |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                   | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `0`         |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                              | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `undefined` |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2365,7 +2405,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| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                              | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                  | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_suggestions`        | `_suggestions`         | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_type`               | `_type`                | Defines either the type of the component or of the components interactive element.                                                                           | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'text'`    |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `selectionEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name             | Type                                                      | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement`    | `string`                                                  |             |\n| `selectionStart` | `number \\| undefined`                                     |             |\n| `selectionEnd`   | `number \\| undefined`                                     |             |\n| `selectMode`     | `\"select\" \\| \"start\" \\| \"end\" \\| \"preserve\" \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name                 | Type                                             | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart`     | `number`                                         |             |\n| `selectionEnd`       | `number`                                         |             |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name             | Type     | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-text\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                              | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                  | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                           | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_suggestions`        | `_suggestions`         | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |\n| `_type`               | `_type`                | Defines either the type of the component or of the components interactive element.                                                                           | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'text'`    |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `selectionEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name             | Type                                                      | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement`    | `string`                                                  |             |\n| `selectionStart` | `number \\| undefined`                                     |             |\n| `selectionEnd`   | `number \\| undefined`                                     |             |\n| `selectMode`     | `\"select\" \\| \"start\" \\| \"end\" \\| \"preserve\" \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name                 | Type                                             | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart`     | `number`                                         |             |\n| `selectionEnd`       | `number`                                         |             |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name             | Type     | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2381,7 +2421,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 (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                 | `undefined` |\n| `_inline`            | `_inline`             | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                 | `true`      |\n| `_label`             | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string \\| undefined`                                                                  | `undefined` |\n| `_on`                | --                    | Defines the callback functions for links.                                                                                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }`    | `undefined` |\n| `_role`              | `_role`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                     | `undefined` |\n| `_shortKey`          | `_short-key`          | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                  | `undefined` |\n| `_target`            | `_target`             | Defines where to open the link.                                                                                                                                                                                                          | `string \\| undefined`                                                                  | `undefined` |\n| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                  | `'right'`   |\n| `_variant`           | `_variant`            | Defines which variant should be used for presentation.                                                                                                                                                                                   | `string \\| undefined`                                                                  | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-link\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property             | Attribute             | Description                                                                                                                                                                                                                              | Type                                                                                   | Default     |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`         | `_access-key`         | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaControls`      | `_aria-controls`      | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                                                                                                        | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription`   | `_aria-description`   | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaExpanded`      | `_aria-expanded`      | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                 | `undefined` |\n| `_disabled`          | `_disabled`           | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                 | `false`     |\n| `_download`          | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                                                                                                           | `string \\| undefined`                                                                  | `undefined` |\n| `_hideLabel`         | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                 | `false`     |\n| `_href` _(required)_ | `_href`               | Sets the target URI of the link or citation source.                                                                                                                                                                                      | `string`                                                                               | `undefined` |\n| `_icons`             | `_icons`              | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                 | `undefined` |\n| `_inline`            | `_inline`             | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                 | `true`      |\n| `_label`             | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string \\| undefined`                                                                  | `undefined` |\n| `_on`                | --                    | Defines the callback functions for links.                                                                                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }`    | `undefined` |\n| `_role`              | `_role`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                     | `undefined` |\n| `_shortKey`          | `_short-key`          | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                  | `undefined` |\n| `_target`            | `_target`             | Defines where to open the link.                                                                                                                                                                                                          | `string \\| undefined`                                                                  | `undefined` |\n| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                  | `'right'`   |\n| `_variant`           | `_variant`            | Defines which variant should be used for presentation.                                                                                                                                                                                   | `string \\| undefined`                                                                  | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2389,7 +2429,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 (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                               | `undefined` |\n| `_label`             | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string \\| undefined`                                                                                | `undefined` |\n| `_on`                | --                    | Defines the callback functions for links.                                                                                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }`                  | `undefined` |\n| `_role`              | `_role`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                   | `undefined` |\n| `_shortKey`          | `_short-key`          | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                | `undefined` |\n| `_target`            | `_target`             | Defines where to open the link.                                                                                                                                                                                                          | `string \\| undefined`                                                                                | `undefined` |\n| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                | `'right'`   |\n| `_variant`           | `_variant`            | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot       | Description                                        |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-link-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button.\n\n## Properties\n\n| Property             | Attribute             | Description                                                                                                                                                                                                                              | Type                                                                                                 | Default     |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`         | `_access-key`         | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \\| undefined`                                                                                | `undefined` |\n| `_ariaControls`      | `_aria-controls`      | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                | `undefined` |\n| `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                                                                                                        | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined`               | `undefined` |\n| `_ariaDescription`   | `_aria-description`   | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                | `undefined` |\n| `_customClass`       | `_custom-class`       | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                                                                          | `string \\| undefined`                                                                                | `undefined` |\n| `_disabled`          | `_disabled`           | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                               | `false`     |\n| `_download`          | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                                                                                                           | `string \\| undefined`                                                                                | `undefined` |\n| `_hideLabel`         | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                               | `false`     |\n| `_href` _(required)_ | `_href`               | Defines the target URI of the link.                                                                                                                                                                                                      | `string`                                                                                             | `undefined` |\n| `_icons`             | `_icons`              | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                               | `undefined` |\n| `_label`             | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string \\| undefined`                                                                                | `undefined` |\n| `_on`                | --                    | Defines the callback functions for links.                                                                                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }`                  | `undefined` |\n| `_role`              | `_role`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                   | `undefined` |\n| `_shortKey`          | `_short-key`          | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                | `undefined` |\n| `_target`            | `_target`             | Defines where to open the link.                                                                                                                                                                                                          | `string \\| undefined`                                                                                | `undefined` |\n| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                | `'right'`   |\n| `_variant`           | `_variant`            | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot       | Description                                        |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2429,7 +2469,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 (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                               | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                         | `boolean \\| undefined`                                                                               | `false`     |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                             | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                | `undefined` |\n| `_popoverAlign`       | `_popover-align`    | Defines where to show the Popover preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                | `'bottom'`  |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                | `undefined` |\n| `_tabIndex`           | `_tab-index`        | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \\| undefined`                                                                                | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                           | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                       | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                            | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                         | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                       | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShows the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot       | Description                                                     |\n| ---------- | --------------------------------------------------------------- |\n|            | The popover content (displayed when the button is clicked).     |\n| `\"expert\"` | Custom label content for the button (when `_label` is `false`). |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-popover-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nA button that toggles the visibility of a popover overlay containing arbitrary content.\nThe popover uses the native HTML Popover API for lightweight, non-modal overlays.\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                  | Type                                                                                                 | Default     |\n| --------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                        | `string \\| undefined`                                                                                | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                              | `string \\| undefined`                                                                                | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                               | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                               | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                               | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                         | `boolean \\| undefined`                                                                               | `false`     |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                             | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                | `undefined` |\n| `_popoverAlign`       | `_popover-align`    | Defines where to show the Popover preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                | `'bottom'`  |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                | `undefined` |\n| `_tabIndex`           | `_tab-index`        | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \\| undefined`                                                                                | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                           | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                       | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                            | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                         | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                       | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShows the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot       | Description                                                     |\n| ---------- | --------------------------------------------------------------- |\n|            | The popover content (displayed when the button is clicked).     |\n| `\"expert\"` | Custom label content for the button (when `_label` is `false`). |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2453,7 +2493,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| `_disabled`             | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideLabel`            | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`              | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`                 | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`                | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_label` _(required)_   | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |\n| `_msg`                  | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple`             | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                      | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_name`                 | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                   | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_options` _(required)_ | `_options`       | Options the user can choose from.                                                                                                                            | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string`                                                                 | `undefined` |\n| `_required`             | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_rows`                 | `_rows`          | Maximum number of visible rows of the element.                                                                                                               | `number \\| undefined`                                                                                                              | `undefined` |\n| `_shortKey`             | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                              | `undefined` |\n| `_tabIndex`             | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \\| undefined`                                                                                                              | `undefined` |\n| `_tooltipAlign`         | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`              | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`                | `_value`         | Defines the value of the element.                                                                                                                            | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined`                                                   | `undefined` |\n| `_variant`              | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-select\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                | Attribute        | Description                                                                                                                                                  | Type                                                                                                                               | Default     |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`            | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                              | `undefined` |\n| `_disabled`             | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideLabel`            | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`              | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`                 | `_hint`          | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`                | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_label` _(required)_   | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |\n| `_msg`                  | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple`             | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                      | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_name`                 | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                   | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_options` _(required)_ | `_options`       | Options the user can choose from.                                                                                                                            | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string`                                                                 | `undefined` |\n| `_required`             | `_required`      | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_rows`                 | `_rows`          | Maximum number of visible rows of the element.                                                                                                               | `number \\| undefined`                                                                                                              | `undefined` |\n| `_shortKey`             | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                              | `undefined` |\n| `_tabIndex`             | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \\| undefined`                                                                                                              | `undefined` |\n| `_tooltipAlign`         | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`              | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`                | `_value`         | Defines the value of the element.                                                                                                                            | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined`                                                   | `undefined` |\n| `_variant`              | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2461,7 +2501,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| `_disabled`             | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hasClearButton`       | `_has-clear-button` | Shows the clear button if enabled.                                                                                                                           | `boolean \\| undefined`                                                                                                             | `true`      |\n| `_hideLabel`            | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`              | `_hide-msg`         | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`                 | `_hint`             | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`                | `_icons`            | Defines the icon classnames (e.g. `icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_label` _(required)_   | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |\n| `_msg`                  | `_msg`              | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name`                 | `_name`             | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                   | --                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_options` _(required)_ | `_options`          | Options the user can choose from.                                                                                                                            | `Option<StencilUnknown>[] \\| string`                                                                                               | `undefined` |\n| `_placeholder`          | `_placeholder`      | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                              | `undefined` |\n| `_required`             | `_required`         | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_rows`                 | `_rows`             | Maximum number of visible rows of the element.                                                                                                               | `number \\| undefined`                                                                                                              | `undefined` |\n| `_shortKey`             | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                              | `undefined` |\n| `_tooltipAlign`         | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`              | `_touched`          | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`                | `_value`            | Defines the value of the element.                                                                                                                            | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                       | `null`      |\n| `_variant`              | `_variant`          | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\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<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.\n\n## Properties\n\n| Property                | Attribute           | Description                                                                                                                                                  | Type                                                                                                                               | Default     |\n| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`            | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                                              | `undefined` |\n| `_disabled`             | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hasClearButton`       | `_has-clear-button` | Shows the clear button if enabled.                                                                                                                           | `boolean \\| undefined`                                                                                                             | `true`      |\n| `_hideLabel`            | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`              | `_hide-msg`         | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`                 | `_hint`             | Defines the hint text.                                                                                                                                       | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`                | `_icons`            | Defines the icon classnames (e.g. `icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_label` _(required)_   | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |\n| `_msg`                  | `_msg`              | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name`                 | `_name`             | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                   | --                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_options` _(required)_ | `_options`          | Options the user can choose from.                                                                                                                            | `Option<StencilUnknown>[] \\| string`                                                                                               | `undefined` |\n| `_placeholder`          | `_placeholder`      | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \\| undefined`                                                                                                              | `undefined` |\n| `_required`             | `_required`         | Makes the input element required.                                                                                                                            | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_rows`                 | `_rows`             | Maximum number of visible rows of the element.                                                                                                               | `number \\| undefined`                                                                                                              | `undefined` |\n| `_shortKey`             | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                                              | `undefined` |\n| `_tooltipAlign`         | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`              | `_touched`          | Shows if the input was touched by a user.                                                                                                                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`                | `_value`            | Defines the value of the element.                                                                                                                            | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                       | `null`      |\n| `_variant`              | `_variant`          | Defines which variant should be used for presentation.                                                                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2469,7 +2509,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() => Promise<void>`\n\nFocuses the interactive element of the component.\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<!-- 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"
     },
     {
@@ -2477,7 +2517,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 technology users to skip repetitive navigation sections and jump directly to the main content. 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() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-skip-nav\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. 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"
     },
     {
@@ -2493,7 +2533,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 (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                                                                                                                    | `undefined` |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                                                                                       | `string`                                                                                                                                                                                                                                                  | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                                                                        | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                                                                                                                        | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                     | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                                                                                                                            | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                                                                                                                      | `'normal'`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `closePopup() => Promise<void>`\n\nCloses the dropdown.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\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<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SplitButton** component can be used to display a two-part button. The primary button is typically used for\na main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                                                                                                                      | Default     |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                                                                                                                                                                                    | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \\| undefined`                                                                                                                                                                                                                                    | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                                                                          | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                                                                                                                                                    | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                                                                                                                                                                                    | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                                                                                                                    | `undefined` |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                                                                                       | `string`                                                                                                                                                                                                                                                  | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                                                                        | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                                                                                                                        | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                                                                                                                     | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                     | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                                                                                                                            | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                              | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                                                                                                                      | `'normal'`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `closePopup() => Promise<void>`\n\nCloses the dropdown.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description                                             |\n| ---- | ------------------------------------------------------- |\n|      | Allows arbitrary HTML to be inserted into the dropdown. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2517,7 +2557,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() => Promise<void>`\n\nSets focus on the current tab button.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "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",
       "kind": "spec"
     },
     {
@@ -2525,7 +2565,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| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                             | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                         | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                                                                                                                                                             | `string \\| undefined`                                                                                                              | `''`         |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                                                                                    | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined`  |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                       | `string`                                                                                                                           | `undefined`  |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                                                                                                                                                                    | `number \\| undefined`                                                                                                              | `undefined`  |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                                                                                                                                                        | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                    | `'hard'`     |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                  | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined`  |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                                                                                                                                                      | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                          | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined`  |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                                                                                                                                                        | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                                                                                                                                                                  | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_resize`             | `_resize`              | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined`                                                                                                | `'vertical'` |\n| `_rows`               | `_rows`                | Maximum number of visible rows of the element.                                                                                                                                                                                                                                                     | `number \\| undefined`                                                                                                              | `undefined`  |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                                                                            | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                             | `undefined`  |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                          | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`      |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                                                                                                                                                          | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                                                                                                                                                                  | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                                                                                                                                                             | `string \\| undefined`                                                                                                              | `undefined`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\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<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                                                                                                                                                        | Type                                                                                                                               | Default      |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                                                                              | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_adjustHeight`       | `_adjust-height`       | Adjusts the height of the element to its content.                                                                                                                                                                                                                                                  | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                             | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                         | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                                                                                                                                                             | `string \\| undefined`                                                                                                              | `''`         |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                                                                                    | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined`  |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                       | `string`                                                                                                                           | `undefined`  |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                                                                                                                                                                    | `number \\| undefined`                                                                                                              | `undefined`  |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                                                                                                                                                        | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                    | `'hard'`     |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                  | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined`  |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                                                                                                                                                      | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                          | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined`  |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                                                                                                                                                        | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                                                                                                                                                                  | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_resize`             | `_resize`              | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined`                                                                                                | `'vertical'` |\n| `_rows`               | `_rows`                | Maximum number of visible rows of the element.                                                                                                                                                                                                                                                     | `number \\| undefined`                                                                                                              | `undefined`  |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                                                                            | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                             | `undefined`  |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                          | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`      |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                                                                                                                                                          | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                                                                                                                                                                  | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                                                                                                                                                             | `string \\| undefined`                                                                                                              | `undefined`  |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description                   |\n| ---- | ----------------------------- |\n|      | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2533,7 +2573,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() => Promise<void>`\n\nSets focus on the currently active toolbar item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "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",
       "kind": "spec"
     },
     {
@@ -2541,7 +2581,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() => Promise<void>`\n\nSets focus on the first focusable tree item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "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----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -2549,7 +2589,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() => Promise<any>`\n\nFocuses the link element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `isOpen() => Promise<boolean>`\n\nReturns whether the tree item is expanded.\n\n#### Returns\n\nType: `Promise<boolean>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-tree-item\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute | Description                                                                                                        | Type                   | Default     |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |\n| `_active`             | `_active` | If set (to true) the tree item is the active one.                                                                  | `boolean \\| undefined` | `undefined` |\n| `_href` _(required)_  | `_href`   | Defines the target URI of the link.                                                                                | `string`               | `undefined` |\n| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`               | `undefined` |\n| `_open`               | `_open`   | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `collapse() => Promise<void | undefined>`\n\nCollapses the tree item.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `expand() => Promise<void | undefined>`\n\nExpands the tree item.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<any>`\n\nFocuses the link element.\n\n#### Parameters\n\n| Name      | Type                           | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `isOpen() => Promise<boolean>`\n\nReturns whether the tree item is expanded.\n\n#### Returns\n\nType: `Promise<boolean>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {