@public-ui/mcp 4.1.2-rc.3 → 4.1.2-rc.5

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 (2) hide show
  1. package/package.json +2 -2
  2. package/shared/sample-index.json +28 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/mcp",
3
- "version": "4.1.2-rc.3",
3
+ "version": "4.1.2-rc.5",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -46,7 +46,7 @@
46
46
  "express": "5.2.1",
47
47
  "fuse.js": "7.1.0",
48
48
  "zod": "4.3.6",
49
- "@public-ui/components": "4.1.2-rc.3"
49
+ "@public-ui/components": "4.1.2-rc.5"
50
50
  },
51
51
  "devDependencies": {
52
52
  "@eslint/js": "9.39.4",
package/shared/sample-index.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "metadata": {
3
- "generatedAt": "2026-03-25T10:11:07.109Z",
3
+ "generatedAt": "2026-03-27T13:55:07.853Z",
4
4
  "buildMode": "ci",
5
5
  "counts": {
6
- "total": 277,
7
- "totalDocs": 48,
6
+ "total": 278,
7
+ "totalDocs": 49,
8
8
  "totalSpecs": 52,
9
9
  "totalSamples": 158,
10
10
  "totalScenarios": 19
11
11
  },
12
12
  "repo": {
13
- "commit": "a4969a42b80c892abf0fda162e8a9e079374f3d1",
13
+ "commit": "5a21bc32d0459841ce1c85972480da7547098c26",
14
14
  "branch": "develop",
15
15
  "repoUrl": "https://github.com/public-ui/kolibri"
16
16
  }
@@ -301,7 +301,7 @@
301
301
  "group": "docs",
302
302
  "name": "CVE_OVERVIEW",
303
303
  "path": "docs/CVE_OVERVIEW.md",
304
- "code": "# CVE Overview\n\n> For more security information, see [SECURITY.md](./SECURITY.md)\n\n## 1. Production Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 0 | 0 | 0 |\n| high | 0 | 0 | 0 | 4 |\n| moderate | 0 | 0 | 0 | 0 |\n| low | 0 | 0 | 0 | 0 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| lodash.pick | high | CVE-2020-8203 | v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 4 | 4 | 4 | 2 |\n| high | 25 | 24 | 35 | 23 |\n| moderate | 7 | 7 | 19 | 1 |\n| low | 3 | 3 | 8 | 0 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| basic-ftp | critical | CVE-2026-27699 | v4, v3, v2 | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method |\n| fast-xml-parser | critical | CVE-2026-25896 | v4, v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| locutus | critical | CVE-2026-25521 | v4, v3, v2, v1 | locutus is vulnerable to Prototype Pollution |\n| locutus | critical | CVE-2026-32304 | v4, v3, v2, v1 | Locutus vulnerable to RCE via unsanitized input in create_function() |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/compiler | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-27970 | v1 | Angular i18n vulnerable to Cross-Site Scripting |\n| @angular/core | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @hono/node-server | high | CVE-2026-29087 | v2 | @hono/node-server has authorization bypass for protected static paths via encode |\n| axios | high | CVE-2026-25639 | v3, v2 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| braces | high | CVE-2024-4068 | v4, v3, v2, v1 | Uncontrolled resource consumption in braces |\n| express-rate-limit | high | CVE-2026-30827 | v2 | express-rate-limit: IPv4-mapped IPv6 addresses bypass per-client rate limiting o |\n| fast-xml-parser | high | CVE-2026-25128 | v4, v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v4, v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| flatted | high | CVE-2026-32141 | v4, v3, v2 | flatted vulnerable to unbounded recursion DoS in parse() revive phase |\n| hono | high | CVE-2026-29045 | v2 | Hono vulnerable to arbitrary file access via serveStatic vulnerability |\n| immutable | high | CVE-2026-29063 | v2 | Immutable is vulnerable to Prototype Pollution |\n| locutus | high | CVE-2026-29091 | v4, v3, v2, v1 | locutus call_user_func_array vulnerable to Remote Code Execution (RCE) due to Co |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v4, v3, v2, v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v4, v3, v2, v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| minimatch | high | CVE-2026-26996 | v4, v3, v2 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| rollup | high | CVE-2026-27606 | v1 | Rollup 4 has Arbitrary File Write via Path Traversal |\n| semver | high | CVE-2022-25883 | v2 | semver vulnerable to Regular Expression Denial of Service |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v4, v3, v2, v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| svgo | high | CVE-2026-29074 | v4, v3, v2, v1 | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs) |\n| tar | high | CVE-2026-24842 | v1 | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave |\n| tar | high | CVE-2026-23745 | v1 | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins |\n| tar | high | CVE-2026-26960 | v4, v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| tar | high | CVE-2026-29786 | v4, v3, v2, v1 | tar has Hardlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-31802 | v4, v3, v2, v1 | node-tar Symlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-23950 | v1 | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on |\n| undici | high | CVE-2026-1528 | v4, v3, v2 | Undici: Malicious WebSocket 64-bit length overflows parser and crashes the clien |\n| undici | high | CVE-2026-1526 | v4, v3, v2 | Undici has Unbounded Memory Consumption in WebSocket permessage-deflate Decompre |\n| undici | high | CVE-2026-2229 | v4, v3, v2 | Undici has Unhandled Exception in WebSocket Client Due to Invalid server_max_win |\n| ajv | moderate | CVE-2025-69873 | v3, v2 | ajv has ReDoS when using `$data` option |\n| ejs | moderate | CVE-2024-33883 | v2 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v2 | esbuild enables any website to send any requests to the development server and r |\n| file-type | moderate | CVE-2026-31808 | v4 | file-type affected by infinite loop in ASF parser on malformed input with zero-s |\n| hono | moderate | CVE-2026-29086 | v2 | Hono Vulnerable to Cookie Attribute Injection via Unsanitized domain and path in |\n| hono | moderate | CVE-2026-29085 | v2 | Hono Vulnerable to SSE Control Field Injection via CR/LF in writeSSE() |\n| hono | moderate | GHSA-v8w9-8mx6-g223 | v2 | Hono vulnerable to Prototype Pollution possible through **proto** key allowed in |\n| js-yaml | moderate | CVE-2025-64718 | v2 | js-yaml has prototype pollution in merge (<<) |\n| micromatch | moderate | CVE-2024-4067 | v4, v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nanoid | moderate | CVE-2024-55565 | v2 | Predictable results in nanoid generation when given non-integer values |\n| qs | moderate | CVE-2025-15284 | v2 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| serialize-javascript | moderate | CVE-2024-11831 | v2 | Cross-site Scripting (XSS) in serialize-javascript |\n| undici | moderate | CVE-2026-1525 | v4, v3, v2 | Undici has an HTTP Request/Response Smuggling issue |\n| undici | moderate | CVE-2026-1527 | v4, v3, v2 | Undici has CRLF Injection in undici via `upgrade` option |\n| undici | moderate | CVE-2026-2581 | v4, v3, v2 | Undici has Unbounded Memory Consumption in its DeduplicationHandler via Response |\n| webpack | moderate | CVE-2024-43788 | v2 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| @tootallnate/once | low | CVE-2026-3449 | v4, v3, v2 | @tootallnate/once vulnerable to Incorrect Control Flow Scoping |\n| diff | low | CVE-2026-24001 | v4, v3, v2 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| fast-xml-parser | low | CVE-2026-27942 | v4, v3, v2 | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| qs | low | CVE-2026-2391 | v2 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| webpack | low | CVE-2025-68458 | v2 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v2 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c |\n",
304
+ "code": "# CVE Overview\n\n> For more security information, see [SECURITY.md](./SECURITY.md)\n\n## 1. Production Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 0 | 0 | 0 |\n| high | 0 | 0 | 0 | 4 |\n| moderate | 0 | 0 | 0 | 0 |\n| low | 0 | 0 | 0 | 0 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| lodash.pick | high | CVE-2020-8203 | v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 4 | 4 | 4 | 2 |\n| high | 28 | 25 | 36 | 23 |\n| moderate | 8 | 8 | 20 | 1 |\n| low | 3 | 3 | 8 | 0 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| basic-ftp | critical | CVE-2026-27699 | v4, v3, v2 | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method |\n| fast-xml-parser | critical | CVE-2026-25896 | v4, v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| locutus | critical | CVE-2026-25521 | v4, v3, v2, v1 | locutus is vulnerable to Prototype Pollution |\n| locutus | critical | CVE-2026-32304 | v4, v3, v2, v1 | Locutus vulnerable to RCE via unsanitized input in create_function() |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/compiler | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-27970 | v1 | Angular i18n vulnerable to Cross-Site Scripting |\n| @angular/core | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @hono/node-server | high | CVE-2026-29087 | v2 | @hono/node-server has authorization bypass for protected static paths via encode |\n| axios | high | CVE-2026-25639 | v3, v2 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| braces | high | CVE-2024-4068 | v4, v3, v2, v1 | Uncontrolled resource consumption in braces |\n| express-rate-limit | high | CVE-2026-30827 | v2 | express-rate-limit: IPv4-mapped IPv6 addresses bypass per-client rate limiting o |\n| fast-xml-parser | high | CVE-2026-25128 | v4, v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v4, v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| fast-xml-parser | high | CVE-2026-33036 | v4, v3, v2 | fast-xml-parser affected by numeric entity expansion bypassing all entity expans |\n| flatted | high | CVE-2026-32141 | v4, v3, v2 | flatted vulnerable to unbounded recursion DoS in parse() revive phase |\n| flatted | high | CVE-2026-33228 | v4, v3, v2 | Prototype Pollution via parse() in NodeJS flatted |\n| hono | high | CVE-2026-29045 | v2 | Hono vulnerable to arbitrary file access via serveStatic vulnerability |\n| immutable | high | CVE-2026-29063 | v2 | Immutable is vulnerable to Prototype Pollution |\n| locutus | high | CVE-2026-29091 | v4, v3, v2, v1 | locutus call_user_func_array vulnerable to Remote Code Execution (RCE) due to Co |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v4, v3, v2, v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v4, v3, v2, v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| minimatch | high | CVE-2026-26996 | v4, v3, v2 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| rollup | high | CVE-2026-27606 | v1 | Rollup 4 has Arbitrary File Write via Path Traversal |\n| semver | high | CVE-2022-25883 | v2 | semver vulnerable to Regular Expression Denial of Service |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v4, v3, v2, v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| socket.io-parser | high | CVE-2026-33151 | v4, v3, v2 | socket.io allows an unbounded number of binary attachments |\n| svgo | high | CVE-2026-29074 | v4, v3, v2, v1 | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs) |\n| tar | high | CVE-2026-24842 | v1 | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave |\n| tar | high | CVE-2026-23745 | v1 | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins |\n| tar | high | CVE-2026-26960 | v4, v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| tar | high | CVE-2026-29786 | v4, v1 | tar has Hardlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-31802 | v4, v1 | node-tar Symlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-23950 | v1 | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on |\n| undici | high | CVE-2026-1528 | v4, v3, v2 | Undici: Malicious WebSocket 64-bit length overflows parser and crashes the clien |\n| undici | high | CVE-2026-1526 | v4, v3, v2 | Undici has Unbounded Memory Consumption in WebSocket permessage-deflate Decompre |\n| undici | high | CVE-2026-2229 | v4, v3, v2 | Undici has Unhandled Exception in WebSocket Client Due to Invalid server_max_win |\n| ajv | moderate | CVE-2025-69873 | v3, v2 | ajv has ReDoS when using `$data` option |\n| ejs | moderate | CVE-2024-33883 | v2 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v2 | esbuild enables any website to send any requests to the development server and r |\n| fast-xml-parser | moderate | CVE-2026-33349 | v4, v3, v2 | Entity Expansion Limits Bypassed When Set to Zero Due to JavaScript Falsy Evalua |\n| file-type | moderate | CVE-2026-31808 | v4 | file-type affected by infinite loop in ASF parser on malformed input with zero-s |\n| hono | moderate | CVE-2026-29086 | v2 | Hono Vulnerable to Cookie Attribute Injection via Unsanitized domain and path in |\n| hono | moderate | CVE-2026-29085 | v2 | Hono Vulnerable to SSE Control Field Injection via CR/LF in writeSSE() |\n| hono | moderate | GHSA-v8w9-8mx6-g223 | v2 | Hono vulnerable to Prototype Pollution possible through **proto** key allowed in |\n| js-yaml | moderate | CVE-2025-64718 | v2 | js-yaml has prototype pollution in merge (<<) |\n| micromatch | moderate | CVE-2024-4067 | v4, v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nanoid | moderate | CVE-2024-55565 | v2 | Predictable results in nanoid generation when given non-integer values |\n| qs | moderate | CVE-2025-15284 | v2 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| serialize-javascript | moderate | CVE-2024-11831 | v2 | Cross-site Scripting (XSS) in serialize-javascript |\n| undici | moderate | CVE-2026-1525 | v4, v3, v2 | Undici has an HTTP Request/Response Smuggling issue |\n| undici | moderate | CVE-2026-1527 | v4, v3, v2 | Undici has CRLF Injection in undici via `upgrade` option |\n| undici | moderate | CVE-2026-2581 | v4, v3, v2 | Undici has Unbounded Memory Consumption in its DeduplicationHandler via Response |\n| webpack | moderate | CVE-2024-43788 | v2 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| @tootallnate/once | low | CVE-2026-3449 | v4, v3, v2 | @tootallnate/once vulnerable to Incorrect Control Flow Scoping |\n| diff | low | CVE-2026-24001 | v4, v3, v2 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| fast-xml-parser | low | CVE-2026-27942 | v4, v3, v2 | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| qs | low | CVE-2026-2391 | v2 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| webpack | low | CVE-2025-68458 | v2 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v2 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c |\n",
305
305
  "kind": "doc"
306
306
  },
307
307
  {
@@ -312,6 +312,14 @@
312
312
  "code": "# Definition of Done (DoD)\n\nBei der Erstellung von Pull Requests (PR) wurde bisher eine DoD-Liste erzeugt. Folgende Einträge waren in der Liste:\n\n- Meaningful title for the release notes\n- Pull request is linked to a problem\n- All changes relate to the problem\n- A11y tests performed successfully or not relevant\n- Manual test performed successfully (by reviewer) or not relevant\n\nDie Checkbox-Liste wurde in einem Gateway geprüft. Wenn nicht alle Punkte abgehakt waren, befand sich der PR im Fehlerstatus. Dadurch konnte man in der Übersicht der PRs nicht erkennen, welche PRs bereit zum Review sind, da von außen betrachtet nicht alle Quality-Gateways erfolgreich waren. Dies erschwerte das Bearbeiten der PRs erheblich.\n\nWeiterhin soll aber darauf geachtet werden, dass jeder Pull-Request\n\n- einen ausdrucksstarken Titel hat, da er in die Release-Notes übernommen wird\n- immer einem Issue zugeordnet ist und\n- alle Änderungen auch nur genau mit diesem Ticket zu haben.\n\nSollte das Ticket einen A11y-Test benötigen, ist ein neues Ticket anzulegen, in dem der Test beschrieben wird. Dieser kann dann vom Barrierefreiheitsteam bearbeitet werden.\n\nDer manuelle Test ist vom Reviewer durchzuführen. Dieser gibt den PR nur frei, wenn auch der manuelle Test erfolgreich war.\n",
313
313
  "kind": "doc"
314
314
  },
315
+ {
316
+ "id": "doc/FOCUS_PROPAGATION_CONCEPT",
317
+ "group": "docs",
318
+ "name": "FOCUS_PROPAGATION_CONCEPT",
319
+ "path": "docs/FOCUS_PROPAGATION_CONCEPT.md",
320
+ "code": "# Focus Propagation Concept\n\nBeschreibt, wie der Focus durch die KoliBri-Komponentenschichten delegiert wird: Shadow DOM → (optional Light DOM) → HTML5-Element.\n\n## Überblick\n\nKoliBri Web Components verwenden Shadow DOM für Style-Isolation. Da der Browser fokussierbare Elemente innerhalb eines Shadow DOM nicht direkt ansteuern kann, muss der Focus programmatisch von der öffentlichen Shadow-Komponente an das tatsächlich fokussierbare HTML5-Element weitergeleitet werden.\n\nDie zentrale Herausforderung: Bevor der Focus gesetzt werden kann, müssen die Adopted Style Sheets geladen und angewendet sein. Ohne diese Absicherung kann es zu Race Conditions kommen — der Focus wird auf ein Element gesetzt, das noch nicht vollständig gerendert ist.\n\n## Architektur\n\n### Zwei Varianten der Focus-Delegation\n\nEs gibt zwei Varianten, je nach Komponentenaufbau:\n\n**Variante A: Shadow → Light DOM WC → HTML5-Element** (z. B. `kol-button`)\n\n```\n┌─────────────────────────────────────────────────────────┐\n│ Shadow Component: kol-button (shadow: true) │\n│ focus() → delegateFocus(host, () => setFocus(wcRef)) │\n└─────────────────────────┬───────────────────────────────┘\n ↓\n┌─────────────────────────────────────────────────────────┐\n│ Light DOM Component: kol-button-wc (shadow: false) │\n│ focus() → setFocus(buttonRef) │\n└─────────────────────────┬───────────────────────────────┘\n ↓\n┌─────────────────────────────────────────────────────────┐\n│ HTML5 Element: <button> │\n│ Tatsächlich fokussierbar │\n└─────────────────────────────────────────────────────────┘\n```\n\n**Variante B: Shadow → HTML5-Element direkt** (z. B. `kol-input-text`)\n\n```\n┌─────────────────────────────────────────────────────────┐\n│ Shadow Component: kol-input-text (shadow: true) │\n│ focus() → delegateFocus(host, () => setFocus(inputRef)) │\n└─────────────────────────┬───────────────────────────────┘\n ↓\n┌─────────────────────────────────────────────────────────┐\n│ HTML5 Element: <input> │\n│ Tatsächlich fokussierbar │\n└─────────────────────────────────────────────────────────┘\n```\n\n### Das `data-themed`-Attribut\n\nDas Theme-System setzt das `data-themed`-Attribut auf Shadow-Komponenten, sobald die Adopted Style Sheets geladen sind. Der Ablauf:\n\n1. **Theme-Registrierung:** Beim Bootstrapping werden Themes über `register()` aus dem `adopted-style-sheets`-Paket registriert (`packages/components/src/core/bootstrap.ts`).\n\n2. **Style-Anwendung:** Stencils `setMode()`-Callback wird für jede Komponente aufgerufen (`packages/components/src/global/script.ts`). Dort wird `setThemeStyle(elm, getThemeDetails(elm))` aufgerufen, um die Adopted Style Sheets in den Shadow DOM zu injizieren.\n\n3. **Markierung:** `setThemeStyle()` setzt nach erfolgreicher Style-Anwendung das `data-themed`-Attribut auf dem Host-Element.\n\n## Utility Functions\n\nDatei: `packages/components/src/utils/element-focus.ts`\n\n### `delegateFocus(host, callback)`\n\nZentrale Focus-Delegations-Funktion für **Shadow Components** (`shadow: true`). Wartet auf die Theme-Bereitschaft des Host-Elements und führt dann die Focus-Callback-Funktion aus.\n\n```typescript\nexport async function delegateFocus(host: HTMLElement, callback: () => Promise<void>): Promise<void> {\n\ttry {\n\t\tif (!host.hasAttribute('data-themed')) {\n\t\t\tawait waitForThemed(host);\n\t\t}\n\t\tawait callback();\n\t} catch {\n\t\tthrow new Error(\n\t\t\t`The interactive element inside the KoliBri web component could not be focused. Try calling the focus method on the web component after a short delay again.`,\n\t\t);\n\t}\n}\n```\n\n**Parameter:**\n\n- `host` — Das Shadow Component Host-Element (`this.host!`)\n- `callback` — Async Funktion, die `setFocus()` auf dem Ziel-Element aufruft\n\n**Verhalten:**\n\n1. Prüft, ob `data-themed` bereits gesetzt ist\n2. Falls nicht: wartet über `waitForThemed()` (MutationObserver) bis maximal 5 Sekunden\n3. Ruft dann den `callback` auf, der den eigentlichen Focus setzt\n4. Bei Fehler (Timeout oder Focus-Fehler): wirft einen benutzerfreundlichen Fehler\n\n### `setFocus(element)`\n\nFokussiert ein HTML-Element durch wiederholte Versuche pro Animation Frame. Wird sowohl in Shadow- als auch in Light-DOM-Komponenten verwendet.\n\n```typescript\nexport async function setFocus(element: HTMLElement): Promise<void> {\n\tlet attempts = 0;\n\tdo {\n\t\tif (element) {\n\t\t\telement.focus();\n\t\t}\n\t\tawait new Promise((r) => requestAnimationFrame(r));\n\t\tattempts++;\n\t} while (!isActiveElement(element) && attempts < MAX_FOCUS_ATTEMPTS);\n}\n```\n\n**Verhalten:**\n\n- Ruft `element.focus()` auf und prüft pro Animation Frame, ob das Element fokussiert ist\n- Maximal `MAX_FOCUS_ATTEMPTS` (10) Versuche\n- Nutzt `isActiveElement()` für korrekte Focus-Erkennung innerhalb von Shadow DOMs\n\n### `isActiveElement(element)` (intern)\n\nPrüft, ob ein Element aktuell fokussiert ist. Berücksichtigt dabei korrekt die Shadow-DOM-Grenze.\n\n```typescript\nfunction isActiveElement(element: HTMLElement): boolean {\n\tconst root = element.getRootNode();\n\tif (root instanceof ShadowRoot) {\n\t\treturn root.activeElement === element;\n\t}\n\treturn document.activeElement === element;\n}\n```\n\n**Warum nötig:** `document.activeElement` zeigt bei fokussierten Elementen innerhalb eines Shadow DOM nur den Shadow Host, nicht das tatsächlich fokussierte Element. Daher wird `shadowRoot.activeElement` geprüft.\n\n### `waitForThemed(host)` (intern)\n\nWartet per MutationObserver darauf, dass das `data-themed`-Attribut auf dem Host-Element gesetzt wird.\n\n```typescript\nfunction waitForThemed(host: HTMLElement): Promise<void> {\n\treturn new Promise<void>((resolve, reject) => {\n\t\tconst observer = new MutationObserver(() => {\n\t\t\tif (host.hasAttribute('data-themed')) {\n\t\t\t\tclearTimeout(timeoutId);\n\t\t\t\tobserver.disconnect();\n\t\t\t\tresolve();\n\t\t\t}\n\t\t});\n\n\t\tconst timeoutId = setTimeout(() => {\n\t\t\tobserver.disconnect();\n\t\t\treject(new Error('Timeout waiting for data-themed attribute'));\n\t\t}, MAX_TIMEOUT_DURATION);\n\n\t\tobserver.observe(host, {\n\t\t\tattributes: true,\n\t\t\tattributeFilter: ['data-themed'],\n\t\t});\n\t});\n}\n```\n\n**Verhalten:**\n\n- Beobachtet Attribut-Änderungen auf dem Host-Element\n- Resolved sofort, wenn `data-themed` gesetzt wird\n- Timeout nach `MAX_TIMEOUT_DURATION` (5000 ms) mit Error\n\n### Konstanten\n\n```typescript\nconst MAX_FOCUS_ATTEMPTS = 10;\nconst MAX_TIMEOUT_DURATION = 5000;\n```\n\n## Umsetzung in Komponenten\n\n### Interface\n\nAlle fokussierbaren Komponenten implementieren das `FocusableElement`-Interface:\n\n```typescript\nexport interface FocusableElement {\n\tfocus(): Promise<void>;\n}\n```\n\n### Regel 1: Shadow Component (`shadow: true`)\n\n**Immer** `delegateFocus()` mit `setFocus()` verwenden.\n\n#### Variante A: Mit innerem WC-Element\n\nWenn die Shadow-Komponente eine Light-DOM-Komponente (`-wc`) rendert:\n\n```typescript\n@Component({ tag: 'kol-button', shadow: true })\nexport class KolButton implements ButtonProps, FocusableElement {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly setButtonWcRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn delegateFocus(this.host!, () => setFocus(this.buttonWcRef!));\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag ref={this.setButtonWcRef} /* ...props */>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\n}\n```\n\nWeitere Beispiele: `kol-link`, `kol-button-link`, `kol-link-button`, `kol-select`, `kol-accordion`, `kol-details`\n\n#### Variante B: Direkt auf HTML5-Element\n\nWenn die Shadow-Komponente das fokussierbare HTML5-Element direkt rendert (ohne `-wc`-Zwischenschicht):\n\n```typescript\n@Component({ tag: 'kol-input-text', shadow: true })\nexport class KolInputText implements InputTextAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate inputRef?: HTMLInputElement;\n\n\tprivate readonly setInputRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\t@Method()\n\tpublic async focus() {\n\t\treturn delegateFocus(this.host!, () => setFocus(this.inputRef!));\n\t}\n}\n```\n\nWeitere Beispiele: `kol-input-email`, `kol-input-number`, `kol-input-file`, `kol-textarea`, `kol-combobox`, `kol-single-select`, `kol-input-radio`\n\n### Regel 2: Light DOM Component (`shadow: false`)\n\n**Nur** `setFocus()` verwenden. Kein `delegateFocus()` nötig, da kein Shadow DOM vorhanden ist und das Theme-System nicht abgewartet werden muss.\n\n```typescript\n@Component({ tag: 'kol-button-wc', shadow: false })\nexport class KolButtonWc implements ButtonAPI, FocusableElement {\n\tprivate buttonRef?: HTMLButtonElement;\n\n\tprivate readonly setButtonRef = (ref?: HTMLButtonElement) => {\n\t\tthis.buttonRef = ref;\n\t};\n\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn setFocus(this.buttonRef!);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button ref={this.setButtonRef}>\n\t\t\t\t\t{/* content */}\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n```\n\n### Zusammenfassung der Regeln\n\n| Komponente | `shadow` | Focus-Methode |\n| ------------------- | -------- | ------------------------------------------------ |\n| Shadow Component | `true` | `delegateFocus(this.host!, () => setFocus(ref))` |\n| Light DOM Component | `false` | `setFocus(ref)` |\n\n**Wichtig:**\n\n- `delegateFocus` darf **nur** in `shadow: true`-Komponenten verwendet werden\n- `setFocus` wird **in beiden Fällen** als eigentliche Focus-Funktion genutzt\n- Ref-Callbacks speichern die Referenz zum Ziel-Element (`ref={this.setXxxRef}`)\n- Alle `focus()`-Methoden sind `async` und geben `Promise<void>` zurück\n- Die `@Method()`-Dekorator macht die Methode auf dem Custom Element aufrufbar\n",
321
+ "kind": "doc"
322
+ },
315
323
  {
316
324
  "id": "doc/HOWTO_ICON_FONTS",
317
325
  "group": "docs",
@@ -1717,7 +1725,7 @@
1717
1725
  "group": "scenarios",
1718
1726
  "name": "focus-elements",
1719
1727
  "path": "packages/samples/react/src/scenarios/focus-elements.tsx",
1720
- "code": "import type { FocusableElement } from '@public-ui/components';\nimport {\n\tKolAccordion,\n\tKolAlert,\n\tKolButton,\n\tKolButtonLink,\n\tKolCombobox,\n\tKolDetails,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC, ForwardRefRenderFunction } from 'react';\nimport React, { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { SampleDescription } from '../components/SampleDescription';\n\nconst getFocusElements = () => {\n\tconst focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();\n\tfocusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox className=\"w-full\" _name=\"checkbox\" _label=\"Checkbox\" ref={ref} />);\n\tfocusElements.set('inputColor', (_, ref) => <KolInputColor className=\"w-full\" _name=\"color\" _label=\"Color\" ref={ref} />);\n\tfocusElements.set('inputDate', (_, ref) => <KolInputDate className=\"w-full\" _name=\"date\" _label=\"Date\" ref={ref} />);\n\tfocusElements.set('inputEmail', (_, ref) => <KolInputEmail className=\"w-full\" _name=\"email\" _label=\"Email\" ref={ref} />);\n\tfocusElements.set('inputFile', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"File\" ref={ref} />);\n\tfocusElements.set('inputFileMultiple', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"Files (multiple)\" _multiple ref={ref} />);\n\tfocusElements.set('inputNumber', (_, ref) => <KolInputNumber className=\"w-full\" _name=\"number\" _label=\"Number\" ref={ref} />);\n\tfocusElements.set('inputPassword', (_, ref) => <KolInputPassword className=\"w-full\" _name=\"password\" _label=\"Password\" ref={ref} />);\n\tfocusElements.set('inputRadio', (_, ref) => (\n\t\t<KolInputRadio\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"radio\"\n\t\t\t_label=\"Radio\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_value=\"A\"\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('inputRange', (_, ref) => <KolInputRange className=\"w-full\" _name=\"range\" _label=\"Range\" ref={ref} />);\n\tfocusElements.set('inputText', (_, ref) => <KolInputText className=\"w-full\" _name=\"text\" _label=\"Text\" ref={ref} />);\n\tfocusElements.set('select', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('selectMultiple', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select (multiple)\"\n\t\t\t_multiple\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_rows={2}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('singleSelect', (_, ref) => (\n\t\t<KolSingleSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"singleSelect\"\n\t\t\t_label=\"Single Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('textarea', (_, ref) => <KolTextarea className=\"w-full\" _name=\"textarea\" _label=\"Textarea\" _rows={5} ref={ref} />);\n\tfocusElements.set('accordion', (_, ref) => <KolAccordion className=\"w-full\" _label=\"Accordion here\" ref={ref} />);\n\tfocusElements.set('button', (_, ref) => (\n\t\t<div>\n\t\t\t<KolButton _label=\"Button here\" ref={ref} />\n\t\t</div>\n\t));\n\tfocusElements.set('buttonLink', (_, ref) => <KolButtonLink _label=\"ButtonLink here\" ref={ref} />);\n\tfocusElements.set('combobox', (_, ref) => <KolCombobox className=\"w-full\" _label=\"KolCombobox here\" _suggestions={[]} ref={ref} />);\n\tfocusElements.set('details', (_, ref) => (\n\t\t<KolDetails className=\"w-full\" _label=\"Details here\" ref={ref}>\n\t\t\tdetailed details\n\t\t</KolDetails>\n\t));\n\tfocusElements.set('link', (_, ref) => <KolLink className=\"w-full\" _label=\"Link here\" _href=\"#\" ref={ref} />);\n\tfocusElements.set('linkButton', (_, ref) => (\n\t\t<div>\n\t\t\t<KolLinkButton _label=\"LinkButton here\" _href=\"#\" ref={ref} />\n\t\t</div>\n\t));\n\n\treturn focusElements;\n};\n\ntype FallbackProps = {\n\tinvalidComponent?: boolean;\n};\nconst Fallback = (props: FallbackProps) => {\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst componentNames = [...focusElements.keys()].map((key) => key);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample serves for automated tests of the focus state for input components. When loading one of the examples linked below, focus will be set on\n\t\t\t\t\tthe element initially. When testing manually, you may have to reload the page after opening an example.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t{props.invalidComponent && (\n\t\t\t\t<KolAlert _type=\"error\" _variant=\"card\">\n\t\t\t\t\tComponent not found.\n\t\t\t\t</KolAlert>\n\t\t\t)}\n\n\t\t\t<KolHeading _level={2} _label=\"Focus Test Cases\" />\n\t\t\t<ul>\n\t\t\t\t{componentNames.map((componentName) => (\n\t\t\t\t\t<li key={componentName}>\n\t\t\t\t\t\t<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`} />\n\t\t\t\t\t</li>\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t</>\n\t);\n};\n\nexport const FocusElements: FC = () => {\n\tconst ref = useRef<FocusableElement>(null);\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst [searchParams] = useSearchParams();\n\tconst componentName = searchParams.get('component');\n\n\tuseLayoutEffect(() => {\n\t\tsetTimeout(() => {\n\t\t\t// Timeout not strictly necessary but prevents a layout glitch in snapshots with Playwright.\n\t\t\tvoid ref.current?.focus();\n\t\t}, 500);\n\t}, [ref]);\n\n\tif (componentName) {\n\t\tconst Component = focusElements.get(componentName);\n\t\tif (!Component) {\n\t\t\treturn <Fallback invalidComponent />;\n\t\t}\n\t\tconst Element = forwardRef(Component);\n\n\t\treturn <Element ref={ref} />;\n\t} else {\n\t\treturn <Fallback />;\n\t}\n};\n",
1728
+ "code": "import type { FocusableElement } from '@public-ui/components';\nimport {\n\tKolAccordion,\n\tKolAlert,\n\tKolBadge,\n\tKolButton,\n\tKolButtonLink,\n\tKolCombobox,\n\tKolDetails,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolPopoverButton,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolSkipNav,\n\tKolSplitButton,\n\tKolTabs,\n\tKolTextarea,\n\tKolToolbar,\n\tKolTree,\n\tKolTreeItem,\n} from '@public-ui/react-v19';\nimport type { FC, ForwardRefRenderFunction } from 'react';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { SampleDescription } from '../components/SampleDescription';\n\nconst getFocusElements = () => {\n\t// Blocklist: Components excluded from focus testing (breadcrumb, dialog, drawer, form, modal, nav, pagination)\n\t// These components have special behaviors (navigation, modals, forms, pagination) that conflict with automated focus tests.\n\t// Note: popover-based components (e.g. popoverButton, splitButton) are included since their primary button element is focusable.\n\tconst focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();\n\tfocusElements.set('accordion', (_, ref) => <KolAccordion className=\"w-full\" _label=\"Accordion here\" ref={ref} />);\n\tfocusElements.set('badge', (_, ref) => (\n\t\t<KolBadge\n\t\t\tclassName=\"w-full\"\n\t\t\t_label=\"Badge with button\"\n\t\t\t_smartButton={{ _label: 'Action', _icons: 'kolicon-house', _on: { onClick: () => {} } }}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('button', (_, ref) => <KolButton _label=\"Button here\" ref={ref} />);\n\tfocusElements.set('buttonLink', (_, ref) => <KolButtonLink _label=\"ButtonLink here\" ref={ref} />);\n\tfocusElements.set('combobox', (_, ref) => <KolCombobox className=\"w-full\" _label=\"KolCombobox here\" _suggestions={[]} ref={ref} />);\n\tfocusElements.set('details', (_, ref) => (\n\t\t<KolDetails className=\"w-full\" _label=\"Details here\" ref={ref}>\n\t\t\tdetailed details\n\t\t</KolDetails>\n\t));\n\tfocusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox className=\"w-full\" _name=\"checkbox\" _label=\"Checkbox\" ref={ref} />);\n\tfocusElements.set('inputColor', (_, ref) => <KolInputColor className=\"w-full\" _name=\"color\" _label=\"Color\" ref={ref} />);\n\tfocusElements.set('inputDate', (_, ref) => <KolInputDate className=\"w-full\" _name=\"date\" _label=\"Date\" ref={ref} />);\n\tfocusElements.set('inputEmail', (_, ref) => <KolInputEmail className=\"w-full\" _name=\"email\" _label=\"Email\" ref={ref} />);\n\tfocusElements.set('inputFile', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"File\" ref={ref} />);\n\tfocusElements.set('inputFileMultiple', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"Files (multiple)\" _multiple ref={ref} />);\n\tfocusElements.set('inputNumber', (_, ref) => <KolInputNumber className=\"w-full\" _name=\"number\" _label=\"Number\" ref={ref} />);\n\tfocusElements.set('inputPassword', (_, ref) => <KolInputPassword className=\"w-full\" _name=\"password\" _label=\"Password\" ref={ref} />);\n\tfocusElements.set('inputRadio', (_, ref) => (\n\t\t<KolInputRadio\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"radio\"\n\t\t\t_label=\"Radio\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_value=\"A\"\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('inputRange', (_, ref) => <KolInputRange className=\"w-full\" _name=\"range\" _label=\"Range\" ref={ref} />);\n\tfocusElements.set('inputText', (_, ref) => <KolInputText className=\"w-full\" _name=\"text\" _label=\"Text\" ref={ref} />);\n\tfocusElements.set('link', (_, ref) => <KolLink className=\"w-full\" _label=\"Link here\" _href=\"#\" ref={ref} />);\n\tfocusElements.set('linkButton', (_, ref) => (\n\t\t<div>\n\t\t\t<KolLinkButton _label=\"LinkButton here\" _href=\"#\" ref={ref} />\n\t\t</div>\n\t));\n\tfocusElements.set('popoverButton', (_, ref) => <KolPopoverButton _label=\"PopoverButton here\" ref={ref} />);\n\tfocusElements.set('select', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('selectMultiple', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select (multiple)\"\n\t\t\t_multiple\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_rows={2}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('singleSelect', (_, ref) => (\n\t\t<KolSingleSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"singleSelect\"\n\t\t\t_label=\"Single Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('skipNav', (_, ref) => (\n\t\t<KolSkipNav\n\t\t\t_label=\"SkipNav\"\n\t\t\t_links={[\n\t\t\t\t{\n\t\t\t\t\t_label: 'Skip to main content',\n\t\t\t\t\t_href: '#main',\n\t\t\t\t},\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('splitButton', (_, ref) => <KolSplitButton _label=\"SplitButton here\" ref={ref} />);\n\tfocusElements.set('tabs', (_, ref) => (\n\t\t<KolTabs className=\"w-full\" _label=\"Tabs here\" _tabs={[{ _label: 'Tab 1' }, { _label: 'Tab 2' }, { _label: 'Tab 3' }]} ref={ref}>\n\t\t\tTab content\n\t\t</KolTabs>\n\t));\n\tfocusElements.set('textarea', (_, ref) => <KolTextarea className=\"w-full\" _name=\"textarea\" _label=\"Textarea\" _rows={5} ref={ref} />);\n\tfocusElements.set('toolbar', (_, ref) => (\n\t\t<KolToolbar\n\t\t\tclassName=\"w-full\"\n\t\t\t_label=\"Toolbar here\"\n\t\t\t_items={[\n\t\t\t\t{ type: 'button', _label: 'Action 1' },\n\t\t\t\t{ type: 'button', _label: 'Action 2' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('tree', (_, ref) => (\n\t\t<KolTree className=\"w-full\" _label=\"Tree here\" ref={ref}>\n\t\t\t<KolTreeItem _label=\"1 Home\" _href=\"#\" />\n\t\t\t<KolTreeItem _label=\"2 Products\" _href=\"#\" _open>\n\t\t\t\t<KolTreeItem _label=\"2.1 Electronics\" _href=\"#\" />\n\t\t\t\t<KolTreeItem _label=\"2.2 Furniture\" _href=\"#\" />\n\t\t\t</KolTreeItem>\n\t\t\t<KolTreeItem _label=\"3 Services\" _href=\"#\" />\n\t\t</KolTree>\n\t));\n\n\treturn focusElements;\n};\n\ntype FallbackProps = {\n\tinvalidComponent?: boolean;\n};\nconst Fallback = (props: FallbackProps) => {\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst componentNames = [...focusElements.keys()].map((key) => key);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample serves for automated tests of the focus state for input components. When loading one of the examples linked below, focus will be set on\n\t\t\t\t\tthe element initially. When testing manually, you may have to reload the page after opening an example.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t{props.invalidComponent && (\n\t\t\t\t<KolAlert _type=\"error\" _variant=\"card\">\n\t\t\t\t\tComponent not found.\n\t\t\t\t</KolAlert>\n\t\t\t)}\n\n\t\t\t<KolHeading _level={2} _label=\"Focus Test Cases\" />\n\t\t\t<ul>\n\t\t\t\t{componentNames.map((componentName) => (\n\t\t\t\t\t<li key={componentName}>\n\t\t\t\t\t\t<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`} />\n\t\t\t\t\t</li>\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t</>\n\t);\n};\n\nexport const FocusElements: FC = () => {\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst [searchParams] = useSearchParams();\n\tconst componentName = searchParams.get('component');\n\n\tconst Component = componentName ? focusElements.get(componentName) : undefined;\n\n\t// Memoize the Element component type to prevent unnecessary unmount/remount on re-renders.\n\tconst Element = useMemo(() => (Component ? forwardRef(Component) : null), [Component]);\n\n\t// Callback ref fires whenever a component instance mounts, ensuring focus is set on each mount.\n\tconst focusRef = useCallback(\n\t\t(instance: FocusableElement | null) => {\n\t\t\tif (instance) {\n\t\t\t\tvoid instance.focus();\n\t\t\t}\n\t\t},\n\t\t[componentName],\n\t);\n\n\tif (componentName) {\n\t\tif (!Element) {\n\t\t\treturn <Fallback invalidComponent />;\n\t\t}\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<Element ref={focusRef} />\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn <Fallback />;\n\t}\n};\n",
1721
1729
  "kind": "scenario"
1722
1730
  },
1723
1731
  {
@@ -1837,7 +1845,7 @@
1837
1845
  "group": "spec",
1838
1846
  "name": "accordion",
1839
1847
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/accordion.md",
1840
- "code": "# kol-accordion\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n\nAccordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ----------- |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Gibt die EventCallback-Funktionen an. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------------------------------------------------------------- |\n| | Allows arbitrary HTML to be inserted into the content area of the accordion. |\n\n\n----------------------------------------------\n\n\n",
1848
+ "code": "# kol-accordion\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n\nAccordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ----------- |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Gibt die EventCallback-Funktionen an. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------------------------------------------------------------- |\n| | Allows arbitrary HTML to be inserted into the content area of the accordion. |\n\n\n----------------------------------------------\n\n\n",
1841
1849
  "kind": "spec"
1842
1850
  },
1843
1851
  {
@@ -1877,7 +1885,7 @@
1877
1885
  "group": "spec",
1878
1886
  "name": "button",
1879
1887
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button.md",
1880
- "code": "# kol-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\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",
1888
+ "code": "# kol-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
1881
1889
  "kind": "spec"
1882
1890
  },
1883
1891
  {
@@ -1885,7 +1893,7 @@
1885
1893
  "group": "spec",
1886
1894
  "name": "button-link",
1887
1895
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button-link.md",
1888
- "code": "# kol-button-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.\n\nA button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.\n\nInstead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.\n\nA link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.\n\nSince a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für die Button-Events an. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\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",
1896
+ "code": "# kol-button-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.\n\nA button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.\n\nInstead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.\n\nA link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.\n\nSince a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für die Button-Events an. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
1889
1897
  "kind": "spec"
1890
1898
  },
1891
1899
  {
@@ -1917,7 +1925,7 @@
1917
1925
  "group": "spec",
1918
1926
  "name": "details",
1919
1927
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/details.md",
1920
- "code": "# kol-details\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Details** component allows additional information to be initially shown with a short introductory text,\nwhich is only fully expanded after the user clicks on an arrow icon.\n\nBy default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\nfollowed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\nchanges its orientation from **_right_** to **_down_**.\nThe component can also be closed again to hide the content.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ----------- |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Defines the callback functions for details. | `undefined \\| { onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------------------ |\n| | The content displayed in the detail description. |\n\n\n----------------------------------------------\n\n\n",
1928
+ "code": "# kol-details\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Details** component allows additional information to be initially shown with a short introductory text,\nwhich is only fully expanded after the user clicks on an arrow icon.\n\nBy default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\nfollowed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\nchanges its orientation from **_right_** to **_down_**.\nThe component can also be closed again to hide the content.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ----------- |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Defines the callback functions for details. | `undefined \\| { onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------------------ |\n| | The content displayed in the detail description. |\n\n\n----------------------------------------------\n\n\n",
1921
1929
  "kind": "spec"
1922
1930
  },
1923
1931
  {
@@ -1949,7 +1957,7 @@
1949
1957
  "group": "spec",
1950
1958
  "name": "heading",
1951
1959
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/heading.md",
1952
- "code": "# kol-heading\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Heading** component can be used wherever a heading needs to be displayed. By using the different sizes, content can be clearly structured and pages can be presented effectively and with variety. It separates styling from semantics and enables flexibility.\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| | The heading content. |\n\n\n----------------------------------------------\n\n\n",
1960
+ "code": "# kol-heading\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_secondaryHeadline` | `_secondary-headline` | Defines the text of the secondary headline. | `string \\| undefined` | `undefined` |\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------- |\n| | Inhalt der Überschrift. |\n\n\n----------------------------------------------\n\n\n",
1953
1961
  "kind": "spec"
1954
1962
  },
1955
1963
  {
@@ -2061,7 +2069,7 @@
2061
2069
  "group": "spec",
2062
2070
  "name": "link",
2063
2071
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link.md",
2064
- "code": "# kol-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Sets the target URI of the link or citation source. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n\n----------------------------------------------\n\n\n",
2072
+ "code": "# kol-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Sets the target URI of the link or citation source. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2065
2073
  "kind": "spec"
2066
2074
  },
2067
2075
  {
@@ -2069,7 +2077,7 @@
2069
2077
  "group": "spec",
2070
2078
  "name": "link-button",
2071
2079
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link-button.md",
2072
- "code": "# kol-link-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Defines the target URI of the link. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\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",
2080
+ "code": "# kol-link-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Defines the target URI of the link. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
2073
2081
  "kind": "spec"
2074
2082
  },
2075
2083
  {
@@ -2101,7 +2109,7 @@
2101
2109
  "group": "spec",
2102
2110
  "name": "popover-button",
2103
2111
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/popover-button.md",
2104
- "code": "# kol-popover-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nA button that toggles the visibility of a popover overlay containing arbitrary content.\nThe popover uses the native HTML Popover API for lightweight, non-modal overlays.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_popoverAlign` | `_popover-align` | Defines where to show the Popover preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'bottom'` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShows the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------------------------------------------------- |\n| | The popover content (displayed when the button is clicked). |\n| `\"expert\"` | Custom label content for the button (when `_label` is `false`). |\n\n\n----------------------------------------------\n\n\n",
2112
+ "code": "# kol-popover-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nA button that toggles the visibility of a popover overlay containing arbitrary content.\nThe popover uses the native HTML Popover API for lightweight, non-modal overlays.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_popoverAlign` | `_popover-align` | Defines where to show the Popover preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'bottom'` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShows the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------------------------------------------------- |\n| | The popover content (displayed when the button is clicked). |\n| `\"expert\"` | Custom label content for the button (when `_label` is `false`). |\n\n\n----------------------------------------------\n\n\n",
2105
2113
  "kind": "spec"
2106
2114
  },
2107
2115
  {
@@ -2125,7 +2133,7 @@
2125
2133
  "group": "spec",
2126
2134
  "name": "select",
2127
2135
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/select.md",
2128
- "code": "# kol-select\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown>`\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",
2136
+ "code": "# kol-select\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown>`\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",
2129
2137
  "kind": "spec"
2130
2138
  },
2131
2139
  {
@@ -2149,7 +2157,7 @@
2149
2157
  "group": "spec",
2150
2158
  "name": "skip-nav",
2151
2159
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/skip-nav.md",
2152
- "code": "# kol-skip-nav\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_links` _(required)_ | `_links` | Defines the list of links combined with their labels to render. | `LinkProps[] \\| string` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n\n----------------------------------------------\n\n\n",
2160
+ "code": "# kol-skip-nav\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_links` _(required)_ | `_links` | Defines the list of links combined with their labels to render. | `LinkProps[] \\| string` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2153
2161
  "kind": "spec"
2154
2162
  },
2155
2163
  {
@@ -2165,7 +2173,7 @@
2165
2173
  "group": "spec",
2166
2174
  "name": "split-button",
2167
2175
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/split-button.md",
2168
- "code": "# kol-split-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SplitButton** component can be used to display a two-part button. The primary button is typically used for\na main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `closePopup() => Promise<void>`\n\nCloses the dropdown.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------------------------- |\n| | Allows arbitrary HTML to be inserted into the dropdown. |\n\n\n----------------------------------------------\n\n\n",
2176
+ "code": "# kol-split-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SplitButton** component can be used to display a two-part button. The primary button is typically used for\na main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `closePopup() => Promise<void>`\n\nCloses the dropdown.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------------------------- |\n| | Allows arbitrary HTML to be inserted into the dropdown. |\n\n\n----------------------------------------------\n\n\n",
2169
2177
  "kind": "spec"
2170
2178
  },
2171
2179
  {
@@ -2189,7 +2197,7 @@
2189
2197
  "group": "spec",
2190
2198
  "name": "tabs",
2191
2199
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/tabs.md",
2192
- "code": "# kol-tabs\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_align` | `_align` | Defines the visual orientation of the component. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_behavior` | `_behavior` | Defines which behavior is active. | `\"select-automatic\" \\| \"select-manual\" \\| undefined` | `undefined` |\n| `_hasCreateButton` | `_has-create-button` | Defines whether the element has a create button. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen. | `undefined \\| { onCreate?: EventCallback<Event> \\| undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent \\| KeyboardEvent \\| CustomEvent<any> \\| PointerEvent, number> \\| undefined; }` | `undefined` |\n| `_selected` | `_selected` | Defines which tab is active. | `number \\| undefined` | `0` |\n| `_tabs` _(required)_ | `_tabs` | Defines the tab captions. | `TabButtonProps[] \\| string` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
2200
+ "code": "# kol-tabs\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_align` | `_align` | Defines the visual orientation of the component. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_behavior` | `_behavior` | Defines which behavior is active. | `\"select-automatic\" \\| \"select-manual\" \\| undefined` | `undefined` |\n| `_hasCreateButton` | `_has-create-button` | Defines whether the element has a create button. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen. | `undefined \\| { onCreate?: EventCallback<Event> \\| undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent \\| KeyboardEvent \\| CustomEvent<any> \\| PointerEvent, number> \\| undefined; }` | `undefined` |\n| `_selected` | `_selected` | Defines which tab is active. | `number \\| undefined` | `0` |\n| `_tabs` _(required)_ | `_tabs` | Defines the tab captions. | `TabButtonProps[] \\| string` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the current tab button.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2193
2201
  "kind": "spec"
2194
2202
  },
2195
2203
  {
@@ -2205,7 +2213,7 @@
2205
2213
  "group": "spec",
2206
2214
  "name": "toolbar",
2207
2215
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/toolbar.md",
2208
- "code": "# kol-toolbar\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | ----------- |\n| `_items` _(required)_ | -- | Defines the functional elements of toolbar to render (e.g. kol-link, kol-button). | `ToolbarItemPropType[]` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
2216
+ "code": "# kol-toolbar\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | ----------- |\n| `_items` _(required)_ | -- | Defines the functional elements of toolbar to render (e.g. kol-link, kol-button). | `ToolbarItemPropType[]` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the currently active toolbar item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2209
2217
  "kind": "spec"
2210
2218
  },
2211
2219
  {
@@ -2213,7 +2221,7 @@
2213
2221
  "group": "spec",
2214
2222
  "name": "tree",
2215
2223
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/tree.md",
2216
- "code": "# kol-tree\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
2224
+ "code": "# kol-tree\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the first focusable tree item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2217
2225
  "kind": "spec"
2218
2226
  },
2219
2227
  {