@public-ui/mcp 4.3.0-rc.6 → 4.3.0-rc.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cli.cjs +4 -1
  2. package/dist/cli.mjs +4 -1
  3. package/dist/mcp.cjs +503 -31
  4. package/dist/mcp.d.cts +1 -1
  5. package/dist/mcp.d.mts +1 -1
  6. package/dist/mcp.d.ts +1 -1
  7. package/dist/mcp.mjs +502 -31
  8. package/package.json +8 -5
  9. package/shared/sample-index.json +25 -17
package/shared/sample-index.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "metadata": {
3
- "generatedAt": "2026-07-30T09:38:23.708Z",
3
+ "generatedAt": "2026-07-31T10:00:51.176Z",
4
4
  "buildMode": "ci",
5
5
  "counts": {
6
- "total": 330,
7
- "totalDocs": 61,
6
+ "total": 331,
7
+ "totalDocs": 62,
8
8
  "totalSpecs": 53,
9
9
  "totalSamples": 197,
10
10
  "totalScenarios": 19
11
11
  },
12
12
  "repo": {
13
- "commit": "cdef9c986048f7ff7ae455168075b8b5362bb1ad",
13
+ "commit": "0619d2cf155aa17b6a08abd044505e971e512c78",
14
14
  "branch": "develop",
15
15
  "repoUrl": "https://github.com/public-ui/kolibri"
16
16
  }
@@ -488,6 +488,14 @@
488
488
  "code": "# Neue Komponente erstellen\n\n> Schritt-für-Schritt-Anleitung basierend auf dem [Skeleton Blueprint](../../packages/components/src/components/_skeleton/ARC42.md).\n\n## Grundprinzipien\n\n- Auflistungen werden immer alphabetisch sortiert\n- Die [ARC42.md](../../packages/components/src/components/_skeleton/ARC42.md) ist die führende Architektur-Spezifikation — lies sie vollständig, bevor du eine neue Komponente erstellst\n- Alle Web Components verwenden `shadow: true` — Komponenten ohne Shadow DOM werden als Functional Components implementiert\n- Props leben in `src/internal/props/` mit eigenem `PropDefinition` pro Prop\n- Kein toter Code, keine Barrel-Files, keine `types.ts`\n\n## Checkliste\n\n| Schritt | Kurzbeschreibung |\n| :-----: | ---------------------------------------------------------------------------------------- |\n| 0 | Projekt starten |\n| 1 | Tag-Name in Stencil-Konfiguration registrieren |\n| 2 | Props erstellen oder vorhandene wiederverwenden (`src/internal/props/`) |\n| 3 | API-Definition erstellen (`api.tsx`) mit `PropsConfigShape` und `ApiFromConfig` |\n| 4 | Controller implementieren (`controller.ts`) — erweitert `BaseController<Api>` |\n| 5 | Functional Component erstellen (`component.tsx`) — stateless Renderer |\n| 6 | Web Component erstellen (`component.tsx`) — erweitert `BaseWebComponent<Api>` |\n| 7 | Tests co-lokalisiert neben `component.tsx` erstellen |\n| 8 | Beispiel in React-Sample-App anlegen |\n| 9 | Validierung: `pnpm format && pnpm lint && pnpm --filter @public-ui/components test:unit` |\n\n## Schritt 0 — Projekt starten\n\nProjekt starten, wie in [Contribution](../../CONTRIBUTING.md) beschrieben.\n\n## Schritt 1 — Tag-Name registrieren\n\nDen Tag-Namen der neuen Komponente in `packages/components/stencil.config.ts` registrieren.\n\n## Schritt 2 — Props erstellen (Props-First!)\n\n**Bevor die Komponente implementiert wird, müssen alle Props definiert sein.**\n\nPro Prop eine Datei unter `src/internal/props/`:\n\n```typescript\n// src/internal/props/name.ts\nimport type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>('name', '', normalizeString);\n```\n\n- `SimpleProp<K, T>` wenn externer und interner Typ identisch sind\n- `Prop<K, TExternal, TInternal>` wenn sich die Typen unterscheiden (z.B. `ColorProp`)\n- Export in `src/internal/props/index.ts` hinzufügen\n- Bestehende Props aus `index.ts` wiederverwenden, wenn möglich\n\nDetails: [ARC42 §4 — Schema Helper Layer](../../packages/components/src/components/_skeleton/ARC42.md#schema-helper-layer)\n\n## Schritt 3 — API-Definition\n\nDatei: `src/internal/functional-components/<component>/api.tsx`\n\n```typescript\nimport { nameProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const myComponentPropsConfig = {\n\trequired: [nameProp],\n\t// optional: [showProp],\n} as const satisfies PropsConfigShape;\n\nexport type MyComponentApi = ApiFromConfig<\n\ttypeof myComponentPropsConfig,\n\t{\n\t\t// Nur definieren, was die Komponente tatsächlich nutzt:\n\t\t// Callbacks: { click: () => void };\n\t\t// Emitters: { change: string };\n\t\t// Methods: { focus: () => void };\n\t\t// States: { count: number };\n\t\t// Refs: { button: HTMLButtonElement };\n\t\t// Listeners: { keydown: KeyboardEvent };\n\t}\n>;\n```\n\nDetails: [ARC42 §4 — API Definition with PropsConfigShape](../../packages/components/src/components/_skeleton/ARC42.md#api-definition-with-propsconfigshape-and-apifromconfig)\n\n## Schritt 4 — Controller\n\nDatei: `src/internal/functional-components/<component>/controller.ts`\n\n```typescript\nimport { nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { MyComponentApi } from './api';\nimport { myComponentPropsConfig } from './api';\n\nexport class MyComponentController extends BaseController<MyComponentApi> implements ControllerInterface<MyComponentApi> {\n\tpublic constructor(stateAccess: StateAccess<MyComponentApi>) {\n\t\tsuper(stateAccess, myComponentPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<MyComponentApi>): void {\n\t\tconst { name } = props;\n\t\tthis.watchName(name);\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('name', v);\n\t\t});\n\t}\n}\n```\n\n- Event-Handler und Ref-Setter als **Arrow-Properties** (`handleClick = () => { … }`)\n- Lifecycle- und Watcher-Methoden als **Prototype-Methoden**\n- Details: [ARC42 §4 — Controller Layer](../../packages/components/src/components/_skeleton/ARC42.md#controller-layer)\n\n## Schritt 5 — Functional Component\n\nDatei: `src/internal/functional-components/<component>/component.tsx`\n\n```tsx\nimport type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { MyComponentApi } from './api';\n\nconst myBem = bem.forBlock('kol-my-component');\n\nexport const MyComponentFC: FC<FunctionalComponentProps<MyComponentApi>> = (props) => {\n\tconst { name } = props;\n\treturn (\n\t\t<div class={myBem()}>\n\t\t\t<span class={myBem('name')}>{name}</span>\n\t\t</div>\n\t);\n};\n```\n\n- Stateless, keine Seiteneffekte\n- Details: [ARC42 §4 — Functional Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#functional-component-layer)\n\n## Schritt 6 — Web Component\n\nDatei: `src/components/<component>/component.tsx`\n\n```tsx\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { MyComponentApi } from '../../../../internal/functional-components/my-component/api';\nimport { MyComponentFC } from '../../../../internal/functional-components/my-component/component';\nimport { MyComponentController } from '../../../../internal/functional-components/my-component/controller';\n\n@Component({\n\ttag: 'kol-my-component',\n\tshadow: true,\n})\nexport class KolMyComponent extends BaseWebComponent<MyComponentApi> implements WebComponentInterface<MyComponentApi> {\n\tprivate readonly ctrl = new MyComponentController(this.stateAccess);\n\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<MyComponentFC name={this.ctrl.getRenderProp('name')} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n```\n\n- Immer `shadow: true` und `<Host>` ohne Klassen-Attribut\n- `@Watch` nur auf unterstrichene Props\n- Details: [ARC42 §4 — Web Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#web-component-layer)\n\nWenn ein Controller garantiert kein `@State` benötigt, verwende den Sentinel:\n\n```typescript\nprivate readonly ctrl = new MyComponentController(BaseWebComponent.stateLess);\n```\n\n## Schritt 7 — Tests\n\nTests liegen **direkt neben** `component.tsx` — kein `test/`-Unterordner.\n\n**Snapshot-Test** (`snapshot.spec.tsx`):\n\n```tsx\nimport { executeSnapshotTests } from '../../../../utils/testing';\nimport { KolMyComponent } from './component';\n\nconst TAG = 'kol-my-component';\n\ntype Props = {\n\t_name: string;\n};\n\nexecuteSnapshotTests<Props>(TAG, [KolMyComponent], [{ _name: 'Test' }, { _name: '' }]);\n```\n\n**Interaction-Test** (`interaction.e2e.ts`):\n\n```typescript\nimport { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\n\ntest.describe('kol-my-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.setContent('<kol-my-component _name=\"Test\"></kol-my-component>');\n\t});\n\n\ttest('should render the name', async ({ page }) => {\n\t\tawait expect(page.locator('kol-my-component')).toBeVisible();\n\t});\n});\n```\n\nDetails: [ARC42 §9 — Design Decision 11](../../packages/components/src/components/_skeleton/ARC42.md#9-design-decisions)\n\n## Schritt 8 — Beispiel in React-Sample-App\n\nDatei: `packages/samples/react/src/scenarios/<component>.tsx`\n\nAnschließend die Route in `packages/samples/react/src/scenarios/routes.ts` registrieren.\n\nZum Testen:\n\n```bash\ncd packages/samples/react\npnpm start\n# Navigiere zu http://localhost:9191\n```\n\n## Schritt 9 — Validierung\n\n```bash\npnpm format # ~10 Sekunden\npnpm lint # ~1 Minute, NICHT abbrechen\npnpm --filter @public-ui/components test:unit # ~2-3 Minuten, NICHT abbrechen\n```\n\nAlle drei Befehle müssen fehlerfrei durchlaufen.\n\n## Referenz\n\nDie vollständige Referenzimplementierung findet sich im Skeleton Blueprint:\n\n- **Architektur**: [`_skeleton/ARC42.md`](../../packages/components/src/components/_skeleton/ARC42.md)\n- **Agent-Instruktionen**: [`_skeleton/AGENTS.md`](../../packages/components/src/components/_skeleton/AGENTS.md)\n- **Performance-Analyse**: [`_skeleton/PERFORMANCE_ANALYSIS.md`](../../packages/components/src/components/_skeleton/PERFORMANCE_ANALYSIS.md)\n- **Refactoring-Leitfaden**: [`_skeleton/REFACTORING_PROMPT.md`](../../packages/components/src/components/_skeleton/REFACTORING_PROMPT.md)\n",
489
489
  "kind": "doc"
490
490
  },
491
+ {
492
+ "id": "doc/umsetzungskonzept-kolibri-mcp",
493
+ "group": "docs",
494
+ "name": "umsetzungskonzept-kolibri-mcp",
495
+ "path": "umsetzungskonzept-kolibri-mcp.md",
496
+ "code": "# 📋 Umsetzungszyklus: Integration von kern-ux-mcp-Features in KoliBri MCP\n\n**Ziel:** KoliBri MCP um die Stärken von kern-ux-mcp erweitern, insbesondere **A11Y-Validierung**, **dynamische HTML-Generierung** und **Composition-System**, während die bestehenden Vorteile (Suche, HTTP-Transport, Resources) erhalten bleiben.\n\n**Priorisierung:** Features sind nach Aufwand und Impact für Coding Agents sortiert.\n\n---\n\n## 📌 Übersicht der umzusetzenden Features\n\n| **Feature** | **Beschreibung** | **Aufwand** | **Impact für Agents** | **Abhängigkeiten** |\n| -------------------------------------------------------------------- | -------------------------------------------------------------- | ----------- | --------------------- | ------------------------- |\n| [1. A11Y-Validierung](#1-a11y-validierung) | Validierung von HTML gegen WCAG/EN 301 549-Regeln | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | `node-html-parser` |\n| [2. Dynamische HTML-Generierung](#2-dynamische-html-generierung) | Dynamische Erzeugung von KoliBri-Komponenten aus Parametern | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | `zod` (bereits vorhanden) |\n| [3. Composition-System](#3-composition-system) | Rekursive Layout-Generierung (Grid + Card + Button etc.) | ⭐⭐⭐ | ⭐⭐⭐⭐ | `zod` |\n| [4. Template-Repo-Integration](#4-template-repo-integration) | Indexierung von Templates (markdown + src) aus public-ui Repos | ⭐⭐⭐ | ⭐⭐⭐⭐ | `simple-git`, `glob` |\n| [5. Argument-Normalisierung](#5-argument-normalisierung) | Robustere API durch Default-Werte und Aliase | ⭐⭐ | ⭐⭐⭐ | – |\n| [6. Detaillierte Fehlerbehandlung](#6-detaillierte-fehlerbehandlung) | Tool-spezifische Cheat-Sheets in Fehlermeldungen | ⭐⭐ | ⭐⭐⭐ | – |\n\n---\n\n## 🎯 Phase 1: A11Y-Validierung (1–2 Tage)\n\n**Ziel:** Agents können generiertes HTML auf **WCAG/EN 301 549-Compliance** prüfen.\n\n### 📁 Dateistruktur\n\n```\npackages/tools/mcp/\n├── src/\n│ ├── a11y/\n│ │ ├── types.ts # Typdefinitionen für A11Y-Issues\n│ │ ├── rules.ts # KoliBri-spezifische Validierungsregeln\n│ │ └── validate.ts # Kern-Validierungslogik\n│ └── mcp.ts # + Tool-Registrierung\n└── package.json # + Abhängigkeit node-html-parser\n```\n\n---\n\n### 📄 1.1 `src/a11y/types.ts`\n\n```typescript\n/**\n * A11Y-Issue-Format (kompatibel mit kern-ux-mcp)\n */\nexport interface A11yIssue {\n\truleId: string; // z. B. \"button-missing-aria-label\"\n\tseverity: 'error' | 'warning';\n\tmessage: { en: string; de: string };\n\tselectorHint?: string; // CSS-Selektor für Problemstelle\n\thelpUrl?: string; // Link zu Dokumentation\n}\n\n/**\n * KoliBri-spezifische Regel-IDs\n */\nexport type KolibriA11yRuleId =\n\t| 'button-missing-label'\n\t| 'input-missing-associated-label'\n\t| 'img-missing-alt'\n\t| 'kol-icon-missing-aria-hidden'\n\t| 'heading-hierarchy-violation'\n\t| 'focus-trap-missing';\n```\n\n---\n\n### 📄 1.2 `src/a11y/rules.ts`\n\n```typescript\nimport { parse } from 'node-html-parser';\nimport type { KolibriA11yRuleId, A11yIssue } from './types.js';\n\n/**\n * Validierungsregeln für KoliBri-Komponenten.\n * Jede Regel prüft HTML auf ein spezifisches A11Y-Problem.\n */\nconst RULES: Record<KolibriA11yRuleId, (root: HTMLElement) => A11yIssue[]> = {\n\t// ❌ <button><kol-icon name=\"save\"></kol-icon></button> → Fehlender Text\n\t'button-missing-label': (root) => {\n\t\tconst issues: A11yIssue[] = [];\n\t\tfor (const button of root.querySelectorAll(\"button, [role='button']\")) {\n\t\t\tconst hasText = button.textContent.trim().length > 0;\n\t\t\tconst hasAriaLabel = button.getAttribute('aria-label');\n\t\t\tconst hasAriaLabelledby = button.getAttribute('aria-labelledby');\n\t\t\tif (!hasText && !hasAriaLabel && !hasAriaLabelledby) {\n\t\t\t\tissues.push({\n\t\t\t\t\truleId: 'button-missing-label',\n\t\t\t\t\tseverity: 'error',\n\t\t\t\t\tmessage: {\n\t\t\t\t\t\ten: 'Button is missing a text label or aria-label. Screen readers cannot announce its purpose.',\n\t\t\t\t\t\tde: 'Button hat keinen Text oder aria-label. Screenreader können seinen Zweck nicht ansagen.',\n\t\t\t\t\t},\n\t\t\t\t\tselectorHint: `button[${button.getAttribute('id') ? `id=\"${button.getAttribute('id')}\"` : ''}]`,\n\t\t\t\t\thelpUrl: 'https://public-ui.github.io/docs/a11y/buttons',\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\treturn issues;\n\t},\n\n\t// ❌ <input> ohne <label> oder aria-labelledby\n\t'input-missing-associated-label': (root) => {\n\t\tconst issues: A11yIssue[] = [];\n\t\tfor (const input of root.querySelectorAll(\"input:not([type='hidden']):not([type='submit']):not([type='button']):not([type='image']):not([type='reset'])\")) {\n\t\t\tconst id = input.getAttribute('id');\n\t\t\tconst hasAriaLabel = input.getAttribute('aria-label');\n\t\t\tconst hasAriaLabelledby = input.getAttribute('aria-labelledby');\n\t\t\tconst hasAssociatedLabel = id && root.querySelector(`label[for=\"${id}\"]`);\n\n\t\t\tif (!hasAriaLabel && !hasAriaLabelledby && !hasAssociatedLabel) {\n\t\t\t\tissues.push({\n\t\t\t\t\truleId: 'input-missing-associated-label',\n\t\t\t\t\tseverity: 'error',\n\t\t\t\t\tmessage: {\n\t\t\t\t\t\ten: \"Input field is missing a label association (via <label for='...'>, aria-label, or aria-labelledby).\",\n\t\t\t\t\t\tde: \"Eingabefeld hat keine Label-Verknüpfung (via <label for='...'>, aria-label oder aria-labelledby).\",\n\t\t\t\t\t},\n\t\t\t\t\tselectorHint: `input[${id ? `id=\"${id}\"` : ''}]`,\n\t\t\t\t\thelpUrl: 'https://public-ui.github.io/docs/a11y/forms',\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\treturn issues;\n\t},\n\n\t// ❌ <kol-icon> ohne aria-hidden (dekorativ) oder aria-label (semantisch)\n\t'kol-icon-missing-aria-hidden': (root) => {\n\t\tconst issues: A11yIssue[] = [];\n\t\tfor (const icon of root.querySelectorAll('kol-icon')) {\n\t\t\tconst hasAriaHidden = icon.getAttribute('aria-hidden') === 'true';\n\t\t\tconst hasAriaLabel = icon.getAttribute('aria-label');\n\t\t\tif (!hasAriaHidden && !hasAriaLabel) {\n\t\t\t\tissues.push({\n\t\t\t\t\truleId: 'kol-icon-missing-aria-hidden',\n\t\t\t\t\tseverity: 'warning',\n\t\t\t\t\tmessage: {\n\t\t\t\t\t\ten: \"kol-icon is missing aria-hidden='true' (if decorative) or aria-label (if semantic).\",\n\t\t\t\t\t\tde: \"kol-icon hat kein aria-hidden='true' (falls dekorativ) oder aria-label (falls semantisch).\",\n\t\t\t\t\t},\n\t\t\t\t\tselectorHint: `kol-icon`,\n\t\t\t\t\thelpUrl: 'https://public-ui.github.io/docs/components/icon#accessibility',\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\treturn issues;\n\t},\n};\n\nexport { RULES };\n```\n\n---\n\n### 📄 1.3 `src/a11y/validate.ts`\n\n```typescript\nimport { parse } from 'node-html-parser';\nimport { RULES } from './rules.js';\nimport type { A11yIssue, KolibriA11yRuleId } from './types.js';\n\n/**\n * Validiert HTML gegen alle KoliBri-A11Y-Regeln.\n * @param html - Der zu validierende HTML-String\n * @returns Array von A11Y-Issues (leer = valid)\n */\nexport function validateKolibriHtml(html: string): A11yIssue[] {\n\tconst root = parse(html);\n\tconst issues: A11yIssue[] = [];\n\n\t// Führe alle Regeln aus\n\tfor (const [ruleId, ruleFn] of Object.entries(RULES)) {\n\t\tconst ruleIssues = ruleFn(root);\n\t\tissues.push(...ruleIssues);\n\t}\n\n\t// Dedupliziere Issues (gleiche Regel + Selektor)\n\treturn issues.filter((issue, index, self) => index === self.findIndex((i) => i.ruleId === issue.ruleId && i.selectorHint === issue.selectorHint));\n}\n\n/**\n * Formatiert A11Y-Issues für die Ausgabe.\n * @param issues - Array von A11Y-Issues\n * @param locale - Sprache für Fehlermeldungen (\"en\" | \"de\")\n * @returns Formatierter Text\n */\nexport function formatA11yIssues(issues: A11yIssue[], locale: 'en' | 'de' = 'en'): string {\n\tif (issues.length === 0) {\n\t\treturn locale === 'de' ? '✅ Keine Barrierefreiheits-Probleme gefunden.' : '✅ No accessibility issues found.';\n\t}\n\n\tconst lines: string[] = [`⚠️ ${locale === 'de' ? 'Gefundene Barrierefreiheits-Probleme' : 'Found accessibility issues'}: ${issues.length}`];\n\n\tfor (const issue of issues) {\n\t\tconst severityIcon = issue.severity === 'error' ? '🛑' : '⚠️';\n\t\tconst message = locale === 'de' ? issue.message.de : issue.message.en;\n\t\tlines.push(`${severityIcon} **${issue.ruleId}** (${issue.severity}): ${message}`);\n\t\tif (issue.selectorHint) {\n\t\t\tlines.push(` → Element: \\`${issue.selectorHint}\\``);\n\t\t}\n\t\tif (issue.helpUrl) {\n\t\t\tlines.push(` → Help: ${issue.helpUrl}`);\n\t\t}\n\t}\n\n\treturn lines.join('\\n');\n}\n```\n\n---\n\n### 📄 1.4 Anpassung von `src/mcp.ts`\n\n```typescript\n// Import am Anfang hinzufügen\nimport { z } from 'zod';\nimport { validateKolibriHtml, formatA11yIssues } from './a11y/validate.js';\n\n// In der configureServer-Funktion, nach den bestehenden Tools:\nserver.registerTool(\n\t'validate_html',\n\t{\n\t\ttitle: 'Validate KoliBri HTML for Accessibility',\n\t\tdescription:\n\t\t\t'Validates HTML against KoliBri accessibility rules (WCAG 2.1 / EN 301 549). ' +\n\t\t\t'Returns structured issues with severity, messages (EN/DE), and fix suggestions. ' +\n\t\t\t'Use this after generating HTML with `generate_*` tools or when using code from `fetch`.',\n\t\tinputSchema: {\n\t\t\thtml: z.string().describe('The HTML markup to validate. Pass the full markup string (not a file path).'),\n\t\t\tlocale: z.enum(['en', 'de']).optional().default('en'),\n\t\t\tstrict: z.boolean().optional().default(false).describe('If true, throws an error when any issues are found (useful for CI/CD).'),\n\t\t},\n\t},\n\tasync ({ html, locale, strict }) => {\n\t\tlog('tool', 'validate_html called', { htmlLength: html.length });\n\n\t\tconst issues = validateKolibriHtml(html);\n\t\tconst localeText = locale === 'de' ? issues.map((i) => i.message.de) : issues.map((i) => i.message.en);\n\n\t\tif (strict && issues.length > 0) {\n\t\t\tconst errorMessage = `${locale === 'de' ? 'Barrierefreiheits-Validierung fehlgeschlagen' : 'A11Y validation failed'}:\\n${formatA11yIssues(issues, locale)}`;\n\t\t\tlog('error', 'validate_html failed (strict mode)', { issueCount: issues.length });\n\t\t\tthrow new Error(errorMessage);\n\t\t}\n\n\t\tlog('tool', 'validate_html completed', { issueCount: issues.length });\n\n\t\treturn {\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext:\n\t\t\t\t\t\tissues.length === 0\n\t\t\t\t\t\t\t? locale === 'de'\n\t\t\t\t\t\t\t\t? '✅ **Keine Barrierefreiheits-Probleme gefunden.** Dein HTML ist KoliBri-konform!'\n\t\t\t\t\t\t\t\t: '✅ **No accessibility issues found.** Your HTML is KoliBri-compliant!'\n\t\t\t\t\t\t\t: `⚠️ **${issues.length} accessibility issue${issues.length !== 1 ? 's' : ''} found:**\\n\\n${formatA11yIssues(issues, locale)}`,\n\t\t\t\t},\n\t\t\t],\n\t\t\tstructuredContent: {\n\t\t\t\tok: issues.length === 0,\n\t\t\t\tissueCount: issues.length,\n\t\t\t\tissues: issues.map((issue) => ({\n\t\t\t\t\truleId: issue.ruleId,\n\t\t\t\t\tseverity: issue.severity,\n\t\t\t\t\tmessage: issue.message[locale],\n\t\t\t\t\tselectorHint: issue.selectorHint,\n\t\t\t\t\thelpUrl: issue.helpUrl,\n\t\t\t\t})),\n\t\t\t},\n\t\t};\n\t},\n);\n```\n\n---\n\n### 📄 1.5 Anpassung von `package.json`\n\n```json\n{\n\t\"dependencies\": {\n\t\t\"node-html-parser\": \"^7.1.0\"\n\t}\n}\n```\n\n---\n\n## 🎯 Phase 2: Dynamische HTML-Generierung (2–3 Tage)\n\n**Ziel:** Agents können KoliBri-Komponenten dynamisch aus Parametern generieren (nicht nur statische Snippets aus fetch).\n\n### 📁 Dateistruktur\n\n```\npackages/tools/mcp/\n├── src/\n│ ├── components/\n│ │ ├── schemas/ # Zod-Schemas für jede Komponente\n│ │ │ ├── button.ts\n│ │ │ ├── input.ts\n│ │ │ └── index.ts # Re-Exports\n│ │ ├── templates/ # HTML-Template-Generatoren\n│ │ │ ├── button.ts\n│ │ │ └── index.ts\n│ │ └── index.ts # Generator-Fabrik + Tool-Registrierung\n│ └── mcp.ts # + Dynamische Tool-Registrierung\n└── scripts/\n └── generate-component-schemas.mjs # Skript zur Schema-Generierung\n```\n\n---\n\n### 📄 2.1 `src/components/schemas/button.ts`\n\n```typescript\nimport { z } from 'zod';\n\n/**\n * Zod-Schema für <kol-button>-Props.\n * Basierend auf der KoliBri-Dokumentation:\n * @see https://public-ui.github.io/components/button\n */\nexport const KolButtonSchema = z.object({\n\t// Pflicht\n\tlabel: z.string().min(1, { message: 'Button label is required for accessibility.' }).describe('Button text (required for accessibility).'),\n\n\t// Optional\n\tvariant: z.enum(['primary', 'secondary', 'tertiary', 'danger']).optional().default('primary').describe('Visual variant of the button.'),\n\n\tdisabled: z.boolean().optional().default(false).describe('Whether the button is disabled.'),\n\n\ticon: z\n\t\t.object({\n\t\t\tname: z.string().min(1).describe(\"Icon name (e.g., 'save', 'trash', 'arrow-forward').\"),\n\t\t\tposition: z.enum(['left', 'right']).optional().default('left').describe('Position of the icon relative to the label.'),\n\t\t})\n\t\t.optional()\n\t\t.describe('Icon to display inside the button.'),\n\n\ttype: z.enum(['button', 'submit', 'reset']).optional().default('button').describe('Button type attribute.'),\n\n\t// A11Y\n\tariaLabel: z.string().optional().describe('Overrides the default aria-label (use when icon-only).'),\n});\n\nexport type KolButtonInput = z.input<typeof KolButtonSchema>;\nexport type KolButtonOutput = {\n\thtml: string;\n\tvalidation: {\n\t\tok: boolean;\n\t\tissues: Array<{ ruleId: string; severity: string; message: string }>;\n\t};\n};\n```\n\n---\n\n### 📄 2.2 `src/components/schemas/index.ts`\n\n```typescript\nexport * from './button.js';\nexport * from './input.js';\n// Weitere Komponenten hier exportieren\n```\n\n---\n\n### 📄 2.3 `src/components/templates/button.ts`\n\n```typescript\nimport type { KolButtonInput } from '../schemas/button.js';\nimport { validateKolibriHtml } from '../../a11y/validate.js';\n\n/**\n * Generiert HTML für <kol-button> mit KoliBri-Syntax.\n * @param input - Normalisierte Eingabedaten\n * @returns Generiertes HTML + Validierungsergebnis\n */\nexport function generateKolButton(input: KolButtonInput): {\n\thtml: string;\n\tvalidation: { ok: boolean; issues: any[] };\n} {\n\tconst { label, variant = 'primary', disabled = false, icon, type = 'button', ariaLabel } = input;\n\n\t// Icon-Handling\n\tconst iconHtml = icon ? `<kol-icon name=\"${icon.name}\" slot=\"${icon.position === 'right' ? 'after' : 'before'}\"></kol-icon>` : '';\n\n\t// A11Y: Falls Icon vorhanden, aber kein Label → aria-label erzwingen\n\tconst finalAriaLabel = !label && icon && !ariaLabel ? `Icon: ${icon.name}` : ariaLabel;\n\tconst ariaAttrs = finalAriaLabel ? ` aria-label=\"${finalAriaLabel}\"` : '';\n\n\t// Baue das HTML\n\tconst attrs = [variant !== 'primary' ? `variant=\"${variant}\"` : null, disabled ? 'disabled' : null, `type=\"${type}\"`, ariaAttrs].filter(Boolean).join(' ');\n\n\tconst content = icon?.position === 'right' ? `${label}${iconHtml}` : `${iconHtml}${label}`;\n\n\tconst html = `<kol-button${attrs ? ` ${attrs}` : ''}>${content}</kol-button>`;\n\n\t// Validiere das generierte HTML\n\tconst validation = validateKolibriHtml(html);\n\treturn {\n\t\thtml,\n\t\tvalidation: {\n\t\t\tok: validation.length === 0,\n\t\t\tissues: validation.map((i) => ({\n\t\t\t\truleId: i.ruleId,\n\t\t\t\tseverity: i.severity,\n\t\t\t\tmessage: i.message.en,\n\t\t\t})),\n\t\t},\n\t};\n}\n```\n\n---\n\n### 📄 2.4 `src/components/templates/index.ts`\n\n```typescript\nexport * from './button.js';\n// Weitere Templates hier exportieren\n```\n\n---\n\n### 📄 2.5 `src/components/index.ts`\n\n```typescript\nimport { z } from 'zod';\nimport * as ButtonSchemas from './schemas/button.js';\nimport * as ButtonTemplates from './templates/button.js';\nimport type { ToolDef } from '../mcp.js';\n\n// Typ für Tool-Definition (an KoliBri anpassen)\nexport interface ToolDef {\n\tname: string;\n\ttitle?: string;\n\tdescription: string;\n\tinputSchema: z.ZodType;\n\toutputSchema?: z.ZodType;\n\thandler: (args: any) => Promise<any>;\n}\n\n// Mapping von Komponenten-ID zu Schema/Template\nconst COMPONENT_MAP: Record<\n\tstring,\n\t{\n\t\tinputSchema: z.ZodType;\n\t\ttemplate: (input: any) => { html: string; validation: any };\n\t}\n> = {\n\tbutton: {\n\t\tinputSchema: ButtonSchemas.KolButtonSchema,\n\t\ttemplate: ButtonTemplates.generateKolButton,\n\t},\n\t// Weitere Komponenten hier hinzufügen\n};\n\n/**\n * Erzeugt ein Tool für eine KoliBri-Komponente.\n * @param componentId - ID der Komponente (z. B. \"button\")\n * @returns ToolDef\n */\nexport function createGenerateComponentTool(componentId: string): ToolDef {\n\tconst { inputSchema, template } = COMPONENT_MAP[componentId];\n\n\treturn {\n\t\tname: `generate_${componentId}`,\n\t\ttitle: `Generate KoliBri ${componentId}`,\n\t\tdescription: `Generiert HTML für die KoliBri-Komponente \"${componentId}\".`,\n\t\tinputSchema,\n\t\toutputSchema: z.object({\n\t\t\thtml: z.string(),\n\t\t\tvalidation: z.object({\n\t\t\t\tok: z.boolean(),\n\t\t\t\tissues: z.array(\n\t\t\t\t\tz.object({\n\t\t\t\t\t\truleId: z.string(),\n\t\t\t\t\t\tseverity: z.string(),\n\t\t\t\t\t\tmessage: z.string(),\n\t\t\t\t\t}),\n\t\t\t\t),\n\t\t\t}),\n\t\t}),\n\t\thandler: async (args) => template(args),\n\t};\n}\n\n/**\n * Lädt alle verfügbaren Komponenten-IDs.\n * @returns Promise<string[]> - Liste der Komponenten-IDs\n */\nexport async function getAvailableComponents(): Promise<string[]> {\n\t// In Zukunft: Dynamisch aus @public-ui/components laden\n\treturn Object.keys(COMPONENT_MAP);\n}\n```\n\n---\n\n### 📄 2.6 Anpassung von `src/mcp.ts`\n\n```typescript\n// Import am Anfang hinzufügen\nimport { getAvailableComponents, createGenerateComponentTool } from './components/index.js';\n\n// In der configureServer-Funktion, nach den bestehenden Tools:\nconst availableComponents = await getAvailableComponents();\nfor (const componentId of availableComponents) {\n\tconst tool = createGenerateComponentTool(componentId);\n\tserver.registerTool(\n\t\ttool.name,\n\t\t{\n\t\t\ttitle: tool.title,\n\t\t\tdescription: tool.description,\n\t\t\tinputSchema: tool.inputSchema,\n\t\t},\n\t\ttool.handler,\n\t);\n}\n```\n\n---\n\n### 📄 2.7 `scripts/generate-component-schemas.mjs`\n\n```javascript\n#!/usr/bin/env node\n/**\n * Generiert Zod-Schemas für alle KoliBri-Komponenten aus @public-ui/components.\n * Wird vor dem Build ausgeführt (siehe package.json).\n */\n\nimport { writeFileSync, mkdirSync, existsSync } from 'node:fs';\nimport { dirname, join } from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nconst __dirname = dirname(fileURLToPath(import.meta.url));\nconst SCHEMAS_DIR = join(__dirname, '../src/components/schemas');\n\n// Stelle sicher, dass das Verzeichnis existiert\nif (!existsSync(SCHEMAS_DIR)) {\n\tmkdirSync(SCHEMAS_DIR, { recursive: true });\n}\n\n// Komponenten-Metadaten (vereinfacht – in Realität aus @public-ui/components laden)\nconst COMPONENTS = [\n\t{\n\t\tid: 'button',\n\t\tprops: [\n\t\t\t{ name: 'label', type: 'string', required: true, description: 'Button text' },\n\t\t\t{ name: 'variant', type: 'enum', values: ['primary', 'secondary', 'tertiary', 'danger'], description: 'Visual variant' },\n\t\t\t{ name: 'disabled', type: 'boolean', description: 'Disabled state' },\n\t\t\t{\n\t\t\t\tname: 'icon',\n\t\t\t\ttype: 'object',\n\t\t\t\tproperties: [\n\t\t\t\t\t{ name: 'name', type: 'string', required: true },\n\t\t\t\t\t{ name: 'position', type: 'enum', values: ['left', 'right'] },\n\t\t\t\t],\n\t\t\t\tdescription: 'Icon configuration',\n\t\t\t},\n\t\t\t{ name: 'type', type: 'enum', values: ['button', 'submit', 'reset'], description: 'Button type' },\n\t\t\t{ name: 'ariaLabel', type: 'string', description: 'ARIA label override' },\n\t\t],\n\t},\n\t// Weitere Komponenten hier hinzufügen\n];\n\n/**\n * Generiert ein Zod-Schema für eine Komponente.\n */\nfunction generateComponentSchema(component) {\n\tconst imports = ['import { z } from \"zod\";'];\n\tconst schemaLines = [];\n\tconst exports = [];\n\n\t// Schema-Definition\n\tschemaLines.push(`export const ${pascalCase(component.id)}Schema = z.object({`);\n\tfor (const prop of component.props) {\n\t\tconst line = generatePropSchema(prop, 2);\n\t\tschemaLines.push(line);\n\t}\n\tschemaLines.push('});');\n\n\t// Typ-Exports\n\texports.push(`export type ${pascalCase(component.id)}Input = z.input<typeof ${pascalCase(component.id)}Schema>;`);\n\n\treturn [...imports, '', ...schemaLines, '', ...exports].join('\\n');\n}\n\n/**\n * Generiert eine Zod-Prop-Definition.\n */\nfunction generatePropSchema(prop, indent = 0) {\n\tconst prefix = ' '.repeat(indent);\n\tlet schema;\n\n\tif (prop.required) {\n\t\tschema = generateTypeSchema(prop.type, prop);\n\t} else {\n\t\tschema = `${generateTypeSchema(prop.type, prop)}.optional()`;\n\t\tif (prop.type !== 'boolean' && !prop.default) {\n\t\t\t// Kein Default für nicht-required optionals\n\t\t} else if (prop.default !== undefined) {\n\t\t\tschema += `.default(${JSON.stringify(prop.default)})`;\n\t\t}\n\t}\n\n\tif (prop.description) {\n\t\tschema += `.describe(${JSON.stringify(prop.description)})`;\n\t}\n\n\treturn `${prefix}${prop.name}: ${schema},`;\n}\n\n/**\n * Generiert ein Zod-Typ-Schema.\n */\nfunction generateTypeSchema(type, prop) {\n\tswitch (type) {\n\t\tcase 'string':\n\t\t\treturn 'z.string()';\n\t\tcase 'boolean':\n\t\t\treturn 'z.boolean()';\n\t\tcase 'number':\n\t\t\treturn 'z.number()';\n\t\tcase 'enum':\n\t\t\treturn `z.enum([${prop.values.map((v) => `\"${v}\"`).join(', ')}])`;\n\t\tcase 'object':\n\t\t\tconst nestedLines = ['z.object({'];\n\t\t\tfor (const nestedProp of prop.properties) {\n\t\t\t\tnestedLines.push(generatePropSchema(nestedProp, 4));\n\t\t\t}\n\t\t\tnestedLines.push('})');\n\t\t\treturn nestedLines.join('\\n');\n\t\tdefault:\n\t\t\treturn 'z.any()';\n\t}\n}\n\n/**\n * Konvertiert zu PascalCase.\n */\nfunction pascalCase(str) {\n\treturn str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n// Hauptfunktion\nfunction main() {\n\tfor (const component of COMPONENTS) {\n\t\tconst schemaCode = generateComponentSchema(component);\n\t\tconst outputPath = join(SCHEMAS_DIR, `${component.id}.ts`);\n\t\twriteFileSync(outputPath, schemaCode + '\\n');\n\t\tconsole.log(`✅ Generated schema for ${component.id}`);\n\t}\n}\n\nmain();\n```\n\n---\n\n## 🎯 Phase 3: Composition-System (1–2 Tage)\n\n**Ziel:** Agents können komplexe Layouts (z. B. Grid + Card + Button) in einem Aufruf generieren.\n\n### 📁 Dateistruktur\n\n```\npackages/tools/mcp/\n├── src/\n│ └── composition/\n│ ├── types.ts # Block-Typdefinitionen\n│ ├── render.ts # Rendering-Logik\n│ └── cheat-sheet.ts # Hilfetexte für Agents\n```\n\n---\n\n### 📄 3.1 `src/composition/types.ts`\n\n```typescript\nimport { z } from 'zod';\nimport { KolButtonSchema } from '../components/schemas/button.js';\n\n// --- Basis-Blöcke ---\nexport const TextBlockSchema = z.object({\n\tkind: z.literal('text'),\n\ttext: z.string().describe('Plain text content.'),\n});\n\nexport const HtmlBlockSchema = z.object({\n\tkind: z.literal('html'),\n\thtml: z.string().describe('Raw HTML content.'),\n});\n\n// --- KoliBri-Komponenten-Blöcke ---\nexport const KolButtonBlockSchema = z.object({\n\tkind: z.literal('button'),\n\tbutton: KolButtonSchema.describe('KoliBri button configuration.'),\n});\n\n// --- Layout-Blöcke ---\nexport const KolCardBlockSchema = z.object({\n\tkind: z.literal('card'),\n\tcard: z.object({\n\t\theading: z.string().optional().describe('Card heading.'),\n\t\tcontent: z\n\t\t\t.array(z.lazy(() => ContentBlockSchema))\n\t\t\t.optional()\n\t\t\t.describe('Card content blocks.'),\n\t\tfooter: z\n\t\t\t.array(z.lazy(() => ContentBlockSchema))\n\t\t\t.optional()\n\t\t\t.describe('Card footer blocks.'),\n\t}),\n});\n\nexport const KolGridBlockSchema = z.object({\n\tkind: z.literal('grid'),\n\tgrid: z.object({\n\t\tcolumns: z.number().int().min(1).max(12).default(3).describe('Number of columns (1-12).'),\n\t\tgap: z.enum(['none', 'small', 'medium', 'large']).optional().default('medium'),\n\t\titems: z.array(z.lazy(() => ContentBlockSchema)).describe('Grid items (one per cell).'),\n\t}),\n});\n\n// --- Rekursives Schema für alle Content-Blöcke ---\nexport const ContentBlockSchema: z.ZodType = z.lazy(() =>\n\tz.discriminatedUnion('kind', [\n\t\tTextBlockSchema,\n\t\tHtmlBlockSchema,\n\t\tKolButtonBlockSchema,\n\t\tKolCardBlockSchema,\n\t\tKolGridBlockSchema,\n\t\t// Weitere Blöcke hier hinzufügen\n\t]),\n);\n\n// --- Root-Composition-Schema ---\nexport const CompositionInputSchema = z.object({\n\tblocks: z.array(ContentBlockSchema).min(1, 'At least one block is required.'),\n\tlocale: z.enum(['en', 'de']).optional().default('en'),\n});\n\nexport type ContentBlock = z.infer<typeof ContentBlockSchema>;\nexport type CompositionInput = z.infer<typeof CompositionInputSchema>;\n```\n\n---\n\n### 📄 3.2 `src/composition/render.ts`\n\n```typescript\nimport { parse } from 'node-html-parser';\nimport type { ContentBlock, CompositionInput } from './types.js';\nimport { generateKolButton } from '../components/templates/button.js';\nimport { validateKolibriHtml } from '../a11y/validate.js';\n\n/**\n * Kontext für das rekursive Rendering.\n */\ninterface RenderContext {\n\tlocale: string;\n\tdepth: number;\n\tmaxDepth: number;\n}\n\n/**\n * Rendert einen einzelnen Content-Block rekursiv.\n */\nfunction renderBlock(block: ContentBlock, context: RenderContext): { html: string; warnings: string[] } {\n\t// Tiefenbegrenzung zur Vermeidung von Stack Overflow\n\tif (context.depth > context.maxDepth) {\n\t\treturn {\n\t\t\thtml: `<!-- MAX DEPTH (${context.maxDepth}) REACHED -->`,\n\t\t\twarnings: [`Block at depth ${context.depth} exceeded max depth of ${context.maxDepth}.`],\n\t\t};\n\t}\n\n\tconst nextContext: RenderContext = {\n\t\t...context,\n\t\tdepth: context.depth + 1,\n\t};\n\n\tswitch (block.kind) {\n\t\tcase 'text':\n\t\t\treturn { html: block.text, warnings: [] };\n\n\t\tcase 'html':\n\t\t\treturn { html: block.html, warnings: [] };\n\n\t\tcase 'button': {\n\t\t\tconst { html, validation } = generateKolButton(block.button);\n\t\t\treturn {\n\t\t\t\thtml,\n\t\t\t\twarnings: validation.issues.map((i: any) => `Button validation: ${i.message}`),\n\t\t\t};\n\t\t}\n\n\t\tcase 'card': {\n\t\t\tconst headingHtml = block.card.heading ? `<h2>${block.card.heading}</h2>` : '';\n\t\t\tconst contentResults = block.card.content?.map((b) => renderBlock(b, nextContext)) ?? [];\n\t\t\tconst contentHtml = contentResults.map((r) => r.html).join('');\n\t\t\tconst contentWarnings = contentResults.flatMap((r) => r.warnings);\n\n\t\t\tconst footerResults = block.card.footer?.map((b) => renderBlock(b, nextContext)) ?? [];\n\t\t\tconst footerHtml = footerResults.length > 0 ? `<div class=\"footer\">${footerResults.map((r) => r.html).join('')}</div>` : '';\n\t\t\tconst footerWarnings = footerResults.flatMap((r) => r.warnings);\n\n\t\t\treturn {\n\t\t\t\thtml: `\n<kol-card>\n ${headingHtml}\n <div class=\"content\">${contentHtml}</div>\n ${footerHtml}\n</kol-card>\n`.trim(),\n\t\t\t\twarnings: [...contentWarnings, ...footerWarnings],\n\t\t\t};\n\t\t}\n\n\t\tcase 'grid': {\n\t\t\tconst items = block.grid.items\n\t\t\t\t.map((item) => {\n\t\t\t\t\tconst result = renderBlock(item, nextContext);\n\t\t\t\t\treturn `<div class=\"cell\">${result.html}</div>`;\n\t\t\t\t})\n\t\t\t\t.join('');\n\t\t\treturn {\n\t\t\t\thtml: `\n<kol-grid columns=\"${block.grid.columns}\" gap=\"${block.grid.gap}\">\n ${items}\n</kol-grid>\n`.trim(),\n\t\t\t\twarnings: block.grid.items.flatMap((item) => renderBlock(item, nextContext).warnings),\n\t\t\t};\n\t\t}\n\n\t\tdefault:\n\t\t\treturn {\n\t\t\t\thtml: `<!-- Unknown block kind: ${(block as any).kind} -->`,\n\t\t\t\twarnings: [`Unknown block kind: ${(block as any).kind}`],\n\t\t\t};\n\t}\n}\n\n/**\n * Rendert eine Composition aus Content-Blöcken.\n */\nexport function renderComposition(input: CompositionInput): { html: string; warnings: string[] } {\n\tconst context: RenderContext = {\n\t\tlocale: input.locale,\n\t\tdepth: 0,\n\t\tmaxDepth: 20, // Verhindert Stack Overflow\n\t};\n\n\tconst results = input.blocks.map((block) => renderBlock(block, context));\n\treturn {\n\t\thtml: results.map((r) => r.html).join('\\n\\n'),\n\t\twarnings: results.flatMap((r) => r.warnings),\n\t};\n}\n```\n\n---\n\n### 📄 3.3 `src/composition/cheat-sheet.ts`\n\n```typescript\n/**\n * Cheat-Sheet für das Composition-System.\n * Wird in Fehlermeldungen und Tool-Beschreibungen verwendet.\n */\nexport const COMPOSITION_CHEAT_SHEET = `\n## 📚 KoliBri Composition – Valid Block Kinds\n\n### 🟢 Basic Blocks\n| Kind | Description | Example |\n|------|-------------|---------|\n| **text** | Plain text content | \\`\\`\\`json { \"kind\": \"text\", \"text\": \"Hello World\" } \\`\\`\\` |\n| **html** | Raw HTML | \\`\\`\\`json { \"kind\": \"html\", \"html\": \"<p>Custom HTML</p>\" } \\`\\`\\` |\n\n### 🟣 Interactive Components\n| Kind | Description | Example |\n|------|-------------|---------|\n| **button** | KoliBri button | \\`\\`\\`json { \"kind\": \"button\", \"button\": { \"label\": \"Click\", \"variant\": \"primary\" } } \\`\\`\\` |\n\n### 🟨 Layout Components\n| Kind | Description | Example |\n|------|-------------|---------|\n| **card** | KoliBri card with heading, content, footer | \\`\\`\\`json { \"kind\": \"card\", \"card\": { \"heading\": \"Title\", \"content\": [/* blocks */] } } \\`\\`\\` |\n| **grid** | Responsive grid (1-12 columns) | \\`\\`\\`json { \"kind\": \"grid\", \"grid\": { \"columns\": 3, \"items\": [/* blocks */] } } \\`\\`\\` |\n\n## 🧩 Nesting Rules\n✅ **All blocks can be nested!** For example:\n\\`\\`\\`json\n{\n \"blocks\": [\n {\n \"kind\": \"card\",\n \"card\": {\n \"heading\": \"User Actions\",\n \"content\": [\n { \"kind\": \"text\", \"text\": \"Choose an action:\" },\n { \"kind\": \"button\", \"button\": { \"label\": \"Save\" } }\n ],\n \"footer\": [\n { \"kind\": \"button\", \"button\": { \"label\": \"Cancel\", \"variant\": \"secondary\" } }\n ]\n }\n }\n ]\n}\n\\`\\`\\`\n\n## ⚠️ Common Pitfalls\n- ❌ **Missing kind**: Every block MUST have a \\`kind\\` property.\n- ❌ **Empty blocks array**: At least one block is required.\n- ❌ **Circular references**: Blocks cannot reference themselves (max depth: 20).\n- ❌ **Invalid grid columns**: Must be between 1 and 12.\n`.trim();\n```\n\n---\n\n### 📄 3.4 Anpassung von `src/mcp.ts`\n\n```typescript\n// Import am Anfang hinzufügen\nimport { CompositionInputSchema, COMPOSITION_CHEAT_SHEET } from './composition/types.js';\nimport { renderComposition } from './composition/render.js';\nimport { validateKolibriHtml } from './a11y/validate.js';\n\n// Neues Tool in configureServer()\nserver.registerTool(\n\t'render_composition',\n\t{\n\t\ttitle: 'Render KoliBri Composition',\n\t\tdescription:\n\t\t\t'Renders a recursive composition of KoliBri blocks (text, html, button, card, grid, etc.). ' +\n\t\t\t'Use this for complex layouts (e.g., forms, dashboards, pages).\\n\\n' +\n\t\t\tCOMPOSITION_CHEAT_SHEET,\n\t\tinputSchema: CompositionInputSchema,\n\t},\n\tasync ({ blocks, locale }) => {\n\t\tlog('tool', 'render_composition called', { blockCount: blocks.length, locale });\n\n\t\tconst rendered = renderComposition({ blocks, locale });\n\t\tconst validation = validateKolibriHtml(rendered.html);\n\n\t\tlog('tool', 'render_composition completed', {\n\t\t\thtmlLength: rendered.html.length,\n\t\t\twarningCount: rendered.warnings.length,\n\t\t\tissueCount: validation.length,\n\t\t});\n\n\t\treturn {\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: rendered.html,\n\t\t\t\t},\n\t\t\t],\n\t\t\tstructuredContent: {\n\t\t\t\thtml: rendered.html,\n\t\t\t\twarnings: rendered.warnings,\n\t\t\t\tvalidation: {\n\t\t\t\t\tok: validation.length === 0,\n\t\t\t\t\tissues: validation.map((issue) => ({\n\t\t\t\t\t\truleId: issue.ruleId,\n\t\t\t\t\t\tseverity: issue.severity,\n\t\t\t\t\t\tmessage: issue.message[locale],\n\t\t\t\t\t\tselectorHint: issue.selectorHint,\n\t\t\t\t\t})),\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t},\n);\n```\n\n---\n\n## 🎯 Phase 4: Template-Repo-Integration (2–3 Tage)\n\n**Ziel:** Indexierung der Markdown-Dateien und src-Ordner aus den öffentlichen Template-Repos, damit Agents auf Vorlagen für React, Themen und generische Templates zugreifen können.\n\n**Zu indexierende Repositories:**\n\n### 🎯 Zu indexierende Repositories\n\n| Repository | Beschreibung | Zu indexierende Pfade |\n| ------------------------------------------------------------------------ | ---------------------------- | --------------------- |\n| [public-ui/templates](https://github.com/public-ui/templates/) | Generische KoliBri-Templates | `**/*.md`, `src/**/*` |\n| [public-ui/template-react](https://github.com/public-ui/template-react/) | React-spezifische Templates | `**/*.md`, `src/**/*` |\n| [public-ui/template-theme](https://github.com/public-ui/template-theme/) | Thema-Vorlagen | `**/*.md`, `src/**/*` |\n\n### 📁 Dateistruktur\n\n```\npackages/tools/mcp/\n├── src/\n│ ├── templates/\n│ │ ├── indexer/\n│ │ │ ├── config.ts # Repo-Konfigurationen\n│ │ │ ├── fetcher.ts # Git-Repo-Fetcher\n│ │ │ ├── parser.ts # Markdown/Code-Parser\n│ │ │ └── index-builder.ts # Index-Erstellung\n│ │ └── index.ts # Haupt-Index\n│ └── mcp.ts # + Tool-Anpassungen\n├── data/\n│ └── templates/ # Gecachte Template-Daten\n│ ├── public-ui-templates/\n│ ├── public-ui-template-react/\n│ └── public-ui-template-theme/\n└── package.json # + Neue Abhängigkeiten\n```\n\n---\n\n### 📄 4.1 `src/templates/indexer/config.ts`\n\n```typescript\n/**\n * Konfiguration der zu indexierenden Template-Repos\n */\nexport interface TemplateRepoConfig {\n\tid: string; // Eindeutige ID für das Repo\n\tname: string; // Anzeigename\n\towner: string; // GitHub Owner (z.B. \"public-ui\")\n\trepo: string; // Repo-Name (z.B. \"templates\")\n\tbranch: string; // Standard-Branch\n\tdescription: string; // Beschreibung für Agents\n\tincludePatterns: string[]; // Glob-Patterns für zu indexierende Dateien\n\texcludePatterns: string[]; // Glob-Patterns für auszuschließende Dateien\n\ttype: 'generic' | 'react' | 'theme'; // Template-Typ für Filterung\n\ttags: string[]; // Tags für Kategorisierung\n}\n\n/**\n * Liste aller zu indexierenden Template-Repos\n */\nexport const TEMPLATE_REPOS: TemplateRepoConfig[] = [\n\t{\n\t\tid: 'public-ui-templates',\n\t\tname: 'KoliBri Generic Templates',\n\t\towner: 'public-ui',\n\t\trepo: 'templates',\n\t\tbranch: 'main',\n\t\tdescription: 'Generische KoliBri-Templates und Vorlagen für verschiedene Use Cases',\n\t\tincludePatterns: ['**/*.md', 'src/**/*'],\n\t\texcludePatterns: ['**/node_modules/**', '**/dist/**', '**/.git/**', '*.lock'],\n\t\ttype: 'generic',\n\t\ttags: ['template', 'generic', 'kolibri', 'starter'],\n\t},\n\t{\n\t\tid: 'public-ui-template-react',\n\t\tname: 'KoliBri React Templates',\n\t\towner: 'public-ui',\n\t\trepo: 'template-react',\n\t\tbranch: 'main',\n\t\tdescription: 'React-spezifische Templates mit KoliBri-Integration',\n\t\tincludePatterns: ['**/*.md', 'src/**/*', '*.tsx', '*.ts'],\n\t\texcludePatterns: ['**/node_modules/**', '**/dist/**', '**/.git/**', '*.lock'],\n\t\ttype: 'react',\n\t\ttags: ['template', 'react', 'typescript', 'kolibri'],\n\t},\n\t{\n\t\tid: 'public-ui-template-theme',\n\t\tname: 'KoliBri Theme Templates',\n\t\towner: 'public-ui',\n\t\trepo: 'template-theme',\n\t\tbranch: 'main',\n\t\tdescription: 'Thema-Vorlagen und Design-System-Konfigurationen',\n\t\tincludePatterns: ['**/*.md', 'src/**/*', '*.css', '*.scss', '*.json'],\n\t\texcludePatterns: ['**/node_modules/**', '**/dist/**', '**/.git/**', '*.lock'],\n\t\ttype: 'theme',\n\t\ttags: ['template', 'theme', 'design', 'css', 'kolibri'],\n\t},\n];\n\n/**\n * Typ für indexierte Template-Ressourcen\n */\nexport interface IndexedTemplateResource {\n\tid: string; // Eindeutige ID (z.B. \"public-ui-templates/src/button\")\n\trepoId: string; // ID des Ursprungs-Repos\n\tpath: string; // Relativer Pfad im Repo\n\ttype: 'markdown' | 'code' | 'config'; // Ressourcen-Typ\n\tcontent: string; // Roh-Inhalt\n\tmetadata: {\n\t\tname: string; // Name (aus Dateiname oder Frontmatter)\n\t\tdescription?: string; // Beschreibung (aus Frontmatter oder generiert)\n\t\ttags: string[]; // Tags (aus Repo + Frontmatter)\n\t\ttemplateType: string; // \"generic\" | \"react\" | \"theme\"\n\t\tlanguage?: string; // Sprache für Code-Dateien\n\t\tdependencies?: string[]; // Abhängigkeiten (aus package.json oder Frontmatter)\n\t\texample?: string; // Beispiel-Code (falls vorhanden)\n\t};\n\tstats: {\n\t\tsize: number; // Dateigröße in Bytes\n\t\tlines: number; // Zeilenanzahl\n\t\tlastModified: string; // Letztes Ändern (ISO-Format)\n\t};\n}\n```\n\n---\n\n### 📄 4.2 `src/templates/indexer/fetcher.ts`\n\n```typescript\nimport simpleGit from 'simple-git';\nimport { promises as fs } from 'fs';\nimport { join, dirname } from 'path';\nimport { TEMPLATE_REPOS, type TemplateRepoConfig, type IndexedTemplateResource } from './config.js';\nimport { glob } from 'glob';\n\n/**\n * Cache-Verzeichnis für geklonte Repos\n */\nconst CACHE_DIR = join(process.cwd(), 'data', 'templates');\n\n/**\n * Klont oder aktualisiert ein Git-Repository\n */\nasync function cloneOrUpdateRepo(repoConfig: TemplateRepoConfig): Promise<string> {\n\tconst repoPath = join(CACHE_DIR, repoConfig.id);\n\tconst git = simpleGit();\n\n\ttry {\n\t\t// Prüfe, ob Repo bereits existiert\n\t\tif (await fs.access(repoPath).catch(() => false)) {\n\t\t\t// Repo existiert → Pull latest changes\n\t\t\tawait git.cwd(repoPath).pull();\n\t\t\tconsole.log(`✅ Updated ${repoConfig.id}`);\n\t\t} else {\n\t\t\t// Repo klonen\n\t\t\tawait git.clone(`https://github.com/${repoConfig.owner}/${repoConfig.repo}.git`, repoPath, {\n\t\t\t\tbranch: repoConfig.branch,\n\t\t\t});\n\t\t\tconsole.log(`✅ Cloned ${repoConfig.id}`);\n\t\t}\n\t\treturn repoPath;\n\t} catch (error) {\n\t\tconsole.error(`❌ Error cloning/updating ${repoConfig.id}:`, error);\n\t\tthrow error;\n\t}\n}\n\n/**\n * Findet alle Dateien in einem Repo, die den Include-Patterns entsprechen\n */\nasync function findFilesInRepo(repoPath: string, repoConfig: TemplateRepoConfig): Promise<string[]> {\n\tconst allFiles: string[] = [];\n\n\tfor (const pattern of repoConfig.includePatterns) {\n\t\tconst files = await glob(pattern, {\n\t\t\tcwd: repoPath,\n\t\t\tignore: repoConfig.excludePatterns,\n\t\t\tnodir: true,\n\t\t});\n\t\tallFiles.push(...files);\n\t}\n\n\treturn [...new Set(allFiles)]; // Deduplizieren\n}\n\n/**\n * Bestimmt den Ressourcen-Typ basierend auf der Dateiendung\n */\nfunction getResourceType(filePath: string): 'markdown' | 'code' | 'config' {\n\tif (filePath.endsWith('.md') || filePath.endsWith('.markdown')) {\n\t\treturn 'markdown';\n\t}\n\tif (filePath.endsWith('.json') || filePath.endsWith('.yaml') || filePath.endsWith('.yml')) {\n\t\treturn 'config';\n\t}\n\treturn 'code';\n}\n\n/**\n * Bestimmt die Sprache für Code-Dateien\n */\nfunction getLanguage(filePath: string): string {\n\tconst extension = filePath.split('.').pop()?.toLowerCase();\n\tconst languageMap: Record<string, string> = {\n\t\tts: 'typescript',\n\t\ttsx: 'typescript',\n\t\tjs: 'javascript',\n\t\tjsx: 'javascript',\n\t\tcss: 'css',\n\t\tscss: 'scss',\n\t\thtml: 'html',\n\t\tjson: 'json',\n\t\tyaml: 'yaml',\n\t\tyml: 'yaml',\n\t};\n\treturn languageMap[extension || ''] || extension || 'unknown';\n}\n\n/**\n * Extrahiert Metadaten aus Frontmatter (für Markdown-Dateien)\n */\nfunction extractFrontmatter(content: string): Record<string, any> {\n\tconst frontmatterRegex = /^---[\\s\\S]*?---/;\n\tconst match = content.match(frontmatterRegex);\n\n\tif (!match) return {};\n\n\ttry {\n\t\tconst frontmatter = match[0].replace(/^---|---$/g, '').trim();\n\t\t// Einfaches YAML-Parsing (für komplexere Fälle: js-yaml verwenden)\n\t\tconst metadata: Record<string, any> = {};\n\t\tfrontmatter.split('\\n').forEach((line) => {\n\t\t\tconst [key, value] = line.split(':').map((s) => s.trim());\n\t\t\tif (key && value) {\n\t\t\t\tmetadata[key] = value.replace(/^['\"\"]|['\"\"]$/g, '');\n\t\t\t}\n\t\t});\n\t\treturn metadata;\n\t} catch {\n\t\treturn {};\n\t}\n}\n\n/**\n * Lädt und indexiert eine einzelne Datei\n */\nasync function indexFile(repoPath: string, filePath: string, repoConfig: TemplateRepoConfig): Promise<IndexedTemplateResource> {\n\tconst absolutePath = join(repoPath, filePath);\n\tconst content = await fs.readFile(absolutePath, 'utf-8');\n\tconst stats = await fs.stat(absolutePath);\n\n\t// Metadaten extrahieren\n\tconst frontmatter = getResourceType(filePath) === 'markdown' ? extractFrontmatter(content) : {};\n\n\t// Zeilenanzahl berechnen\n\tconst lines = content.split('\\n').length;\n\n\treturn {\n\t\tid: `${repoConfig.id}:${filePath.replace(/[/\\\\]/g, ':')}`,\n\t\trepoId: repoConfig.id,\n\t\tpath: filePath,\n\t\ttype: getResourceType(filePath),\n\t\tcontent,\n\t\tmetadata: {\n\t\t\tname: frontmatter.title || filePath.split('/').pop() || '',\n\t\t\tdescription: frontmatter.description,\n\t\t\ttags: [...(repoConfig.tags || []), ...(frontmatter.tags || [])].filter((t: string) => t),\n\t\t\ttemplateType: repoConfig.type,\n\t\t\tlanguage: getResourceType(filePath) === 'code' ? getLanguage(filePath) : undefined,\n\t\t},\n\t\tstats: {\n\t\t\tsize: stats.size,\n\t\t\tlines,\n\t\t\tlastModified: stats.mtime.toISOString(),\n\t\t},\n\t};\n}\n\n/**\n * Indexiert ein komplettes Template-Repo\n */\nexport async function indexTemplateRepo(repoConfig: TemplateRepoConfig): Promise<IndexedTemplateResource[]> {\n\tconsole.log(`📁 Indexing ${repoConfig.id}...`);\n\n\tconst repoPath = await cloneOrUpdateRepo(repoConfig);\n\tconst files = await findFilesInRepo(repoPath, repoConfig);\n\n\tconsole.log(` Found ${files.length} files to index`);\n\n\tconst resources: IndexedTemplateResource[] = [];\n\tfor (const file of files) {\n\t\ttry {\n\t\t\tconst resource = await indexFile(repoPath, file, repoConfig);\n\t\t\tresources.push(resource);\n\t\t} catch (error) {\n\t\t\tconsole.warn(` ⚠️ Could not index ${file}:`, error);\n\t\t}\n\t}\n\n\tconsole.log(`✅ Indexed ${resources.length} resources from ${repoConfig.id}`);\n\treturn resources;\n}\n\n/**\n * Indexiert alle konfigurierten Template-Repos\n */\nexport async function indexAllTemplateRepos(): Promise<IndexedTemplateResource[]> {\n\tconst allResources: IndexedTemplateResource[] = [];\n\n\tfor (const repoConfig of TEMPLATE_REPOS) {\n\t\ttry {\n\t\t\tconst resources = await indexTemplateRepo(repoConfig);\n\t\t\tallResources.push(...resources);\n\t\t} catch (error) {\n\t\t\tconsole.error(`❌ Failed to index ${repoConfig.id}:`, error);\n\t\t}\n\t}\n\n\treturn allResources;\n}\n\n/**\n * Aktualisiert den Template-Index (wird periodisch aufgerufen)\n */\nexport async function updateTemplateIndex(): Promise<void> {\n\tconsole.log('🔄 Updating template index...');\n\tconst resources = await indexAllTemplateRepos();\n\n\t// Speichern in JSON-Datei für schnellen Zugriff\n\tconst indexPath = join(CACHE_DIR, 'template-index.json');\n\tawait fs.writeFile(indexPath, JSON.stringify(resources, null, 2));\n\n\tconsole.log(`✅ Template index updated with ${resources.length} resources`);\n}\n```\n\n---\n\n### 📄 4.3 `src/templates/indexer/parser.ts`\n\n````typescript\nimport type { IndexedTemplateResource } from './config.js';\n\n/**\n * Parsed und extrahiert nützliche Informationen aus Template-Ressourcen\n */\n\n/**\n * Extrahiere Code-Blöcke aus Markdown\n */\nexport function extractCodeBlocksFromMarkdown(markdown: string): Array<{\n\tlanguage: string;\n\tcode: string;\n\ttitle?: string;\n}> {\n\tconst codeBlockRegex = /```(\\w*)\\s*([\\s\\S]*?)```/g;\n\tconst blocks: Array<{ language: string; code: string; title?: string }> = [];\n\n\tlet match;\n\twhile ((match = codeBlockRegex.exec(markdown)) !== null) {\n\t\tconst language = match[1] || '';\n\t\tconst code = match[2].trim();\n\n\t\t// Titel extrahieren (z.B. // title: My Component)\n\t\tconst titleMatch = code.match(/^\\/\\/\\s*title:\\s*(.+)$/m);\n\t\tconst title = titleMatch ? titleMatch[1].trim() : undefined;\n\n\t\tblocks.push({ language, code, title });\n\t}\n\n\treturn blocks;\n}\n\n/**\n * Extrahiere Abhängigkeiten aus package.json-Inhalten\n */\nexport function extractDependencies(content: string): string[] {\n\ttry {\n\t\tconst packageJson = JSON.parse(content);\n\t\tconst dependencies: string[] = [];\n\n\t\tif (packageJson.dependencies) {\n\t\t\tdependencies.push(...Object.keys(packageJson.dependencies));\n\t\t}\n\t\tif (packageJson.devDependencies) {\n\t\t\tdependencies.push(...Object.keys(packageJson.devDependencies));\n\t\t}\n\t\tif (packageJson.peerDependencies) {\n\t\t\tdependencies.push(...Object.keys(packageJson.peerDependencies));\n\t\t}\n\n\t\treturn [...new Set(dependencies)].sort();\n\t} catch {\n\t\treturn [];\n\t}\n}\n\n/**\n * Extrahiere KoliBri-spezifische Importe aus Code\n */\nexport function extractKolibriImports(code: string): string[] {\n\tconst importRegex = /from\\s+['\"](@public-ui\\/[^'\"]+|kolibri[^'\"]+)['\"]/g;\n\tconst imports: Set<string> = new Set();\n\n\tlet match;\n\twhile ((match = importRegex.exec(code)) !== null) {\n\t\timports.add(match[1]);\n\t}\n\n\treturn Array.from(imports);\n}\n\n/**\n * Erzeuge eine Vorschau für eine Ressource\n */\nexport function generatePreview(resource: IndexedTemplateResource, maxLines: number = 10): string {\n\tconst lines = resource.content.split('\\n');\n\tconst previewLines = lines.slice(0, maxLines);\n\n\tif (lines.length > maxLines) {\n\t\tpreviewLines.push(`... (${lines.length - maxLines} more lines)`);\n\t}\n\n\treturn previewLines.join('\\n');\n}\n\n/**\n * Berechne einen Similarity-Score für Suchanfragen\n */\nexport function calculateSimilarityScore(resource: IndexedTemplateResource, query: string): number {\n\tlet score = 0;\n\n\t// Titel-Übereinstimmung\n\tif (resource.metadata.name.toLowerCase().includes(query.toLowerCase())) {\n\t\tscore += 100;\n\t}\n\n\t// Beschreibung-Übereinstimmung\n\tif (resource.metadata.description?.toLowerCase().includes(query.toLowerCase())) {\n\t\tscore += 50;\n\t}\n\n\t// Tag-Übereinstimmung\n\tconst queryLower = query.toLowerCase();\n\tfor (const tag of resource.metadata.tags) {\n\t\tif (tag.toLowerCase().includes(queryLower)) {\n\t\t\tscore += 30;\n\t\t}\n\t}\n\n\t// Inhalt-Übereinstimmung (gewichtet nach Position)\n\tconst contentLower = resource.content.toLowerCase();\n\tconst firstMatchIndex = contentLower.indexOf(queryLower);\n\tif (firstMatchIndex !== -1) {\n\t\t// Je früher der Match, desto höher der Score\n\t\tconst positionScore = Math.max(0, 100 - firstMatchIndex / 100);\n\t\tscore += positionScore;\n\t}\n\n\treturn score;\n}\n````\n\n---\n\n### 📄 4.4 `src/templates/index.ts`\n\n```typescript\nimport { TEMPLATE_REPOS, type IndexedTemplateResource } from './indexer/config.js';\nimport { indexAllTemplateRepos, updateTemplateIndex } from './indexer/fetcher.js';\nimport { calculateSimilarityScore, extractCodeBlocksFromMarkdown } from './indexer/parser.js';\n\n/**\n * Geladener Template-Index (wird beim Start geladen)\n */\nlet templateIndex: IndexedTemplateResource[] = [];\n\n/**\n * Lädt den Template-Index aus dem Cache\n */\nasync function loadTemplateIndex(): Promise<IndexedTemplateResource[]> {\n\t// TODO: Implementieren\n\treturn [];\n}\n\n/**\n * Initialisiert den Template-Index (wird beim Server-Start aufgerufen)\n */\nexport async function initializeTemplateIndex(): Promise<void> {\n\tconsole.log('📚 Initializing template index...');\n\n\ttry {\n\t\ttemplateIndex = await loadTemplateIndex();\n\n\t\t// Falls Index leer oder veraltet, neu erstellen\n\t\tif (templateIndex.length === 0) {\n\t\t\tawait updateTemplateIndex();\n\t\t\ttemplateIndex = await loadTemplateIndex();\n\t\t}\n\n\t\tconsole.log(`✅ Template index loaded with ${templateIndex.length} resources`);\n\t} catch (error) {\n\t\tconsole.error('❌ Failed to initialize template index:', error);\n\t\t// Mit leerem Index weitermachen\n\t\ttemplateIndex = [];\n\t}\n}\n\n/**\n * Durchsucht den Template-Index\n */\nexport function searchTemplates(\n\tquery: string,\n\toptions: {\n\t\ttype?: string;\n\t\trepoId?: string;\n\t\ttags?: string[];\n\t\ttemplateType?: string;\n\t\tlimit?: number;\n\t} = {},\n): Array<IndexedTemplateResource & { score: number }> {\n\tconst { type, repoId, tags, templateType, limit = 20 } = options;\n\n\t// Filter anwenden\n\tlet results = templateIndex.filter((resource) => {\n\t\tif (repoId && resource.repoId !== repoId) return false;\n\t\tif (type && resource.type !== type) return false;\n\t\tif (templateType && resource.metadata.templateType !== templateType) return false;\n\t\tif (tags && tags.length > 0) {\n\t\t\tconst hasAllTags = tags.every((tag) => resource.metadata.tags.includes(tag));\n\t\t\tif (!hasAllTags) return false;\n\t\t}\n\t\treturn true;\n\t});\n\n\t// Nach Relevanz sortieren\n\tresults = results\n\t\t.map((resource) => ({\n\t\t\t...resource,\n\t\t\tscore: calculateSimilarityScore(resource, query),\n\t\t}))\n\t\t.sort((a, b) => b.score - a.score)\n\t\t.slice(0, limit);\n\n\treturn results as Array<IndexedTemplateResource & { score: number }>;\n}\n\n/**\n * Holt eine spezifische Template-Ressource\n */\nexport function getTemplateResource(id: string): IndexedTemplateResource | undefined {\n\treturn templateIndex.find((resource) => resource.id === id);\n}\n\n/**\n * Extrahiert Code-Blöcke aus einer Markdown-Ressource\n */\nexport function getTemplateCodeBlocks(resource: IndexedTemplateResource): Array<{\n\tlanguage: string;\n\tcode: string;\n\ttitle?: string;\n}> {\n\tif (resource.type !== 'markdown') {\n\t\treturn [{ language: resource.metadata.language || 'unknown', code: resource.content }];\n\t}\n\n\treturn extractCodeBlocksFromMarkdown(resource.content);\n}\n\n/**\n * Liste aller verfügbaren Template-Typen\n */\nexport function getTemplateTypes(): string[] {\n\tconst types = new Set<string>();\n\tfor (const repo of TEMPLATE_REPOS) {\n\t\ttypes.add(repo.type);\n\t}\n\treturn Array.from(types);\n}\n\n/**\n * Liste aller verfügbaren Repo-IDs\n */\nexport function getTemplateRepoIds(): string[] {\n\treturn TEMPLATE_REPOS.map((repo) => repo.id);\n}\n\n/**\n * Liste aller verfügbaren Tags\n */\nexport function getAllTemplateTags(): string[] {\n\tconst tags = new Set<string>();\n\tfor (const resource of templateIndex) {\n\t\tfor (const tag of resource.metadata.tags) {\n\t\t\ttags.add(tag);\n\t\t}\n\t}\n\treturn Array.from(tags).sort();\n}\n\nexport { TEMPLATE_REPOS, templateIndex };\n```\n\n---\n\n### 📄 4.5 Anpassung von `src/mcp.ts`\n\n```typescript\n// Imports am Anfang hinzufügen\nimport {\n\tinitializeTemplateIndex,\n\tsearchTemplates,\n\tgetTemplateResource,\n\tgetTemplateCodeBlocks,\n\tgetTemplateTypes,\n\tgetTemplateRepoIds,\n\tgetAllTemplateTags,\n} from './templates/index.js';\n\n// In der configureServer-Funktion:\nasync function configureServer(server: Server) {\n\t// Template-Index initialisieren\n\tawait initializeTemplateIndex();\n\n\t// ... bestehende Tools ...\n\n\t// Neues Tool: Template-Suche\n\tserver.registerTool(\n\t\t'search_templates',\n\t\t{\n\t\t\ttitle: 'Search KoliBri Templates',\n\t\t\tdescription:\n\t\t\t\t'Searches through KoliBri template repositories (generic, react, theme) for code examples and documentation. ' +\n\t\t\t\t'Returns matching templates with metadata, previews, and code blocks.',\n\t\t\tinputSchema: {\n\t\t\t\tquery: z.string().describe(\"Search query (e.g., 'button', 'form', 'dark theme').\"),\n\t\t\t\ttype: z.enum(['all', 'markdown', 'code', 'config']).optional().default('all').describe('Filter by resource type.'),\n\t\t\t\ttemplateType: z.string().optional().describe('Filter by template type (generic, react, theme).'),\n\t\t\t\trepoId: z.string().optional().describe('Filter by repository ID.'),\n\t\t\t\ttags: z.array(z.string()).optional().describe('Filter by tags.'),\n\t\t\t\tlimit: z.number().int().min(1).max(50).optional().default(20).describe('Maximum number of results.'),\n\t\t\t},\n\t\t},\n\t\tasync ({ query, type, templateType, repoId, tags, limit }) => {\n\t\t\tlog('tool', 'search_templates called', { query, type, templateType, repoId, limit });\n\n\t\t\tconst results = searchTemplates(query, {\n\t\t\t\ttype: type === 'all' ? undefined : type,\n\t\t\t\ttemplateType,\n\t\t\t\trepoId,\n\t\t\t\ttags,\n\t\t\t\tlimit,\n\t\t\t});\n\n\t\t\tlog('tool', 'search_templates completed', { resultCount: results.length });\n\n\t\t\treturn {\n\t\t\t\tcontent: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\ttext:\n\t\t\t\t\t\t\tresults.length === 0\n\t\t\t\t\t\t\t\t? `No templates found for \"${query}\"`\n\t\t\t\t\t\t\t\t: `Found ${results.length} template(s) for \"${query}\":\\n\\n` +\n\t\t\t\t\t\t\t\t\tresults\n\t\t\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t\t\t(result, index) =>\n\t\t\t\t\t\t\t\t\t\t\t\t`${index + 1}. **${result.metadata.name}** (${result.repoId})\\n` +\n\t\t\t\t\t\t\t\t\t\t\t\t` Type: ${result.type} | Template: ${result.metadata.templateType}\\n` +\n\t\t\t\t\t\t\t\t\t\t\t\t` Tags: ${result.metadata.tags.join(', ')}\\n` +\n\t\t\t\t\t\t\t\t\t\t\t\t` Preview: ${result.content.substring(0, 100)}...\\n`,\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t.join('\\n\\n'),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tstructuredContent: {\n\t\t\t\t\tquery,\n\t\t\t\t\ttotal: results.length,\n\t\t\t\t\tresults: results.map((result) => ({\n\t\t\t\t\t\tid: result.id,\n\t\t\t\t\t\tname: result.metadata.name,\n\t\t\t\t\t\tdescription: result.metadata.description,\n\t\t\t\t\t\trepoId: result.repoId,\n\t\t\t\t\t\tpath: result.path,\n\t\t\t\t\t\ttype: result.type,\n\t\t\t\t\t\ttemplateType: result.metadata.templateType,\n\t\t\t\t\t\ttags: result.metadata.tags,\n\t\t\t\t\t\tscore: result.score,\n\t\t\t\t\t\tstats: result.stats,\n\t\t\t\t\t})),\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t);\n\n\t// Neues Tool: Template abrufen\n\tserver.registerTool(\n\t\t'fetch_template',\n\t\t{\n\t\t\ttitle: 'Fetch KoliBri Template',\n\t\t\tdescription: 'Fetches a specific template resource by ID. Returns the full content with metadata and extracted code blocks.',\n\t\t\tinputSchema: {\n\t\t\t\tid: z.string().describe(\"Template resource ID (e.g., 'public-ui-templates:src/button/button.stories.md').\"),\n\t\t\t\tincludeCodeBlocks: z.boolean().optional().default(true).describe('Whether to extract code blocks from markdown.'),\n\t\t\t},\n\t\t},\n\t\tasync ({ id, includeCodeBlocks }) => {\n\t\t\tlog('tool', 'fetch_template called', { id, includeCodeBlocks });\n\n\t\t\tconst resource = getTemplateResource(id);\n\n\t\t\tif (!resource) {\n\t\t\t\tthrow new Error(`Template not found: ${id}. Use search_templates to find valid IDs.`);\n\t\t\t}\n\n\t\t\tconst codeBlocks = includeCodeBlocks && resource.type === 'markdown' ? getTemplateCodeBlocks(resource) : [];\n\n\t\t\tlog('tool', 'fetch_template completed', { id, contentLength: resource.content.length });\n\n\t\t\treturn {\n\t\t\t\tcontent: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\ttext:\n\t\t\t\t\t\t\t`# ${resource.metadata.name}\\n\\n` +\n\t\t\t\t\t\t\t`**Repository:** ${resource.repoId}\\n\\n` +\n\t\t\t\t\t\t\t`**Path:** ${resource.path}\\n\\n` +\n\t\t\t\t\t\t\t`**Type:** ${resource.type}\\n\\n` +\n\t\t\t\t\t\t\t`**Template Type:** ${resource.metadata.templateType}\\n\\n` +\n\t\t\t\t\t\t\t`**Tags:** ${resource.metadata.tags.join(', ')}\\n\\n` +\n\t\t\t\t\t\t\t`---\\n\\n` +\n\t\t\t\t\t\t\tresource.content,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tstructuredContent: {\n\t\t\t\t\tid: resource.id,\n\t\t\t\t\tname: resource.metadata.name,\n\t\t\t\t\tdescription: resource.metadata.description,\n\t\t\t\t\trepoId: resource.repoId,\n\t\t\t\t\tpath: resource.path,\n\t\t\t\t\ttype: resource.type,\n\t\t\t\t\ttemplateType: resource.metadata.templateType,\n\t\t\t\t\ttags: resource.metadata.tags,\n\t\t\t\t\tlanguage: resource.metadata.language,\n\t\t\t\t\tstats: resource.stats,\n\t\t\t\t\tcodeBlocks: codeBlocks.map((block) => ({\n\t\t\t\t\t\tlanguage: block.language,\n\t\t\t\t\t\ttitle: block.title,\n\t\t\t\t\t\tcodeLength: block.code.length,\n\t\t\t\t\t})),\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t);\n\n\t// Neues Tool: Template-Tags auflisten\n\tserver.registerTool(\n\t\t'list_template_tags',\n\t\t{\n\t\t\ttitle: 'List Template Tags',\n\t\t\tdescription: 'Returns all available tags for filtering templates.',\n\t\t\tinputSchema: {},\n\t\t},\n\t\tasync () => {\n\t\t\tconst tags = getAllTemplateTags();\n\t\t\treturn {\n\t\t\t\tcontent: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\ttext: `Available template tags (${tags.length}):\\n\\n` + tags.map((tag) => `- ${tag}`).join('\\n'),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tstructuredContent: {\n\t\t\t\t\ttags,\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t);\n\n\t// Neues Tool: Template-Typen auflisten\n\tserver.registerTool(\n\t\t'list_template_types',\n\t\t{\n\t\t\ttitle: 'List Template Types',\n\t\t\tdescription: 'Returns all available template types (generic, react, theme).',\n\t\t\tinputSchema: {},\n\t\t},\n\t\tasync () => {\n\t\t\tconst types = getTemplateTypes();\n\t\t\treturn {\n\t\t\t\tcontent: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\ttext: `Available template types:\\n\\n` + types.map((type) => `- ${type}`).join('\\n'),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tstructuredContent: {\n\t\t\t\t\ttypes,\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t);\n}\n\n// Periodisches Update des Template-Index (z.B. alle 24 Stunden)\nsetInterval(\n\tasync () => {\n\t\ttry {\n\t\t\tconsole.log('🔄 Periodic template index update...');\n\t\t\tawait updateTemplateIndex();\n\t\t} catch (error) {\n\t\t\tconsole.error('❌ Periodic template index update failed:', error);\n\t\t}\n\t},\n\t24 * 60 * 60 * 1000,\n);\n```\n\n---\n\n### 📄 4.6 Anpassung von `package.json`\n\n```json\n{\n\t\"dependencies\": {\n\t\t\"simple-git\": \"^3.24.0\",\n\t\t\"glob\": \"^10.3.10\"\n\t},\n\t\"scripts\": {\n\t\t\"update-templates\": \"node scripts/update-templates.mjs\",\n\t\t\"prebuild\": \"pnpm generate-index && pnpm generate-schemas && pnpm update-templates\"\n\t}\n}\n```\n\n---\n\n### 📄 4.7 `scripts/update-templates.mjs`\n\n```javascript\n#!/usr/bin/env node\n/**\n * Skript zum manuellen Aktualisieren des Template-Index\n */\n\nimport { updateTemplateIndex } from '../dist/templates/indexer/fetcher.js';\n\nasync function main() {\n\tconsole.log('📚 Updating template index...');\n\n\ttry {\n\t\tawait updateTemplateIndex();\n\t\tconsole.log('✅ Template index updated successfully');\n\t\tprocess.exit(0);\n\t} catch (error) {\n\t\tconsole.error('❌ Failed to update template index:', error);\n\t\tprocess.exit(1);\n\t}\n}\n\nmain();\n```\n\n---\n\n## 🎯 Phase 5: Argument-Normalisierung (1 Tag)\n\n### 📁 Dateistruktur\n\n```\npackages/tools/mcp/\n├── src/\n│ └── utils/\n│ ├── normalize.ts # Argument-Normalisierung\n│ └── errors.ts # Fehlerformatierung\n```\n\n---\n\n### 📄 5.1 `src/utils/normalize.ts`\n\n```typescript\nimport type { z } from 'zod';\n\n/**\n * Normalisiert Argument-Objekte für KoliBri-Tools.\n * Füllt Defaults, konvertiert Aliase, bereinigt Eingaben.\n * @param toolName - Name des Tools\n * @param rawArgs - Roh-Argumente\n * @returns Normalisierte Argumente\n */\nexport function normalizeKolibriArgs(toolName: string, rawArgs: unknown): unknown {\n\tif (!rawArgs || typeof rawArgs !== 'object' || Array.isArray(rawArgs)) {\n\t\treturn rawArgs;\n\t}\n\n\tconst args = { ...(rawArgs as Record<string, unknown>) };\n\n\t// --- Tool-spezifische Normalisierungen ---\n\tswitch (toolName) {\n\t\t// generate_button: Aliase für label, Defaults für variant/type\n\t\tcase 'generate_button':\n\t\t\tif (!args.label && args.text) {\n\t\t\t\targs.label = args.text; // Alias: text → label\n\t\t\t}\n\t\t\tif (!args.label && args.content) {\n\t\t\t\targs.label = args.content; // Alias: content → label\n\t\t\t}\n\t\t\tif (!args.variant) {\n\t\t\t\targs.variant = 'primary';\n\t\t\t}\n\t\t\tif (!args.type) {\n\t\t\t\targs.type = 'button';\n\t\t\t}\n\t\t\tif (args.icon && !args.icon.position) {\n\t\t\t\targs.icon.position = 'left';\n\t\t\t}\n\t\t\tbreak;\n\n\t\t// generate_card: Defaults für heading\n\t\tcase 'generate_card':\n\t\t\tif (!args.heading && args.title) {\n\t\t\t\targs.heading = args.title;\n\t\t\t}\n\t\t\tif (!args.content) {\n\t\t\t\targs.content = [];\n\t\t\t}\n\t\t\tif (!args.footer) {\n\t\t\t\targs.footer = [];\n\t\t\t}\n\t\t\tbreak;\n\n\t\t// render_composition: Mindestens 1 Block erzwingen\n\t\tcase 'render_composition':\n\t\t\tif (Array.isArray(args.blocks) && args.blocks.length === 0) {\n\t\t\t\targs.blocks = [{ kind: 'text', text: 'Default content' }];\n\t\t\t}\n\t\t\tbreak;\n\n\t\t// search: Defaults für limit/kind\n\t\tcase 'search':\n\t\t\tif (args.limit === undefined) {\n\t\t\t\targs.limit = 10;\n\t\t\t}\n\t\t\tif (args.kind && !['doc', 'sample', 'scenario', 'spec'].includes(args.kind)) {\n\t\t\t\tdelete args.kind; // Ungültiges kind ignorieren\n\t\t\t}\n\t\t\tbreak;\n\t}\n\n\t// --- Allgemeine Normalisierungen ---\n\t// Booleans: \"true\"/\"false\" → true/false\n\tfor (const key in args) {\n\t\tif (args[key] === 'true') args[key] = true;\n\t\tif (args[key] === 'false') args[key] = false;\n\t}\n\n\t// Leere Strings → undefined\n\tfor (const key in args) {\n\t\tif (args[key] === '') {\n\t\t\targs[key] = undefined;\n\t\t}\n\t}\n\n\treturn args;\n}\n```\n\n---\n\n## 🎯 Phase 6: Detaillierte Fehlerbehandlung (1 Tag)\n\n**Ziel:** Verbesserte Fehlerbehandlung mit tool-spezifischen Cheat-Sheets und hilfreichen Fehlermeldungen für Agents.\n\n---\n\n### 📄 6.1 `src/utils/errors.ts`\n\n```typescript\nimport type { z } from 'zod';\nimport { COMPOSITION_CHEAT_SHEET } from '../composition/cheat-sheet.js';\n\n/**\n * Formatiert Validierungsfehler für KoliBri-Tools.\n * @param toolName - Name des Tools\n * @param error - Zod-Validierungsfehler\n * @param locale - Sprache für Fehlermeldungen\n * @returns Formatierte Fehlermeldung\n */\nexport function formatKolibriValidationError(toolName: string, error: z.ZodError, locale: 'en' | 'de' = 'en'): string {\n\tconst base = error.issues\n\t\t.map((issue) => {\n\t\t\tconst path = issue.path.length > 0 ? `${issue.path.join('.')}` : 'root';\n\t\t\treturn `- ${path}: ${issue.message}`;\n\t\t})\n\t\t.join('\\n');\n\n\t// Tool-spezifische Hilfestellungen\n\tswitch (toolName) {\n\t\tcase 'render_composition':\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\n💡 **Hilfestellung für contentBlocks:**\\n${COMPOSITION_CHEAT_SHEET}`\n\t\t\t\t: `${base}\\n\\n💡 **Cheat Sheet for contentBlocks:**\\n${COMPOSITION_CHEAT_SHEET}`;\n\n\t\tcase 'generate_button':\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\n✅ **Beispiel für gültige Parameter:**\\n\\`\\`\\`json\\n{\\n \"label\": \"Speichern\",\\n \"variant\": \"primary\",\\n \"icon\": { \"name\": \"save\", \"position\": \"left\" }\\n}\\n\\`\\`\\``\n\t\t\t\t: `${base}\\n\\n✅ **Example of valid payload:**\\n\\`\\`\\`json\\n{\\n \"label\": \"Save\",\\n \"variant\": \"primary\",\\n \"icon\": { \"name\": \"check\", \"position\": \"left\" }\\n}\\n\\`\\`\\``;\n\n\t\tcase 'generate_card':\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\n✅ **Beispiel:**\\n\\`\\`\\`json\\n{\\n \"heading\": \"Überschrift\",\\n \"content\": [{ \"kind\": \"text\", \"text\": \"Inhalt\" }]\\n}\\n\\`\\`\\``\n\t\t\t\t: `${base}\\n\\n✅ **Example:**\\n\\`\\`\\`json\\n{\\n \"heading\": \"Title\",\\n \"content\": [{ \"kind\": \"text\", \"text\": \"Content\" }]\\n}\\n\\`\\`\\``;\n\n\t\tcase 'validate_html':\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\n📌 **Tipp:** Nutze dieses Tool nach \\`generate_*\\` Tools oder mit HTML aus \\`fetch\\`.\\nSetze strict: true für CI/CD-Prüfungen.`\n\t\t\t\t: `${base}\\n\\n📌 **Tip:** Use this after \\`generate_*\\` tools or with HTML from \\`fetch\\`.\\nSet strict: true for CI/CD enforcement.`;\n\n\t\tcase 'fetch':\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\n🔍 **Tipp:** Nutze \\`search\\`, um gültige IDs zu finden:\\n\\`\\`\\`json\\n{ \"query\": \"button\", \"kind\": \"sample\", \"limit\": 5 }\\n\\`\\`\\``\n\t\t\t\t: `${base}\\n\\n🔍 **Tip:** Use \\`search\\` to find valid IDs:\\n\\`\\`\\`json\\n{ \"query\": \"button\", \"kind\": \"sample\", \"limit\": 5 }\\n\\`\\`\\``;\n\n\t\tdefault:\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\n💡 Nutze \\`list_tools\\`, um verfügbare Tools und ihre Parameter zu sehen.`\n\t\t\t\t: `${base}\\n\\n💡 Use \\`list_tools\\` to see available tools and their parameters.`;\n\t}\n}\n```\n\n---\n\n### 📄 6.2 Anpassung von `src/mcp.ts`\n\n```typescript\n// Import am Anfang hinzufügen\nimport { normalizeKolibriArgs } from './utils/normalize.js';\nimport { formatKolibriValidationError } from './utils/errors.js';\n\n// Anpassung des globalen Request-Handlers\nserver.setRequestHandler(CallToolRequestSchema, async (request) => {\n\tconst { name, arguments: rawArgs } = request.params;\n\tconst tool = tools.get(name);\n\tif (!tool) {\n\t\tthrow new Error(`Unknown tool: ${name}. Use 'list_tools' to see available tools.`);\n\t}\n\n\t// 1. Normalisierung\n\tconst args = normalizeKolibriArgs(name, rawArgs);\n\n\t// 2. Schema-Validierung\n\tconst parsed = tool.inputSchema.safeParse(args);\n\tif (!parsed.success) {\n\t\tconst locale = (rawArgs as any)?.locale || 'en';\n\t\tthrow new Error(formatKolibriValidationError(name, parsed.error, locale));\n\t}\n\n\t// 3. Tool ausführen\n\tconst result = await tool.handler(parsed.data);\n\n\t// 4. Ergebnis formatieren\n\treturn {\n\t\tcontent: [\n\t\t\t{\n\t\t\t\ttype: 'text',\n\t\t\t\ttext: typeof result === 'string' ? result : JSON.stringify(result, null, 2),\n\t\t\t},\n\t\t],\n\t\t...(result.structuredContent ? { structuredContent: result.structuredContent } : {}),\n\t};\n});\n```\n\n---\n\n## 📦 Package-Anpassungen\n\n### 📄 `packages/tools/mcp/package.json`\n\n```json\n{\n\t\"name\": \"@public-ui/mcp\",\n\t\"version\": \"4.3.0-rc.7\",\n\t\"description\": \"Model Context Protocol server providing AI agents access to 136+ KoliBri component examples, code generation, and accessibility validation.\",\n\t\"dependencies\": {\n\t\t\"@modelcontextprotocol/sdk\": \"1.30.0\",\n\t\t\"@public-ui/components\": \"workspace:*\",\n\t\t\"express\": \"5.2.1\",\n\t\t\"fuse.js\": \"7.5.0\",\n\t\t\"node-html-parser\": \"^7.1.0\",\n\t\t\"zod\": \"4.4.3\"\n\t},\n\t\"scripts\": {\n\t\t\"prebuild\": \"pnpm generate-index && pnpm generate-schemas\",\n\t\t\"generate-schemas\": \"node scripts/generate-component-schemas.mjs\",\n\t\t\"build\": \"unbuild\",\n\t\t\"start\": \"node dist/mcp.cjs\",\n\t\t\"start:http\": \"node dist/mcp.cjs\",\n\t\t\"start:stdio\": \"node dist/cli.cjs\"\n\t}\n}\n```\n\n---\n\n## ✅ Testplan\n\n### 🧪 Manuelle Tests (nach jeder Phase)\n\n| Test | Tool | Eingabe | Erwartetes Ergebnis |\n| -------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |\n| A11Y-Validierung | validate_html | `<button><kol-icon name=\"save\"></kol-icon></button>` | ⚠️ button-missing-label-Fehler |\n| A11Y-Validierung | validate_html | `<button>Speichern</button>` | ✅ Keine Fehler |\n| A11Y-Validierung (strict) | validate_html | `<button><kol-icon name=\"save\"></kol-icon></button>`, strict: true | 🛑 Error: \"A11Y validation failed\" |\n| Button-Generierung | generate_button | `{ label: \"Klick\", variant: \"primary\" }` | ✅ `<kol-button variant=\"primary\">Klick</kol-button>` |\n| Button-Generierung (Alias) | generate_button | `{ text: \"Klick\" }` | ✅ `<kol-button>Klick</kol-button>` (text → label) |\n| Composition | render_composition | `{ blocks: [{ kind: \"text\", text: \"Hello\" }] }` | ✅ `<p>Hello</p>` |\n| Composition (nested) | render_composition | `{ blocks: [{ kind: \"card\", card: { heading: \"Title\", content: [{ kind: \"text\", text: \"Content\" }] } }]` | ✅ `<kol-card>...` |\n| Fehlerbehandlung | generate_button | `{ variant: \"invalid\" }` | ⚠️ Fehler mit Cheat-Sheet |\n| Normalisierung | generate_button | `{ label: \" Klick \" }` | ✅ `<kol-button>Klick</kol-button>` (getrimmt) |\n\n---\n\n### 🤖 Agenten-Tests (Integrationstests)\n\n#### 1. Suche → Generierung → Validierung\n\n```mermaid\ngraph LR\n A[search: button] --> B[generate_button]\n B --> C[validate_html]\n C --> D[✅ Valid]\n```\n\n#### 2. Composition mit Validierung\n\n```mermaid\ngraph LR\n A[render_composition] --> B[validate_html]\n B --> C[✅ Valid]\n```\n\n#### 3. Fehlerbehandlung & Normalisierung\n\n```mermaid\ngraph LR\n A[generate_button: text=\"Klick\"] --> B[Normalisierung]\n B --> C[generate_button: label=\"Klick\"]\n C --> D[✅ Valid]\n```\n\n---\n\n## 📅 Zeitplan & Meilensteine\n\n| Phase | Feature | Aufwand | Meilenstein | Verantwortlich |\n| ---------- | ----------------------------- | ------------- | ---------------------------------------- | -------------- |\n| 1 | A11Y-Validierung | 1–2 Tage | Agents können HTML prüfen | Backend-Team |\n| 2 | Dynamische Generierung | 2–3 Tage | Agents können Komponenten generieren | Backend-Team |\n| 3 | Composition-System | 1–2 Tage | Agents können Layouts bauen | Backend-Team |\n| 4 | Template-Repo-Integration | 2–3 Tage | Agents können auf Templates zugreifen | Backend-Team |\n| 5 | Argument-Normalisierung | 1 Tag | Robustere API durch Defaults/Aliase | Backend-Team |\n| 6 | Detaillierte Fehlerbehandlung | 1 Tag | Bessere Fehlermeldungen mit Cheat-Sheets | Backend-Team |\n| **Gesamt** | **Alle Features** | **8–11 Tage** | **Vollständige Integration** | **Team** |\n\n---\n\n## 📌 Checkliste für die Umsetzung\n\n### ✅ Phase 1: A11Y-Validierung\n\n- [ ] `src/a11y/types.ts` erstellen\n- [ ] `src/a11y/rules.ts` erstellen (mit 5–10 KoliBri-spezifischen Regeln)\n- [ ] `src/a11y/validate.ts` erstellen\n- [ ] `validate_html`-Tool in `src/mcp.ts` registrieren\n- [ ] `node-html-parser` in `package.json` hinzufügen\n- [ ] Manuelle Tests durchführen\n- [ ] Unit-Tests für `validateKolibriHtml` schreiben\n\n### ✅ Phase 2: Dynamische Generierung\n\n- [ ] `src/components/schemas/button.ts` erstellen\n- [ ] `src/components/templates/button.ts` erstellen\n- [ ] `src/components/index.ts` erstellen (Generator-Fabrik)\n- [ ] Dynamische Tool-Registrierung in `src/mcp.ts` hinzufügen\n- [ ] `scripts/generate-component-schemas.mjs` erstellen\n- [ ] `prebuild`-Skript in `package.json` anpassen\n- [ ] Manuelle Tests durchführen\n- [ ] 2–3 weitere Komponenten (Input, Card) hinzufügen\n\n### ✅ Phase 3: Composition-System\n\n- [ ] `src/composition/types.ts` erstellen\n- [ ] `src/composition/render.ts` erstellen\n- [ ] `src/composition/cheat-sheet.ts` erstellen\n- [ ] `render_composition`-Tool in `src/mcp.ts` registrieren\n- [ ] Manuelle Tests durchführen\n- [ ] Grid-Block hinzufügen\n\n### ✅ Phase 4: Template-Repo-Integration\n\n- [ ] `src/templates/indexer/config.ts` erstellen\n- [ ] `src/templates/indexer/fetcher.ts` erstellen\n- [ ] `src/templates/indexer/parser.ts` erstellen\n- [ ] `src/templates/index.ts` erstellen\n- [ ] Template-Tools in `src/mcp.ts` registrieren (`search_templates`, `fetch_template`, `list_template_tags`, `list_template_types`)\n- [ ] `simple-git` und `glob` in `package.json` hinzufügen\n- [ ] `scripts/update-templates.mjs` erstellen\n- [ ] Manuelle Tests durchführen\n- [ ] Unit-Tests für Template-Indexierung schreiben\n\n### ✅ Phase 5: Argument-Normalisierung\n\n- [ ] `src/utils/normalize.ts` erstellen\n- [ ] Request-Handler in `src/mcp.ts` anpassen\n- [ ] Manuelle Tests durchführen\n- [ ] Unit-Tests für Normalisierung schreiben\n\n### ✅ Phase 6: Detaillierte Fehlerbehandlung\n\n- [ ] `src/utils/errors.ts` erstellen\n- [ ] Request-Handler in `src/mcp.ts` anpassen\n- [ ] Manuelle Tests durchführen\n- [ ] Unit-Tests für Fehlerbehandlung schreiben\n\n### ✅ Abschluss\n\n- [ ] Alle Abhängigkeiten in `package.json` prüfen\n- [ ] `pnpm install` ausführen\n- [ ] `pnpm build` ausführen\n- [ ] `pnpm start:http` testen\n- [ ] Integrationstests mit Agents durchführen\n- [ ] Dokumentation in README.md aktualisieren\n\n---\n\n## 📚 Dokumentation-Updates\n\n### 📄 README.md (Ergänzungen)\n\n````markdown\n## 🆕 Neue Features (v4.3.0-rc.7)\n\n### ✅ A11Y-Validierung\n\nValidiert HTML gegen **WCAG 2.1 / EN 301 549** (EU-Standard für Barrierefreiheit).\n\n**Beispiel:**\n\n```json\n{\n\t\"name\": \"validate_html\",\n\t\"arguments\": {\n\t\t\"html\": \"<button>Speichern</button>\",\n\t\t\"strict\": true\n\t}\n}\n```\n````\n\n### ✅ Dynamische Komponenten-Generierung\n\nGeneriert KoliBri-Komponenten dynamisch aus Parametern.\n\n**Beispiel:**\n\n```json\n{\n\t\"name\": \"generate_button\",\n\t\"arguments\": {\n\t\t\"label\": \"Speichern\",\n\t\t\"variant\": \"primary\",\n\t\t\"icon\": { \"name\": \"save\" }\n\t}\n}\n```\n\n### ✅ Composition-System\n\nErstellt komplexe Layouts in einem Aufruf (Grid + Card + Button etc.).\n\n**Beispiel:**\n\n```json\n{\n\t\"name\": \"render_composition\",\n\t\"arguments\": {\n\t\t\"blocks\": [\n\t\t\t{\n\t\t\t\t\"kind\": \"card\",\n\t\t\t\t\"card\": {\n\t\t\t\t\t\"heading\": \"User Profile\",\n\t\t\t\t\t\"content\": [\n\t\t\t\t\t\t{ \"kind\": \"text\", \"text\": \"Welcome!\" },\n\t\t\t\t\t\t{ \"kind\": \"button\", \"button\": { \"label\": \"Edit\" } }\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t}\n\t\t]\n\t}\n}\n```\n\n```\n\n### 📖 Tool-Übersicht\n\n| Tool | Beschreibung | Beispiel |\n|------|--------------|----------|\n| `search` | Suche nach Samples/Docs/Specs | `{ query: \"button\", kind: \"sample\" }` |\n| `fetch` | Hole ein spezifisches Beispiel | `{ id: \"button/basic\" }` |\n| `validate_html` | ✅ **NEU** Prüfe HTML auf A11Y | `{ html: \"<button>...\" }` |\n| `generate_<component>` | ✅ **NEU** Generiere Komponente | `{ label: \"Klick\" }` |\n| `render_composition` | ✅ **NEU** Generiere Layout | `{ blocks: [...] }` |\n| `search_templates` | ✅ **NEU** Suche in Template-Repos | `{ query: \"form\", templateType: \"react\" }` |\n| `fetch_template` | ✅ **NEU** Hole ein spezifisches Template | `{ id: \"public-ui-templates:src/button\" }` |\n| `list_template_tags` | ✅ **NEU** Liste alle Template-Tags | `{}` |\n| `list_template_types` | ✅ **NEU** Liste alle Template-Typen | `{}` |\n| `info` | Server-Metadaten | – |\n| `version` | Version abrufen | – |\n| `best-practices` | Guidelines | – |\n```\n\n---\n\n## 🚀 Deployment & Release\n\n### 1. Lokales Testen\n\n```bash\n# Abhängigkeiten installieren\npnpm install\n\n# Schemas generieren\npnpm generate-schemas\n\n# Index generieren\npnpm generate-index\n\n# Build durchführen\npnpm build\n\n# HTTP-Server starten\npnpm start:http\n\n# Testen mit curl\ncurl -X POST http://localhost:3000/mcp \\\n -H \"Content-Type: application/json\" \\\n -d '{\"method\": \"tools/call\", \"params\": {\"name\": \"validate_html\", \"arguments\": {\"html\": \"<button>Test</button>\"}}}'\n```\n\n### 2. Vercel-Deployment (bereits unterstützt)\n\nDa KoliBri bereits HTTP-Transport unterstützt, funktioniert das Deployment auf Vercel ohne Änderungen:\n\n```bash\n# Environment-Variable für Port setzen (Vercel setzt PORT automatisch)\nvercel\n```\n\n### 3. CI/CD-Pipeline (neu)\n\n```yaml\n# .github/workflows/test.yml\nname: Test MCP Server\n\non: [push, pull_request]\n\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n - run: pnpm install\n - run: pnpm generate-index\n - run: pnpm generate-schemas\n - run: pnpm build\n - run: pnpm test\n```\n\n### 4. Release-Checkliste\n\n- [ ] Alle Features implementiert\n- [ ] Unit-Tests geschrieben\n- [ ] Integrationstests mit Agents durchgeführt\n- [ ] Dokumentation aktualisiert\n- [ ] Changelog aktualisiert (CHANGELOG.md)\n- [ ] Version in `package.json` hochgesetzt\n- [ ] PR erstellt & Review durchführt\n- [ ] Release auf npm veröffentlicht (`pnpm publish`)\n\n---\n\n## 🎉 Success Metrics\n\n| Metrik | Zielwert | Aktueller Stand | Status |\n| ------------------------- | --------------- | --------------- | ----------- |\n| Anzahl Tools | 150+ | ~140 | ✅ Erreicht |\n| A11Y-Abdeckung | 10 Regeln | 0 | ❌ Neu |\n| Dynamische Generierung | 10+ Komponenten | 0 | ❌ Neu |\n| Composition-Unterstützung | Ja | Nein | ❌ Neu |\n| Agenten-Feedback | Positiv | – | ⏳ TBD |\n| Build-Zeit | < 5min | ~3min | ✅ OK |\n| Bundle-Größe | < 5MB | ~3MB | ✅ OK |\n\n---\n\n## 📞 Support & Feedback\n\n**Ansprechpartner:**\n\n- Technische Fragen: KoliBri-Maintainer\n- A11Y-Regeln: ITZ Bund A11Y-Team\n- MCP-Integration: Model Context Protocol Discord\n\n**Feedback geben:**\n\n1. Issues im KoliBri-Repo erstellen\n2. PRs mit dem Label `mcp` und `enhancement` einreichen\n3. Diskussionen im KoliBri-Discussions starten\n\n---\n\n## 📝 Changelog-Eintrag (Beispiel)\n\n```markdown\n## [4.3.0-rc.7](https://github.com/public-ui/kolibri/compare/v4.3.0-rc.6...v4.3.0-rc.7) (YYYY-MM-DD)\n\n### ✨ Features\n\n- **MCP: A11Y-Validierung hinzugefügt** (`validate_html`)\n - Validiert HTML gegen **WCAG 2.1 / EN 301 549**-Regeln\n - Unterstützt **strict-Modus** für CI/CD-Integration\n - Gibt **strukturierte Issues** mit `ruleId`, `severity`, `message` (EN/DE) zurück\n - Enthält **Hilfs-URLs** für jede Regel\n - [#1234](https://github.com/public-ui/kolibri/issues/1234)\n\n- **MCP: Dynamische Komponenten-Generierung** (`generate_<component>`)\n - Generiert KoliBri-Komponenten **dynamisch aus Parametern**\n - Unterstützt **Button**, **Input**, **Card** und weitere Komponenten\n - **A11Y-konform** durch automatische Validierung\n - Aliase für Parameter (z. B. `text` → `label`)\n - [#1235](https://github.com/public-ui/kolibri/issues/1235)\n\n- **MCP: Composition-System** (`render_composition`)\n - Ermöglicht **rekursive Layout-Generierung** in einem Aufruf\n - Unterstützt **Text**, **HTML**, **Button**, **Card**, **Grid**-Blöcke\n - **Nesting** von Blöcken (z. B. Card mit Button)\n - Tiefenbegrenzung zur Vermeidung von Stack Overflow\n - [#1236](https://github.com/public-ui/kolibri/issues/1236)\n\n- **MCP: Verbesserte Fehlerbehandlung**\n - **Tool-spezifische Cheat-Sheets** in Fehlermeldungen\n - **Normalisierung von Argumenten** (Defaults, Aliase)\n - **Bessere Fehlermeldungen** für Agents\n - [#1237](https://github.com/public-ui/kolibri/issues/1237)\n\n### 🧰 Technische Änderungen\n\n- **Neue Abhängigkeit:** `node-html-parser@^7.1.0` für HTML-Parsing\n- **Neues Skript:** `generate-schemas` zur automatischen Schema-Generierung\n- **Erweiterte Typdefinitionen** für Composition-Blöcke\n\n### 📚 Dokumentation\n\n- **README.md** aktualisiert mit neuen Features und Beispielen\n- **Cheat-Sheet** für Composition-System hinzugefügt\n```\n\n---\n\n## 🏁 Abschluss\n\nMit dieser Umsetzung wird KoliBri MCP zum vollständigsten MCP-Server für Design-Systems:\n\n- 🔍 **Suche & Discovery** (bestehend)\n- 📄 **Code-Snippets** (bestehend)\n- ✅ **A11Y-Validierung** (neu)\n- ⚡ **Dynamische Generierung** (neu)\n- 🧩 **Composition-System** (neu)\n- 🛡️ **Robuste API** (neu)\n\n→ **Ideal für Coding Agents, die barrierefreie KoliBri-UIs generieren müssen!**\n",
497
+ "kind": "doc"
498
+ },
491
499
  {
492
500
  "id": "doc/UPGRADEABLE_DEPENDENCIES",
493
501
  "group": "docs",
@@ -2277,7 +2285,7 @@
2277
2285
  "group": "spec",
2278
2286
  "name": "badge",
2279
2287
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/badge.md",
2280
- "code": "# kol-badge\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Badge** component allows you to visually highlight specific information.\nIn addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_color` | `_color` | Defines the backgroundColor and foregroundColor. | `string \\| undefined \\| { backgroundColor: string; foregroundColor: string; }` | `'#000'` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2288
+ "code": "# kol-badge\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Badge** component allows you to visually highlight specific information.\nIn addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_color` | `_color` | Defines the backgroundColor and foregroundColor. | `string \\| undefined \\| { backgroundColor: string; foregroundColor: string; }` | `'#000'` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2281
2289
  "kind": "spec"
2282
2290
  },
2283
2291
  {
@@ -2293,7 +2301,7 @@
2293
2301
  "group": "spec",
2294
2302
  "name": "button",
2295
2303
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button.md",
2296
- "code": "# kol-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
2304
+ "code": "# kol-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2297
2305
  "kind": "spec"
2298
2306
  },
2299
2307
  {
@@ -2365,7 +2373,7 @@
2365
2373
  "group": "spec",
2366
2374
  "name": "heading",
2367
2375
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/heading.md",
2368
- "code": "# kol-heading\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_secondaryHeadline` | `_secondary-headline` | Defines the text of the secondary headline. | `string \\| undefined` | `undefined` |\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------- |\n| | Inhalt der Überschrift. |\n\n\n----------------------------------------------\n\n\n",
2376
+ "code": "# kol-heading\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_secondaryHeadline` | `_secondary-headline` | Defines the text of the secondary headline. | `string \\| undefined` | `undefined` |\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2369
2377
  "kind": "spec"
2370
2378
  },
2371
2379
  {
@@ -2389,7 +2397,7 @@
2389
2397
  "group": "spec",
2390
2398
  "name": "input-checkbox",
2391
2399
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-checkbox.md",
2392
- "code": "# kol-input-checkbox\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_checked` | `_checked` | Defines whether the checkbox is checked or not. Can be read and written. | `boolean \\| undefined` | `false` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked. | `boolean \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_labelAlign` | `_label-align` | Defines which alignment should be used for presentation. | `\"left\" \\| \"right\" \\| undefined` | `'right'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `true` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
2400
+ "code": "# kol-input-checkbox\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_checked` | `_checked` | Defines whether the checkbox is checked or not. Can be read and written. | `boolean \\| undefined` | `false` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked. | `boolean \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_labelAlign` | `_label-align` | Defines which alignment should be used for presentation. | `\"left\" \\| \"right\" \\| undefined` | `'right'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `true` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2393
2401
  "kind": "spec"
2394
2402
  },
2395
2403
  {
@@ -2405,7 +2413,7 @@
2405
2413
  "group": "spec",
2406
2414
  "name": "input-date",
2407
2415
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-date.md",
2408
- "code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"` | `'date'` |\n| `_value` | `_value` | Defines the value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2416
+ "code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"` | `'date'` |\n| `_value` | `_value` | Defines the value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2409
2417
  "kind": "spec"
2410
2418
  },
2411
2419
  {
@@ -2413,7 +2421,7 @@
2413
2421
  "group": "spec",
2414
2422
  "name": "input-email",
2415
2423
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-email.md",
2416
- "code": "# kol-input-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2424
+ "code": "# kol-input-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2417
2425
  "kind": "spec"
2418
2426
  },
2419
2427
  {
@@ -2429,7 +2437,7 @@
2429
2437
  "group": "spec",
2430
2438
  "name": "input-number",
2431
2439
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-number.md",
2432
- "code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2440
+ "code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2433
2441
  "kind": "spec"
2434
2442
  },
2435
2443
  {
@@ -2437,7 +2445,7 @@
2437
2445
  "group": "spec",
2438
2446
  "name": "input-password",
2439
2447
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-password.md",
2440
- "code": "# kol-input-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n| `_visibilityToggle` | `_visibility-toggle` | Activates the show password button | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2448
+ "code": "# kol-input-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n| `_visibilityToggle` | `_visibility-toggle` | Activates the show password button | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2441
2449
  "kind": "spec"
2442
2450
  },
2443
2451
  {
@@ -2445,7 +2453,7 @@
2445
2453
  "group": "spec",
2446
2454
  "name": "input-radio",
2447
2455
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-radio.md",
2448
- "code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` | `_options` | Options the user can choose from. | `RadioOption<StencilUnknown>[] \\| string \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------------------------- |\n| | The legend/heading of the radio buttons. |\n\n\n----------------------------------------------\n\n\n",
2456
+ "code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` | `_options` | Options the user can choose from. | `RadioOption<StencilUnknown>[] \\| string \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2449
2457
  "kind": "spec"
2450
2458
  },
2451
2459
  {
@@ -2453,7 +2461,7 @@
2453
2461
  "group": "spec",
2454
2462
  "name": "input-range",
2455
2463
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-range.md",
2456
- "code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `100` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `0` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2464
+ "code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `100` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `0` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2457
2465
  "kind": "spec"
2458
2466
  },
2459
2467
  {
@@ -2461,7 +2469,7 @@
2461
2469
  "group": "spec",
2462
2470
  "name": "input-text",
2463
2471
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-text.md",
2464
- "code": "# kol-input-text\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined` | `'text'` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `selectionEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement` | `string` | |\n| `selectionStart` | `number \\| undefined` | |\n| `selectionEnd` | `number \\| undefined` | |\n| `selectMode` | `\"select\" \\| \"end\" \\| \"start\" \\| \"preserve\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name | Type | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart` | `number` | |\n| `selectionEnd` | `number` | |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2472
+ "code": "# kol-input-text\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined` | `'text'` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `selectionEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement` | `string` | |\n| `selectionStart` | `number \\| undefined` | |\n| `selectionEnd` | `number \\| undefined` | |\n| `selectMode` | `\"select\" \\| \"end\" \\| \"start\" \\| \"preserve\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name | Type | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart` | `number` | |\n| `selectionEnd` | `number` | |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2465
2473
  "kind": "spec"
2466
2474
  },
2467
2475
  {
@@ -2477,7 +2485,7 @@
2477
2485
  "group": "spec",
2478
2486
  "name": "link",
2479
2487
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link.md",
2480
- "code": "# kol-link\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Sets the target URI of the link or citation source. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2488
+ "code": "# kol-link\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Sets the target URI of the link or citation source. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2481
2489
  "kind": "spec"
2482
2490
  },
2483
2491
  {
@@ -2549,7 +2557,7 @@
2549
2557
  "group": "spec",
2550
2558
  "name": "select",
2551
2559
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/select.md",
2552
- "code": "# kol-select\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this select. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2560
+ "code": "# kol-select\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this select. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2553
2561
  "kind": "spec"
2554
2562
  },
2555
2563
  {