@public-ui/mcp 4.1.3-rc.0 → 4.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/mcp",
-  "version": "4.1.3-rc.0",
+  "version": "4.1.3",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -46,7 +46,7 @@
     "express": "5.2.1",
     "fuse.js": "7.3.0",
     "zod": "4.3.6",
-    "@public-ui/components": "4.1.3-rc.0"
+    "@public-ui/components": "4.1.3"
   },
   "devDependencies": {
     "@eslint/js": "9.39.4",

package/shared/sample-index.json

@@ -1,16 +1,16 @@
 {
   "metadata": {
-    "generatedAt": "2026-04-09T05:13:25.428Z",
+    "generatedAt": "2026-04-21T15:50:16.413Z",
     "buildMode": "ci",
     "counts": {
-      "total": 289,
-      "totalDocs": 52,
+      "total": 292,
+      "totalDocs": 53,
       "totalSpecs": 53,
-      "totalSamples": 165,
+      "totalSamples": 167,
       "totalScenarios": 19
     },
     "repo": {
-      "commit": "46e8abb712c0711c202e531386caed5ff22aff85",
+      "commit": "73217f9cf6af05eee42b6f863367a2a68a9354d7",
       "branch": "develop",
       "repoUrl": "https://github.com/public-ui/kolibri"
     }
@@ -77,7 +77,7 @@
       "group": "docs/arc42_de",
       "name": "07-deployment-view",
       "path": "docs/arc42_de/07-deployment-view.md",
-      "code": "# 7. Verteilungssicht\n\nDieser Abschnitt beschreibt die Infrastruktur und Verteilungsszenarien für Public UI - KoliBri. Er umfasst Entwicklungsumgebungen, CI/CD-Pipelines, Paketverteilungsstrategien und verschiedene Anwendungs-Verteilungsmuster, die Konsumenten bei der Integration von KoliBri-Komponenten in ihre Projekte verwenden können.\n\n## 7.1 Infrastrukturübersicht\n\n```mermaid\ngraph TB\n    subgraph Development\n        Dev[Entwickler-Workstation]\n        Git[Git Repository<br/>GitHub]\n    end\n\n    subgraph CI/CD\n        Actions[GitHub Actions]\n        Tests[Test-Runner]\n        Build[Build-Pipeline]\n        Security[Sicherheits-Scanner<br/>CodeQL]\n    end\n\n    subgraph Distribution\n        NPM[npm Registry]\n        CDN1[unpkg.com]\n        CDN2[jsDelivr]\n    end\n\n    subgraph Deployment\n        StaticSite[Statische Websites]\n        SPA[Single Page Apps]\n        SSR[Server-Side Rendered Apps]\n    end\n\n    Dev -->|push code| Git\n    Git -->|trigger| Actions\n    Actions -->|führe aus| Tests\n    Actions -->|führe aus| Build\n    Actions -->|führe aus| Security\n    Actions -->|veröffentliche| NPM\n\n    NPM -->|spiegele| CDN1\n    NPM -->|spiegele| CDN2\n\n    NPM -->|installiere| StaticSite\n    NPM -->|installiere| SPA\n    NPM -->|installiere| SSR\n\n    CDN1 -->|lade| StaticSite\n    CDN2 -->|lade| StaticSite\n```\n\n## 7.2 Entwicklungsumgebung\n\n### Entwickler-Workstation-Anforderungen\n\n| Komponente         | Anforderung                       | Zweck                                         |\n| ------------------ | --------------------------------- | --------------------------------------------- |\n| **Betriebssystem** | Windows 10+, macOS 11+ oder Linux | Plattformunabhängige Entwicklung              |\n| **Node.js**        | Version 22.x (erforderlich)       | Runtime für Build-Tools                       |\n| **pnpm**           | Version 10.x                      | Paketmanager                                  |\n| **Git**            | Version 2.30+                     | Versionskontrolle                             |\n| **IDE**            | VS Code (empfohlen)               | Code-Bearbeitung mit TypeScript-Unterstützung |\n| **Browser**        | Chrome/Edge (zum Testen)          | Entwicklung und Testing                       |\n\n### Lokales Setup\n\n```bash\n# Repository klonen\ngit clone https://github.com/public-ui/kolibri.git\ncd kolibri\n\n# Node.js 22 installieren\n# (plattformspezifische Installation)\n\n# pnpm aktivieren\ncorepack enable pnpm\n\n# Abhängigkeiten installieren\npnpm i --ignore-scripts\n\n# Alle Pakete bauen\npnpm -r build\n\n# Entwicklungsserver starten\ncd packages/samples/react\npnpm start\n```\n\n### Entwicklungs-Ports\n\n| Port     | Dienst               | URL                   |\n| -------- | -------------------- | --------------------- |\n| 9191     | React-Beispiel-App   | http://localhost:9191 |\n| 4200     | Angular-Beispiel-App | http://localhost:4200 |\n| Variabel | Stencil-Dev-Server   | http://localhost:3333 |\n\n## 7.3 CI/CD-Pipeline\n\n```mermaid\ngraph LR\n    subgraph GitHub Actions Workflows\n        PR[Pull Request] -->|trigger| CI\n        Push[Push to main] -->|trigger| CI\n        Tag[Tag-Erstellung] -->|trigger| Publish\n\n        CI[CI Workflow]\n        Publish[Publish Workflow]\n        Snapshots[Update Snapshots]\n\n        CI -->|bei Erfolg| Merge\n        Merge[Merge to main]\n        Merge -->|trigger| Tag\n        Tag -->|trigger| Publish\n    end\n\n    subgraph CI Steps\n        Install[Abhängigkeiten installieren]\n        Build[Alle Pakete bauen]\n        Lint[Code linten]\n        Test[Tests ausführen]\n        Security[Sicherheits-Scans]\n\n        Install --> Build\n        Build --> Lint\n        Lint --> Test\n        Test --> Security\n    end\n\n    subgraph Publish Steps\n        VerifyBuild[Build verifizieren]\n        Pack[Pakete packen]\n        Provenance[Provenance generieren]\n        NPMPublish[Zu npm veröffentlichen]\n\n        VerifyBuild --> Pack\n        Pack --> Provenance\n        Provenance --> NPMPublish\n    end\n```\n\n### GitHub Actions Workflows\n\n| Workflow                 | Trigger                      | Zweck                                          |\n| ------------------------ | ---------------------------- | ---------------------------------------------- |\n| **ci.yml**               | Push, Pull Request           | Tests, Linting, Builds ausführen               |\n| **publish.yml**          | Tag-Erstellung               | Pakete zu npm mit Provenance veröffentlichen   |\n| **update-snapshots.yml** | Manueller Trigger            | Visual Regression Test Snapshots aktualisieren |\n| **codeql.yml**           | Push, Pull Request, Schedule | Sicherheits-Scanning mit CodeQL                |\n\n### CI Quality Gates\n\nAlle PRs müssen bestehen:\n\n1. **Build**: Alle Pakete müssen ohne Fehler bauen\n2. **Linting**: ESLint, Stylelint, TypeScript-Checks müssen bestehen\n3. **Unit-Tests**: Alle Jest-Tests müssen bestehen\n4. **E2E-Tests**: Playwright-Tests müssen bestehen\n5. **Sicherheit**: CodeQL-Analyse muss bestehen, keine kritischen Schwachstellen\n6. **Formatierung**: Code muss mit Prettier formatiert sein\n\n## 7.4 Paketverteilung\n\n### npm Registry\n\nPrimärer Verteilungskanal für KoliBri-Pakete:\n\n```mermaid\ngraph TB\n    subgraph \"Published Packages\"\n        Core[\"@public-ui/components\"]\n        DefaultTheme[\"@public-ui/theme-default\"]\n        ECLTheme[\"@public-ui/theme-ecl\"]\n        ReactAdapter[\"@public-ui/react\"]\n        AngularAdapter[\"@public-ui/angular-v21\"]\n        VueAdapter[\"@public-ui/vue\"]\n        CLI[\"@public-ui/kolibri-cli\"]\n    end\n\n    subgraph \"npm Registry\"\n        Registry[npm Registry]\n    end\n\n    subgraph CDN\n        unpkg[unpkg.com]\n        jsDelivr[jsDelivr.net]\n    end\n\n    Core --> Registry\n    DefaultTheme --> Registry\n    ECLTheme --> Registry\n    ReactAdapter --> Registry\n    AngularAdapter --> Registry\n    VueAdapter --> Registry\n    CLI --> Registry\n\n    Registry -->|spiegele| unpkg\n    Registry -->|spiegele| jsDelivr\n```\n\n### Paketstruktur\n\nJedes zu npm veröffentlichte Paket enthält:\n\n```\n@public-ui/components/\n├── dist/                   # Kompiliertes JavaScript\n│   ├── index.js           # ES-Modul-Einstieg\n│   ├── index.cjs.js       # CommonJS-Einstieg\n│   ├── types/             # TypeScript-Definitionen\n│   └── esm/               # ES2017-Module\n├── loader/                # Lazy-Loading-Wrapper\n├── assets/                # Statische Assets (Icons, etc.)\n├── doc/                   # Generierte Dokumentation\n├── custom-elements.json   # Custom Elements Manifest\n└── package.json           # Paket-Metadaten\n```\n\n### SLSA Provenance\n\nKoliBri veröffentlicht Pakete mit SLSA Build Level 3 Provenance:\n\n- Pakete in GitHub Actions mit OIDC-Identität gebaut\n- Mit `--provenance`-Flag veröffentlicht\n- Verifizierbare Attestierungen für alle veröffentlichten Artefakte\n- Gewährleistet Build-Integrität und Supply-Chain-Sicherheit\n\nVerifizierung:\n\n```bash\n# Provenance-Metadaten anzeigen\npnpm view @public-ui/components dist.provenance\n\n# Signaturen verifizieren (falls npm-Client unterstützt)\npnpm audit signatures --package=@public-ui/components@latest\n```\n\n## 7.5 Anwendungs-Verteilungsszenarien\n\n### Szenario 1: Statische Website\n\n```mermaid\ngraph LR\n    Build[Build-Prozess] -->|bundle| Static[Statische Assets]\n    Static -->|deploy| CDN[CDN/Static Host]\n    CDN -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lade| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten mit Anwendungscode gebündelt\n- Zu statischem Hosting deployed (Netlify, Vercel, GitHub Pages, S3, etc.)\n- Kein Server-Side Rendering\n- Alle Assets von CDN gecacht\n\n**Beispiel:**\n\n```html\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<script type=\"module\" src=\"./kolibri-components.js\"></script>\n\t\t<link rel=\"stylesheet\" href=\"./theme-default.css\" />\n\t</head>\n\t<body>\n\t\t<kol-button _label=\"Klick mich\"></kol-button>\n\t</body>\n</html>\n```\n\n### Szenario 2: Single Page Application (SPA)\n\n```mermaid\ngraph LR\n    Framework[React/Angular/Vue App] -->|bundle| Webpack[Bundler]\n    Webpack -->|build| Assets[Optimierte Assets]\n    Assets -->|deploy| Server[Web-Server]\n    Server -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lazy load| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten über Framework-Adapter importiert\n- Mit Anwendung über Webpack/Vite/Rollup gebündelt\n- Lazy Loading für Code-Splitting\n- Zu Anwendungsserver oder CDN deployed\n\n**Beispiel (React):**\n\n```typescript\nimport { KolButton } from '@public-ui/react';\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n\nfunction App() {\n\treturn <KolButton _label=\"Klick mich\" />;\n}\n```\n\n### Szenario 3: Server-Side Rendering (SSR)\n\n```mermaid\ngraph LR\n    SSR[SSR Server] -->|render| HTML[Initiales HTML]\n    HTML -->|sende| Browser[Nutzer-Browser]\n    Browser -->|hydrate| Components[KoliBri-Komponenten]\n    Browser -->|request| SSR\n```\n\n**Verteilung:**\n\n- Komponenten auf Client nach SSR hydratisiert\n- Initiales HTML server-seitig gerendert\n- Client-seitige Hydratisierung für Interaktivität\n- Zu Node.js-Server oder Serverless-Funktionen deployed\n\n**Überlegungen:**\n\n- Verwende Hydrate-Adapter für SSR-Unterstützung\n- Komponenten benötigen client-seitige Hydratisierung\n- Shadow DOM erfordert sorgfältiges SSR-Handling\n\n### Szenario 4: Nur CDN (Kein Build)\n\n```mermaid\ngraph LR\n    CDN[unpkg/jsDelivr] -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lade| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten direkt von CDN laden\n- Kein Build-Schritt erforderlich\n- Ideal für Prototypen und einfache Websites\n\n**Beispiel:**\n\n```html\n<script type=\"module\">\n\timport { defineCustomElements } from 'https://unpkg.com/@public-ui/components@latest/loader/index.mjs';\n\timport { register } from 'https://unpkg.com/@public-ui/components@latest/dist/index.js';\n\timport { DEFAULT } from 'https://unpkg.com/@public-ui/theme-default@latest/index.js';\n\n\tawait register(DEFAULT, defineCustomElements);\n</script>\n```\n\n## 7.6 Verteilungstopologie\n\n### Multi-Tier-Architektur\n\n```mermaid\ngraph TB\n    subgraph \"User Tier\"\n        Browser[Web Browser]\n        AT[Assistive Technologie]\n    end\n\n    subgraph \"CDN Tier\"\n        CDN[Content Delivery Network]\n    end\n\n    subgraph \"Application Tier\"\n        AppServer[Anwendungsserver - Node.js/Static]\n        API[Backend-API - optional]\n    end\n\n    subgraph \"Data Tier\"\n        DB[Datenbank - optional]\n    end\n\n    Browser -->|HTTPS| CDN\n    Browser -->|HTTPS| AppServer\n    AT -->|Accessibility API| Browser\n\n    CDN -->|fallback| AppServer\n    AppServer -->|HTTP/REST| API\n    API -->|query| DB\n```\n\n### Komponenten-Lade-Strategie\n\n1. **Initialer Ladevorgang**:\n   - HTML-Seite mit Komponenten-Tags\n   - Kern-Component-Loader-Skript\n   - Theme-CSS\n\n2. **Lazy Loading**:\n   - Individuelle Komponenten-Bundles on-demand geladen\n   - Nur verwendete Komponenten heruntergeladen\n   - Browser-Caching für nachfolgende Ladevorgänge\n\n3. **Caching-Strategie**:\n   - Komponenten: Langer Cache (unveränderliche Versionen)\n   - Themes: Langer Cache (unveränderliche Versionen)\n   - Anwendungscode: Cache mit Revalidierung\n\n## 7.7 Monitoring und Observability\n\n### Client-Side-Monitoring\n\nEmpfehlungen für Anwendungen mit KoliBri:\n\n- **Performance-Monitoring**: Web Vitals\n- **Fehler-Tracking**: Sentry, Rollbar (Anwendungsebene)\n- **Barrierefreiheits-Monitoring**: axe DevTools, automatisierte Scans\n- **Bundle-Size-Tracking**: bundlephobia, webpack-bundle-analyzer\n\n### Build-Pipeline-Monitoring\n\n- **CI/CD-Status**: GitHub Actions Status-Badges\n- **Test-Abdeckung**: Jest-Coverage-Reports\n- **Sicherheits-Warnungen**: GitHub Dependabot, CodeQL-Warnungen\n- **Paket-Gesundheit**: npm-Paket-Gesundheits-Score\n\n### Metriken\n\nWichtige verfolgte Metriken:\n\n- **Build-Zeit**: Vollständige Build-Dauer (~2 Minuten)\n- **Test-Dauer**: Unit + E2E-Test-Ausführung (~3 Minuten)\n- **Paketgröße**: Individuelle Paketgrößen\n- **Download-Statistiken**: npm-Download-Zahlen\n- **Issue-Auflösungszeit**: Zeit bis zum Schließen von Issues/PRs\n",
+      "code": "# 7. Verteilungssicht\n\nDieser Abschnitt beschreibt die Infrastruktur und Verteilungsszenarien für Public UI - KoliBri. Er umfasst Entwicklungsumgebungen, CI/CD-Pipelines, Paketverteilungsstrategien und verschiedene Anwendungs-Verteilungsmuster, die Konsumenten bei der Integration von KoliBri-Komponenten in ihre Projekte verwenden können.\n\n## 7.1 Infrastrukturübersicht\n\n```mermaid\ngraph TB\n    subgraph Development\n        Dev[Entwickler-Workstation]\n        Git[Git Repository<br/>GitHub]\n    end\n\n    subgraph CI/CD\n        Actions[GitHub Actions]\n        Tests[Test-Runner]\n        Build[Build-Pipeline]\n        Security[Sicherheits-Scanner<br/>CodeQL]\n    end\n\n    subgraph Distribution\n        NPM[npm Registry]\n        CDN1[unpkg.com]\n        CDN2[jsDelivr]\n    end\n\n    subgraph Deployment\n        StaticSite[Statische Websites]\n        SPA[Single Page Apps]\n        SSR[Server-Side Rendered Apps]\n    end\n\n    Dev -->|push code| Git\n    Git -->|trigger| Actions\n    Actions -->|führe aus| Tests\n    Actions -->|führe aus| Build\n    Actions -->|führe aus| Security\n    Actions -->|veröffentliche| NPM\n\n    NPM -->|spiegele| CDN1\n    NPM -->|spiegele| CDN2\n\n    NPM -->|installiere| StaticSite\n    NPM -->|installiere| SPA\n    NPM -->|installiere| SSR\n\n    CDN1 -->|lade| StaticSite\n    CDN2 -->|lade| StaticSite\n```\n\n## 7.2 Entwicklungsumgebung\n\n### Entwickler-Workstation-Anforderungen\n\n| Komponente         | Anforderung                       | Zweck                                         |\n| ------------------ | --------------------------------- | --------------------------------------------- |\n| **Betriebssystem** | Windows 10+, macOS 11+ oder Linux | Plattformunabhängige Entwicklung              |\n| **Node.js**        | Version 22.x (erforderlich)       | Runtime für Build-Tools                       |\n| **pnpm**           | Version 10.x                      | Paketmanager                                  |\n| **Git**            | Version 2.30+                     | Versionskontrolle                             |\n| **IDE**            | VS Code (empfohlen)               | Code-Bearbeitung mit TypeScript-Unterstützung |\n| **Browser**        | Chrome/Edge (zum Testen)          | Entwicklung und Testing                       |\n\n### Lokales Setup\n\n```bash\n# Repository klonen\ngit clone https://github.com/public-ui/kolibri.git\ncd kolibri\n\n# Node.js 22 installieren\n# (plattformspezifische Installation)\n\n# pnpm aktivieren\ncorepack enable pnpm\n\n# Abhängigkeiten installieren\npnpm i --ignore-scripts\n\n# Alle Pakete bauen\npnpm -r build\n\n# Entwicklungsserver starten\ncd packages/samples/react\npnpm start\n```\n\n### Entwicklungs-Ports\n\n| Port     | Dienst               | URL                   |\n| -------- | -------------------- | --------------------- |\n| 9191     | React-Beispiel-App   | http://localhost:9191 |\n| 4200     | Angular-Beispiel-App | http://localhost:4200 |\n| Variabel | Stencil-Dev-Server   | http://localhost:3333 |\n\n## 7.3 CI/CD-Pipeline\n\n```mermaid\ngraph LR\n    subgraph GitHub Actions Workflows\n        PR[Pull Request] -->|trigger| CI\n        Push[Push to main] -->|trigger| CI\n        Tag[Tag-Erstellung] -->|trigger| Publish\n\n        CI[CI Workflow]\n        Publish[Publish Workflow]\n        Snapshots[Update Snapshots]\n\n        CI -->|bei Erfolg| Merge\n        Merge[Merge to main]\n        Merge -->|trigger| Tag\n        Tag -->|trigger| Publish\n    end\n\n    subgraph CI Steps\n        Install[Abhängigkeiten installieren]\n        Build[Alle Pakete bauen]\n        Lint[Code linten]\n        Test[Tests ausführen]\n        Security[Sicherheits-Scans]\n\n        Install --> Build\n        Build --> Lint\n        Lint --> Test\n        Test --> Security\n    end\n\n    subgraph Publish Steps\n        VerifyBuild[Build verifizieren]\n        Pack[Pakete packen]\n        Provenance[Provenance generieren]\n        NPMPublish[Zu npm veröffentlichen]\n\n        VerifyBuild --> Pack\n        Pack --> Provenance\n        Provenance --> NPMPublish\n    end\n```\n\n### GitHub Actions Workflows\n\n| Workflow                 | Trigger                      | Zweck                                          |\n| ------------------------ | ---------------------------- | ---------------------------------------------- |\n| **ci.yml**               | Push, Pull Request           | Tests, Linting, Builds ausführen               |\n| **publish.yml**          | Tag-Erstellung               | Pakete zu npm mit Provenance veröffentlichen   |\n| **update-pnpm-lock.yml** | Manueller Trigger            | `pnpm-lock.yaml` für einen Branch erneuern     |\n| **update-snapshots.yml** | Manueller Trigger            | Visual Regression Test Snapshots aktualisieren |\n| **codeql.yml**           | Push, Pull Request, Schedule | Sicherheits-Scanning mit CodeQL                |\n\n### CI Quality Gates\n\nAlle PRs müssen bestehen:\n\n1. **Build**: Alle Pakete müssen ohne Fehler bauen\n2. **Linting**: ESLint, Stylelint, TypeScript-Checks müssen bestehen\n3. **Unit-Tests**: Alle Jest-Tests müssen bestehen\n4. **E2E-Tests**: Playwright-Tests müssen bestehen\n5. **Sicherheit**: CodeQL-Analyse muss bestehen, keine kritischen Schwachstellen\n6. **Formatierung**: Code muss mit Prettier formatiert sein\n\n## 7.4 Paketverteilung\n\n### npm Registry\n\nPrimärer Verteilungskanal für KoliBri-Pakete:\n\n```mermaid\ngraph TB\n    subgraph \"Published Packages\"\n        Core[\"@public-ui/components\"]\n        DefaultTheme[\"@public-ui/theme-default\"]\n        ECLTheme[\"@public-ui/theme-ecl\"]\n        ReactAdapter[\"@public-ui/react\"]\n        AngularAdapter[\"@public-ui/angular-v21\"]\n        VueAdapter[\"@public-ui/vue\"]\n        CLI[\"@public-ui/kolibri-cli\"]\n    end\n\n    subgraph \"npm Registry\"\n        Registry[npm Registry]\n    end\n\n    subgraph CDN\n        unpkg[unpkg.com]\n        jsDelivr[jsDelivr.net]\n    end\n\n    Core --> Registry\n    DefaultTheme --> Registry\n    ECLTheme --> Registry\n    ReactAdapter --> Registry\n    AngularAdapter --> Registry\n    VueAdapter --> Registry\n    CLI --> Registry\n\n    Registry -->|spiegele| unpkg\n    Registry -->|spiegele| jsDelivr\n```\n\n### Paketstruktur\n\nJedes zu npm veröffentlichte Paket enthält:\n\n```\n@public-ui/components/\n├── dist/                   # Kompiliertes JavaScript\n│   ├── index.js           # ES-Modul-Einstieg\n│   ├── index.cjs.js       # CommonJS-Einstieg\n│   ├── types/             # TypeScript-Definitionen\n│   └── esm/               # ES2017-Module\n├── loader/                # Lazy-Loading-Wrapper\n├── assets/                # Statische Assets (Icons, etc.)\n├── doc/                   # Generierte Dokumentation\n├── custom-elements.json   # Custom Elements Manifest\n└── package.json           # Paket-Metadaten\n```\n\n### SLSA Provenance\n\nKoliBri veröffentlicht Pakete mit SLSA Build Level 3 Provenance:\n\n- Pakete in GitHub Actions mit OIDC-Identität gebaut\n- Mit `--provenance`-Flag veröffentlicht\n- Verifizierbare Attestierungen für alle veröffentlichten Artefakte\n- Gewährleistet Build-Integrität und Supply-Chain-Sicherheit\n\nVerifizierung:\n\n```bash\n# Provenance-Metadaten anzeigen\npnpm view @public-ui/components dist.provenance\n\n# Signaturen verifizieren (falls npm-Client unterstützt)\npnpm audit signatures --package=@public-ui/components@latest\n```\n\n## 7.5 Anwendungs-Verteilungsszenarien\n\n### Szenario 1: Statische Website\n\n```mermaid\ngraph LR\n    Build[Build-Prozess] -->|bundle| Static[Statische Assets]\n    Static -->|deploy| CDN[CDN/Static Host]\n    CDN -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lade| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten mit Anwendungscode gebündelt\n- Zu statischem Hosting deployed (Netlify, Vercel, GitHub Pages, S3, etc.)\n- Kein Server-Side Rendering\n- Alle Assets von CDN gecacht\n\n**Beispiel:**\n\n```html\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<script type=\"module\" src=\"./kolibri-components.js\"></script>\n\t\t<link rel=\"stylesheet\" href=\"./theme-default.css\" />\n\t</head>\n\t<body>\n\t\t<kol-button _label=\"Klick mich\"></kol-button>\n\t</body>\n</html>\n```\n\n### Szenario 2: Single Page Application (SPA)\n\n```mermaid\ngraph LR\n    Framework[React/Angular/Vue App] -->|bundle| Webpack[Bundler]\n    Webpack -->|build| Assets[Optimierte Assets]\n    Assets -->|deploy| Server[Web-Server]\n    Server -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lazy load| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten über Framework-Adapter importiert\n- Mit Anwendung über Webpack/Vite/Rollup gebündelt\n- Lazy Loading für Code-Splitting\n- Zu Anwendungsserver oder CDN deployed\n\n**Beispiel (React):**\n\n```typescript\nimport { KolButton } from '@public-ui/react';\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n\nfunction App() {\n\treturn <KolButton _label=\"Klick mich\" />;\n}\n```\n\n### Szenario 3: Server-Side Rendering (SSR)\n\n```mermaid\ngraph LR\n    SSR[SSR Server] -->|render| HTML[Initiales HTML]\n    HTML -->|sende| Browser[Nutzer-Browser]\n    Browser -->|hydrate| Components[KoliBri-Komponenten]\n    Browser -->|request| SSR\n```\n\n**Verteilung:**\n\n- Komponenten auf Client nach SSR hydratisiert\n- Initiales HTML server-seitig gerendert\n- Client-seitige Hydratisierung für Interaktivität\n- Zu Node.js-Server oder Serverless-Funktionen deployed\n\n**Überlegungen:**\n\n- Verwende Hydrate-Adapter für SSR-Unterstützung\n- Komponenten benötigen client-seitige Hydratisierung\n- Shadow DOM erfordert sorgfältiges SSR-Handling\n\n### Szenario 4: Nur CDN (Kein Build)\n\n```mermaid\ngraph LR\n    CDN[unpkg/jsDelivr] -->|serve| Browser[Nutzer-Browser]\n    Browser -->|lade| Components[KoliBri-Komponenten]\n```\n\n**Verteilung:**\n\n- Komponenten direkt von CDN laden\n- Kein Build-Schritt erforderlich\n- Ideal für Prototypen und einfache Websites\n\n**Beispiel:**\n\n```html\n<script type=\"module\">\n\timport { defineCustomElements } from 'https://unpkg.com/@public-ui/components@latest/loader/index.mjs';\n\timport { register } from 'https://unpkg.com/@public-ui/components@latest/dist/index.js';\n\timport { DEFAULT } from 'https://unpkg.com/@public-ui/theme-default@latest/index.js';\n\n\tawait register(DEFAULT, defineCustomElements);\n</script>\n```\n\n## 7.6 Verteilungstopologie\n\n### Multi-Tier-Architektur\n\n```mermaid\ngraph TB\n    subgraph \"User Tier\"\n        Browser[Web Browser]\n        AT[Assistive Technologie]\n    end\n\n    subgraph \"CDN Tier\"\n        CDN[Content Delivery Network]\n    end\n\n    subgraph \"Application Tier\"\n        AppServer[Anwendungsserver - Node.js/Static]\n        API[Backend-API - optional]\n    end\n\n    subgraph \"Data Tier\"\n        DB[Datenbank - optional]\n    end\n\n    Browser -->|HTTPS| CDN\n    Browser -->|HTTPS| AppServer\n    AT -->|Accessibility API| Browser\n\n    CDN -->|fallback| AppServer\n    AppServer -->|HTTP/REST| API\n    API -->|query| DB\n```\n\n### Komponenten-Lade-Strategie\n\n1. **Initialer Ladevorgang**:\n   - HTML-Seite mit Komponenten-Tags\n   - Kern-Component-Loader-Skript\n   - Theme-CSS\n\n2. **Lazy Loading**:\n   - Individuelle Komponenten-Bundles on-demand geladen\n   - Nur verwendete Komponenten heruntergeladen\n   - Browser-Caching für nachfolgende Ladevorgänge\n\n3. **Caching-Strategie**:\n   - Komponenten: Langer Cache (unveränderliche Versionen)\n   - Themes: Langer Cache (unveränderliche Versionen)\n   - Anwendungscode: Cache mit Revalidierung\n\n## 7.7 Monitoring und Observability\n\n### Client-Side-Monitoring\n\nEmpfehlungen für Anwendungen mit KoliBri:\n\n- **Performance-Monitoring**: Web Vitals\n- **Fehler-Tracking**: Sentry, Rollbar (Anwendungsebene)\n- **Barrierefreiheits-Monitoring**: axe DevTools, automatisierte Scans\n- **Bundle-Size-Tracking**: bundlephobia, webpack-bundle-analyzer\n\n### Build-Pipeline-Monitoring\n\n- **CI/CD-Status**: GitHub Actions Status-Badges\n- **Test-Abdeckung**: Jest-Coverage-Reports\n- **Sicherheits-Warnungen**: GitHub Dependabot, CodeQL-Warnungen\n- **Paket-Gesundheit**: npm-Paket-Gesundheits-Score\n\n### Metriken\n\nWichtige verfolgte Metriken:\n\n- **Build-Zeit**: Vollständige Build-Dauer (~2 Minuten)\n- **Test-Dauer**: Unit + E2E-Test-Ausführung (~3 Minuten)\n- **Paketgröße**: Individuelle Paketgrößen\n- **Download-Statistiken**: npm-Download-Zahlen\n- **Issue-Auflösungszeit**: Zeit bis zum Schließen von Issues/PRs\n",
       "kind": "doc"
     },
     {
@@ -181,7 +181,7 @@
       "group": "docs/arc42",
       "name": "07-deployment-view",
       "path": "docs/arc42/07-deployment-view.md",
-      "code": "# 7. Deployment View\n\nThis section describes the infrastructure and deployment scenarios for Public UI - KoliBri. It covers development environments, CI/CD pipelines, package distribution strategies, and various application deployment patterns that consumers can use when integrating KoliBri components into their projects.\n\n## 7.1 Infrastructure Overview\n\n```mermaid\ngraph TB\n    subgraph Development\n        Dev[Developer Workstation]\n        Git[Git Repository<br/>GitHub]\n    end\n\n    subgraph CI/CD\n        Actions[GitHub Actions]\n        Tests[Test Runners]\n        Build[Build Pipeline]\n        Security[Security Scanners<br/>CodeQL]\n    end\n\n    subgraph Distribution\n        NPM[npm Registry]\n        CDN1[unpkg.com]\n        CDN2[jsDelivr]\n    end\n\n    subgraph Deployment\n        StaticSite[Static Sites]\n        SPA[Single Page Apps]\n        SSR[Server-Side Rendered Apps]\n    end\n\n    Dev -->|push code| Git\n    Git -->|trigger| Actions\n    Actions -->|run| Tests\n    Actions -->|run| Build\n    Actions -->|run| Security\n    Actions -->|publish| NPM\n\n    NPM -->|mirror| CDN1\n    NPM -->|mirror| CDN2\n\n    NPM -->|install| StaticSite\n    NPM -->|install| SPA\n    NPM -->|install| SSR\n\n    CDN1 -->|load| StaticSite\n    CDN2 -->|load| StaticSite\n```\n\n## 7.2 Development Environment\n\n### Developer Workstation Requirements\n\n| Component            | Requirement                      | Purpose                              |\n| -------------------- | -------------------------------- | ------------------------------------ |\n| **Operating System** | Windows 10+, macOS 11+, or Linux | Platform-independent development     |\n| **Node.js**          | Version 22.x (required)          | Runtime for build tools              |\n| **pnpm**             | Version 10.x                     | Package manager                      |\n| **Git**              | Version 2.30+                    | Version control                      |\n| **IDE**              | VS Code (recommended)            | Code editing with TypeScript support |\n| **Browser**          | Chrome/Edge (for testing)        | Development and testing              |\n\n### Local Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/public-ui/kolibri.git\ncd kolibri\n\n# Install Node.js 22\n# (platform-specific installation)\n\n# Enable pnpm\ncorepack enable pnpm\n\n# Install dependencies\npnpm i --ignore-scripts\n\n# Build all packages\npnpm -r build\n\n# Start development server\ncd packages/samples/react\npnpm start\n```\n\n### Development Ports\n\n| Port     | Service            | URL                   |\n| -------- | ------------------ | --------------------- |\n| 9191     | React sample app   | http://localhost:9191 |\n| 4200     | Angular sample app | http://localhost:4200 |\n| Variable | Stencil dev server | http://localhost:3333 |\n\n## 7.3 CI/CD Pipeline\n\n```mermaid\ngraph LR\n    subgraph GitHub Actions Workflows\n        PR[Pull Request] -->|trigger| CI\n        Push[Push to main] -->|trigger| CI\n        Tag[Tag creation] -->|trigger| Publish\n\n        CI[CI Workflow]\n        Publish[Publish Workflow]\n        Snapshots[Update Snapshots]\n\n        CI -->|on success| Merge\n        Merge[Merge to main]\n        Merge -->|trigger| Tag\n        Tag -->|trigger| Publish\n    end\n\n    subgraph CI Steps\n        Install[Install Dependencies]\n        Build[Build All Packages]\n        Lint[Lint Code]\n        Test[Run Tests]\n        Security[Security Scans]\n\n        Install --> Build\n        Build --> Lint\n        Lint --> Test\n        Test --> Security\n    end\n\n    subgraph Publish Steps\n        VerifyBuild[Verify Build]\n        Pack[Pack Packages]\n        Provenance[Generate Provenance]\n        NPMPublish[Publish to npm]\n\n        VerifyBuild --> Pack\n        Pack --> Provenance\n        Provenance --> NPMPublish\n    end\n```\n\n### GitHub Actions Workflows\n\n| Workflow                 | Trigger                      | Purpose                                 |\n| ------------------------ | ---------------------------- | --------------------------------------- |\n| **ci.yml**               | Push, Pull Request           | Run tests, linting, builds              |\n| **publish.yml**          | Tag creation                 | Publish packages to npm with provenance |\n| **update-snapshots.yml** | Manual trigger               | Update visual regression test snapshots |\n| **codeql.yml**           | Push, Pull Request, Schedule | Security scanning with CodeQL           |\n\n### CI Quality Gates\n\nAll PRs must pass:\n\n1. **Build**: All packages must build without errors\n2. **Linting**: ESLint, Stylelint, TypeScript checks must pass\n3. **Unit Tests**: All Jest tests must pass\n4. **E2E Tests**: Playwright tests must pass\n5. **Security**: CodeQL analysis must pass, no high-severity vulnerabilities\n6. **Formatting**: Code must be formatted with Prettier\n\n## 7.4 Package Distribution\n\n### npm Registry\n\nPrimary distribution channel for KoliBri packages:\n\n```mermaid\ngraph TB\n    subgraph \"Published Packages\"\n        Core[\"@public-ui/components\"]\n        DefaultTheme[\"@public-ui/theme-default\"]\n        ECLTheme[\"@public-ui/theme-ecl\"]\n        ReactAdapter[\"@public-ui/react\"]\n        AngularAdapter[\"@public-ui/angular-v21\"]\n        VueAdapter[\"@public-ui/vue\"]\n        CLI[\"@public-ui/kolibri-cli\"]\n    end\n\n    subgraph \"npm Registry\"\n        Registry[npm Registry]\n    end\n\n    subgraph CDN\n        unpkg[unpkg.com]\n        jsDelivr[jsDelivr.net]\n    end\n\n    Core --> Registry\n    DefaultTheme --> Registry\n    ECLTheme --> Registry\n    ReactAdapter --> Registry\n    AngularAdapter --> Registry\n    VueAdapter --> Registry\n    CLI --> Registry\n\n    Registry -->|mirror| unpkg\n    Registry -->|mirror| jsDelivr\n```\n\n### Package Structure\n\nEach package published to npm includes:\n\n```\n@public-ui/components/\n├── dist/                   # Compiled JavaScript\n│   ├── index.js           # ES module entry\n│   ├── index.cjs.js       # CommonJS entry\n│   ├── types/             # TypeScript definitions\n│   └── esm/               # ES2017 modules\n├── loader/                # Lazy loading wrapper\n├── assets/                # Static assets (icons, etc.)\n├── doc/                   # Generated documentation\n├── custom-elements.json   # Custom Elements Manifest\n└── package.json           # Package metadata\n```\n\n### SLSA Provenance\n\nKoliBri publishes packages with SLSA Build Level 3 provenance:\n\n- Packages built in GitHub Actions with OIDC identity\n- Published with `--provenance` flag\n- Verifiable attestations for all published artifacts\n- Ensures build integrity and supply chain security\n\nVerification:\n\n```bash\n# View provenance metadata\npnpm view @public-ui/components dist.provenance\n\n# Verify signatures (if npm client supports)\npnpm audit signatures --package=@public-ui/components@latest\n```\n\n## 7.5 Application Deployment Scenarios\n\n### Scenario 1: Static Website\n\n```mermaid\ngraph LR\n    Build[Build Process] -->|bundle| Static[Static Assets]\n    Static -->|deploy| CDN[CDN/Static Host]\n    CDN -->|serve| Browser[User Browser]\n    Browser -->|load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Components bundled with application code\n- Deployed to static hosting (Netlify, Vercel, GitHub Pages, S3, etc.)\n- No server-side rendering\n- All assets cached by CDN\n\n**Example:**\n\n```html\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<script type=\"module\" src=\"./kolibri-components.js\"></script>\n\t\t<link rel=\"stylesheet\" href=\"./theme-default.css\" />\n\t</head>\n\t<body>\n\t\t<kol-button _label=\"Click me\"></kol-button>\n\t</body>\n</html>\n```\n\n### Scenario 2: Single Page Application (SPA)\n\n```mermaid\ngraph LR\n    Framework[React/Angular/Vue App] -->|bundle| Webpack[Bundler]\n    Webpack -->|build| Assets[Optimized Assets]\n    Assets -->|deploy| Server[Web Server]\n    Server -->|serve| Browser[User Browser]\n    Browser -->|lazy load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Components imported via framework adapter\n- Bundled with application via Webpack/Vite/Rollup\n- Lazy loading for code splitting\n- Deployed to application server or CDN\n\n**Example (React):**\n\n```typescript\nimport { KolButton } from '@public-ui/react';\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n\nfunction App() {\n\treturn <KolButton _label=\"Click me\" />;\n}\n```\n\n### Scenario 3: Server-Side Rendering (SSR)\n\n```mermaid\ngraph LR\n    SSR[SSR Server] -->|render| HTML[Initial HTML]\n    HTML -->|send| Browser[User Browser]\n    Browser -->|hydrate| Components[KoliBri Components]\n    Browser -->|request| SSR\n```\n\n**Deployment:**\n\n- Components hydrated on client after SSR\n- Initial HTML rendered server-side\n- Client-side hydration for interactivity\n- Deployed to Node.js server or serverless functions\n\n**Considerations:**\n\n- Use hydrate adapter for SSR support\n- Components need client-side hydration\n- Shadow DOM requires careful SSR handling\n\n### Scenario 4: CDN Only (No Build)\n\n```mermaid\ngraph LR\n    CDN[unpkg/jsDelivr] -->|serve| Browser[User Browser]\n    Browser -->|load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Load components directly from CDN\n- No build step required\n- Ideal for prototypes and simple sites\n\n**Example:**\n\n```html\n<script type=\"module\">\n\timport { defineCustomElements } from 'https://unpkg.com/@public-ui/components@latest/loader/index.mjs';\n\timport { register } from 'https://unpkg.com/@public-ui/components@latest/dist/index.js';\n\timport { DEFAULT } from 'https://unpkg.com/@public-ui/theme-default@latest/index.js';\n\n\tawait register(DEFAULT, defineCustomElements);\n</script>\n```\n\n## 7.6 Deployment Topology\n\n### Multi-Tier Architecture\n\n```mermaid\ngraph TB\n    subgraph \"User Tier\"\n        Browser[Web Browser]\n        AT[Assistive Technology]\n    end\n\n    subgraph \"CDN Tier\"\n        CDN[Content Delivery Network]\n    end\n\n    subgraph \"Application Tier\"\n        AppServer[Application Server - Node.js/Static]\n        API[Backend API - optional]\n    end\n\n    subgraph \"Data Tier\"\n        DB[Database - optional]\n    end\n\n    Browser -->|HTTPS| CDN\n    Browser -->|HTTPS| AppServer\n    AT -->|Accessibility API| Browser\n\n    CDN -->|fallback| AppServer\n    AppServer -->|HTTP/REST| API\n    API -->|query| DB\n```\n\n### Component Loading Strategy\n\n1. **Initial Load**:\n   - HTML page with component tags\n   - Core component loader script\n   - Theme CSS\n\n2. **Lazy Loading**:\n   - Individual component bundles loaded on-demand\n   - Only used components downloaded\n   - Browser caching for subsequent loads\n\n3. **Caching Strategy**:\n   - Components: Long cache (immutable versions)\n   - Themes: Long cache (immutable versions)\n   - Application code: Cache with revalidation\n\n## 7.7 Monitoring and Observability\n\n### Client-Side Monitoring\n\nRecommendations for applications using KoliBri:\n\n- **Performance Monitoring**: Web Vitals\n- **Error Tracking**: Sentry, Rollbar (application level)\n- **Accessibility Monitoring**: axe DevTools, automated scans\n- **Bundle Size Tracking**: bundlephobia, webpack-bundle-analyzer\n\n### Build Pipeline Monitoring\n\n- **CI/CD Status**: GitHub Actions status badges\n- **Test Coverage**: Jest coverage reports\n- **Security Alerts**: GitHub Dependabot, CodeQL alerts\n- **Package Health**: npm package health score\n\n### Metrics\n\nKey metrics tracked:\n\n- **Build Time**: Full build duration (~2 minutes)\n- **Test Duration**: Unit + E2E test execution (~3 minutes)\n- **Package Size**: Individual package sizes\n- **Download Stats**: npm download counts\n- **Issue Resolution Time**: Time to close issues/PRs\n",
+      "code": "# 7. Deployment View\n\nThis section describes the infrastructure and deployment scenarios for Public UI - KoliBri. It covers development environments, CI/CD pipelines, package distribution strategies, and various application deployment patterns that consumers can use when integrating KoliBri components into their projects.\n\n## 7.1 Infrastructure Overview\n\n```mermaid\ngraph TB\n    subgraph Development\n        Dev[Developer Workstation]\n        Git[Git Repository<br/>GitHub]\n    end\n\n    subgraph CI/CD\n        Actions[GitHub Actions]\n        Tests[Test Runners]\n        Build[Build Pipeline]\n        Security[Security Scanners<br/>CodeQL]\n    end\n\n    subgraph Distribution\n        NPM[npm Registry]\n        CDN1[unpkg.com]\n        CDN2[jsDelivr]\n    end\n\n    subgraph Deployment\n        StaticSite[Static Sites]\n        SPA[Single Page Apps]\n        SSR[Server-Side Rendered Apps]\n    end\n\n    Dev -->|push code| Git\n    Git -->|trigger| Actions\n    Actions -->|run| Tests\n    Actions -->|run| Build\n    Actions -->|run| Security\n    Actions -->|publish| NPM\n\n    NPM -->|mirror| CDN1\n    NPM -->|mirror| CDN2\n\n    NPM -->|install| StaticSite\n    NPM -->|install| SPA\n    NPM -->|install| SSR\n\n    CDN1 -->|load| StaticSite\n    CDN2 -->|load| StaticSite\n```\n\n## 7.2 Development Environment\n\n### Developer Workstation Requirements\n\n| Component            | Requirement                      | Purpose                              |\n| -------------------- | -------------------------------- | ------------------------------------ |\n| **Operating System** | Windows 10+, macOS 11+, or Linux | Platform-independent development     |\n| **Node.js**          | Version 22.x (required)          | Runtime for build tools              |\n| **pnpm**             | Version 10.x                     | Package manager                      |\n| **Git**              | Version 2.30+                    | Version control                      |\n| **IDE**              | VS Code (recommended)            | Code editing with TypeScript support |\n| **Browser**          | Chrome/Edge (for testing)        | Development and testing              |\n\n### Local Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/public-ui/kolibri.git\ncd kolibri\n\n# Install Node.js 22\n# (platform-specific installation)\n\n# Enable pnpm\ncorepack enable pnpm\n\n# Install dependencies\npnpm i --ignore-scripts\n\n# Build all packages\npnpm -r build\n\n# Start development server\ncd packages/samples/react\npnpm start\n```\n\n### Development Ports\n\n| Port     | Service            | URL                   |\n| -------- | ------------------ | --------------------- |\n| 9191     | React sample app   | http://localhost:9191 |\n| 4200     | Angular sample app | http://localhost:4200 |\n| Variable | Stencil dev server | http://localhost:3333 |\n\n## 7.3 CI/CD Pipeline\n\n```mermaid\ngraph LR\n    subgraph GitHub Actions Workflows\n        PR[Pull Request] -->|trigger| CI\n        Push[Push to main] -->|trigger| CI\n        Tag[Tag creation] -->|trigger| Publish\n\n        CI[CI Workflow]\n        Publish[Publish Workflow]\n        Snapshots[Update Snapshots]\n\n        CI -->|on success| Merge\n        Merge[Merge to main]\n        Merge -->|trigger| Tag\n        Tag -->|trigger| Publish\n    end\n\n    subgraph CI Steps\n        Install[Install Dependencies]\n        Build[Build All Packages]\n        Lint[Lint Code]\n        Test[Run Tests]\n        Security[Security Scans]\n\n        Install --> Build\n        Build --> Lint\n        Lint --> Test\n        Test --> Security\n    end\n\n    subgraph Publish Steps\n        VerifyBuild[Verify Build]\n        Pack[Pack Packages]\n        Provenance[Generate Provenance]\n        NPMPublish[Publish to npm]\n\n        VerifyBuild --> Pack\n        Pack --> Provenance\n        Provenance --> NPMPublish\n    end\n```\n\n### GitHub Actions Workflows\n\n| Workflow                 | Trigger                      | Purpose                                 |\n| ------------------------ | ---------------------------- | --------------------------------------- |\n| **ci.yml**               | Push, Pull Request           | Run tests, linting, builds              |\n| **publish.yml**          | Tag creation                 | Publish packages to npm with provenance |\n| **update-pnpm-lock.yml** | Manual trigger               | Refresh `pnpm-lock.yaml` for a branch   |\n| **update-snapshots.yml** | Manual trigger               | Update visual regression test snapshots |\n| **codeql.yml**           | Push, Pull Request, Schedule | Security scanning with CodeQL           |\n\n### CI Quality Gates\n\nAll PRs must pass:\n\n1. **Build**: All packages must build without errors\n2. **Linting**: ESLint, Stylelint, TypeScript checks must pass\n3. **Unit Tests**: All Jest tests must pass\n4. **E2E Tests**: Playwright tests must pass\n5. **Security**: CodeQL analysis must pass, no high-severity vulnerabilities\n6. **Formatting**: Code must be formatted with Prettier\n\n## 7.4 Package Distribution\n\n### npm Registry\n\nPrimary distribution channel for KoliBri packages:\n\n```mermaid\ngraph TB\n    subgraph \"Published Packages\"\n        Core[\"@public-ui/components\"]\n        DefaultTheme[\"@public-ui/theme-default\"]\n        ECLTheme[\"@public-ui/theme-ecl\"]\n        ReactAdapter[\"@public-ui/react\"]\n        AngularAdapter[\"@public-ui/angular-v21\"]\n        VueAdapter[\"@public-ui/vue\"]\n        CLI[\"@public-ui/kolibri-cli\"]\n    end\n\n    subgraph \"npm Registry\"\n        Registry[npm Registry]\n    end\n\n    subgraph CDN\n        unpkg[unpkg.com]\n        jsDelivr[jsDelivr.net]\n    end\n\n    Core --> Registry\n    DefaultTheme --> Registry\n    ECLTheme --> Registry\n    ReactAdapter --> Registry\n    AngularAdapter --> Registry\n    VueAdapter --> Registry\n    CLI --> Registry\n\n    Registry -->|mirror| unpkg\n    Registry -->|mirror| jsDelivr\n```\n\n### Package Structure\n\nEach package published to npm includes:\n\n```\n@public-ui/components/\n├── dist/                   # Compiled JavaScript\n│   ├── index.js           # ES module entry\n│   ├── index.cjs.js       # CommonJS entry\n│   ├── types/             # TypeScript definitions\n│   └── esm/               # ES2017 modules\n├── loader/                # Lazy loading wrapper\n├── assets/                # Static assets (icons, etc.)\n├── doc/                   # Generated documentation\n├── custom-elements.json   # Custom Elements Manifest\n└── package.json           # Package metadata\n```\n\n### SLSA Provenance\n\nKoliBri publishes packages with SLSA Build Level 3 provenance:\n\n- Packages built in GitHub Actions with OIDC identity\n- Published with `--provenance` flag\n- Verifiable attestations for all published artifacts\n- Ensures build integrity and supply chain security\n\nVerification:\n\n```bash\n# View provenance metadata\npnpm view @public-ui/components dist.provenance\n\n# Verify signatures (if npm client supports)\npnpm audit signatures --package=@public-ui/components@latest\n```\n\n## 7.5 Application Deployment Scenarios\n\n### Scenario 1: Static Website\n\n```mermaid\ngraph LR\n    Build[Build Process] -->|bundle| Static[Static Assets]\n    Static -->|deploy| CDN[CDN/Static Host]\n    CDN -->|serve| Browser[User Browser]\n    Browser -->|load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Components bundled with application code\n- Deployed to static hosting (Netlify, Vercel, GitHub Pages, S3, etc.)\n- No server-side rendering\n- All assets cached by CDN\n\n**Example:**\n\n```html\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<script type=\"module\" src=\"./kolibri-components.js\"></script>\n\t\t<link rel=\"stylesheet\" href=\"./theme-default.css\" />\n\t</head>\n\t<body>\n\t\t<kol-button _label=\"Click me\"></kol-button>\n\t</body>\n</html>\n```\n\n### Scenario 2: Single Page Application (SPA)\n\n```mermaid\ngraph LR\n    Framework[React/Angular/Vue App] -->|bundle| Webpack[Bundler]\n    Webpack -->|build| Assets[Optimized Assets]\n    Assets -->|deploy| Server[Web Server]\n    Server -->|serve| Browser[User Browser]\n    Browser -->|lazy load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Components imported via framework adapter\n- Bundled with application via Webpack/Vite/Rollup\n- Lazy loading for code splitting\n- Deployed to application server or CDN\n\n**Example (React):**\n\n```typescript\nimport { KolButton } from '@public-ui/react';\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n\nfunction App() {\n\treturn <KolButton _label=\"Click me\" />;\n}\n```\n\n### Scenario 3: Server-Side Rendering (SSR)\n\n```mermaid\ngraph LR\n    SSR[SSR Server] -->|render| HTML[Initial HTML]\n    HTML -->|send| Browser[User Browser]\n    Browser -->|hydrate| Components[KoliBri Components]\n    Browser -->|request| SSR\n```\n\n**Deployment:**\n\n- Components hydrated on client after SSR\n- Initial HTML rendered server-side\n- Client-side hydration for interactivity\n- Deployed to Node.js server or serverless functions\n\n**Considerations:**\n\n- Use hydrate adapter for SSR support\n- Components need client-side hydration\n- Shadow DOM requires careful SSR handling\n\n### Scenario 4: CDN Only (No Build)\n\n```mermaid\ngraph LR\n    CDN[unpkg/jsDelivr] -->|serve| Browser[User Browser]\n    Browser -->|load| Components[KoliBri Components]\n```\n\n**Deployment:**\n\n- Load components directly from CDN\n- No build step required\n- Ideal for prototypes and simple sites\n\n**Example:**\n\n```html\n<script type=\"module\">\n\timport { defineCustomElements } from 'https://unpkg.com/@public-ui/components@latest/loader/index.mjs';\n\timport { register } from 'https://unpkg.com/@public-ui/components@latest/dist/index.js';\n\timport { DEFAULT } from 'https://unpkg.com/@public-ui/theme-default@latest/index.js';\n\n\tawait register(DEFAULT, defineCustomElements);\n</script>\n```\n\n## 7.6 Deployment Topology\n\n### Multi-Tier Architecture\n\n```mermaid\ngraph TB\n    subgraph \"User Tier\"\n        Browser[Web Browser]\n        AT[Assistive Technology]\n    end\n\n    subgraph \"CDN Tier\"\n        CDN[Content Delivery Network]\n    end\n\n    subgraph \"Application Tier\"\n        AppServer[Application Server - Node.js/Static]\n        API[Backend API - optional]\n    end\n\n    subgraph \"Data Tier\"\n        DB[Database - optional]\n    end\n\n    Browser -->|HTTPS| CDN\n    Browser -->|HTTPS| AppServer\n    AT -->|Accessibility API| Browser\n\n    CDN -->|fallback| AppServer\n    AppServer -->|HTTP/REST| API\n    API -->|query| DB\n```\n\n### Component Loading Strategy\n\n1. **Initial Load**:\n   - HTML page with component tags\n   - Core component loader script\n   - Theme CSS\n\n2. **Lazy Loading**:\n   - Individual component bundles loaded on-demand\n   - Only used components downloaded\n   - Browser caching for subsequent loads\n\n3. **Caching Strategy**:\n   - Components: Long cache (immutable versions)\n   - Themes: Long cache (immutable versions)\n   - Application code: Cache with revalidation\n\n## 7.7 Monitoring and Observability\n\n### Client-Side Monitoring\n\nRecommendations for applications using KoliBri:\n\n- **Performance Monitoring**: Web Vitals\n- **Error Tracking**: Sentry, Rollbar (application level)\n- **Accessibility Monitoring**: axe DevTools, automated scans\n- **Bundle Size Tracking**: bundlephobia, webpack-bundle-analyzer\n\n### Build Pipeline Monitoring\n\n- **CI/CD Status**: GitHub Actions status badges\n- **Test Coverage**: Jest coverage reports\n- **Security Alerts**: GitHub Dependabot, CodeQL alerts\n- **Package Health**: npm package health score\n\n### Metrics\n\nKey metrics tracked:\n\n- **Build Time**: Full build duration (~2 minutes)\n- **Test Duration**: Unit + E2E test execution (~3 minutes)\n- **Package Size**: Individual package sizes\n- **Download Stats**: npm download counts\n- **Issue Resolution Time**: Time to close issues/PRs\n",
       "kind": "doc"
     },
     {
@@ -296,6 +296,14 @@
       "code": "```markdown\n# Code of Conduct Agreement for Contributors\n\n## Our Commitment\n\nWe, as members, participants, and leaders of our community, are committed to providing a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender characteristics, identity, and expression, level of experience, education, socioeconomic status, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our community include:\n\n- Demonstrating empathy and kindness toward others\n- Respecting differing opinions, viewpoints, and experiences\n- Giving and gracefully accepting constructive feedback\n- Taking responsibility and apologizing to those affected by our mistakes, and learning from the experience\n- Focusing on what is best not just for us as individuals, but for the overall community\n\nExamples of unacceptable behavior include:\n\n- The use of sexualized language, imagery, or symbolism, and unwelcome sexual attention or advances\n- Trolling, insulting or derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as physical or electronic addresses, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior they deem inappropriate, threatening, or offensive.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, support tickets, and other contributions that are not aligned to this Code of Conduct and will communicate reasons for moderation decisions when appropriate.\n\n## **Scope**\n\nThis Code of Conduct applies within all community spaces and also applies when an individual is officially representing the community in public spaces. Examples include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leadership responsible for enforcement at [kolibri@itzbund.de](mailto:kolibri@itzbund.de). All complaints will be reviewed and investigated promptly and fairly.\n\nAll community leadership is obligated to respect the privacy and security of the reporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leadership, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series of actions.\n\n**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period. This includes avoiding interactions in community spaces and external channels like social media. Violating these terms may lead to a temporary or permanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any form of interaction or public communication with the community. During this time, no public or private interaction with the people involved is allowed, including unsolicited interaction with those enforcing the Code of Conduct. Violating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violating community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of groups of people.\n\n**Consequence**: A permanent ban from any sort of public interaction within the community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at <https://www.contributor-covenant.org/version/2/0/code_of_conduct>.\n\nCommunity Impact Guidelines were inspired by [Mozilla's Code of Conduct Enforcement Ladder][mozilla].\n\nFor answers to common questions about this Code of Conduct, see the FAQ at <https://www.contributor-covenant.org/faq> (in English). Translations are available at <https://www.contributor-covenant.org/translations>.\n\n[homepage]: https://www.contributor-covenant.org\n[mozilla]: https://github.com/mozilla/inclusion\n```\n",
       "kind": "doc"
     },
+    {
+      "id": "doc/CODE_STYLE_AND_CONVENTIONS",
+      "group": "docs",
+      "name": "CODE_STYLE_AND_CONVENTIONS",
+      "path": "docs/CODE_STYLE_AND_CONVENTIONS.md",
+      "code": "# CSS\n\n## Structure\n\n### Components\n\n- every component has a style.scss with its basic definitions\n  - component styles have to be wrapped in `@layer kol-component`\n  - styles.scss is imported in its corresponding shadow.tsx\n- components that are part of other components have their styles in the @shared folder\n  - here no layer is used, just plain `@mixin componentName`\n  - in these cases the component file (e.g. alert/style.scss) just includes the mixin (e.g. \\_alert.scss)\n  - every component has to include the styles of every component it contains (e.g. icon has to be included in buttons, paging, etc.)\n- the following styles are prohibited in the component package:\n  - margin\n  - padding\n  - gap\n  - opacity\n  - color (with the exception of black & white)\n- generally speaking use block display types on the top layer of components (e.g. kol-card uses grid not inline-grid) so it uses the whole given width of its wrapper and the teams can control the width of the components\n\n### Themes\n\n- every (needed) component has a file with its name (e.g. alert.scss) in /src/components\n  - component styles have to be wrapped in `@layer kol-theme-component`\n  - all styles are imported in /src/components/index.ts\n- components that are part of other components have their styles in the @shared folder\n  - here no layer is used, just plain `@mixin componentName`\n  - in these cases the component file (e.g. alert.scss) just includes the mixin (e.g. \\_alert.scss)\n  - every component has to include the styles of every component it contains (e.g. icon has to be included in buttons, paging, etc.)\n- all styles are allowed\n\n## Units\n\n- Generally 'rem' is used\n- Exceptions:\n  - `px` for: `border-width`, `border-radius`, `box-shadow`, `outline-width` (these do not scale well, and don't need to)\n  - `px` for media-queries\n  - Relative units (`%`, `vw`, etc.) can be used where they make sense (e.g. layout)\n  - For line-heights, unit-less values are used (e.g. `1`, `1.2`)\n\nWhen defining `rem` values within KoliBri, always use the provided Sass function:\n\n```\n@use '@shared/mixins' as *;\nfont-size: to-rem(16);\n```\n\nThis ensures that the passed value always equals to the same number in pixels for default browser settings.\n\nWhen a project uses a different root font-size than `16px`, this can be configured using a CSS custom property and will be taken into account:\n\n```\nhtml {\n  font-size: 65.5%; /* Equals 10px */\n  --kolibri-root-font-size: 10;\n}\n```\n\n[Background reading and code samples](https://github.com/public-ui/kolibri/issues/5517#issuecomment-1936385755)\n\n## BEM\n\nFor CSS Selectors, we follow the [BEM pattern](https://getbem.com/introduction/).\n\nWhen writing stylesheets, always follow the order: **Block, Elements, Modifiers** and utilize SCSS nesting:\n\n```scss\n.kol-mycomponent {\n\t&--primary {\n\t}\n\n\t&--card {\n\t}\n\n\t&__close-button {\n\t\t&--hidden-label {\n\t\t}\n\t}\n}\n```\n\nWhen you need to combine modifiers, please use CSS properties.  \nIn the following example, we want a different styling for the _Close-Button-Element_ when the component itself has the _card_-Modifier:\n\nCSS Custom Properties (✨ Preferred):\n\n```scss\n.kol-mycomponent {\n\t--button-color: black;\n\n\t&--card {\n\t\t--button-color: lightgray;\n\t}\n\n\t&__close-button {\n\t\tcolor: var(--button-color);\n\t}\n}\n```\n\nAvoid - @at-root to combine selectors:\nNegative example (⛔️ Avoid!):\n\n```scss\n.kol-mycomponent {\n\t$root: &;\n\n\t&__close-button {\n\t\t@at-root #{$root}--card & {\n\t\t\talign-self: flex-end;\n\t\t}\n\t}\n}\n```\n\nAvoid deep nesting and stick to the order (Block, Elements, Modifiers) where possible.  \nNegative example (⛔️ Avoid!):\n\n```scss\n.kol-mycomponent {\n\t&--card {\n\t\t.kol-mycomponent__close-button {\n\t\t\talign-self: flex-end;\n\t\t}\n\t}\n}\n```\n\n### Exceptions\n\nGlobal utility classes such as `visually-hidden` may be used and don't need to follow the BEM convention.\n\n> [!TIP]\n> Use the [Sass Playground](https://sass-lang.com/playground/) to fiddle with tricky SCSS-Selectors.\n",
+      "kind": "doc"
+    },
     {
       "id": "doc/component-dependencies-popover",
       "group": "docs",
@@ -317,7 +325,7 @@
       "group": "docs",
       "name": "CVE_OVERVIEW",
       "path": "docs/CVE_OVERVIEW.md",
-      "code": "# CVE Overview\n\n> For more security information, see [SECURITY.md](./SECURITY.md)\n\n## 1. Production Dependencies\n\n### Summary\n\n| Severity |  v4 |  v3 |  v2 |  v1 |\n| -------- | --: | --: | --: | --: |\n| critical |   0 |   0 |   0 |   0 |\n| high     |   0 |   0 |   0 |   4 |\n| moderate |   0 |   0 |   0 |   1 |\n| low      |   0 |   0 |   0 |   0 |\n| info     |   0 |   0 |   0 |   0 |\n| unknown  |   0 |   0 |   0 |   0 |\n\n### Vulnerabilities\n\n| Package              | Severity | CVE                 | Affected Versions | Description                                                                       |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| lodash.pick          | high     | CVE-2020-8203       | v1                | Prototype Pollution in lodash                                                     |\n| minimatch            | high     | CVE-2026-27903      | v1                | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja  |\n| minimatch            | high     | CVE-2026-27904      | v1                | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| serialize-javascript | high     | GHSA-5c6j-r48x-rmvq | v1                | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to  |\n| serialize-javascript | moderate | CVE-2026-34043      | v1                | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like  |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity |  v4 |  v3 |  v2 |  v1 |\n| -------- | --: | --: | --: | --: |\n| critical |   5 |   5 |   5 |   3 |\n| high     |  35 |  33 |  45 |  29 |\n| moderate |  18 |  19 |  28 |   8 |\n| low      |   4 |   4 |   9 |   1 |\n| info     |   0 |   0 |   0 |   0 |\n| unknown  |   0 |   0 |   0 |   0 |\n\n### Vulnerabilities\n\n| Package              | Severity | CVE                 | Affected Versions | Description                                                                        |\n| -------------------- | -------- | ------------------- | ----------------- | ---------------------------------------------------------------------------------- |\n| basic-ftp            | critical | CVE-2026-27699      | v4, v3, v2        | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method           |\n| fast-xml-parser      | critical | CVE-2026-25896      | v4, v3, v2        | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent   |\n| handlebars           | critical | CVE-2026-33937      | v4, v3, v2, v1    | Handlebars.js has JavaScript Injection via AST Type Confusion                      |\n| locutus              | critical | CVE-2026-25521      | v4, v3, v2, v1    | locutus is vulnerable to Prototype Pollution                                       |\n| locutus              | critical | CVE-2026-32304      | v4, v3, v2, v1    | Locutus vulnerable to RCE via unsanitized input in create_function()               |\n| @angular/common      | high     | CVE-2025-66035      | v1                | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula   |\n| @angular/compiler    | high     | CVE-2025-66412      | v1                | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute   |\n| @angular/compiler    | high     | CVE-2026-22610      | v1                | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes                |\n| @angular/compiler    | high     | CVE-2026-32635      | v1                | Angular vulnerable to XSS in i18n attribute bindings                               |\n| @angular/core        | high     | CVE-2026-22610      | v1                | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes                |\n| @angular/core        | high     | CVE-2026-27970      | v1                | Angular i18n vulnerable to Cross-Site Scripting                                    |\n| @angular/core        | high     | CVE-2026-32635      | v1                | Angular vulnerable to XSS in i18n attribute bindings                               |\n| @hono/node-server    | high     | CVE-2026-29087      | v2                | @hono/node-server has authorization bypass for protected static paths via encode   |\n| @xmldom/xmldom       | high     | CVE-2026-34601      | v4                | xmldom: XML injection via unsafe CDATA serialization allows attacker-controlled    |\n| axios                | high     | CVE-2026-25639      | v3, v2            | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig          |\n| braces               | high     | CVE-2024-4068       | v3, v2, v1        | Uncontrolled resource consumption in braces                                        |\n| express-rate-limit   | high     | CVE-2026-30827      | v2                | express-rate-limit: IPv4-mapped IPv6 addresses bypass per-client rate limiting o   |\n| fast-xml-parser      | high     | CVE-2026-25128      | v4, v3, v2        | fast-xml-parser has RangeError DoS Numeric Entities Bug                            |\n| fast-xml-parser      | high     | CVE-2026-26278      | v4, v3, v2        | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio   |\n| fast-xml-parser      | high     | CVE-2026-33036      | v4, v3, v2        | fast-xml-parser affected by numeric entity expansion bypassing all entity expans   |\n| flatted              | high     | CVE-2026-32141      | v4, v3, v2        | flatted vulnerable to unbounded recursion DoS in parse() revive phase              |\n| flatted              | high     | CVE-2026-33228      | v4, v3, v2        | Prototype Pollution via parse() in NodeJS flatted                                  |\n| handlebars           | high     | CVE-2026-33938      | v4, v3, v2, v1    | Handlebars.js has JavaScript Injection via AST Type Confusion by tampering @part   |\n| handlebars           | high     | CVE-2026-33941      | v4, v3, v2, v1    | Handlebars.js has JavaScript Injection in CLI Precompiler via Unescaped Names an   |\n| handlebars           | high     | CVE-2026-33940      | v4, v3, v2, v1    | Handlebars.js has JavaScript Injection via AST Type Confusion when passing an ob   |\n| handlebars           | high     | CVE-2026-33939      | v4, v3, v2, v1    | Handlebars.js has Denial of Service via Malformed Decorator Syntax in Template C   |\n| hono                 | high     | CVE-2026-29045      | v2                | Hono vulnerable to arbitrary file access via serveStatic vulnerability             |\n| immutable            | high     | CVE-2026-29063      | v2                | Immutable is vulnerable to Prototype Pollution                                     |\n| locutus              | high     | CVE-2026-29091      | v4, v3, v2, v1    | locutus call_user_func_array vulnerable to Remote Code Execution (RCE) due to Co   |\n| lodash               | high     | CVE-2026-4800       | v4, v3            | lodash vulnerable to Code Injection via `_.template` imports key names             |\n| lodash.pick          | high     | CVE-2020-8203       | v2, v1            | Prototype Pollution in lodash                                                      |\n| minimatch            | high     | CVE-2026-27903      | v4, v3, v2, v1    | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja   |\n| minimatch            | high     | CVE-2026-27904      | v4, v3, v2, v1    | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu  |\n| minimatch            | high     | CVE-2026-26996      | v4, v3, v2        | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter   |\n| node-forge           | high     | CVE-2026-33896      | v2                | Forge has a basicConstraints bypass in its certificate chain verification (RFC 5   |\n| node-forge           | high     | CVE-2026-33895      | v2                | Forge has signature forgery in Ed25519 due to missing S > L check                  |\n| node-forge           | high     | CVE-2026-33891      | v2                | Forge has Denial of Service via Infinite Loop in BigInteger.modInverse() with Ze   |\n| node-forge           | high     | CVE-2026-33894      | v2                | Forge has signature forgery in RSA-PKCS due to ASN.1 extra field                   |\n| path-to-regexp       | high     | CVE-2026-4867       | v4, v3, v2        | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple r   |\n| path-to-regexp       | high     | CVE-2026-4926       | v2                | path-to-regexp vulnerable to Denial of Service via sequential optional groups      |\n| rollup               | high     | CVE-2026-27606      | v1                | Rollup 4 has Arbitrary File Write via Path Traversal                               |\n| semver               | high     | CVE-2022-25883      | v2                | semver vulnerable to Regular Expression Denial of Service                          |\n| serialize-javascript | high     | GHSA-5c6j-r48x-rmvq | v4, v3, v2, v1    | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to   |\n| socket.io-parser     | high     | CVE-2026-33151      | v3, v2            | socket.io allows an unbounded number of binary attachments                         |\n| svgo                 | high     | CVE-2026-29074      | v4, v3, v2, v1    | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs)                      |\n| tar                  | high     | CVE-2026-24842      | v1                | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave   |\n| tar                  | high     | CVE-2026-23745      | v1                | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins   |\n| tar                  | high     | CVE-2026-26960      | v4, v1            | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no   |\n| tar                  | high     | CVE-2026-29786      | v4, v1            | tar has Hardlink Path Traversal via Drive-Relative Linkpath                        |\n| tar                  | high     | CVE-2026-31802      | v4, v1            | node-tar Symlink Path Traversal via Drive-Relative Linkpath                        |\n| tar                  | high     | CVE-2026-23950      | v1                | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on    |\n| undici               | high     | CVE-2026-1528       | v4, v3, v2        | Undici: Malicious WebSocket 64-bit length overflows parser and crashes the clien   |\n| undici               | high     | CVE-2026-1526       | v4, v3, v2        | Undici has Unbounded Memory Consumption in WebSocket permessage-deflate Decompre   |\n| undici               | high     | CVE-2026-2229       | v4, v3, v2        | Undici has Unhandled Exception in WebSocket Client Due to Invalid server_max_win   |\n| vite                 | high     | GHSA-v2wj-q39q-566r | v4, v3, v2, v1    | Vite: `server.fs.deny` bypassed with queries                                       |\n| vite                 | high     | CVE-2026-39363      | v4, v3, v2, v1    | Vite Vulnerable to Arbitrary File Read via Vite Dev Server WebSocket               |\n| ajv                  | moderate | CVE-2025-69873      | v3, v2            | ajv has ReDoS when using `$data` option                                            |\n| brace-expansion      | moderate | CVE-2026-33750      | v4, v3, v2        | brace-expansion: Zero-step sequence causes process hang and memory exhaustion      |\n| ejs                  | moderate | CVE-2024-33883      | v2                | ejs lacks certain pollution protection                                             |\n| esbuild              | moderate | GHSA-67mh-4wv8-2f99 | v2                | esbuild enables any website to send any requests to the development server and r   |\n| fast-xml-parser      | moderate | CVE-2026-33349      | v4, v3, v2        | Entity Expansion Limits Bypassed When Set to Zero Due to JavaScript Falsy Evalua   |\n| file-type            | moderate | CVE-2026-31808      | v4                | file-type affected by infinite loop in ASF parser on malformed input with zero-s   |\n| handlebars           | moderate | CVE-2026-33916      | v4, v3, v2, v1    | Handlebars.js has Prototype Pollution Leading to XSS through Partial Template In   |\n| handlebars           | moderate | GHSA-7rx3-28cr-v5wh | v4, v3, v2, v1    | Handlebars.js has a Prototype Method Access Control Gap via Missing \\_\\_lookupSett |\n| hono                 | moderate | CVE-2026-29086      | v2                | Hono Vulnerable to Cookie Attribute Injection via Unsanitized domain and path in   |\n| hono                 | moderate | CVE-2026-29085      | v2                | Hono Vulnerable to SSE Control Field Injection via CR/LF in writeSSE()             |\n| hono                 | moderate | GHSA-v8w9-8mx6-g223 | v2                | Hono vulnerable to Prototype Pollution possible through **proto** key allowed in   |\n| js-yaml              | moderate | CVE-2025-64718      | v2                | js-yaml has prototype pollution in merge (<<)                                      |\n| locutus              | moderate | CVE-2026-33993      | v4, v3, v2, v1    | Locutus has Prototype Pollution via **proto** Key Injection in unserialize()       |\n| lodash               | moderate | CVE-2026-2950       | v4, v3            | lodash vulnerable to Prototype Pollution via array path bypass in `_.unset` and    |\n| micromatch           | moderate | CVE-2024-4067       | v3, v2, v1        | Regular Expression Denial of Service (ReDoS) in micromatch                         |\n| nanoid               | moderate | CVE-2024-55565      | v2                | Predictable results in nanoid generation when given non-integer values             |\n| path-to-regexp       | moderate | CVE-2026-4923       | v2                | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple w   |\n| qs                   | moderate | CVE-2025-15284      | v2                | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion    |\n| serialize-javascript | moderate | CVE-2026-34043      | v4, v3, v2, v1    | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like   |\n| serialize-javascript | moderate | CVE-2024-11831      | v2                | Cross-site Scripting (XSS) in serialize-javascript                                 |\n| smol-toml            | moderate | GHSA-v3rj-xjv7-4jmq | v4, v3, v2, v1    | smol-toml: Denial of Service via TOML documents containing thousands of consecut   |\n| undici               | moderate | CVE-2026-1525       | v4, v3, v2        | Undici has an HTTP Request/Response Smuggling issue                                |\n| undici               | moderate | CVE-2026-1527       | v4, v3, v2        | Undici has CRLF Injection in undici via `upgrade` option                           |\n| undici               | moderate | CVE-2026-2581       | v4, v3            | Undici has Unbounded Memory Consumption in its DeduplicationHandler via Response   |\n| vite                 | moderate | GHSA-4w7w-66w2-5vf9 | v4, v3, v2, v1    | Vite Vulnerable to Path Traversal in Optimized Deps `.map` Handling                |\n| webpack              | moderate | CVE-2024-43788      | v2                | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to    |\n| webpack-dev-server   | moderate | CVE-2025-30360      | v2                | webpack-dev-server users' source code may be stolen when they access a malicious   |\n| webpack-dev-server   | moderate | CVE-2025-30359      | v2                | webpack-dev-server users' source code may be stolen when they access a malicious   |\n| yaml                 | moderate | CVE-2026-33532      | v4, v3, v2, v1    | yaml is vulnerable to Stack Overflow via deeply nested YAML collections            |\n| @tootallnate/once    | low      | CVE-2026-3449       | v3, v2            | @tootallnate/once vulnerable to Incorrect Control Flow Scoping                     |\n| diff                 | low      | CVE-2026-24001      | v4, v3, v2        | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch          |\n| fast-xml-parser      | low      | CVE-2026-27942      | v4, v3, v2        | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder                |\n| handlebars           | low      | GHSA-442j-39wm-28r2 | v4, v3, v2, v1    | Handlebars.js has a Property Access Validation Bypass in container.lookup          |\n| hono                 | low      | GHSA-gq3j-xvxp-8hrf | v2                | Hono added timing comparison hardening in basicAuth and bearerAuth                 |\n| qs                   | low      | CVE-2026-2391       | v2                | qs's arrayLimit bypass in comma parsing allows denial of service                   |\n| tmp                  | low      | CVE-2025-54798      | v4                | tmp allows arbitrary temporary file / directory write via symbolic link `dir` pa   |\n| webpack              | low      | CVE-2025-68458      | v2                | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to   |\n| webpack              | low      | CVE-2025-68157      | v2                | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c   |\n",
+      "code": "# CVE Overview\n\n> For more security information, see [SECURITY.md](./SECURITY.md)\n\n## 1. Production Dependencies\n\n### Summary\n\n| Severity |  v4 |  v3 |  v2 |  v1 |\n| -------- | --: | --: | --: | --: |\n| critical |   0 |   0 |   0 |   0 |\n| high     |   0 |   0 |   0 |   4 |\n| moderate |   0 |   0 |   0 |   1 |\n| low      |   0 |   0 |   0 |   0 |\n| info     |   0 |   0 |   0 |   0 |\n| unknown  |   0 |   0 |   0 |   0 |\n\n### Vulnerabilities\n\n| Package              | Severity | CVE                 | Affected Versions | Description                                                                       |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| lodash.pick          | high     | CVE-2020-8203       | v1                | Prototype Pollution in lodash                                                     |\n| minimatch            | high     | CVE-2026-27903      | v1                | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja  |\n| minimatch            | high     | CVE-2026-27904      | v1                | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| serialize-javascript | high     | GHSA-5c6j-r48x-rmvq | v1                | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to  |\n| serialize-javascript | moderate | CVE-2026-34043      | v1                | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like  |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity |  v4 |  v3 |  v2 |  v1 |\n| -------- | --: | --: | --: | --: |\n| critical |   5 |   5 |   5 |   3 |\n| high     |  33 |  31 |  43 |  29 |\n| moderate |  17 |  19 |  34 |   8 |\n| low      |   4 |   4 |   9 |   1 |\n| info     |   0 |   0 |   0 |   0 |\n| unknown  |   0 |   0 |   0 |   0 |\n\n### Vulnerabilities\n\n| Package              | Severity | CVE                 | Affected Versions | Description                                                                        |\n| -------------------- | -------- | ------------------- | ----------------- | ---------------------------------------------------------------------------------- |\n| basic-ftp            | critical | CVE-2026-27699      | v4, v3, v2        | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method           |\n| fast-xml-parser      | critical | CVE-2026-25896      | v4, v3, v2        | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent   |\n| handlebars           | critical | CVE-2026-33937      | v4, v3, v2, v1    | Handlebars.js has JavaScript Injection via AST Type Confusion                      |\n| locutus              | critical | CVE-2026-25521      | v4, v3, v2, v1    | locutus is vulnerable to Prototype Pollution                                       |\n| locutus              | critical | CVE-2026-32304      | v4, v3, v2, v1    | Locutus vulnerable to RCE via unsanitized input in create_function()               |\n| @angular/common      | high     | CVE-2025-66035      | v1                | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula   |\n| @angular/compiler    | high     | CVE-2025-66412      | v1                | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute   |\n| @angular/compiler    | high     | CVE-2026-22610      | v1                | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes                |\n| @angular/compiler    | high     | CVE-2026-32635      | v1                | Angular vulnerable to XSS in i18n attribute bindings                               |\n| @angular/core        | high     | CVE-2026-22610      | v1                | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes                |\n| @angular/core        | high     | CVE-2026-27970      | v1                | Angular i18n vulnerable to Cross-Site Scripting                                    |\n| @angular/core        | high     | CVE-2026-32635      | v1                | Angular vulnerable to XSS in i18n attribute bindings                               |\n| @hono/node-server    | high     | CVE-2026-29087      | v2                | @hono/node-server has authorization bypass for protected static paths via encode   |\n| @xmldom/xmldom       | high     | CVE-2026-34601      | v4                | xmldom: XML injection via unsafe CDATA serialization allows attacker-controlled    |\n| axios                | high     | CVE-2026-25639      | v3, v2            | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig          |\n| braces               | high     | CVE-2024-4068       | v3, v2, v1        | Uncontrolled resource consumption in braces                                        |\n| express-rate-limit   | high     | CVE-2026-30827      | v2                | express-rate-limit: IPv4-mapped IPv6 addresses bypass per-client rate limiting o   |\n| fast-xml-parser      | high     | CVE-2026-25128      | v4, v3, v2        | fast-xml-parser has RangeError DoS Numeric Entities Bug                            |\n| fast-xml-parser      | high     | CVE-2026-26278      | v4, v3, v2        | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio   |\n| fast-xml-parser      | high     | CVE-2026-33036      | v4, v3, v2        | fast-xml-parser affected by numeric entity expansion bypassing all entity expans   |\n| flatted              | high     | CVE-2026-32141      | v4, v3, v2        | flatted vulnerable to unbounded recursion DoS in parse() revive phase              |\n| flatted              | high     | CVE-2026-33228      | v4, v3, v2        | Prototype Pollution via parse() in NodeJS flatted                                  |\n| handlebars           | high     | CVE-2026-33938      | v4, v3, v2, v1    | Handlebars.js has JavaScript Injection via AST Type Confusion by tampering @part   |\n| handlebars           | high     | CVE-2026-33941      | v4, v3, v2, v1    | Handlebars.js has JavaScript Injection in CLI Precompiler via Unescaped Names an   |\n| handlebars           | high     | CVE-2026-33940      | v4, v3, v2, v1    | Handlebars.js has JavaScript Injection via AST Type Confusion when passing an ob   |\n| handlebars           | high     | CVE-2026-33939      | v4, v3, v2, v1    | Handlebars.js has Denial of Service via Malformed Decorator Syntax in Template C   |\n| hono                 | high     | CVE-2026-29045      | v2                | Hono vulnerable to arbitrary file access via serveStatic vulnerability             |\n| immutable            | high     | CVE-2026-29063      | v2                | Immutable is vulnerable to Prototype Pollution                                     |\n| locutus              | high     | CVE-2026-29091      | v4, v3, v2, v1    | locutus call_user_func_array vulnerable to Remote Code Execution (RCE) due to Co   |\n| lodash               | high     | CVE-2026-4800       | v4, v3            | lodash vulnerable to Code Injection via `_.template` imports key names             |\n| lodash.pick          | high     | CVE-2020-8203       | v2, v1            | Prototype Pollution in lodash                                                      |\n| minimatch            | high     | CVE-2026-27903      | v4, v3, v2, v1    | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja   |\n| minimatch            | high     | CVE-2026-27904      | v4, v3, v2, v1    | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu  |\n| minimatch            | high     | CVE-2026-26996      | v4, v3, v2        | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter   |\n| node-forge           | high     | CVE-2026-33896      | v2                | Forge has a basicConstraints bypass in its certificate chain verification (RFC 5   |\n| node-forge           | high     | CVE-2026-33895      | v2                | Forge has signature forgery in Ed25519 due to missing S > L check                  |\n| node-forge           | high     | CVE-2026-33891      | v2                | Forge has Denial of Service via Infinite Loop in BigInteger.modInverse() with Ze   |\n| node-forge           | high     | CVE-2026-33894      | v2                | Forge has signature forgery in RSA-PKCS due to ASN.1 extra field                   |\n| path-to-regexp       | high     | CVE-2026-4867       | v4, v3, v2        | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple r   |\n| path-to-regexp       | high     | CVE-2026-4926       | v2                | path-to-regexp vulnerable to Denial of Service via sequential optional groups      |\n| rollup               | high     | CVE-2026-27606      | v1                | Rollup 4 has Arbitrary File Write via Path Traversal                               |\n| semver               | high     | CVE-2022-25883      | v2                | semver vulnerable to Regular Expression Denial of Service                          |\n| serialize-javascript | high     | GHSA-5c6j-r48x-rmvq | v4, v3, v2, v1    | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to   |\n| socket.io-parser     | high     | CVE-2026-33151      | v3, v2            | socket.io allows an unbounded number of binary attachments                         |\n| svgo                 | high     | CVE-2026-29074      | v4, v3, v2, v1    | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs)                      |\n| tar                  | high     | CVE-2026-24842      | v1                | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave   |\n| tar                  | high     | CVE-2026-23745      | v1                | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins   |\n| tar                  | high     | CVE-2026-26960      | v4, v1            | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no   |\n| tar                  | high     | CVE-2026-29786      | v4, v1            | tar has Hardlink Path Traversal via Drive-Relative Linkpath                        |\n| tar                  | high     | CVE-2026-31802      | v4, v1            | node-tar Symlink Path Traversal via Drive-Relative Linkpath                        |\n| tar                  | high     | CVE-2026-23950      | v1                | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on    |\n| undici               | high     | CVE-2026-1528       | v4, v3, v2        | Undici: Malicious WebSocket 64-bit length overflows parser and crashes the clien   |\n| undici               | high     | CVE-2026-1526       | v4, v3, v2        | Undici has Unbounded Memory Consumption in WebSocket permessage-deflate Decompre   |\n| undici               | high     | CVE-2026-2229       | v4, v3, v2        | Undici has Unhandled Exception in WebSocket Client Due to Invalid server_max_win   |\n| vite                 | high     | CVE-2026-39364      | v1                | Vite: `server.fs.deny` bypassed with queries                                       |\n| vite                 | high     | CVE-2026-39363      | v1                | Vite Vulnerable to Arbitrary File Read via Vite Dev Server WebSocket               |\n| @hono/node-server    | moderate | CVE-2026-39406      | v2                | @hono/node-server: Middleware bypass via repeated slashes in serveStatic           |\n| ajv                  | moderate | CVE-2025-69873      | v3, v2            | ajv has ReDoS when using `$data` option                                            |\n| axios                | moderate | CVE-2026-39865      | v3, v2            | Axios HTTP/2 Session Cleanup State Corruption Vulnerability                        |\n| brace-expansion      | moderate | CVE-2026-33750      | v4, v3, v2        | brace-expansion: Zero-step sequence causes process hang and memory exhaustion      |\n| ejs                  | moderate | CVE-2024-33883      | v2                | ejs lacks certain pollution protection                                             |\n| esbuild              | moderate | GHSA-67mh-4wv8-2f99 | v2                | esbuild enables any website to send any requests to the development server and r   |\n| fast-xml-parser      | moderate | CVE-2026-33349      | v4, v3, v2        | Entity Expansion Limits Bypassed When Set to Zero Due to JavaScript Falsy Evalua   |\n| file-type            | moderate | CVE-2026-31808      | v4                | file-type affected by infinite loop in ASF parser on malformed input with zero-s   |\n| handlebars           | moderate | CVE-2026-33916      | v4, v3, v2, v1    | Handlebars.js has Prototype Pollution Leading to XSS through Partial Template In   |\n| handlebars           | moderate | GHSA-7rx3-28cr-v5wh | v4, v3, v2, v1    | Handlebars.js has a Prototype Method Access Control Gap via Missing \\_\\_lookupSett |\n| hono                 | moderate | CVE-2026-29086      | v2                | Hono Vulnerable to Cookie Attribute Injection via Unsanitized domain and path in   |\n| hono                 | moderate | CVE-2026-29085      | v2                | Hono Vulnerable to SSE Control Field Injection via CR/LF in writeSSE()             |\n| hono                 | moderate | GHSA-v8w9-8mx6-g223 | v2                | Hono vulnerable to Prototype Pollution possible through **proto** key allowed in   |\n| hono                 | moderate | GHSA-26pp-8wgv-hjvm | v2                | Hono missing validation of cookie name on write path in setCookie()                |\n| hono                 | moderate | CVE-2026-39410      | v2                | Hono: Non-breaking space prefix bypass in cookie name handling in getCookie()      |\n| hono                 | moderate | CVE-2026-39409      | v2                | Hono has incorrect IP matching in ipRestriction() for IPv4-mapped IPv6 addresses   |\n| hono                 | moderate | CVE-2026-39408      | v2                | Hono: Path traversal in toSSG() allows writing files outside the output director   |\n| hono                 | moderate | CVE-2026-39407      | v2                | Hono: Middleware bypass via repeated slashes in serveStatic                        |\n| js-yaml              | moderate | CVE-2025-64718      | v2                | js-yaml has prototype pollution in merge (<<)                                      |\n| locutus              | moderate | CVE-2026-33993      | v4, v3, v2, v1    | Locutus has Prototype Pollution via **proto** Key Injection in unserialize()       |\n| lodash               | moderate | CVE-2026-2950       | v4, v3            | lodash vulnerable to Prototype Pollution via array path bypass in `_.unset` and    |\n| micromatch           | moderate | CVE-2024-4067       | v3, v2, v1        | Regular Expression Denial of Service (ReDoS) in micromatch                         |\n| nanoid               | moderate | CVE-2024-55565      | v2                | Predictable results in nanoid generation when given non-integer values             |\n| path-to-regexp       | moderate | CVE-2026-4923       | v2                | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple w   |\n| qs                   | moderate | CVE-2025-15284      | v2                | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion    |\n| serialize-javascript | moderate | CVE-2026-34043      | v4, v3, v2, v1    | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like   |\n| serialize-javascript | moderate | CVE-2024-11831      | v2                | Cross-site Scripting (XSS) in serialize-javascript                                 |\n| smol-toml            | moderate | GHSA-v3rj-xjv7-4jmq | v4, v3, v2, v1    | smol-toml: Denial of Service via TOML documents containing thousands of consecut   |\n| undici               | moderate | CVE-2026-1525       | v4, v3, v2        | Undici has an HTTP Request/Response Smuggling issue                                |\n| undici               | moderate | CVE-2026-1527       | v4, v3, v2        | Undici has CRLF Injection in undici via `upgrade` option                           |\n| undici               | moderate | CVE-2026-2581       | v4, v3            | Undici has Unbounded Memory Consumption in its DeduplicationHandler via Response   |\n| vite                 | moderate | CVE-2026-39365      | v1                | Vite Vulnerable to Path Traversal in Optimized Deps `.map` Handling                |\n| webpack              | moderate | CVE-2024-43788      | v2                | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to    |\n| webpack-dev-server   | moderate | CVE-2025-30360      | v2                | webpack-dev-server users' source code may be stolen when they access a malicious   |\n| webpack-dev-server   | moderate | CVE-2025-30359      | v2                | webpack-dev-server users' source code may be stolen when they access a malicious   |\n| yaml                 | moderate | CVE-2026-33532      | v4, v3, v2, v1    | yaml is vulnerable to Stack Overflow via deeply nested YAML collections            |\n| @tootallnate/once    | low      | CVE-2026-3449       | v3, v2            | @tootallnate/once vulnerable to Incorrect Control Flow Scoping                     |\n| diff                 | low      | CVE-2026-24001      | v4, v3, v2        | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch          |\n| fast-xml-parser      | low      | CVE-2026-27942      | v4, v3, v2        | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder                |\n| handlebars           | low      | GHSA-442j-39wm-28r2 | v4, v3, v2, v1    | Handlebars.js has a Property Access Validation Bypass in container.lookup          |\n| hono                 | low      | GHSA-gq3j-xvxp-8hrf | v2                | Hono added timing comparison hardening in basicAuth and bearerAuth                 |\n| qs                   | low      | CVE-2026-2391       | v2                | qs's arrayLimit bypass in comma parsing allows denial of service                   |\n| tmp                  | low      | CVE-2025-54798      | v4                | tmp allows arbitrary temporary file / directory write via symbolic link `dir` pa   |\n| webpack              | low      | CVE-2025-68458      | v2                | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to   |\n| webpack              | low      | CVE-2025-68157      | v2                | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c   |\n",
       "kind": "doc"
     },
     {
@@ -685,7 +693,15 @@
       "group": "combobox",
       "name": "html",
       "path": "packages/samples/react/src/components/combobox/html.tsx",
-      "code": "import { KolCombobox } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ComboboxHtml: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>A HTML only KolCombobox.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolCombobox _label=\"With string array in html\" _suggestions=\"['Herr','Frau','Firma']\" _value=\"Herr\" />\n\t\t</>\n\t);\n};\n",
+      "code": "import { KolCombobox } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { logKoliBriCallbackEvent, logKoliBriNativeEvent } from '../../shares/utils';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ComboboxHtml: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>A HTML only KolCombobox.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolCombobox\n\t\t\t\t_label=\"With string array in html\"\n\t\t\t\t_suggestions=\"['Herr','Frau','Firma']\"\n\t\t\t\t_value=\"Herr\"\n\t\t\t\t_on={{\n\t\t\t\t\tonBlur: logKoliBriCallbackEvent,\n\t\t\t\t\tonChange: logKoliBriCallbackEvent,\n\t\t\t\t\tonClick: logKoliBriCallbackEvent,\n\t\t\t\t\tonFocus: logKoliBriCallbackEvent,\n\t\t\t\t\tonInput: logKoliBriCallbackEvent,\n\t\t\t\t\tonKeyDown: logKoliBriCallbackEvent,\n\t\t\t\t}}\n\t\t\t\tonBlur={logKoliBriNativeEvent}\n\t\t\t\tonChange={logKoliBriNativeEvent}\n\t\t\t\tonClick={logKoliBriNativeEvent}\n\t\t\t\tonFocus={logKoliBriNativeEvent}\n\t\t\t\tonInput={logKoliBriNativeEvent}\n\t\t\t\tonKeyDown={logKoliBriNativeEvent}\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/combobox/lazy-loaded",
+      "group": "combobox",
+      "name": "lazy-loaded",
+      "path": "packages/samples/react/src/components/combobox/lazy-loaded.tsx",
+      "code": "import { SuggestionsPropType } from '@public-ui/components';\nimport { KolCombobox, KolSpin } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { COUNTRY_SUGGESTIONS } from '../../shares/country';\nimport { SampleDescription } from '../SampleDescription';\n\nconst LoadingOverlayFC: FC<{\n\tshow: boolean;\n}> = ({ show }) => {\n\tif (show) {\n\t\treturn (\n\t\t\t<div className=\"loading-overlay\">\n\t\t\t\t<KolSpin\n\t\t\t\t\t_label=\"loading\"\n\t\t\t\t\t_show={show}\n\t\t\t\t\t_variant=\"cycle\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n\nexport const ComboboxLazyLoaded: FC = () => {\n\tconst [suggestions, setSuggestions] = useState<SuggestionsPropType>([]);\n\tconst [loading, setLoading] = useState<boolean>(false);\n\n\tfunction loadCountries() {\n\t\tif (suggestions.length > 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetLoading(true);\n\t\tsetTimeout(() => {\n\t\t\tsetSuggestions(COUNTRY_SUGGESTIONS);\n\t\t\tsetLoading(false);\n\t\t}, 5000);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This combobox loads its list of countries 5 seconds after the first input of the user to simulate a call to the server.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full relative p-3\">\n\t\t\t\t<KolCombobox _label=\"Lazy loaded countries\" _suggestions={suggestions} onInput={() => loadCountries()} />\n\t\t\t\t<LoadingOverlayFC show={loading} />\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -989,7 +1005,7 @@
       "group": "input-text",
       "name": "basic",
       "path": "packages/samples/react/src/components/input-text/basic.tsx",
-      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only, and with icons.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" />\n\t\t\t<KolInputText _label=\"Name\" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />\n\t\t\t<KolInputText _label=\"Name\" _required _hint=\"Enter your surname\" />\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" _disabled />\n\t\t\t<KolInputText _label=\"Name\" _readOnly _value=\"Anderson-Clark\" />\n\t\t\t<KolInputText _label=\"Name\" _icons=\"kolicon-house\" _value=\"Anderson-Clark\" />\n\t\t</div>\n\t</>\n);\n",
+      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { logKoliBriCallbackEvent, logKoliBriNativeEvent } from '../../shares/utils';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only, and with icons.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Name\"\n\t\t\t\t_value=\"Anderson-Clark\"\n\t\t\t\t_on={{\n\t\t\t\t\tonBlur: logKoliBriCallbackEvent,\n\t\t\t\t\tonChange: logKoliBriCallbackEvent,\n\t\t\t\t\tonClick: logKoliBriCallbackEvent,\n\t\t\t\t\tonFocus: logKoliBriCallbackEvent,\n\t\t\t\t\tonInput: logKoliBriCallbackEvent,\n\t\t\t\t\tonKeyDown: logKoliBriCallbackEvent,\n\t\t\t\t}}\n\t\t\t\tonBlur={logKoliBriNativeEvent}\n\t\t\t\tonChange={logKoliBriNativeEvent}\n\t\t\t\tonClick={logKoliBriNativeEvent}\n\t\t\t\tonFocus={logKoliBriNativeEvent}\n\t\t\t\tonInput={logKoliBriNativeEvent}\n\t\t\t\tonKeyDown={logKoliBriNativeEvent}\n\t\t\t/>\n\t\t\t<KolInputText _label=\"Name\" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />\n\t\t\t<KolInputText _label=\"Name\" _required _hint=\"Enter your surname\" />\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" _disabled />\n\t\t\t<KolInputText _label=\"Name\" _readOnly _value=\"Anderson-Clark\" />\n\t\t\t<KolInputText _label=\"Name\" _icons=\"kolicon-house\" _value=\"Anderson-Clark\" />\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1269,7 +1285,7 @@
       "group": "pagination",
       "name": "basic",
       "path": "packages/samples/react/src/components/pagination/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolPagination } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PaginationBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolPagination renders a pagination for datasets. The sample shows the different states and variations of a pagination and the option to change the page\n\t\t\t\tsize.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolPagination _max={316514} _page={15475} _siblingCount={3} _label=\"Test pagination 1\" _on={{}} />\n\t\t\t<KolPagination _max={14} _page={14} _siblingCount={1} _boundaryCount={2} _label=\"Test pagination 2\" _on={{}} />\n\t\t\t<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label=\"Test pagination 3\" _on={{}} />\n\t\t\t<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label=\"Test pagination 4\" _on={{}} />\n\t\t\t<KolPagination\n\t\t\t\t_max={400}\n\t\t\t\t_page={6}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_hasButtons={false}\n\t\t\t\t_label=\"Test pagination 5\"\n\t\t\t\t_on={{}}\n\t\t\t\t_pageSizeOptions={[10, 100]}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
+      "code": "import React from 'react';\n\nimport { KolPagination } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PaginationBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolPagination renders a pagination for datasets. The sample shows the different states and variations of a pagination and the option to change the page\n\t\t\t\tsize.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolPagination _max={316514} _page={15475} _siblingCount={3} _label=\"Test pagination 1\" _on={{}} />\n\t\t\t<KolPagination _max={14} _page={14} _siblingCount={1} _boundaryCount={2} _label=\"Test pagination 2\" _on={{}} />\n\t\t\t<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label=\"Test pagination 3\" _on={{}} />\n\t\t\t<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label=\"Test pagination 4\" _on={{}} />\n\t\t\t<KolPagination\n\t\t\t\t_max={379}\n\t\t\t\t_page={6}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_hasButtons={false}\n\t\t\t\t_label=\"Test pagination 5\"\n\t\t\t\t_on={{}}\n\t\t\t\t_pageSizeOptions={[10, 100]}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1328,14 +1344,6 @@
       "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { SampleDescription } from '../SampleDescription';\nimport { SelectVariants } from './partials/variants';\n\nexport const SelectBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolSelect renders a select field. The sample shows KolSelect in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={SelectVariants} showButtons={false} />\n\t</>\n);\n",
       "kind": "sample"
     },
-    {
-      "id": "sample/select/picklist",
-      "group": "select",
-      "name": "picklist",
-      "path": "packages/samples/react/src/components/select/picklist.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { PicklistCases } from './picklist/partials/cases';\n\nexport const SelectPicklist: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tA picklist (dual listbox / transfer list) lets users move items between an \"Available\" and a \"Selected\" list. The component is generic, supports\n\t\t\t\tcontrolled and uncontrolled usage, and adapts its layout responsively.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<PicklistCases />\n\t</>\n);\n",
-      "kind": "sample"
-    },
     {
       "id": "sample/single-select/basic",
       "group": "single-select",
@@ -1344,6 +1352,14 @@
       "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { FormWrap } from '../FormWrap';\nimport { SampleDescription } from '../SampleDescription';\nimport { SingleSelectVariants } from './partials/variants';\n\nexport const SingleSelectBasic: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>SingleSelect provides a select field for a single value, supported by a search field.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<FormWrap RefComponent={SingleSelectVariants} showButtons={false} />\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
+    {
+      "id": "sample/single-select/lazy-loaded",
+      "group": "single-select",
+      "name": "lazy-loaded",
+      "path": "packages/samples/react/src/components/single-select/lazy-loaded.tsx",
+      "code": "import type { Option, StencilUnknown } from '@public-ui/components';\nimport { KolSingleSelect, KolSpin } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { COUNTRY_OPTIONS } from '../../shares/country';\nimport { SampleDescription } from '../SampleDescription';\n\nconst LoadingOverlayFC: FC<{\n\tshow: boolean;\n}> = ({ show }) => {\n\tif (show) {\n\t\treturn (\n\t\t\t<div className=\"loading-overlay\">\n\t\t\t\t<KolSpin\n\t\t\t\t\t_label=\"loading\"\n\t\t\t\t\t_show={show}\n\t\t\t\t\t_variant=\"cycle\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n\nexport const SingleSelectLazyLoaded: FC = () => {\n\tconst [suggestions, setSuggestions] = useState<Option<StencilUnknown>[]>([]);\n\tconst [loading, setLoading] = useState<boolean>(false);\n\n\tfunction loadCountries() {\n\t\tif (suggestions.length > 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetLoading(true);\n\t\tsetTimeout(() => {\n\t\t\tsetSuggestions(COUNTRY_OPTIONS as Option<StencilUnknown>[]);\n\t\t\tsetLoading(false);\n\t\t}, 5000);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This single select loads its list of countries 5 seconds after the first input of the user to simulate a call to the server.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full relative p-3\">\n\t\t\t\t<KolSingleSelect _label=\"Lazy loaded countries\" _options={suggestions} onInput={() => loadCountries()} />\n\t\t\t\t<LoadingOverlayFC show={loading} />\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
+      "kind": "sample"
+    },
     {
       "id": "sample/skip-nav/basic",
       "group": "skip-nav",
@@ -1373,7 +1389,7 @@
       "group": "spin",
       "name": "cycle",
       "path": "packages/samples/react/src/components/spin/cycle.tsx",
-      "code": "import React from 'react';\n\nimport { KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinCycle: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows the KolSpin variant &quot;cycle&quot;.</p>\n\t\t</SampleDescription>\n\n\t\t<KolSpin _show _variant=\"cycle\" />\n\t</>\n);\n",
+      "code": "import React from 'react';\n\nimport { KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinCycle: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows the KolSpin variant &quot;cycle&quot; and that you can change its color and size.</p>\n\t\t</SampleDescription>\n\n\t\t<KolSpin _show _variant=\"cycle\" />\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1384,6 +1400,14 @@
       "code": "import { KolSpin } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinLabel: FC = () => {\n\tconst [show, setShow] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst id = setInterval(() => setShow((value) => !value), 3000);\n\t\treturn () => clearInterval(id);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolSpin with a label.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolSpin _show={show} _label={show ? 'Loading data...' : 'Data loaded.'} />\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
+    {
+      "id": "sample/spin/variables",
+      "group": "spin",
+      "name": "variables",
+      "path": "packages/samples/react/src/components/spin/variables.tsx",
+      "code": "import React from 'react';\n\nimport { KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinVariables: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>You can change the color and size of the spinners with CSS properties.</p>\n\t\t</SampleDescription>\n\n\t\t<KolSpin _show style={{ '--kol-spin-color': 'green', '--kol-spin-size': '80' }} />\n\t</>\n);\n",
+      "kind": "sample"
+    },
     {
       "id": "sample/split-button/basic",
       "group": "split-button",
@@ -1773,7 +1797,7 @@
       "group": "scenarios",
       "name": "change-tabindex",
       "path": "packages/samples/react/src/scenarios/change-tabindex.tsx",
-      "code": "/* eslint-disable jsx-a11y/tabindex-no-positive */\n\nimport type { Option, StencilUnknown } from '@public-ui/components';\nimport {\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolCombobox,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSingleSelect,\n\tKolSplitButton,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { ERROR_MSG, HINT_MSG } from '../shares/constants';\nimport { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';\n\nexport const ChangeTabindex: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example show how different components works with tabIndex.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid gap-4\">\n\t\t\t\t<KolCard _label=\"Button\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolButton _label=\"Button 1, Tabindex 4\" _variant=\"primary\" tabIndex={4} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Button 2, Tabindex 3\" _variant=\"primary\" tabIndex={3} />\n\t\t\t\t\t\t<KolButton _label=\"Button 3, Tabindex 2\" _variant=\"primary\" tabIndex={2} />\n\t\t\t\t\t\t<KolButton _label=\"Button 4, Tabindex 1\" _variant=\"primary\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"ButtonLink\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolButtonLink _disabled _label=\"ButtonLink 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 3, Tabindex 2\" tabIndex={2} />\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Combobox\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolCombobox _hint={HINT_MSG} _label=\"Combobox 1, Tabindex 4\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />\n\t\t\t\t\t\t<KolCombobox _disabled _hint={HINT_MSG} _label=\"Combobox 2, Tabindex 3\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />\n\t\t\t\t\t\t<KolCombobox\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_hint={HINT_MSG}\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\t_label=\"Combobox 3, Tabindex 2\"\n\t\t\t\t\t\t\t_suggestions={COUNTRY_SUGGESTIONS}\n\t\t\t\t\t\t\t_value={'Deutschland'}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolCombobox _hint={HINT_MSG} _label=\"Combobox 4, Tabindex 1\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputCheckbox\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputCheckbox _label=\"InputCheckbox 4, Tabindex 1\" _value={false} tabIndex={4} />\n\t\t\t\t\t\t<KolInputCheckbox _disabled _label=\"InputCheckbox 3, Tabindex 2\" _value={false} tabIndex={3} />\n\t\t\t\t\t\t<KolInputCheckbox _touched _label=\"InputCheckbox 2, Tabindex 3\" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />\n\t\t\t\t\t\t<KolInputCheckbox _label=\"InputCheckbox 1, Tabindex 4\" _value={false} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputColor\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputColor _value=\"#f08080\" _label=\"InputCheckbox 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputColor _disabled _value=\"#f08080\" _label=\"InputCheckbox 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputColor _touched _value=\"#f08080\" _label=\"InputCheckbox 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputColor _value=\"#f08080\" _label=\"InputCheckbox 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputDate\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputDate _type=\"datetime-local\" _label=\"InputCheckbox 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputDate _disabled _type=\"datetime-local\" _label=\"InputCheckbox 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputDate\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_type=\"datetime-local\"\n\t\t\t\t\t\t\t_label=\"InputCheckbox 3, Tabindex 2\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputDate _type=\"datetime-local\" _label=\"InputCheckbox 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputEmail\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputEmail _label=\"InputEmail 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputEmail _disabled _label=\"InputEmail 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputEmail _touched _label=\"InputEmail 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputEmail _label=\"InputEmail 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputFile\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputFile _label=\"InputFile 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputFile _disabled _label=\"InputFile 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputFile _touched _label=\"InputFile 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputFile _label=\"InputFile 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputNumber\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputNumber _label=\"InputNumber 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputNumber _disabled _label=\"InputNumber 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputNumber _touched _label=\"InputNumber 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputNumber _label=\"InputNumber 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputPassword\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputPassword _label=\"InputPassword 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputPassword _disabled _label=\"InputPassword 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputPassword _touched _label=\"InputPassword 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputPassword _label=\"InputPassword 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputRadio\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 1, Tabindex 4\"\n\t\t\t\t\t\t\ttabIndex={4}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 2, Tabindex 3\"\n\t\t\t\t\t\t\t_disabled\n\t\t\t\t\t\t\ttabIndex={3}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 3, Tabindex 2\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>{' '}\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 4, Tabindex 1\"\n\t\t\t\t\t\t\ttabIndex={1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputRange\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputRange _label=\"InputRange 1, Tabindex 4\" _min={0} _max={50} tabIndex={4} />\n\t\t\t\t\t\t<KolInputRange _disabled _label=\"InputRange 2, Tabindex 3\" _min={0} _max={50} tabIndex={3} />\n\t\t\t\t\t\t<KolInputRange _touched _label=\"InputRange 3, Tabindex 2\" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputRange _label=\"InputRange 4, Tabindex 1\" _min={0} _max={50} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputText\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputText _label=\"InputText 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputText _disabled _label=\"InputText 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputText _touched _label=\"InputText 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputText _label=\"InputText 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"LinkButton\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 1, Tabindex 4\" _variant=\"primary\" tabIndex={4}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _disabled _href={'#/back-page'} _label=\"InputText 2, Tabindex 3\" _variant=\"primary\" tabIndex={3}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 3, Tabindex 2\" _variant=\"primary\" tabIndex={2}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 4, Tabindex 1\" _variant=\"primary\" tabIndex={1}></KolLinkButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Link\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolLink _disabled _href=\"#/back-page\" _label=\"InputText 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 3, Tabindex 2\" tabIndex={2} />\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"SingleSelect\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolSingleSelect _label=\"InputText 1, Tabindex 4\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />\n\t\t\t\t\t\t<KolSingleSelect _disabled _label=\"InputText 2, Tabindex 3\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />\n\t\t\t\t\t\t<KolSingleSelect\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_label=\"InputText 3, Tabindex 2\"\n\t\t\t\t\t\t\t_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\t_value={'de'}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolSingleSelect _label=\"InputText 4, Tabindex 1\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"SplitButton\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 1, Tabindex 4\" tabIndex={4}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 2, Tabindex 3\" tabIndex={3} _disabled>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 3, Tabindex 2\" tabIndex={2}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 4, Tabindex 1\" tabIndex={1}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Textarea\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolTextarea _label=\"Textarea 1, Tabindex 4\" _rows={3} _placeholder=\"Placeholder\" tabIndex={4} />\n\t\t\t\t\t\t<KolTextarea _disabled _label=\"Textarea 2, Tabindex 3\" _rows={3} _placeholder=\"Placeholder\" tabIndex={3} />\n\t\t\t\t\t\t<KolTextarea\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_label=\"Textarea 3, Tabindex 2\"\n\t\t\t\t\t\t\t_rows={3}\n\t\t\t\t\t\t\t_placeholder=\"Placeholder\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolTextarea _label=\"Textarea 4, Tabindex 1\" _rows={3} _placeholder=\"Placeholder\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "/* eslint-disable jsx-a11y/tabindex-no-positive */\n\nimport type { Option, StencilUnknown } from '@public-ui/components';\nimport {\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolCombobox,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSingleSelect,\n\tKolSplitButton,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { ERROR_MSG, HINT_MSG } from '../shares/constants';\nimport { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';\n\nexport const ChangeTabindex: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example show how different components works with tabIndex.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid gap-4\">\n\t\t\t\t<KolCard _label=\"Button\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolButton _label=\"Button 1, Tabindex 4\" _variant=\"primary\" tabIndex={4} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Button 2, Tabindex 3\" _variant=\"primary\" tabIndex={3} />\n\t\t\t\t\t\t<KolButton _label=\"Button 3, Tabindex 2\" _variant=\"primary\" tabIndex={2} />\n\t\t\t\t\t\t<KolButton _label=\"Button 4, Tabindex 1\" _variant=\"primary\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"ButtonLink\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolButtonLink _disabled _label=\"ButtonLink 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 3, Tabindex 2\" tabIndex={2} />\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Combobox\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolCombobox _hint={HINT_MSG} _label=\"Combobox 1, Tabindex 4\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />\n\t\t\t\t\t\t<KolCombobox _disabled _hint={HINT_MSG} _label=\"Combobox 2, Tabindex 3\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />\n\t\t\t\t\t\t<KolCombobox\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_hint={HINT_MSG}\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\t_label=\"Combobox 3, Tabindex 2\"\n\t\t\t\t\t\t\t_suggestions={COUNTRY_SUGGESTIONS}\n\t\t\t\t\t\t\t_value={'Deutschland'}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolCombobox _hint={HINT_MSG} _label=\"Combobox 4, Tabindex 1\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputCheckbox\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputCheckbox _label=\"InputCheckbox 4, Tabindex 1\" _value={false} tabIndex={4} />\n\t\t\t\t\t\t<KolInputCheckbox _disabled _label=\"InputCheckbox 3, Tabindex 2\" _value={false} tabIndex={3} />\n\t\t\t\t\t\t<KolInputCheckbox _touched _label=\"InputCheckbox 2, Tabindex 3\" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />\n\t\t\t\t\t\t<KolInputCheckbox _label=\"InputCheckbox 1, Tabindex 4\" _value={false} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputColor\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputColor _value=\"#f08080\" _label=\"InputCheckbox 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputColor _disabled _value=\"#f08080\" _label=\"InputCheckbox 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputColor _touched _value=\"#f08080\" _label=\"InputCheckbox 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputColor _value=\"#f08080\" _label=\"InputCheckbox 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputDate\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputDate _type=\"datetime-local\" _label=\"InputCheckbox 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputDate _disabled _type=\"datetime-local\" _label=\"InputCheckbox 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputDate\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_type=\"datetime-local\"\n\t\t\t\t\t\t\t_label=\"InputCheckbox 3, Tabindex 2\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputDate _type=\"datetime-local\" _label=\"InputCheckbox 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputEmail\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputEmail _label=\"InputEmail 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputEmail _disabled _label=\"InputEmail 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputEmail _touched _label=\"InputEmail 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputEmail _label=\"InputEmail 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputFile\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputFile _label=\"InputFile 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputFile _disabled _label=\"InputFile 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputFile _touched _label=\"InputFile 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputFile _label=\"InputFile 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputNumber\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputNumber _label=\"InputNumber 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputNumber _disabled _label=\"InputNumber 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputNumber _touched _label=\"InputNumber 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputNumber _label=\"InputNumber 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputPassword\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputPassword _label=\"InputPassword 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputPassword _disabled _label=\"InputPassword 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputPassword _touched _label=\"InputPassword 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputPassword _label=\"InputPassword 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputRadio\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 1, Tabindex 4\"\n\t\t\t\t\t\t\ttabIndex={4}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 2, Tabindex 3\"\n\t\t\t\t\t\t\t_disabled\n\t\t\t\t\t\t\ttabIndex={3}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 3, Tabindex 2\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 4, Tabindex 1\"\n\t\t\t\t\t\t\ttabIndex={1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputRange\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputRange _label=\"InputRange 1, Tabindex 4\" _min={0} _max={50} tabIndex={4} />\n\t\t\t\t\t\t<KolInputRange _disabled _label=\"InputRange 2, Tabindex 3\" _min={0} _max={50} tabIndex={3} />\n\t\t\t\t\t\t<KolInputRange _touched _label=\"InputRange 3, Tabindex 2\" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputRange _label=\"InputRange 4, Tabindex 1\" _min={0} _max={50} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputText\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputText _label=\"InputText 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputText _disabled _label=\"InputText 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputText _touched _label=\"InputText 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputText _label=\"InputText 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"LinkButton\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 1, Tabindex 4\" _variant=\"primary\" tabIndex={4}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _disabled _href={'#/back-page'} _label=\"InputText 2, Tabindex 3\" _variant=\"primary\" tabIndex={3}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 3, Tabindex 2\" _variant=\"primary\" tabIndex={2}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 4, Tabindex 1\" _variant=\"primary\" tabIndex={1}></KolLinkButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Link\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolLink _disabled _href=\"#/back-page\" _label=\"InputText 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 3, Tabindex 2\" tabIndex={2} />\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"SingleSelect\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolSingleSelect _label=\"InputText 1, Tabindex 4\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />\n\t\t\t\t\t\t<KolSingleSelect _disabled _label=\"InputText 2, Tabindex 3\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />\n\t\t\t\t\t\t<KolSingleSelect\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_label=\"InputText 3, Tabindex 2\"\n\t\t\t\t\t\t\t_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\t_value={'de'}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolSingleSelect _label=\"InputText 4, Tabindex 1\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"SplitButton\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 1, Tabindex 4\" tabIndex={4}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 2, Tabindex 3\" tabIndex={3} _disabled>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 3, Tabindex 2\" tabIndex={2}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 4, Tabindex 1\" tabIndex={1}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Textarea\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolTextarea _label=\"Textarea 1, Tabindex 4\" _rows={3} _placeholder=\"Placeholder\" tabIndex={4} />\n\t\t\t\t\t\t<KolTextarea _disabled _label=\"Textarea 2, Tabindex 3\" _rows={3} _placeholder=\"Placeholder\" tabIndex={3} />\n\t\t\t\t\t\t<KolTextarea\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_label=\"Textarea 3, Tabindex 2\"\n\t\t\t\t\t\t\t_rows={3}\n\t\t\t\t\t\t\t_placeholder=\"Placeholder\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolTextarea _label=\"Textarea 4, Tabindex 1\" _rows={3} _placeholder=\"Placeholder\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "scenario"
     },
     {
@@ -1965,7 +1989,7 @@
       "group": "spec",
       "name": "button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button.md",
-      "code": "# kol-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## 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; }` | `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\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",
       "kind": "spec"
     },
     {
@@ -1973,7 +1997,7 @@
       "group": "spec",
       "name": "button-link",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button-link.md",
-      "code": "# kol-button-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## 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; }` | `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\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",
       "kind": "spec"
     },
     {
@@ -2261,7 +2285,7 @@
       "group": "spec",
       "name": "split-button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/split-button.md",
-      "code": "# kol-split-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## 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; }` | `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\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",
       "kind": "spec"
     },
     {