@public-ui/mcp 4.3.1-rc.1 → 4.3.1-rc.4

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 (3) hide show
  1. package/package.json +5 -5
  2. package/shared/sample-index.json +181 -189
  3. package/shared/template-index.json +79 -79
package/shared/sample-index.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "metadata": {
3
- "generatedAt": "2026-08-14T06:56:29.456Z",
3
+ "generatedAt": "2026-09-02T06:55:17.865Z",
4
4
  "buildMode": "ci",
5
5
  "counts": {
6
- "total": 333,
6
+ "total": 332,
7
7
  "totalDocs": 62,
8
8
  "totalSpecs": 53,
9
- "totalSamples": 198,
9
+ "totalSamples": 197,
10
10
  "totalScenarios": 20
11
11
  },
12
12
  "repo": {
13
- "commit": "64ba082b5e4067d702b822d6f35f0b941cfbc3ef",
13
+ "commit": "89a21be5434da22682f598398426ed975b879db4",
14
14
  "branch": "develop",
15
15
  "repoUrl": "https://github.com/public-ui/kolibri"
16
16
  }
@@ -341,7 +341,7 @@
341
341
  "group": "docs",
342
342
  "name": "CVE_OVERVIEW",
343
343
  "path": "docs/CVE_OVERVIEW.md",
344
- "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 | 1 | 0 |\n| high | 1 | 8 | 6 | 8 |\n| moderate | 0 | 6 | 0 | 4 |\n| low | 0 | 1 | 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| seroval | critical | CVE-2026-59940 | v2 | seroval: `seroval.fromJSON()` Promise resolver type confusion invokes attacker-c |\n| brace-expansion | high | CVE-2026-13149 | v1 | brace-expansion: DoS via exponential-time expansion of consecutive non-expanding |\n| brace-expansion | high | CVE-2026-14257 | v4, v1 | brace-expansion: DoS via unbounded expansion length causing an out-of-memory pro |\n| fast-uri | high | CVE-2026-16221 | v3 | fast-uri vulnerable to host confusion via literal backslash authority delimiter |\n| fast-uri | high | CVE-2026-13676 | v3 | fast-uri vulnerable to host confusion via failed IDN canonicalization |\n| find-my-way | high | CVE-2026-47219 | v3 | find-my-way: DDoS with HTTP2 |\n| immutable | high | CVE-2026-59879 | v3, v2, v1 | Immutable.js `List` 32-bit trie overflow → unrecoverable DoS |\n| immutable | high | CVE-2026-59880 | v3, v2, v1 | Immutabl: Hash-collision algorithmic complexity denial of service in Immutable.M |\n| linkify-it | high | CVE-2026-59887 | v3, v2 | linkify-it: Quadratic-complexity DoS via the `mailto:` validator scan-loop on at |\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| postcss | high | GHSA-r28c-9q8g-f849 | v3, v2 | PostCSS: Path Traversal in Previous Source Map Auto-Loading (sourceMappingURL) l |\n| react-router | high | GHSA-qwww-vcr4-c8h2 | v3, v2 | React Router: RSC Mode CSRF Bypass Allows Action Execution Before 400 Response |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| shell-quote | high | CVE-2026-13311 | v2 | shell-quote: Quadratic-complexity Denial of Service in `parse()` (CWE-407) |\n| @hono/node-server | moderate | GHSA-frvp-7c67-39w9 | v3 | Node.js Adapter for Hono: Path traversal in `serve-static` on Windows via encode |\n| brace-expansion | moderate | CVE-2026-45149 | v1 | brace-expansion: Large numeric range defeats documented `max` DoS protection |\n| hono | moderate | CVE-2026-59897 | v3 | Hono: API Gateway v1 adapter can drop a distinct repeated request header value d |\n| hono | moderate | CVE-2026-59896 | v3 | hono/jsx does not isolate context per request, leading to cross-request data dis |\n| hono | moderate | CVE-2026-59895 | v3 | Hono: Server-Side XSS via JSX Escaping Bypass in cx() Utility |\n| protobufjs | moderate | CVE-2026-59876 | v3 | protobufjs: Text Format string map parsing can mutate returned map object protot |\n| protobufjs | moderate | CVE-2026-59877 | v3 | protobufjs: Denial of Service via infinite loop in .proto option parsing |\n| qs | moderate | CVE-2026-8723 | v1 | qs has a remotely triggerable DoS: qs.stringify crashes with TypeError on null/u |\n| react-router-dom | moderate | CVE-2026-53668 | v1 | React Router: Open redirect leading to XSS |\n| serialize-javascript | moderate | CVE-2026-34043 | v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| body-parser | low | CVE-2026-12590 | v3 | body-parser vulnerable to denial of service when invalid limit value silently di |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 3 | 9 | 8 | 5 |\n| high | 23 | 77 | 96 | 45 |\n| moderate | 40 | 61 | 92 | 22 |\n| low | 6 | 12 | 18 | 3 |\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 | v3, v2 | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method |\n| fast-xml-parser | critical | CVE-2026-25896 | v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| handlebars | critical | CVE-2026-33937 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion |\n| locutus | critical | CVE-2026-25521 | v3, v2, v1 | locutus is vulnerable to Prototype Pollution |\n| locutus | critical | CVE-2026-32304 | v3, v2, v1 | Locutus vulnerable to RCE via unsanitized input in create_function() |\n| seroval | critical | CVE-2026-59940 | v4, v3, v2, v1 | seroval: `seroval.fromJSON()` Promise resolver type confusion invokes attacker-c |\n| shell-quote | critical | CVE-2026-9277 | v3 | shell-quote quote() does not escape newlines in object .op values |\n| tar | critical | CVE-2026-59873 | v4, v3, v2, v1 | node-tar: Decompression/parse DoS via unlimited input |\n| websocket-driver | critical | CVE-2026-54466 | v4, v3, v2 | websocket-driver: Message corruption via abuse of protocol length headers |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/common | high | CVE-2026-54268 | v4, v3, v2, v1 | @angular/common: Denial of Service (DoS) via OOM in Date Formatting (formatDate) |\n| @angular/common | high | CVE-2026-54266 | v4, v3, v2, v1 | @angular/common: Weak 32-Bit Cache Key Hashing in `HttpTransferCache` Leading to |\n| @angular/common | high | CVE-2026-50171 | v1 | @angular/common: Denial of Service (DoS) via OOM in Number Formatting (digitsInf |\n| @angular/common | high | CVE-2026-50170 | v1 | @angular/common: Information Leak via Default Caching of Credentialed Requests i |\n| @angular/compiler | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\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| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-54267 | v4, v3, v2, v1 | Angular Client Hydration DOM Clobbering & Response-Cache Poisoning |\n| @hono/node-server | high | CVE-2026-29087 | v2 | @hono/node-server has authorization bypass for protected static paths via encode |\n| adm-zip | high | CVE-2026-39244 | v4 | adm-zip: Crafted ZIP file triggers 4GB memory allocation |\n| axios | high | CVE-2026-42043 | v3, v2 | Axios: Incomplete Fix for CVE-2025-62718 — NO_PROXY Protection Bypassed via RFC |\n| axios | high | CVE-2026-42033 | v3, v2 | Axios: Prototype Pollution Gadgets - Response Tampering, Data Exfiltration, and |\n| axios | high | CVE-2026-42035 | v3, v2 | Axios: Header Injection via Prototype Pollution |\n| axios | high | CVE-2026-25639 | v3, v2 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| axios | high | CVE-2026-42264 | v3, v2 | Axios has prototype pollution read-side gadgets in HTTP adapter that allow crede |\n| axios | high | CVE-2026-44496 | v3, v2 | Axios: Regular Expression Denial of Service (ReDoS) via Cookie Name Injection |\n| axios | high | CVE-2026-44488 | v3, v2 | Allocation of Resources Without Limits or Throttling in Axios |\n| axios | high | CVE-2026-44487 | v3, v2 | Axios: Proxy-Authorization Credential Leak to Origin Server Across HTTP-to-HTTPS |\n| axios | high | CVE-2026-44486 | v3, v2 | Axios: Proxy-Authorization header leaks to redirect target when proxy is re-eval |\n| axios | high | CVE-2026-44495 | v3, v2 | axios Vulnerable to Credential Theft and Response Hijacking via Prototype Pollut |\n| axios | high | CVE-2026-44494 | v3, v2 | axios Vulnerable to Full Man-in-the-Middle via Prototype Pollution Gadget in `co |\n| axios | high | GHSA-gcfj-64vw-6mp9 | v4 | Axios Node HTTP adapter can use an inherited proxy after interceptor config clon |\n| basic-ftp | high | GHSA-6v7q-wjvx-w8wg | v3, v2 | basic-ftp: Incomplete CRLF Injection Protection Allows Arbitrary FTP Command Exe |\n| basic-ftp | high | CVE-2026-41324 | v3, v2 | basic-ftp vulnerable to denial of service via unbounded memory consumption in Cl |\n| basic-ftp | high | CVE-2026-44240 | v3, v2 | basic-ftp allows a malicious FTP server to cause client-side denial of service v |\n| brace-expansion | high | CVE-2026-13149 | v3, v2, v1 | brace-expansion: DoS via exponential-time expansion of consecutive non-expanding |\n| brace-expansion | high | CVE-2026-14257 | v4, v3, v2, v1 | brace-expansion: DoS via unbounded expansion length causing an out-of-memory pro |\n| braces | high | CVE-2024-4068 | v3, v2, v1 | Uncontrolled resource consumption in braces |\n| engine.io | high | CVE-2026-59725 | v3, v2 | Socket.IO: Engine.IO Polling Transport Connection Exhaustion |\n| express-rate-limit | high | CVE-2026-30827 | v2 | express-rate-limit: IPv4-mapped IPv6 addresses bypass per-client rate limiting o |\n| fast-uri | high | CVE-2026-6321 | v2 | fast-uri vulnerable to path traversal via percent-encoded dot segments |\n| fast-uri | high | CVE-2026-6322 | v2 | fast-uri vulnerable to host confusion via percent-encoded authority delimiters |\n| fast-uri | high | CVE-2026-16221 | v3, v2 | fast-uri vulnerable to host confusion via literal backslash authority delimiter |\n| fast-uri | high | CVE-2026-13676 | v3, v2 | fast-uri vulnerable to host confusion via failed IDN canonicalization |\n| fast-xml-parser | high | CVE-2026-25128 | v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| fast-xml-parser | high | CVE-2026-33036 | v3, v2 | fast-xml-parser affected by numeric entity expansion bypassing all entity expans |\n| find-my-way | high | CVE-2026-47219 | v3 | find-my-way: DDoS with HTTP2 |\n| flatted | high | CVE-2026-32141 | v3, v2 | flatted vulnerable to unbounded recursion DoS in parse() revive phase |\n| flatted | high | CVE-2026-33228 | v3, v2 | Prototype Pollution via parse() in NodeJS flatted |\n| form-data | high | CVE-2026-12143 | v3, v2, v1 | form-data: CRLF injection in form-data via unescaped multipart field names and f |\n| handlebars | high | CVE-2026-33938 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion by tampering @part |\n| handlebars | high | CVE-2026-33940 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion when passing an ob |\n| handlebars | high | CVE-2026-33939 | v3, v2, v1 | Handlebars.js has Denial of Service via Malformed Decorator Syntax in Template C |\n| handlebars | high | CVE-2026-33941 | v3, v2, v1 | Handlebars.js has JavaScript Injection in CLI Precompiler via Unescaped Names an |\n| hono | high | CVE-2026-29045 | v2 | Hono vulnerable to arbitrary file access via serveStatic vulnerability |\n| hono | high | CVE-2026-54290 | v2 | hono: CORS Middleware reflects any Origin with credentials when `origin` default |\n| http-proxy-middleware | high | CVE-2026-55603 | v3, v2 | http-proxy-middleware: multipart/form-data field injection via unescaped CRLF in |\n| immutable | high | CVE-2026-59879 | v3, v2, v1 | Immutable.js `List` 32-bit trie overflow → unrecoverable DoS |\n| immutable | high | CVE-2026-59880 | v3, v2, v1 | Immutabl: Hash-collision algorithmic complexity denial of service in Immutable.M |\n| immutable | high | CVE-2026-29063 | v2 | Immutable is vulnerable to Prototype Pollution |\n| js-yaml | high | CVE-2026-59869 | v4, v3, v2 | js-yaml: YAML merge-key chains can force quadratic CPU consumption |\n| linkify-it | high | CVE-2026-59887 | v3, v2 | linkify-it: Quadratic-complexity DoS via the `mailto:` validator scan-loop on at |\n| locutus | high | CVE-2026-29091 | v3, v2, v1 | locutus call_user_func_array vulnerable to Remote Code Execution (RCE) due to Co |\n| lodash | high | CVE-2026-4800 | v3 | lodash vulnerable to Code Injection via `_.template` imports key names |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v3, v2, v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v3, v2, v1 | minimatch ReDoS: nested *() extglobs generate catastrophically backtracking regu |\n| minimatch | high | CVE-2026-26996 | v3, v2 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| node-forge | high | CVE-2026-33896 | v2 | Forge has a basicConstraints bypass in its certificate chain verification (RFC 5 |\n| node-forge | high | CVE-2026-33895 | v2 | Forge has signature forgery in Ed25519 due to missing S > L check |\n| node-forge | high | CVE-2026-33891 | v2 | Forge has Denial of Service via Infinite Loop in BigInteger.modInverse() with Ze |\n| node-forge | high | CVE-2026-33894 | v2 | Forge has signature forgery in RSA-PKCS due to ASN.1 extra field |\n| path-to-regexp | high | CVE-2026-4867 | v3, v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple r |\n| path-to-regexp | high | CVE-2026-4926 | v2 | path-to-regexp vulnerable to Denial of Service via sequential optional groups |\n| piscina | high | CVE-2026-55388 | v4, v3, v2 | piscina: Prototype Pollution Gadget → RCE via inherited options.filename |\n| postcss | high | CVE-2026-45623 | v4, v3, v2 | PostCSS: Arbitrary file read and information disclosure via attacker-controlled |\n| postcss | high | GHSA-r28c-9q8g-f849 | v4, v3, v2 | PostCSS: Path Traversal in Previous Source Map Auto-Loading (sourceMappingURL) l |\n| react-router | high | GHSA-qwww-vcr4-c8h2 | v3, v2 | React Router: RSC Mode CSRF Bypass Allows Action Execution Before 400 Response |\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| shell-quote | high | CVE-2026-13311 | v3, v2 | shell-quote: Quadratic-complexity Denial of Service in `parse()` (CWE-407) |\n| sigstore | high | CVE-2026-48815 | v4, v3, v2, v1 | sigstore's `certificateOIDs` verification constraints are silently dropped and n |\n| socket.io-parser | high | CVE-2026-33151 | v3, v2 | socket.io allows an unbounded number of binary attachments |\n| svgo | high | CVE-2026-29074 | v3, v2, v1 | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs) |\n| svgo | high | GHSA-2p49-hgcm-8545 | v4, v3, v2, v1 | SVGO removeScripts plugin leaves some executable scripts intact |\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 | v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| tar | high | CVE-2026-29786 | v1 | tar has Hardlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-31802 | 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| tar | high | CVE-2026-59874 | v4, v3, v2, v1 | node-tar: Negative tar entry size causes infinite loop in archive replace |\n| tmp | high | CVE-2026-44705 | v4, v3, v2 | tmp has Path Traversal via unsanitized prefix/postfix that enables directory esc |\n| undici | high | CVE-2026-1528 | v3, v2 | Undici: Malicious WebSocket 64-bit length overflows parser and crashes the clien |\n| undici | high | CVE-2026-1526 | v3, v2 | Undici has Unbounded Memory Consumption in WebSocket permessage-deflate Decompre |\n| undici | high | CVE-2026-2229 | v3, v2 | Undici has Unhandled Exception in WebSocket Client Due to Invalid server_max_win |\n| undici | high | CVE-2026-9697 | v4, v3, v2 | undici vulnerable to TLS certificate validation bypass via dropped requestTls in |\n| undici | high | CVE-2026-12151 | v4, v3, v2 | undici WebSocket client vulnerable to denial of service via fragment count bypas |\n| undici | high | CVE-2026-6734 | v4, v3, v2 | undici vulnerable to cross-origin request routing via SOCKS5 proxy pool reuse |\n| vite | high | CVE-2026-39364 | v1 | Vite: `server.fs.deny` bypassed with queries |\n| vite | high | CVE-2026-39363 | v1 | Vite Vulnerable to Arbitrary File Read via Vite Dev Server WebSocket |\n| vite | high | CVE-2026-53571 | v3, v2, v1 | vite: `server.fs.deny` bypass on Windows alternate paths |\n| ws | high | CVE-2026-48779 | v3, v2, v1 | ws: Memory exhaustion DoS from tiny fragments and data chunks |\n| @angular/compiler | moderate | CVE-2026-54265 | v4, v3, v2, v1 | @angular/compiler: Two-Way Property Binding Sanitization Bypass (XSS) |\n| @angular/compiler | moderate | CVE-2026-50557 | v4, v1 | Angular: Template and Attribute Namespace Sanitization Bypass (XSS) |\n| @angular/core | moderate | CVE-2026-50557 | v4, v1 | Angular: Template and Attribute Namespace Sanitization Bypass (XSS) |\n| @angular/core | moderate | CVE-2026-52725 | v4, v1 | @angular/core: Angular Template and Dynamic Component Namespace Bypass leading t |\n| @hono/node-server | moderate | CVE-2026-39406 | v2 | @hono/node-server: Middleware bypass via repeated slashes in serveStatic |\n| @hono/node-server | moderate | GHSA-frvp-7c67-39w9 | v3, v2 | Node.js Adapter for Hono: Path traversal in `serve-static` on Windows via encode |\n| @opentelemetry/core | moderate | CVE-2026-54285 | v1 | OpenTelemetry Core: Unbounded memory allocation in W3C Baggage propagation |\n| @sigstore/core | moderate | CVE-2026-48758 | v4, v3, v2, v1 | @sigstore/core has DSSE payloadType type-binding failure |\n| ajv | moderate | CVE-2025-69873 | v3, v2 | ajv has ReDoS when using `$data` option |\n| axios | moderate | CVE-2025-62718 | v3, v2 | Axios has a NO_PROXY Hostname Normalization Bypass that Leads to SSRF |\n| axios | moderate | CVE-2026-42041 | v3, v2 | Axios: Authentication Bypass via Prototype Pollution Gadget in `validateStatus` |\n| axios | moderate | CVE-2026-42044 | v3, v2 | Axios: Invisible JSON Response Tampering via Prototype Pollution Gadget in `pars |\n| axios | moderate | CVE-2026-42037 | v3, v2 | Axios: CRLF Injection in multipart/form-data body via unsanitized blob.type in f |\n| axios | moderate | CVE-2026-42038 | v3, v2 | Axios: no_proxy bypass via IP alias allows SSRF |\n| axios | moderate | CVE-2026-42034 | v3, v2 | Axios' HTTP adapter-streamed uploads bypass maxBodyLength when maxRedirects: 0 |\n| axios | moderate | CVE-2026-42036 | v3, v2 | Axios: HTTP adapter streamed responses bypass maxContentLength |\n| axios | moderate | CVE-2026-42042 | v3, v2 | Axios: XSRF Token Cross-Origin Leakage via Prototype Pollution Gadget in `withXS |\n| axios | moderate | CVE-2026-40175 | v3, v2 | Axios has Unrestricted Cloud Metadata Exfiltration via Header Injection Chain |\n| axios | moderate | CVE-2026-42039 | v3, v2 | Axios: unbounded recursion in toFormData causes DoS via deeply nested request da |\n| axios | moderate | CVE-2026-44490 | v3, v2 | axios has DoS & Header Injection via Prototype Pollution Read-Side Gadgets in ax |\n| axios | moderate | GHSA-42h9-826w-cgv3 | v4, v3, v2 | Axios: Excessive recursion in formDataToJSON can cause denial of service |\n| axios | moderate | GHSA-pmv8-rq9r-6j72 | v4, v3, v2 | Axios: Deep formToJSON Key Recursion Can Cause Denial of Service |\n| axios | moderate | GHSA-jqh4-m9w3-8hp9 | v4, v3, v2 | Axios: Fetch adapter `ReadableStream` uploads bypass `maxBodyLength` |\n| axios | moderate | GHSA-mmx7-hfxf-jppx | v4, v3, v2 | Axios: Prototype pollution gadgets can alter axios request construction |\n| axios | moderate | GHSA-7q8q-rj6j-mhjq | v4, v3, v2 | Axios: Nested axios option objects can consume polluted prototype values |\n| axios | moderate | GHSA-xj6q-8x83-jv6g | v4 | Axios: Prototype pollution auth subfields can inject Basic auth |\n| axios | moderate | GHSA-f4gw-2p7v-4548 | v4 | Axios: NO_PROXY bypass for 0.0.0.0 local addresses in axios |\n| axios | moderate | GHSA-hcpx-6fm6-wx23 | v4 | Axios form serializer maxDepth bypass via {} metatoken |\n| axios | moderate | GHSA-mwf2-3pr3-8698 | v4 | Axios: HTTP/2 streamed uploads bypass `maxBodyLength` |\n| brace-expansion | moderate | CVE-2026-45149 | v3, v2, v1 | brace-expansion: Large numeric range defeats documented `max` DoS protection |\n| brace-expansion | moderate | CVE-2026-33750 | v3, v2 | brace-expansion: Zero-step sequence causes process hang and memory exhaustion |\n| ejs | moderate | CVE-2024-33883 | v2 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v2 | esbuild enables any website to send any requests to the development server and r |\n| fast-xml-parser | moderate | CVE-2026-33349 | v3, v2 | Entity Expansion Limits Bypassed When Set to Zero Due to JavaScript Falsy Evalua |\n| fast-xml-parser | moderate | CVE-2026-41650 | v3, v2 | fast-xml-parser XMLBuilder: XML Comment and CDATA Injection via Unescaped Delimi |\n| file-type | moderate | CVE-2026-31808 | v4 | file-type affected by infinite loop in ASF parser on malformed input with zero-s |\n| handlebars | moderate | CVE-2026-33916 | v3, v2, v1 | Handlebars.js has Prototype Pollution Leading to XSS through Partial Template In |\n| handlebars | moderate | GHSA-7rx3-28cr-v5wh | v3, v2, v1 | Handlebars.js has a Prototype Method Access Control Gap via Missing __lookupSett |\n| hono | moderate | CVE-2026-29086 | v2 | Hono Vulnerable to Cookie Attribute Injection via Unsanitized domain and path in |\n| hono | moderate | CVE-2026-29085 | v2 | Hono Vulnerable to SSE Control Field Injection via CR/LF in writeSSE() |\n| hono | moderate | GHSA-v8w9-8mx6-g223 | v2 | Hono vulnerable to Prototype Pollution possible through **proto** key allowed in |\n| hono | moderate | GHSA-26pp-8wgv-hjvm | v2 | Hono missing validation of cookie name on write path in setCookie() |\n| hono | moderate | CVE-2026-39410 | v2 | Hono: Non-breaking space prefix bypass in cookie name handling in getCookie() |\n| hono | moderate | CVE-2026-39408 | v2 | Hono: Path traversal in toSSG() allows writing files outside the output director |\n| hono | moderate | CVE-2026-39407 | v2 | Hono: Middleware bypass via repeated slashes in serveStatic |\n| hono | moderate | CVE-2026-39409 | v2 | Hono has incorrect IP matching in ipRestriction() for IPv4-mapped IPv6 addresses |\n| hono | moderate | CVE-2026-44458 | v2 | Hono has CSS Declaration Injection via Style Object Values in JSX SSR |\n| hono | moderate | CVE-2026-44457 | v2 | Hono's Cache Middleware ignores Vary: Authorization / Vary: Cookie leading to cr |\n| hono | moderate | CVE-2026-44456 | v2 | Hono: bodyLimit() can be bypassed for chunked / unknown-length requests |\n| hono | moderate | CVE-2026-44455 | v2 | hono/jsx has Unvalidated JSX Tag Names that May Allow HTML Injection |\n| hono | moderate | CVE-2026-47674 | v2 | Hono: IP Restriction bypasses static deny rules for non-canonical IPv6 |\n| hono | moderate | CVE-2026-47675 | v2 | Hono: Cookie helper does not sanitize sameSite and priority, allowing Set-Cookie |\n| hono | moderate | CVE-2026-47673 | v2 | Hono: JWT middleware accepts any Authorization scheme, not only Bearer |\n| hono | moderate | CVE-2026-47676 | v2 | Hono: app.mount() strips mount prefix using undecoded path, causing incorrect ro |\n| hono | moderate | CVE-2026-56761 | v2 | hono Improperly Handles JSX Attribute Names Allows HTML Injection in hono/jsx SS |\n| hono | moderate | CVE-2026-54288 | v2 | hono: Body Limit Middleware can be bypassed on AWS Lambda by understating `Conte |\n| hono | moderate | CVE-2026-54289 | v2 | hono: Lambda@Edge adapter keeps only the last value of a repeated request header |\n| hono | moderate | CVE-2026-54286 | v2 | hono: Path traversal in `serve-static` on Windows via encoded backslash (`%5C`) |\n| hono | moderate | CVE-2026-54287 | v2 | hono: AWS Lambda adapter merges multiple `Set-Cookie` headers into one value, dr |\n| hono | moderate | CVE-2026-59897 | v3, v2 | Hono: API Gateway v1 adapter can drop a distinct repeated request header value d |\n| hono | moderate | CVE-2026-59895 | v3, v2 | Hono: Server-Side XSS via JSX Escaping Bypass in cx() Utility |\n| hono | moderate | CVE-2026-59896 | v3 | hono/jsx does not isolate context per request, leading to cross-request data dis |\n| http-proxy-middleware | moderate | CVE-2026-55602 | v4, v3, v2 | http-proxy-middleware `router` host+path substring matching allows Host-header-d |\n| ip-address | moderate | CVE-2026-42338 | v4, v2 | ip-address has XSS in Address6 HTML-emitting methods |\n| js-yaml | moderate | CVE-2025-64718 | v2 | js-yaml has prototype pollution in merge (<<) |\n| js-yaml | moderate | CVE-2026-53550 | v4, v3, v2 | JS-YAML: Quadratic-complexity DoS in merge key handling via repeated aliases |\n| launch-editor | moderate | CVE-2026-53632 | v4, v3, v2 | launch-editor: NTLMv2 hash disclosure via UNC path handling on Windows |\n| locutus | moderate | CVE-2026-33993 | v3, v2, v1 | Locutus has Prototype Pollution via **proto** Key Injection in unserialize() |\n| lodash | moderate | CVE-2026-2950 | v3 | lodash vulnerable to Prototype Pollution via array path bypass in `_.unset` and |\n| micromatch | moderate | CVE-2024-4067 | v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nanoid | moderate | CVE-2024-55565 | v2 | Predictable results in nanoid generation when given non-integer values |\n| path-to-regexp | moderate | CVE-2026-4923 | v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple w |\n| postcss | moderate | CVE-2026-41305 | v4, v3, v2 | PostCSS has XSS via Unescaped </style> in its CSS Stringify Output |\n| protobufjs | moderate | CVE-2026-59876 | v3 | protobufjs: Text Format string map parsing can mutate returned map object protot |\n| protobufjs | moderate | CVE-2026-59877 | v3 | protobufjs: Denial of Service via infinite loop in .proto option parsing |\n| qs | moderate | CVE-2026-8723 | v4, v3, v2, v1 | qs has a remotely triggerable DoS: qs.stringify crashes with TypeError on null/u |\n| qs | moderate | CVE-2025-15284 | v2 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| react-router-dom | moderate | CVE-2026-53668 | v1 | React Router: Open redirect leading to XSS |\n| serialize-javascript | moderate | CVE-2026-34043 | v4, v3, v2, v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| serialize-javascript | moderate | CVE-2024-11831 | v2 | Cross-site Scripting (XSS) in serialize-javascript |\n| smol-toml | moderate | GHSA-v3rj-xjv7-4jmq | v3, v2, v1 | smol-toml: Denial of Service via TOML documents containing thousands of consecut |\n| tar | moderate | CVE-2026-53655 | v4, v3, v2, v1 | node-tar applies PAX size override to intermediary GNU long-name/long-link heade |\n| tar | moderate | CVE-2026-59871 | v4, v3, v2, v1 | node-tar: Process crash via PAX numeric path type confusion |\n| tar | moderate | CVE-2026-59875 | v4, v3, v2, v1 | node-tar: Uncaught Exception DoS via NUL byte in PAX path/linkpath records |\n| tar | moderate | GHSA-r292-9mhp-454m | v4, v3, v2, v1 | node-tar: Uncontrolled recursion in mapHas/filesFilter allows uncatchable stack- |\n| undici | moderate | CVE-2026-1525 | v3, v2 | Undici has an HTTP Request/Response Smuggling issue |\n| undici | moderate | CVE-2026-1527 | v3, v2 | Undici has CRLF Injection in undici via `upgrade` option |\n| undici | moderate | CVE-2026-9679 | v4, v3, v2 | undici vulnerable to HTTP header injection via Set-Cookie percent-decoding |\n| undici | moderate | CVE-2026-9678 | v4, v3, v2 | undici vulnerable to cross-user information disclosure via shared cache whitespa |\n| uuid | moderate | CVE-2026-41907 | v4, v3, v2 | uuid: Missing buffer bounds check in v3/v5/v6 when buf is provided |\n| vite | moderate | CVE-2026-39365 | v1 | Vite Vulnerable to Path Traversal in Optimized Deps `.map` Handling |\n| vite | moderate | CVE-2026-53632 | v3, v2, v1 | launch-editor: NTLMv2 hash disclosure via UNC path handling on Windows |\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| webpack-dev-server | moderate | CVE-2026-6402 | v2 | webpack-dev-server vulnerable to cross-origin source code exposure on non-HTTPS |\n| webpack-dev-server | moderate | CVE-2026-9595 | v2 | webpack-dev-server vulnerable to HMR WebSocket interception via permissive user |\n| webpack-dev-server | moderate | CVE-2026-14620 | v4, v3, v2 | webpack-dev-server vulnerable to cross-site request forgery via internal develop |\n| webpack-dev-server | moderate | CVE-2026-14631 | v4, v3, v2 | webpack-dev-server vulnerable to denial of service via a malformed Host or Origi |\n| websocket-driver | moderate | CVE-2026-54490 | v4, v3, v2 | websocket-driver: Resource limit bypass via message compression |\n| ws | moderate | CVE-2026-45736 | v3, v2 | ws: Uninitialized memory disclosure |\n| yaml | moderate | CVE-2026-33532 | v3, v2, v1 | yaml is vulnerable to Stack Overflow via deeply nested YAML collections |\n| @babel/core | low | CVE-2026-49356 | v3, v2, v1 | @babel/core: Arbitrary File Read via sourceMappingURL Comment |\n| @tootallnate/once | low | CVE-2026-3449 | v3, v2, v1 | @tootallnate/once vulnerable to Incorrect Control Flow Scoping |\n| axios | low | CVE-2026-42040 | v3, v2 | Axios: Null Byte Injection via Reverse-Encoding in AxiosURLSearchParams |\n| body-parser | low | CVE-2026-12590 | v4, v3, v2 | body-parser vulnerable to denial of service when invalid limit value silently di |\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 | v3, v2 | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder |\n| handlebars | low | GHSA-442j-39wm-28r2 | v3, v2, v1 | Handlebars.js has a Property Access Validation Bypass in container.lookup |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| hono | low | CVE-2026-44459 | v2 | Hono has improper validation of NumericDate claims (exp, nbf, iat) in JWT verify |\n| qs | low | CVE-2026-2391 | v2 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| undici | low | CVE-2026-6733 | v4, v3, v2 | undici vulnerable to HTTP response queue poisoning via keep-alive socket reuse |\n| undici | low | CVE-2026-11525 | v4, v3, v2 | undici vulnerable to Set-Cookie SameSite attribute downgrade via permissive subs |\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",
344
+ "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 | 2 | 17 | 2 | 16 |\n| moderate | 0 | 12 | 0 | 5 |\n| low | 0 | 2 | 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| @angular/common | high | CVE-2026-68945 | v3 | Angular: Cache-Key Ambiguity in HttpTransferCache Leading to Cross-Request Respo |\n| @angular/compiler | high | CVE-2026-69151 | v3 | Angular i18n: Cross-Site Scripting (XSS) via event-handler attributes |\n| @angular/core | high | CVE-2026-69151 | v3 | Angular i18n: Cross-Site Scripting (XSS) via event-handler attributes |\n| brace-expansion | high | CVE-2026-13149 | v1 | brace-expansion: DoS via exponential-time expansion of consecutive non-expanding |\n| brace-expansion | high | CVE-2026-14257 | v1 | brace-expansion: DoS via unbounded expansion length causing an out-of-memory pro |\n| brace-expansion | high | CVE-2026-69152 | v1 | brace-expansion: DoS via unbounded intermediate arrays, bypassing the CVE-2026-1 |\n| extract-zip | high | CVE-2026-56876 | v1 | extract-zip unvalidated symlink path traversal |\n| fast-uri | high | CVE-2026-18446 | v3, v1 | fast-uri vulnerable to host confusion via backslash authority introducer |\n| fast-uri | high | CVE-2026-16221 | v3 | fast-uri vulnerable to host confusion via literal backslash authority delimiter |\n| fast-uri | high | CVE-2026-13676 | v3 | fast-uri vulnerable to host confusion via failed IDN canonicalization |\n| find-my-way | high | CVE-2026-47219 | v3 | find-my-way: DDoS with HTTP2 |\n| image-size | high | CVE-2025-71330 | v4, v3, v2, v1 | image-size: ICNS parser allows denial of service through an infinite loop |\n| image-size | high | CVE-2025-71329 | v4, v3, v2, v1 | image-size: JXL and HEIF parsers allow denial of service through infinite loops |\n| immutable | high | CVE-2026-59879 | v3, v1 | Immutable.js `List` 32-bit trie overflow → unrecoverable DoS |\n| immutable | high | CVE-2026-59880 | v3, v1 | Immutable: Hash-collision algorithmic complexity denial of service in Immutable. |\n| ip-address | high | CVE-2026-69192 | v3 | ip-address: Address4 decodes leading-zero octets as decimal while resolvers deco |\n| js-yaml | high | GHSA-5p4m-2wfm-xmqj | v1 | JS-YAML: Quadratic CPU consumption in !!omap resolution (3.x and 4.x) — CVE-2026 |\n| linkify-it | high | CVE-2026-59887 | v3 | linkify-it: Quadratic-complexity DoS via the `mailto:` validator scan-loop on at |\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| nanoid | high | CVE-2026-67213 | v3, v1 | nanoid: custom generators can loop indefinitely when size is zero |\n| nanoid | high | CVE-2026-67214 | v3 | nanoid: non-secure generators can loop indefinitely with negative size |\n| postcss | high | CVE-2026-73646 | v3 | PostCSS: Path Traversal in Previous Source Map Auto-Loading (sourceMappingURL) l |\n| react-router | high | GHSA-qwww-vcr4-c8h2 | v3 | React Router: RSC Mode CSRF Bypass Allows Action Execution Before 400 Response |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| @hono/node-server | moderate | GHSA-frvp-7c67-39w9 | v3 | Node.js Adapter for Hono: Path traversal in `serve-static` on Windows via encode |\n| brace-expansion | moderate | CVE-2026-45149 | v1 | brace-expansion: Large numeric range defeats documented `max` DoS protection |\n| dompurify | moderate | GHSA-55q2-fjhq-7xh7 | v1 | DOMPurify: IN_PLACE hook removal leaves a detached subtree executable, causing X |\n| hono | moderate | CVE-2026-59897 | v3 | Hono: API Gateway v1 adapter can drop a distinct repeated request header value d |\n| hono | moderate | CVE-2026-59896 | v3 | hono/jsx does not isolate context per request, leading to cross-request data dis |\n| hono | moderate | CVE-2026-59895 | v3 | Hono: Server-Side XSS via JSX Escaping Bypass in cx() Utility |\n| hono | moderate | CVE-2026-69207 | v3 | Hono: ReDoS in CORS middleware via Access-Control-Request-Headers |\n| hono | moderate | CVE-2026-71850 | v3 | Hono: `memo()` retains SSR output across requests, leading to cross-user data di |\n| hono | moderate | CVE-2026-71848 | v3 | Hono: Algorithmic Complexity DoS in Language Middleware |\n| ip-address | moderate | CVE-2026-69198 | v3 | ip-address: a CIDR suffix on the parsed address suppresses special-use classific |\n| ip-address | moderate | CVE-2026-54272 | v3 | ip-address: misclassification of IPv4-mapped/NAT64 IPv6 addresses can bypass SSR |\n| postcss | moderate | CVE-2026-69153 | v3 | PostCSS: incomplete fix of GHSA-6g55-p6wh-862q — attacker-controlled sourceMappi |\n| protobufjs | moderate | CVE-2026-59876 | v3 | protobufjs: Text Format string map parsing can mutate returned map object protot |\n| protobufjs | moderate | CVE-2026-59877 | v3 | protobufjs: Denial of Service via infinite loop in .proto option parsing |\n| qs | moderate | CVE-2026-8723 | v1 | qs has a remotely triggerable DoS: qs.stringify crashes with TypeError on null/u |\n| react-router-dom | moderate | CVE-2026-53668 | v1 | React Router: Open redirect leading to XSS |\n| serialize-javascript | moderate | CVE-2026-34043 | v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| body-parser | low | CVE-2026-12590 | v3 | body-parser vulnerable to denial of service when invalid limit value silently di |\n| hono | low | CVE-2026-71849 | v3 | Hono: Proxy Helper does not remove response headers listed in the `Connection` h |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 9 | 4 | 5 |\n| high | 19 | 106 | 82 | 59 |\n| moderate | 16 | 74 | 65 | 23 |\n| low | 2 | 13 | 13 | 3 |\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 | v3 | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method |\n| fast-xml-parser | critical | CVE-2026-25896 | v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| handlebars | critical | CVE-2026-33937 | v3, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion |\n| locutus | critical | CVE-2026-25521 | v3, v1 | locutus is vulnerable to Prototype Pollution |\n| locutus | critical | CVE-2026-32304 | v3, v2, v1 | Locutus vulnerable to RCE via unsanitized input in create_function() |\n| seroval | critical | CVE-2026-59940 | v3, v2, v1 | seroval: `seroval.fromJSON()` Promise resolver type confusion invokes attacker-c |\n| shell-quote | critical | CVE-2026-9277 | v3 | shell-quote quote() does not escape newlines in object .op values |\n| tar | critical | CVE-2026-59873 | v3, v1 | node-tar: Decompression/parse DoS via unlimited input |\n| websocket-driver | critical | CVE-2026-54466 | v3, v2 | websocket-driver: Message corruption via abuse of protocol length headers |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/common | high | CVE-2026-54268 | v4, v3, v2, v1 | @angular/common: Denial of Service (DoS) via OOM in Date Formatting (formatDate) |\n| @angular/common | high | CVE-2026-54266 | v4, v3, v2, v1 | @angular/common: Weak 32-Bit Cache Key Hashing in `HttpTransferCache` Leading to |\n| @angular/common | high | CVE-2026-50171 | v1 | @angular/common: Denial of Service (DoS) via OOM in Number Formatting (digitsInf |\n| @angular/common | high | CVE-2026-50170 | v1 | @angular/common: Information Leak via Default Caching of Credentialed Requests i |\n| @angular/common | high | CVE-2026-68945 | v4, v3, v2, v1 | Angular: Cache-Key Ambiguity in HttpTransferCache Leading to Cross-Request Respo |\n| @angular/compiler | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\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-69151 | v4, v3, v2, v1 | Angular i18n: Cross-Site Scripting (XSS) via event-handler 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| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-54267 | v4, v3, v2, v1 | Angular Client Hydration DOM Clobbering & Response-Cache Poisoning |\n| @angular/core | high | CVE-2026-69151 | v4, v3, v2, v1 | Angular i18n: Cross-Site Scripting (XSS) via event-handler attributes |\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-42043 | v3 | Axios: Incomplete Fix for CVE-2025-62718 — NO_PROXY Protection Bypassed via RFC |\n| axios | high | CVE-2026-42033 | v3 | Axios: Prototype Pollution Gadgets - Response Tampering, Data Exfiltration, and |\n| axios | high | CVE-2026-42035 | v3 | Axios: Header Injection via Prototype Pollution |\n| axios | high | CVE-2026-25639 | v3 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| axios | high | CVE-2026-42264 | v3 | Axios has prototype pollution read-side gadgets in HTTP adapter that allow crede |\n| axios | high | CVE-2026-44496 | v3 | Axios: Regular Expression Denial of Service (ReDoS) via Cookie Name Injection |\n| axios | high | CVE-2026-44488 | v3 | Allocation of Resources Without Limits or Throttling in Axios |\n| axios | high | CVE-2026-44487 | v3 | Axios: Proxy-Authorization Credential Leak to Origin Server Across HTTP-to-HTTPS |\n| axios | high | CVE-2026-44486 | v3 | Axios: Proxy-Authorization header leaks to redirect target when proxy is re-eval |\n| axios | high | CVE-2026-44495 | v3 | axios Vulnerable to Credential Theft and Response Hijacking via Prototype Pollut |\n| axios | high | CVE-2026-44494 | v3 | axios Vulnerable to Full Man-in-the-Middle via Prototype Pollution Gadget in `co |\n| basic-ftp | high | GHSA-6v7q-wjvx-w8wg | v3 | basic-ftp: Incomplete CRLF Injection Protection Allows Arbitrary FTP Command Exe |\n| basic-ftp | high | CVE-2026-41324 | v3 | basic-ftp vulnerable to denial of service via unbounded memory consumption in Cl |\n| basic-ftp | high | CVE-2026-44240 | v3 | basic-ftp allows a malicious FTP server to cause client-side denial of service v |\n| brace-expansion | high | CVE-2026-13149 | v3, v2, v1 | brace-expansion: DoS via exponential-time expansion of consecutive non-expanding |\n| brace-expansion | high | CVE-2026-14257 | v3, v2, v1 | brace-expansion: DoS via unbounded expansion length causing an out-of-memory pro |\n| brace-expansion | high | CVE-2026-69152 | v3, v2, v1 | brace-expansion: DoS via unbounded intermediate arrays, bypassing the CVE-2026-1 |\n| braces | high | CVE-2024-4068 | v3, v2, v1 | Uncontrolled resource consumption in braces |\n| deepmerge-ts | high | CVE-2026-40345 | v4, v3, v2 | DeepmergeTS has stack exhaustion when merging recursive object graphs |\n| engine.io | high | CVE-2026-59725 | v3, v2 | Socket.IO: Engine.IO Polling Transport Connection Exhaustion |\n| express-rate-limit | high | CVE-2026-30827 | v2 | express-rate-limit: IPv4-mapped IPv6 addresses bypass per-client rate limiting o |\n| extract-zip | high | CVE-2026-56876 | v4, v3, v2, v1 | extract-zip unvalidated symlink path traversal |\n| fast-uri | high | CVE-2026-18446 | v3, v2, v1 | fast-uri vulnerable to host confusion via backslash authority introducer |\n| fast-uri | high | CVE-2026-16221 | v3, v2 | fast-uri vulnerable to host confusion via literal backslash authority delimiter |\n| fast-uri | high | CVE-2026-6321 | v2 | fast-uri vulnerable to path traversal via percent-encoded dot segments |\n| fast-uri | high | CVE-2026-13676 | v3, v2 | fast-uri vulnerable to host confusion via failed IDN canonicalization |\n| fast-uri | high | CVE-2026-6322 | v2 | fast-uri vulnerable to host confusion via percent-encoded authority delimiters |\n| fast-xml-parser | high | CVE-2026-25128 | v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| fast-xml-parser | high | CVE-2026-33036 | v3, v2 | fast-xml-parser affected by numeric entity expansion bypassing all entity expans |\n| find-my-way | high | CVE-2026-47219 | v3 | find-my-way: DDoS with HTTP2 |\n| flatted | high | CVE-2026-32141 | v3, v2 | flatted vulnerable to unbounded recursion DoS in parse() revive phase |\n| flatted | high | CVE-2026-33228 | v3, v2 | Prototype Pollution via parse() in NodeJS flatted |\n| form-data | high | CVE-2026-12143 | v3, v2, v1 | form-data: CRLF injection in form-data via unescaped multipart field names and f |\n| handlebars | high | CVE-2026-33938 | v3, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion by tampering @part |\n| handlebars | high | CVE-2026-33940 | v3, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion when passing an ob |\n| handlebars | high | CVE-2026-33939 | v3, v1 | Handlebars.js has Denial of Service via Malformed Decorator Syntax in Template C |\n| handlebars | high | CVE-2026-33941 | v3, v1 | Handlebars.js has JavaScript Injection in CLI Precompiler via Unescaped Names an |\n| hono | high | CVE-2026-29045 | v2 | Hono vulnerable to arbitrary file access via serveStatic vulnerability |\n| hono | high | CVE-2026-54290 | v2 | hono: CORS Middleware reflects any Origin with credentials when `origin` default |\n| http-proxy-middleware | high | CVE-2026-55603 | v3 | http-proxy-middleware: multipart/form-data field injection via unescaped CRLF in |\n| image-size | high | CVE-2025-71330 | v4, v3, v2, v1 | image-size: ICNS parser allows denial of service through an infinite loop |\n| image-size | high | CVE-2025-71329 | v4, v3, v2, v1 | image-size: JXL and HEIF parsers allow denial of service through infinite loops |\n| immutable | high | CVE-2026-59879 | v3, v2, v1 | Immutable.js `List` 32-bit trie overflow → unrecoverable DoS |\n| immutable | high | CVE-2026-59880 | v3, v2, v1 | Immutable: Hash-collision algorithmic complexity denial of service in Immutable. |\n| immutable | high | CVE-2026-29063 | v2 | Immutable is vulnerable to Prototype Pollution |\n| ip-address | high | CVE-2026-69192 | v3, v2 | ip-address: Address4 decodes leading-zero octets as decimal while resolvers deco |\n| js-yaml | high | GHSA-5p4m-2wfm-xmqj | v3, v2, v1 | JS-YAML: Quadratic CPU consumption in !!omap resolution (3.x and 4.x) — CVE-2026 |\n| js-yaml | high | CVE-2026-59869 | v3, v2 | js-yaml: YAML merge-key chains can force quadratic CPU consumption |\n| linkify-it | high | CVE-2026-59887 | v3 | linkify-it: Quadratic-complexity DoS via the `mailto:` validator scan-loop on at |\n| locutus | high | CVE-2026-29091 | v3, v2, v1 | locutus call_user_func_array vulnerable to Remote Code Execution (RCE) due to Co |\n| lodash | high | CVE-2026-4800 | v3 | lodash vulnerable to Code Injection via `_.template` imports key names |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v3, v2, v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v3, v2, v1 | minimatch ReDoS: nested *() extglobs generate catastrophically backtracking regu |\n| minimatch | high | CVE-2026-26996 | v3, v2 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| nanoid | high | CVE-2026-67213 | v3, v1 | nanoid: custom generators can loop indefinitely when size is zero |\n| nanoid | high | CVE-2026-67214 | v3 | nanoid: non-secure generators can loop indefinitely with negative size |\n| node-forge | high | CVE-2026-33896 | v2 | Forge has a basicConstraints bypass in its certificate chain verification (RFC 5 |\n| node-forge | high | CVE-2026-33895 | v2 | Forge has signature forgery in Ed25519 due to missing S > L check |\n| node-forge | high | CVE-2026-33891 | v2 | Forge has Denial of Service via Infinite Loop in BigInteger.modInverse() with Ze |\n| node-forge | high | CVE-2026-33894 | v2 | Forge has signature forgery in RSA-PKCS due to ASN.1 extra field |\n| nx | high | CVE-2026-71476 | v3, v1 | Nx: Zip-Slip in the self-hosted remote cache |\n| pacote | high | CVE-2026-9496 | v3, v2, v1 | pacote is vulnerable to Denial of Service (DoS) via the addGitSha function |\n| path-to-regexp | high | CVE-2026-4867 | v3, v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple r |\n| path-to-regexp | high | CVE-2026-4926 | v2 | path-to-regexp vulnerable to Denial of Service via sequential optional groups |\n| piscina | high | CVE-2026-55388 | v3 | piscina: Prototype Pollution Gadget → RCE via inherited options.filename |\n| postcss | high | CVE-2026-45623 | v4, v3, v2 | PostCSS: Arbitrary file read and information disclosure via attacker-controlled |\n| postcss | high | CVE-2026-73646 | v4, v3, v2 | PostCSS: Path Traversal in Previous Source Map Auto-Loading (sourceMappingURL) l |\n| react-router | high | GHSA-qwww-vcr4-c8h2 | v3 | React Router: RSC Mode CSRF Bypass Allows Action Execution Before 400 Response |\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| shell-quote | high | CVE-2026-13311 | v3 | shell-quote: Quadratic-complexity Denial of Service in `parse()` (CWE-407) |\n| sigstore | high | CVE-2026-48815 | v3, v2, v1 | sigstore's `certificateOIDs` verification constraints are silently dropped and n |\n| socket.io-parser | high | CVE-2026-33151 | v3, v2 | socket.io allows an unbounded number of binary attachments |\n| socket.io-parser | high | CVE-2026-69185 | v3, v2 | Socket.IO: Zero-attachment Memory Exhaustion |\n| svgo | high | CVE-2026-29074 | v3, v2, v1 | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs) |\n| svgo | high | CVE-2026-73650 | v3, v2, v1 | SVGO removeScripts plugin leaves some executable scripts intact |\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 | v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| tar | high | CVE-2026-29786 | v1 | tar has Hardlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-31802 | 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| tar | high | CVE-2026-59874 | v3, v1 | node-tar: Negative tar entry size causes infinite loop in archive replace |\n| tar | high | CVE-2026-73566 | v3, v2, v1 | node-tar: Uncontrolled recursion in mapHas/filesFilter allows uncatchable stack- |\n| tmp | high | CVE-2026-44705 | v3, v2 | tmp has Path Traversal via unsanitized prefix/postfix that enables directory esc |\n| undici | high | CVE-2026-1528 | v3 | Undici: Malicious WebSocket 64-bit length overflows parser and crashes the clien |\n| undici | high | CVE-2026-1526 | v3 | Undici has Unbounded Memory Consumption in WebSocket permessage-deflate Decompre |\n| undici | high | CVE-2026-2229 | v3 | Undici has Unhandled Exception in WebSocket Client Due to Invalid server_max_win |\n| undici | high | CVE-2026-9697 | v3 | undici vulnerable to TLS certificate validation bypass via dropped requestTls in |\n| undici | high | CVE-2026-12151 | v3 | undici WebSocket client vulnerable to denial of service via fragment count bypas |\n| undici | high | CVE-2026-6734 | v3 | undici vulnerable to cross-origin request routing via SOCKS5 proxy pool reuse |\n| undici | high | CVE-2026-13697 | v3 | undici vulnerable to cross-user information disclosure and parse-time crash via |\n| vite | high | CVE-2026-39364 | v1 | Vite: `server.fs.deny` bypassed with queries |\n| vite | high | CVE-2026-39363 | v1 | Vite Vulnerable to Arbitrary File Read via Vite Dev Server WebSocket |\n| vite | high | CVE-2026-53571 | v3, v1 | vite: `server.fs.deny` bypass on Windows alternate paths |\n| ws | high | CVE-2026-48779 | v3, v2, v1 | ws: Memory exhaustion DoS from tiny fragments and data chunks |\n| @angular/compiler | moderate | CVE-2026-54265 | v4, v3, v2, v1 | @angular/compiler: Two-Way Property Binding Sanitization Bypass (XSS) |\n| @angular/compiler | moderate | CVE-2026-50557 | v4, v1 | Angular: Template and Attribute Namespace Sanitization Bypass (XSS) |\n| @angular/core | moderate | CVE-2026-50557 | v4, v1 | Angular: Template and Attribute Namespace Sanitization Bypass (XSS) |\n| @angular/core | moderate | CVE-2026-52725 | v4, v1 | @angular/core: Angular Template and Dynamic Component Namespace Bypass leading t |\n| @hono/node-server | moderate | CVE-2026-39406 | v2 | @hono/node-server: Middleware bypass via repeated slashes in serveStatic |\n| @hono/node-server | moderate | GHSA-frvp-7c67-39w9 | v3, v2 | Node.js Adapter for Hono: Path traversal in `serve-static` on Windows via encode |\n| @opentelemetry/core | moderate | CVE-2026-54285 | v1 | OpenTelemetry Core: Unbounded memory allocation in W3C Baggage propagation |\n| @sigstore/core | moderate | CVE-2026-48758 | v3, v2, v1 | @sigstore/core has DSSE payloadType type-binding failure |\n| ajv | moderate | CVE-2025-69873 | v3, v2 | ajv has ReDoS when using `$data` option |\n| axios | moderate | CVE-2025-62718 | v3 | Axios has a NO_PROXY Hostname Normalization Bypass that Leads to SSRF |\n| axios | moderate | CVE-2026-42041 | v3 | Axios: Authentication Bypass via Prototype Pollution Gadget in `validateStatus` |\n| axios | moderate | CVE-2026-42044 | v3 | Axios: Invisible JSON Response Tampering via Prototype Pollution Gadget in `pars |\n| axios | moderate | CVE-2026-42037 | v3 | Axios: CRLF Injection in multipart/form-data body via unsanitized blob.type in f |\n| axios | moderate | CVE-2026-42038 | v3 | Axios: no_proxy bypass via IP alias allows SSRF |\n| axios | moderate | CVE-2026-42034 | v3 | Axios' HTTP adapter-streamed uploads bypass maxBodyLength when maxRedirects: 0 |\n| axios | moderate | CVE-2026-42036 | v3 | Axios: HTTP adapter streamed responses bypass maxContentLength |\n| axios | moderate | CVE-2026-42042 | v3 | Axios: XSRF Token Cross-Origin Leakage via Prototype Pollution Gadget in `withXS |\n| axios | moderate | CVE-2026-40175 | v3 | Axios has Unrestricted Cloud Metadata Exfiltration via Header Injection Chain |\n| axios | moderate | CVE-2026-42039 | v3 | Axios: unbounded recursion in toFormData causes DoS via deeply nested request da |\n| axios | moderate | CVE-2026-44490 | v3 | axios has DoS & Header Injection via Prototype Pollution Read-Side Gadgets in ax |\n| axios | moderate | GHSA-42h9-826w-cgv3 | v3 | Axios: Excessive recursion in formDataToJSON can cause denial of service |\n| axios | moderate | GHSA-pmv8-rq9r-6j72 | v3 | Axios: Deep formToJSON Key Recursion Can Cause Denial of Service |\n| axios | moderate | GHSA-jqh4-m9w3-8hp9 | v3 | Axios: Fetch adapter `ReadableStream` uploads bypass `maxBodyLength` |\n| axios | moderate | GHSA-mmx7-hfxf-jppx | v3 | Axios: Prototype pollution gadgets can alter axios request construction |\n| axios | moderate | GHSA-7q8q-rj6j-mhjq | v3 | Axios: Nested axios option objects can consume polluted prototype values |\n| brace-expansion | moderate | CVE-2026-45149 | v3, v2, v1 | brace-expansion: Large numeric range defeats documented `max` DoS protection |\n| brace-expansion | moderate | CVE-2026-33750 | v3, v2 | brace-expansion: Zero-step sequence causes process hang and memory exhaustion |\n| dompurify | moderate | GHSA-55q2-fjhq-7xh7 | v1 | DOMPurify: IN_PLACE hook removal leaves a detached subtree executable, causing X |\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 | v3, v2 | Entity Expansion Limits Bypassed When Set to Zero Due to JavaScript Falsy Evalua |\n| fast-xml-parser | moderate | CVE-2026-41650 | v3, v2 | fast-xml-parser XMLBuilder: XML Comment and CDATA Injection via Unescaped Delimi |\n| file-type | moderate | CVE-2026-31808 | v4 | file-type affected by infinite loop in ASF parser on malformed input with zero-s |\n| handlebars | moderate | CVE-2026-33916 | v3, v1 | Handlebars.js has Prototype Pollution Leading to XSS through Partial Template In |\n| handlebars | moderate | GHSA-7rx3-28cr-v5wh | v3, v1 | Handlebars.js has a Prototype Method Access Control Gap via Missing __lookupSett |\n| hono | moderate | CVE-2026-29086 | v2 | Hono Vulnerable to Cookie Attribute Injection via Unsanitized domain and path in |\n| hono | moderate | CVE-2026-29085 | v2 | Hono Vulnerable to SSE Control Field Injection via CR/LF in writeSSE() |\n| hono | moderate | GHSA-v8w9-8mx6-g223 | v2 | Hono vulnerable to Prototype Pollution possible through **proto** key allowed in |\n| hono | moderate | GHSA-26pp-8wgv-hjvm | v2 | Hono missing validation of cookie name on write path in setCookie() |\n| hono | moderate | CVE-2026-39410 | v2 | Hono: Non-breaking space prefix bypass in cookie name handling in getCookie() |\n| hono | moderate | CVE-2026-39408 | v2 | Hono: Path traversal in toSSG() allows writing files outside the output director |\n| hono | moderate | CVE-2026-39407 | v2 | Hono: Middleware bypass via repeated slashes in serveStatic |\n| hono | moderate | CVE-2026-39409 | v2 | Hono has incorrect IP matching in ipRestriction() for IPv4-mapped IPv6 addresses |\n| hono | moderate | CVE-2026-44458 | v2 | Hono has CSS Declaration Injection via Style Object Values in JSX SSR |\n| hono | moderate | CVE-2026-44457 | v2 | Hono's Cache Middleware ignores Vary: Authorization / Vary: Cookie leading to cr |\n| hono | moderate | CVE-2026-44456 | v2 | Hono: bodyLimit() can be bypassed for chunked / unknown-length requests |\n| hono | moderate | CVE-2026-44455 | v2 | hono/jsx has Unvalidated JSX Tag Names that May Allow HTML Injection |\n| hono | moderate | CVE-2026-47674 | v2 | Hono: IP Restriction bypasses static deny rules for non-canonical IPv6 |\n| hono | moderate | CVE-2026-47675 | v2 | Hono: Cookie helper does not sanitize sameSite and priority, allowing Set-Cookie |\n| hono | moderate | CVE-2026-47673 | v2 | Hono: JWT middleware accepts any Authorization scheme, not only Bearer |\n| hono | moderate | CVE-2026-47676 | v2 | Hono: app.mount() strips mount prefix using undecoded path, causing incorrect ro |\n| hono | moderate | CVE-2026-56761 | v2 | hono Improperly Handles JSX Attribute Names Allows HTML Injection in hono/jsx SS |\n| hono | moderate | CVE-2026-54288 | v2 | hono: Body Limit Middleware can be bypassed on AWS Lambda by understating `Conte |\n| hono | moderate | CVE-2026-54289 | v2 | hono: Lambda@Edge adapter keeps only the last value of a repeated request header |\n| hono | moderate | CVE-2026-54286 | v2 | hono: Path traversal in `serve-static` on Windows via encoded backslash (`%5C`) |\n| hono | moderate | CVE-2026-54287 | v2 | hono: AWS Lambda adapter merges multiple `Set-Cookie` headers into one value, dr |\n| hono | moderate | CVE-2026-59897 | v3, v2 | Hono: API Gateway v1 adapter can drop a distinct repeated request header value d |\n| hono | moderate | CVE-2026-59895 | v3, v2 | Hono: Server-Side XSS via JSX Escaping Bypass in cx() Utility |\n| hono | moderate | CVE-2026-69207 | v3, v2 | Hono: ReDoS in CORS middleware via Access-Control-Request-Headers |\n| hono | moderate | CVE-2026-71850 | v3, v2 | Hono: `memo()` retains SSR output across requests, leading to cross-user data di |\n| hono | moderate | CVE-2026-59896 | v3 | hono/jsx does not isolate context per request, leading to cross-request data dis |\n| hono | moderate | CVE-2026-71848 | v3 | Hono: Algorithmic Complexity DoS in Language Middleware |\n| http-proxy-middleware | moderate | CVE-2026-55602 | v3, v2 | http-proxy-middleware `router` host+path substring matching allows Host-header-d |\n| ip-address | moderate | CVE-2026-42338 | v2 | ip-address has XSS in Address6 HTML-emitting methods |\n| ip-address | moderate | CVE-2026-69198 | v3 | ip-address: a CIDR suffix on the parsed address suppresses special-use classific |\n| ip-address | moderate | CVE-2026-54272 | v3 | ip-address: misclassification of IPv4-mapped/NAT64 IPv6 addresses can bypass SSR |\n| js-yaml | moderate | CVE-2025-64718 | v2 | js-yaml has prototype pollution in merge (<<) |\n| js-yaml | moderate | CVE-2026-53550 | v3, v2 | JS-YAML: Quadratic-complexity DoS in merge key handling via repeated aliases |\n| launch-editor | moderate | CVE-2026-53632 | v3, v2 | launch-editor: NTLMv2 hash disclosure via UNC path handling on Windows |\n| locutus | moderate | CVE-2026-33993 | v3, v2, v1 | Locutus has Prototype Pollution via **proto** Key Injection in unserialize() |\n| locutus | moderate | CVE-2026-33994 | v2 | Locutus Prototype Pollution due to incomplete fix for CVE-2026-25521 |\n| lodash | moderate | CVE-2026-2950 | v3 | lodash vulnerable to Prototype Pollution via array path bypass in `_.unset` and |\n| micromatch | moderate | CVE-2024-4067 | v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nx | moderate | CVE-2026-54753 | v3, v1 | `nx graph` dev server permissive CORS policy |\n| path-to-regexp | moderate | CVE-2026-4923 | v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple w |\n| postcss | moderate | CVE-2026-41305 | v4, v3, v2 | PostCSS has XSS via Unescaped </style> in its CSS Stringify Output |\n| postcss | moderate | CVE-2026-69153 | v4, v3, v2 | PostCSS: incomplete fix of GHSA-6g55-p6wh-862q — attacker-controlled sourceMappi |\n| protobufjs | moderate | CVE-2026-59876 | v3 | protobufjs: Text Format string map parsing can mutate returned map object protot |\n| protobufjs | moderate | CVE-2026-59877 | v3 | protobufjs: Denial of Service via infinite loop in .proto option parsing |\n| qs | moderate | CVE-2026-8723 | v3, v2, v1 | qs has a remotely triggerable DoS: qs.stringify crashes with TypeError on null/u |\n| qs | moderate | CVE-2025-15284 | v2 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| react-router-dom | moderate | CVE-2026-53668 | v1 | React Router: Open redirect leading to XSS |\n| serialize-javascript | moderate | CVE-2026-34043 | v4, v3, v2, v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| serialize-javascript | moderate | CVE-2024-11831 | v2 | Cross-site Scripting (XSS) in serialize-javascript |\n| smol-toml | moderate | GHSA-v3rj-xjv7-4jmq | v3, v1 | smol-toml: Denial of Service via TOML documents containing thousands of consecut |\n| tar | moderate | CVE-2026-53655 | v3, v1 | node-tar applies PAX size override to intermediary GNU long-name/long-link heade |\n| tar | moderate | CVE-2026-59871 | v3, v1 | node-tar: Process crash via PAX numeric path type confusion |\n| tar | moderate | CVE-2026-59875 | v3, v1 | node-tar: Uncaught Exception DoS via NUL byte in PAX path/linkpath records |\n| undici | moderate | CVE-2026-1525 | v3 | Undici has an HTTP Request/Response Smuggling issue |\n| undici | moderate | CVE-2026-1527 | v3 | Undici has CRLF Injection in undici via `upgrade` option |\n| undici | moderate | CVE-2026-9679 | v3 | undici vulnerable to HTTP header injection via Set-Cookie percent-decoding |\n| undici | moderate | CVE-2026-9678 | v3 | undici vulnerable to cross-user information disclosure via shared cache whitespa |\n| undici | moderate | CVE-2026-16728 | v3 | undici vulnerable to downstream response desynchronization via retry interceptor |\n| undici | moderate | CVE-2026-15157 | v3 | undici vulnerable to CRLF Injection via blob-like body 'type' property |\n| undici | moderate | CVE-2026-14643 | v3 | undici vulnerable to cross-user information disclosure via whitespace around equ |\n| undici | moderate | CVE-2026-16729 | v3 | undici vulnerable to cookie attribute injection via unsanitized domain and unpar |\n| uuid | moderate | CVE-2026-41907 | v4, v3, v2 | uuid: Missing buffer bounds check in v3/v5/v6 when buf is provided |\n| vite | moderate | CVE-2026-39365 | v1 | Vite Vulnerable to Path Traversal in Optimized Deps `.map` Handling |\n| vite | moderate | CVE-2026-53632 | v3, v1 | launch-editor: NTLMv2 hash disclosure via UNC path handling on Windows |\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| webpack-dev-server | moderate | CVE-2026-6402 | v2 | webpack-dev-server vulnerable to cross-origin source code exposure on non-HTTPS |\n| webpack-dev-server | moderate | CVE-2026-9595 | v2 | webpack-dev-server vulnerable to HMR WebSocket interception via permissive user |\n| webpack-dev-server | moderate | CVE-2026-14620 | v3, v2 | webpack-dev-server vulnerable to cross-site request forgery via internal develop |\n| webpack-dev-server | moderate | CVE-2026-14631 | v3, v2 | webpack-dev-server vulnerable to denial of service via a malformed Host or Origi |\n| websocket-driver | moderate | CVE-2026-54490 | v3, v2 | websocket-driver: Resource limit bypass via message compression |\n| ws | moderate | CVE-2026-45736 | v3, v2 | ws: Uninitialized memory disclosure |\n| yaml | moderate | CVE-2026-33532 | v3, v2, v1 | yaml is vulnerable to Stack Overflow via deeply nested YAML collections |\n| @babel/core | low | CVE-2026-49356 | v4, v3, v2, v1 | @babel/core: Arbitrary File Read via sourceMappingURL Comment |\n| @tootallnate/once | low | CVE-2026-3449 | v3, v2, v1 | @tootallnate/once vulnerable to Incorrect Control Flow Scoping |\n| axios | low | CVE-2026-42040 | v3 | Axios: Null Byte Injection via Reverse-Encoding in AxiosURLSearchParams |\n| body-parser | low | CVE-2026-12590 | v3, v2 | body-parser vulnerable to denial of service when invalid limit value silently di |\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 | v3, v2 | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder |\n| handlebars | low | GHSA-442j-39wm-28r2 | v3, v1 | Handlebars.js has a Property Access Validation Bypass in container.lookup |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| hono | low | CVE-2026-44459 | v2 | Hono has improper validation of NumericDate claims (exp, nbf, iat) in JWT verify |\n| hono | low | CVE-2026-71849 | v3, v2 | Hono: Proxy Helper does not remove response headers listed in the `Connection` h |\n| qs | low | CVE-2026-2391 | v2 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| undici | low | CVE-2026-11525 | v3 | undici vulnerable to Set-Cookie SameSite attribute downgrade via permissive subs |\n| undici | low | CVE-2026-6733 | v3 | undici vulnerable to HTTP response queue poisoning via keep-alive socket reuse |\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",
345
345
  "kind": "doc"
346
346
  },
347
347
  {
@@ -397,7 +397,7 @@
397
397
  "group": "docs",
398
398
  "name": "LICENSE_REPORTS",
399
399
  "path": "docs/LICENSE_REPORTS.md",
400
- "code": "# License Reports\n\n> Overview of licenses for all packages in Kolibri.\n\n## adapter-angular-v19\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.8.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 19.2.25 | angular |\n| @angular/compiler | MIT | 19.2.25 | angular |\n| @angular/compiler-cli | MIT | 19.2.25 | n/a |\n| @angular/core | MIT | 19.2.21 | angular |\n| @angular/core | MIT | 19.2.21 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v20\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 20.3.25 | angular |\n| @angular/compiler | MIT | 20.3.20 | angular |\n| @angular/compiler-cli | MIT | 20.3.20 | n/a |\n| @angular/core | MIT | 20.3.20 | angular |\n| @angular/core | MIT | 20.3.20 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v21\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 21.2.17 | angular |\n| @angular/compiler | MIT | 21.2.12 | angular |\n| @angular/compiler-cli | MIT | 21.2.12 | n/a |\n| @angular/core | MIT | 21.2.12 | angular |\n| @angular/core | MIT | 21.2.12 | angular |\n| zone.js | MIT | 0.16.2 | Brian Ford |\n\n## adapter-hydrate\n\n| Package | License | Version | Author |\n| -------------------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| chai | MIT | 6.2.2 | Jake Luer |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| mocha | MIT | 11.7.5 | TJ Holowaychuk |\n| mocha-snapshots | MIT | 4.2.0 | Wellington Guimaraes |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n\n## adapter-preact\n\n| Package | License | Version | Author |\n| --------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| preact | MIT | 10.29.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @types/react | MIT | 18.3.31 | n/a |\n| @types/react-dom | MIT | 18.3.7 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react-standalone\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | ------------------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| webpack | MIT | 5.107.2 | Tobias Koppers @sokra |\n| webpack-cli | MIT | 6.0.1 | n/a |\n\n## adapter-solid\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-svelte\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 7.29.7 | The Babel Team (https://babel.dev/team) |\n| svelte | MIT | 5.55.7 | n/a |\n| svelte | MIT | 5.55.7 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-vue\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 7.29.7 | The Babel Team (https://babel.dev/team) |\n| unbuild | MIT | 3.6.1 | n/a |\n| vue | MIT | 3.5.34 | Evan You |\n| vue | MIT | 3.5.34 | Evan You |\n\n## components\n\n| Package | License | Version | Author |\n| ---------------------------------------- | ------------- | ----------- | -------------------------------------------------------------- |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| terser | BSD-2-Clause | 5.48.0 | Mihai Bazon |\n| twig | BSD-2-Clause | 3.0.0 | John Roepke |\n| wcag-contrast | BSD-2-Clause | 3.0.0 | Tom MacWright |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.25 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| stencil-awesome-test | EUPL-1.2 | 1.0.6 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| @floating-ui/dom | MIT | 1.7.6 | atomiks |\n| @public-ui/stencil-angular-output-target | MIT | 0.9.0 | n/a |\n| @public-ui/stencil-react-output-target | MIT | 0.6.0 | n/a |\n| @public-ui/stencil-solid-output-target | MIT | 0.2.0 | Ionic Team |\n| @public-ui/stencil-vue-output-target | MIT | 0.9.0 | n/a |\n| @revolist/svelte-output-target | MIT | 0.0.7 | Ionic Team |\n| @stencil-community/postcss | MIT | 2.2.0 | Ionic Team |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @stencil/playwright | MIT | 0.4.3 | Stencil Team |\n| @stencil/sass | MIT | 3.2.3 | Ionic Team |\n| @types/color-convert | MIT | 2.0.4 | n/a |\n| @types/jest | MIT | 29.5.14 | n/a |\n| @types/lodash-es | MIT | 4.17.12 | n/a |\n| @types/markdown-it | MIT | 14.1.2 | n/a |\n| @types/mustache | MIT | 4.2.6 | n/a |\n| @types/pug | MIT | 2.0.10 | n/a |\n| @types/twig | MIT | 1.12.17 | n/a |\n| @types/wcag-contrast | MIT | 3.0.3 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| color-convert | MIT | 3.1.3 | Josh Junon |\n| color-rgba | MIT | 2.4.0 | Dmitry Yv |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| cssnano | MIT | 8.0.2 | Ben Briggs beneb.info@gmail.com http://beneb.info |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| eslint-plugin-perfectionist | MIT | 5.9.0 | Azat S. |\n| jest | MIT | 29.7.0 | n/a |\n| jest-cli | MIT | 29.7.0 | n/a |\n| lodash-es | MIT | 4.18.1 | John-David Dalton |\n| markdown-it | MIT | 14.2.0 | n/a |\n| mustache | MIT | 4.2.0 | mustache.js Authors |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| postcss-sorting | MIT | 10.0.0 | Aleks Hudochenkov |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| pug | MIT | 3.0.4 | TJ Holowaychuk |\n| rgba-convert | MIT | 0.3.0 | jeromedecoster |\n| stylelint | MIT | 17.13.0 | stylelint |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## icons\n\n| Package | License | Version | Author |\n| ---------------- | ------------- | ------- | ------------------ |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| http-server | MIT | 14.1.1 | n/a |\n| oslllo-svg-fixer | MIT | 6.0.1 | Ghustavh Ehm |\n| svgtofont | MIT | 6.5.2 | Kenny |\n\n## root\n\n| Package | License | Version | Author |\n| --------------------------------- | ---------- | ------- | ------------------------------------------------- |\n| npm-check-updates | Apache-2.0 | 22.2.3 | Tomas Junnonen |\n| @evilmartians/lefthook | MIT | 2.1.9 | mrexox |\n| license-report | MIT | 6.8.5 | BePo65 |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| stylelint | MIT | 17.13.0 | stylelint |\n| stylelint-config-recommended-scss | MIT | 17.0.1 | kristerkari |\n| stylelint-config-standard | MIT | 40.0.0 | Stylelint |\n| stylelint-order | MIT | 8.1.1 | Aleks Hudochenkov |\n| stylelint-scss | MIT | 7.2.0 | Krister Kari |\n\n## sample-react\n\n| Package | License | Version | Author |\n| ---------------------------------- | ----------------- | ----------- | -------------------------------------------------------------- |\n| tslib | 0BSD | 2.8.1 | Microsoft Corp. |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-hook-form-adapter | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-v19 | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.22 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| world_countries_lists | LGPL-3.0-or-later | 3.3.0 | Stefan Gabos |\n| @hookform/resolvers | MIT | 5.4.0 | bluebill1049 |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @types/node | MIT | 25.9.3 | n/a |\n| @types/papaparse | MIT | 5.5.2 | n/a |\n| @types/react | MIT | 19.2.17 | n/a |\n| @types/react-dom | MIT | 19.2.3 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| papaparse | MIT | 5.5.3 | Matthew Holt https://twitter.com/mholt6 |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| react | MIT | 19.2.7 | n/a |\n| react-dom | MIT | 19.2.7 | n/a |\n| react-hook-form | MIT | 7.79.0 | Beier(Bill) Luo |\n| react-number-format | MIT | 5.4.5 | Sudhanshu Yadav |\n| react-router | MIT | 7.17.0 | Remix Software |\n| react-router-dom | MIT | 7.17.0 | Remix Software |\n| stylelint | MIT | 17.13.0 | stylelint |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n\n## theme-bwst\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-default\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-desy\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-ecl\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-kern\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @kern-ux/native | EUPL-1.2 | 2.3.0 | Kern-UX |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## themes\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-kolibri-cli\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| semver | ISC | 7.8.4 | GitHub Inc. |\n| @types/node | MIT | 25.9.3 | n/a |\n| @types/semver | MIT | 7.7.1 | n/a |\n| chalk | MIT | 5.6.2 | n/a |\n| commander | MIT | 14.0.3 | TJ Holowaychuk |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| deepmerge | MIT | 4.3.1 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| gradient-string | MIT | 3.0.0 | Boris K |\n| loglevel | MIT | 1.9.2 | Tim Perry pimterry@gmail.com http://tim-perry.co.uk |\n| mocha | MIT | 11.7.6 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| ts-node | MIT | 10.9.2 | Blake Embrey hello@blakeembrey.com http://blakeembrey.me |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-mcp\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------------------- | ---------- | ---------------------------------------------------- |\n| fuse.js | Apache-2.0 | 7.4.2 | Kiro Risk kirollos@gmail.com http://kiro.me |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| @modelcontextprotocol/sdk | MIT | 1.29.0 | Anthropic, PBC (https://anthropic.com) |\n| @types/express | MIT | 5.0.6 | n/a |\n| @types/node | MIT | 25.9.3 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| express | MIT | 5.2.1 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| tsx | MIT | 4.22.4 | Hiroki Osame hiroki.osame@gmail.com |\n| unbuild | MIT | 3.6.1 | n/a |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @modelcontextprotocol/inspector | SEE LICENSE IN LICENSE | 0.22.0 | Model Context Protocol a Series of LF Projects, LLC. |\n\n## tools-visual-tests\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ----------- | -------------------------------------------------------------- |\n| tslib | 0BSD | 2.8.1 | Microsoft Corp. |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-v19 | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/sample-react | EUPL-1.2 | 4.3.0-rc.5 | n/a |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.22 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| @types/node | MIT | 25.9.2 | n/a |\n| @types/react | MIT | 19.2.17 | n/a |\n| @types/react-dom | MIT | 19.2.3 | n/a |\n| @unocss/preset-mini | MIT | 66.7.0 | Anthony Fu |\n| @unocss/vite | MIT | 66.7.0 | Anthony Fu |\n| @vitejs/plugin-react-swc | MIT | 4.3.1 | Arnaud Barré (https://github.com/ArnaudBarre) |\n| axe-html-reporter | MIT | 2.2.11 | Liliia Pelypenko (liliia.pelypenko@gmail.com) |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| http-server | MIT | 14.1.1 | n/a |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| portfinder | MIT | 1.0.38 | Charlie Robbins |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| react | MIT | 19.2.7 | n/a |\n| react-dom | MIT | 19.2.7 | n/a |\n| react-router-dom | MIT | 7.17.0 | Remix Software |\n| vite | MIT | 8.0.16 | Evan You |\n| @axe-core/playwright | MPL-2.0 | 4.11.3 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n",
400
+ "code": "# License Reports\n\n> Overview of licenses for all packages in Kolibri.\n\n## adapter-angular-v19\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.8.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.6 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 19.2.25 | angular |\n| @angular/compiler | MIT | 19.2.25 | angular |\n| @angular/compiler-cli | MIT | 19.2.25 | n/a |\n| @angular/core | MIT | 19.2.21 | angular |\n| @angular/core | MIT | 19.2.21 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v20\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.6 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 20.3.30 | angular |\n| @angular/compiler | MIT | 20.3.20 | angular |\n| @angular/compiler-cli | MIT | 20.3.20 | n/a |\n| @angular/core | MIT | 20.3.20 | angular |\n| @angular/core | MIT | 20.3.20 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v21\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.6 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 21.2.22 | angular |\n| @angular/compiler | MIT | 21.2.12 | angular |\n| @angular/compiler-cli | MIT | 21.2.12 | n/a |\n| @angular/core | MIT | 21.2.12 | angular |\n| @angular/core | MIT | 21.2.12 | angular |\n| zone.js | MIT | 0.16.2 | Brian Ford |\n\n## adapter-hydrate\n\n| Package | License | Version | Author |\n| -------------------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| chai | MIT | 6.2.2 | Jake Luer |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| mocha | MIT | 11.7.5 | TJ Holowaychuk |\n| mocha-snapshots | MIT | 4.2.0 | Wellington Guimaraes |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n\n## adapter-preact\n\n| Package | License | Version | Author |\n| --------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| preact | MIT | 10.29.8 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.6 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @types/react | MIT | 18.3.31 | n/a |\n| @types/react-dom | MIT | 18.3.7 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react-standalone\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | ------------------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| webpack | MIT | 5.110.0 | Tobias Koppers @sokra |\n| webpack-cli | MIT | 7.2.2 | n/a |\n\n## adapter-solid\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.6 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-svelte\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.6 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 8.0.4 | The Babel Team (https://babel.dev/team) |\n| svelte | MIT | 5.55.7 | n/a |\n| svelte | MIT | 5.55.7 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-vue\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.6 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 8.0.4 | The Babel Team (https://babel.dev/team) |\n| unbuild | MIT | 3.6.1 | n/a |\n| vue | MIT | 3.5.34 | Evan You |\n| vue | MIT | 3.5.34 | Evan You |\n\n## components\n\n| Package | License | Version | Author |\n| ---------------------------------------- | ------------- | ----------- | -------------------------------------------------------------- |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| terser | BSD-2-Clause | 5.51.2 | Mihai Bazon |\n| twig | BSD-2-Clause | 3.0.0 | John Roepke |\n| wcag-contrast | BSD-2-Clause | 3.0.0 | Tom MacWright |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.25 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| stencil-awesome-test | EUPL-1.2 | 1.0.6 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.32.3 | Lars Kappert lars@webpro.nl |\n| @floating-ui/dom | MIT | 1.8.0 | atomiks |\n| @public-ui/stencil-angular-output-target | MIT | 0.9.0 | n/a |\n| @public-ui/stencil-react-output-target | MIT | 0.6.0 | n/a |\n| @public-ui/stencil-solid-output-target | MIT | 0.2.0 | Ionic Team |\n| @public-ui/stencil-vue-output-target | MIT | 0.9.0 | n/a |\n| @revolist/svelte-output-target | MIT | 0.0.7 | Ionic Team |\n| @stencil-community/postcss | MIT | 2.2.0 | Ionic Team |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @stencil/playwright | MIT | 0.5.1 | Stencil Team |\n| @stencil/sass | MIT | 3.3.2 | Ionic Team |\n| @types/jest | MIT | 29.5.14 | n/a |\n| @types/lodash-es | MIT | 4.17.12 | n/a |\n| @types/markdown-it | MIT | 14.2.0 | n/a |\n| @types/mustache | MIT | 4.2.6 | n/a |\n| @types/node | MIT | 26.4.0 | n/a |\n| @types/pug | MIT | 2.0.10 | n/a |\n| @types/twig | MIT | 1.12.17 | n/a |\n| @types/wcag-contrast | MIT | 3.0.3 | n/a |\n| autoprefixer | MIT | 10.5.4 | Andrey Sitnik |\n| color-convert | MIT | 3.1.3 | Josh Junon |\n| color-rgba | MIT | 2.4.0 | Dmitry Yv |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| cssnano | MIT | 8.0.10 | Ben Briggs beneb.info@gmail.com https://beneb.info |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| eslint-plugin-perfectionist | MIT | 5.10.1 | Azat S. |\n| jest | MIT | 29.7.0 | n/a |\n| jest-cli | MIT | 29.7.0 | n/a |\n| lodash-es | MIT | 4.18.1 | John-David Dalton |\n| markdown-it | MIT | 14.3.0 | n/a |\n| mustache | MIT | 4.2.0 | mustache.js Authors |\n| postcss | MIT | 8.5.26 | Andrey Sitnik |\n| postcss-sorting | MIT | 10.0.0 | Aleks Hudochenkov |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| pug | MIT | 3.0.4 | TJ Holowaychuk |\n| rgba-convert | MIT | 0.3.0 | jeromedecoster |\n| stylelint | MIT | 17.14.1 | stylelint |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## icons\n\n| Package | License | Version | Author |\n| ---------------- | ------------- | ------- | ------------------ |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| http-server | MIT | 14.1.1 | n/a |\n| oslllo-svg-fixer | MIT | 6.0.1 | Ghustavh Ehm |\n| svgtofont | MIT | 6.5.3 | Kenny |\n\n## root\n\n| Package | License | Version | Author |\n| --------------------------------- | ---------- | ------- | ------------------------------------------------- |\n| npm-check-updates | Apache-2.0 | 23.1.0 | Tomas Junnonen |\n| @evilmartians/lefthook | MIT | 2.1.10 | mrexox |\n| js-yaml | MIT | 5.4.1 | Vladimir Zapparov |\n| license-report | MIT | 6.8.5 | BePo65 |\n| npm-run-all2 | MIT | 9.0.3 | Toru Nagashima |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| stylelint | MIT | 17.14.1 | stylelint |\n| stylelint-config-recommended-scss | MIT | 17.0.1 | kristerkari |\n| stylelint-config-standard | MIT | 40.0.0 | Stylelint |\n| stylelint-order | MIT | 8.1.1 | Aleks Hudochenkov |\n| stylelint-scss | MIT | 7.2.0 | Krister Kari |\n\n## sample-react\n\n| Package | License | Version | Author |\n| ---------------------------------- | ----------------- | ----------- | -------------------------------------------------------------- |\n| tslib | 0BSD | 2.8.1 | Microsoft Corp. |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-hook-form-adapter | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-v19 | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.25 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.32.3 | Lars Kappert lars@webpro.nl |\n| world_countries_lists | LGPL-3.0-or-later | 3.3.0 | Stefan Gabos |\n| @hookform/resolvers | MIT | 5.9.1 | bluebill1049 |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @types/node | MIT | 26.4.0 | n/a |\n| @types/papaparse | MIT | 5.5.2 | n/a |\n| @types/react | MIT | 19.2.18 | n/a |\n| @types/react-dom | MIT | 19.2.5 | n/a |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| papaparse | MIT | 5.7.0 | Matthew Holt https://twitter.com/mholt6 |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| react | MIT | 19.2.8 | n/a |\n| react-dom | MIT | 19.2.8 | n/a |\n| react-hook-form | MIT | 7.86.0 | Beier(Bill) Luo |\n| react-number-format | MIT | 5.4.5 | Sudhanshu Yadav |\n| react-router | MIT | 8.3.0 | Remix Software |\n| stylelint | MIT | 17.14.1 | stylelint |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n\n## theme-bwst\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.4 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 9.0.3 | Toru Nagashima |\n| postcss | MIT | 8.5.26 | Andrey Sitnik |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.63.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.103.1 | Google Inc. |\n| stylelint | MIT | 17.14.1 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-default\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.4 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 9.0.3 | Toru Nagashima |\n| postcss | MIT | 8.5.26 | Andrey Sitnik |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.63.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.103.1 | Google Inc. |\n| stylelint | MIT | 17.14.1 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-desy\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.4 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 9.0.3 | Toru Nagashima |\n| postcss | MIT | 8.5.26 | Andrey Sitnik |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.63.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.103.1 | Google Inc. |\n| stylelint | MIT | 17.14.1 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-ecl\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.4 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 9.0.3 | Toru Nagashima |\n| postcss | MIT | 8.5.26 | Andrey Sitnik |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.63.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.103.1 | Google Inc. |\n| stylelint | MIT | 17.14.1 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-kern\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @kern-ux/native | EUPL-1.2 | 2.3.0 | Kern-UX |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.4 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 9.0.3 | Toru Nagashima |\n| postcss | MIT | 8.5.26 | Andrey Sitnik |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.63.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.103.1 | Google Inc. |\n| stylelint | MIT | 17.14.1 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## themes\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.4 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 9.0.3 | Toru Nagashima |\n| postcss | MIT | 8.5.26 | Andrey Sitnik |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.63.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.103.1 | Google Inc. |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-kolibri-cli\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.32.3 | Lars Kappert lars@webpro.nl |\n| semver | ISC | 7.8.5 | GitHub Inc. |\n| @types/node | MIT | 26.4.0 | n/a |\n| @types/semver | MIT | 7.8.0 | n/a |\n| chalk | MIT | 6.0.0 | n/a |\n| commander | MIT | 15.0.0 | TJ Holowaychuk |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| deepmerge | MIT | 4.3.1 | n/a |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| gradient-string | MIT | 3.0.0 | Boris K |\n| loglevel | MIT | 1.9.2 | Tim Perry pimterry@gmail.com http://tim-perry.co.uk |\n| mocha | MIT | 11.8.0 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| ts-node | MIT | 10.9.2 | Blake Embrey hello@blakeembrey.com http://blakeembrey.me |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-mcp\n\n| Package | License | Version | Author |\n| -------------------------------- | ------------- | ---------- | -------------------------------------------------- |\n| fuse.js | Apache-2.0 | 7.5.0 | Kiro Risk kirollos@gmail.com http://kiro.me |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| glob | BlueOak-1.0.0 | 13.0.6 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.32.3 | Lars Kappert lars@webpro.nl |\n| @modelcontextprotocol/inspector | MIT | 2.4.0 | The MCP Maintainers and Community |\n| @modelcontextprotocol/sdk | MIT | 1.30.0 | Anthropic, PBC (https://anthropic.com) |\n| @types/express | MIT | 5.0.6 | n/a |\n| @types/node | MIT | 26.4.0 | n/a |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| express | MIT | 5.2.1 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| simple-git | MIT | 3.36.0 | Steve King |\n| tsx | MIT | 4.23.12 | Hiroki Osame hiroki.osame@gmail.com |\n| unbuild | MIT | 3.6.1 | n/a |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-visual-tests\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ----------- | -------------------------------------------------------------- |\n| tslib | 0BSD | 2.8.1 | Microsoft Corp. |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-v19 | EUPL-1.2 | 4.3.1-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/sample-react | EUPL-1.2 | 4.3.1-rc.1 | n/a |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.25 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.32.3 | Lars Kappert lars@webpro.nl |\n| @types/node | MIT | 26.4.0 | n/a |\n| @types/react | MIT | 19.2.18 | n/a |\n| @types/react-dom | MIT | 19.2.5 | n/a |\n| @unocss/preset-mini | MIT | 66.8.1 | Anthony Fu |\n| @unocss/vite | MIT | 66.8.1 | Anthony Fu |\n| @vitejs/plugin-react-swc | MIT | 4.3.3 | Arnaud Barré (https://github.com/ArnaudBarre) |\n| axe-html-reporter | MIT | 2.2.11 | Liliia Pelypenko (liliia.pelypenko@gmail.com) |\n| eslint | MIT | 9.39.5 | Nicholas C. Zakas |\n| http-server | MIT | 14.1.1 | n/a |\n| npm-run-all2 | MIT | 9.0.3 | Toru Nagashima |\n| portfinder | MIT | 1.0.38 | Charlie Robbins |\n| prettier | MIT | 3.9.6 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| react | MIT | 19.2.8 | n/a |\n| react-dom | MIT | 19.2.8 | n/a |\n| react-router | MIT | 8.3.0 | Remix Software |\n| vite | MIT | 8.2.2 | Evan You |\n| @axe-core/playwright | MPL-2.0 | 4.13.0 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n",
401
401
  "kind": "doc"
402
402
  },
403
403
  {
@@ -485,7 +485,7 @@
485
485
  "group": "docs/tutorials",
486
486
  "name": "NEW_COMPONENT",
487
487
  "path": "docs/tutorials/NEW_COMPONENT.md",
488
- "code": "# Neue Komponente erstellen\n\n> Schritt-für-Schritt-Anleitung basierend auf dem [Skeleton Blueprint](../../packages/components/src/components/_skeleton/ARC42.md).\n\n## Grundprinzipien\n\n- Auflistungen werden immer alphabetisch sortiert\n- Die [ARC42.md](../../packages/components/src/components/_skeleton/ARC42.md) ist die führende Architektur-Spezifikation — lies sie vollständig, bevor du eine neue Komponente erstellst\n- Alle Web Components verwenden `shadow: true` — Komponenten ohne Shadow DOM werden als Functional Components implementiert\n- Props leben in `src/internal/props/` mit eigenem `PropDefinition` pro Prop\n- Kein toter Code, keine Barrel-Files, keine `types.ts`\n\n## Checkliste\n\n| Schritt | Kurzbeschreibung |\n| :-----: | ---------------------------------------------------------------------------------------- |\n| 0 | Projekt starten |\n| 1 | Tag-Name in Stencil-Konfiguration registrieren |\n| 2 | Props erstellen oder vorhandene wiederverwenden (`src/internal/props/`) |\n| 3 | API-Definition erstellen (`api.tsx`) mit `PropsConfigShape` und `ApiFromConfig` |\n| 4 | Controller implementieren (`controller.ts`) — erweitert `BaseController<Api>` |\n| 5 | Functional Component erstellen (`component.tsx`) — stateless Renderer |\n| 6 | Web Component erstellen (`component.tsx`) — erweitert `BaseWebComponent<Api>` |\n| 7 | Tests co-lokalisiert neben `component.tsx` erstellen |\n| 8 | Beispiel in React-Sample-App anlegen |\n| 9 | Validierung: `pnpm format && pnpm lint && pnpm --filter @public-ui/components test:unit` |\n\n## Schritt 0 — Projekt starten\n\nProjekt starten, wie in [Contribution](../../CONTRIBUTING.md) beschrieben.\n\n## Schritt 1 — Tag-Name registrieren\n\nDen Tag-Namen der neuen Komponente in `packages/components/stencil.config.ts` registrieren.\n\n## Schritt 2 — Props erstellen (Props-First!)\n\n**Bevor die Komponente implementiert wird, müssen alle Props definiert sein.**\n\nPro Prop eine Datei unter `src/internal/props/`:\n\n```typescript\n// src/internal/props/name.ts\nimport type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>('name', '', normalizeString);\n```\n\n- `SimpleProp<K, T>` wenn externer und interner Typ identisch sind\n- `Prop<K, TExternal, TInternal>` wenn sich die Typen unterscheiden (z.B. `ColorProp`)\n- Export in `src/internal/props/index.ts` hinzufügen\n- Bestehende Props aus `index.ts` wiederverwenden, wenn möglich\n\nDetails: [ARC42 §4 — Schema Helper Layer](../../packages/components/src/components/_skeleton/ARC42.md#schema-helper-layer)\n\n## Schritt 3 — API-Definition\n\nDatei: `src/internal/functional-components/<component>/api.tsx`\n\n```typescript\nimport { nameProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const myComponentPropsConfig = {\n\trequired: [nameProp],\n\t// optional: [showProp],\n} as const satisfies PropsConfigShape;\n\nexport type MyComponentApi = ApiFromConfig<\n\ttypeof myComponentPropsConfig,\n\t{\n\t\t// Nur definieren, was die Komponente tatsächlich nutzt:\n\t\t// Callbacks: { click: () => void };\n\t\t// Emitters: { change: string };\n\t\t// Methods: { focus: () => void };\n\t\t// States: { count: number };\n\t\t// Refs: { button: HTMLButtonElement };\n\t\t// Listeners: { keydown: KeyboardEvent };\n\t}\n>;\n```\n\nDetails: [ARC42 §4 — API Definition with PropsConfigShape](../../packages/components/src/components/_skeleton/ARC42.md#api-definition-with-propsconfigshape-and-apifromconfig)\n\n## Schritt 4 — Controller\n\nDatei: `src/internal/functional-components/<component>/controller.ts`\n\n```typescript\nimport { nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { MyComponentApi } from './api';\nimport { myComponentPropsConfig } from './api';\n\nexport class MyComponentController extends BaseController<MyComponentApi> implements ControllerInterface<MyComponentApi> {\n\tpublic constructor(stateAccess: StateAccess<MyComponentApi>) {\n\t\tsuper(stateAccess, myComponentPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<MyComponentApi>): void {\n\t\tconst { name } = props;\n\t\tthis.watchName(name);\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('name', v);\n\t\t});\n\t}\n}\n```\n\n- Event-Handler und Ref-Setter als **Arrow-Properties** (`handleClick = () => { … }`)\n- Lifecycle- und Watcher-Methoden als **Prototype-Methoden**\n- Details: [ARC42 §4 — Controller Layer](../../packages/components/src/components/_skeleton/ARC42.md#controller-layer)\n\n## Schritt 5 — Functional Component\n\nDatei: `src/internal/functional-components/<component>/component.tsx`\n\n```tsx\nimport type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { MyComponentApi } from './api';\n\nconst myBem = bem.forBlock('kol-my-component');\n\nexport const MyComponentFC: FC<FunctionalComponentProps<MyComponentApi>> = (props) => {\n\tconst { name } = props;\n\treturn (\n\t\t<div class={myBem()}>\n\t\t\t<span class={myBem('name')}>{name}</span>\n\t\t</div>\n\t);\n};\n```\n\n- Stateless, keine Seiteneffekte\n- Details: [ARC42 §4 — Functional Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#functional-component-layer)\n\n## Schritt 6 — Web Component\n\nDatei: `src/components/<component>/component.tsx`\n\n```tsx\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { MyComponentApi } from '../../../../internal/functional-components/my-component/api';\nimport { MyComponentFC } from '../../../../internal/functional-components/my-component/component';\nimport { MyComponentController } from '../../../../internal/functional-components/my-component/controller';\n\n@Component({\n\ttag: 'kol-my-component',\n\tshadow: true,\n})\nexport class KolMyComponent extends BaseWebComponent<MyComponentApi> implements WebComponentInterface<MyComponentApi> {\n\tprivate readonly ctrl = new MyComponentController(this.stateAccess);\n\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<MyComponentFC name={this.ctrl.getRenderProp('name')} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n```\n\n- Immer `shadow: true` und `<Host>` ohne Klassen-Attribut\n- `@Watch` nur auf unterstrichene Props\n- Details: [ARC42 §4 — Web Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#web-component-layer)\n\nWenn ein Controller garantiert kein `@State` benötigt, verwende den Sentinel:\n\n```typescript\nprivate readonly ctrl = new MyComponentController(BaseWebComponent.stateLess);\n```\n\n## Schritt 7 — Tests\n\nTests liegen **direkt neben** `component.tsx` — kein `test/`-Unterordner.\n\n**Snapshot-Test** (`snapshot.spec.tsx`):\n\n```tsx\nimport { executeSnapshotTests } from '../../../../utils/testing';\nimport { KolMyComponent } from './component';\n\nconst TAG = 'kol-my-component';\n\ntype Props = {\n\t_name: string;\n};\n\nexecuteSnapshotTests<Props>(TAG, [KolMyComponent], [{ _name: 'Test' }, { _name: '' }]);\n```\n\n**Interaction-Test** (`interaction.e2e.ts`):\n\n```typescript\nimport { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\n\ntest.describe('kol-my-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.setContent('<kol-my-component _name=\"Test\"></kol-my-component>');\n\t});\n\n\ttest('should render the name', async ({ page }) => {\n\t\tawait expect(page.locator('kol-my-component')).toBeVisible();\n\t});\n});\n```\n\nDetails: [ARC42 §9 — Design Decision 11](../../packages/components/src/components/_skeleton/ARC42.md#9-design-decisions)\n\n## Schritt 8 — Beispiel in React-Sample-App\n\nDatei: `packages/samples/react/src/scenarios/<component>.tsx`\n\nAnschließend die Route in `packages/samples/react/src/scenarios/routes.ts` registrieren.\n\nZum Testen:\n\n```bash\ncd packages/samples/react\npnpm start\n# Navigiere zu http://localhost:9191\n```\n\n## Schritt 9 — Validierung\n\n```bash\npnpm format # ~10 Sekunden\npnpm lint # ~1 Minute, NICHT abbrechen\npnpm --filter @public-ui/components test:unit # ~2-3 Minuten, NICHT abbrechen\n```\n\nAlle drei Befehle müssen fehlerfrei durchlaufen.\n\n## Referenz\n\nDie vollständige Referenzimplementierung findet sich im Skeleton Blueprint:\n\n- **Architektur**: [`_skeleton/ARC42.md`](../../packages/components/src/components/_skeleton/ARC42.md)\n- **Agent-Instruktionen**: [`_skeleton/AGENTS.md`](../../packages/components/src/components/_skeleton/AGENTS.md)\n- **Performance-Analyse**: [`_skeleton/PERFORMANCE_ANALYSIS.md`](../../packages/components/src/components/_skeleton/PERFORMANCE_ANALYSIS.md)\n- **Refactoring-Leitfaden**: [`_skeleton/REFACTORING_PROMPT.md`](../../packages/components/src/components/_skeleton/REFACTORING_PROMPT.md)\n",
488
+ "code": "# Neue Komponente erstellen\n\n> Schritt-für-Schritt-Anleitung basierend auf dem [Skeleton Blueprint](../../packages/components/src/components/_skeleton/ARC42.md).\n\n## Grundprinzipien\n\n- Auflistungen werden immer alphabetisch sortiert\n- Die [ARC42.md](../../packages/components/src/components/_skeleton/ARC42.md) ist die führende Architektur-Spezifikation — lies sie vollständig, bevor du eine neue Komponente erstellst\n- **2-Schichten-Architektur**: Die Web Component ist der Orchestrator — es gibt keine separate Controller/Aspect-Schicht. Nur wirklich wiederverwendbare Logik wird als Behavior (`BaseBehavior`, z.B. `TooltipBehavior`) ausgegliedert\n- Alle Web Components verwenden `shadow: true` — Komponenten ohne Shadow DOM werden als Functional Components implementiert\n- Props leben in `src/internal/props/` mit eigenem `PropDefinition` pro Prop\n- Kein toter Code, keine Barrel-Files, keine `types.ts`\n\n## Checkliste\n\n| Schritt | Kurzbeschreibung |\n| :-----: | ------------------------------------------------------------------------------------------------------------- |\n| 0 | Projekt starten |\n| 1 | Tag-Name in Stencil-Konfiguration registrieren |\n| 2 | Props erstellen oder vorhandene wiederverwenden (`src/internal/props/`) |\n| 3 | API-Definition erstellen (`api.tsx`) mit `PropsConfigShape` und `ApiFromConfig` |\n| 4 | Functional Component erstellen (`component.tsx`) — stateless Renderer mit `BemRootNodeFC` |\n| 5 | Web Component erstellen (`component.tsx`) — erweitert `BaseWebComponent<Api>`, orchestriert alle Logik selbst |\n| 6 | Tests co-lokalisiert neben `component.tsx` erstellen |\n| 7 | Beispiel in React-Sample-App anlegen |\n| 8 | Validierung: `pnpm format && pnpm lint && pnpm --filter @public-ui/components test:unit` |\n\n## Schritt 0 — Projekt starten\n\nProjekt starten, wie in [Contribution](../../CONTRIBUTING.md) beschrieben.\n\n## Schritt 1 — Tag-Name registrieren\n\nDen Tag-Namen der neuen Komponente in `packages/components/stencil.config.ts` registrieren.\n\n## Schritt 2 — Props erstellen (Props-First!)\n\n**Bevor die Komponente implementiert wird, müssen alle Props definiert sein.**\n\nPro Prop eine Datei unter `src/internal/props/`:\n\n```typescript\n// src/internal/props/name.ts\nimport type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>('name', '', normalizeString);\n```\n\n- `SimpleProp<K, T>` wenn externer und interner Typ identisch sind\n- `Prop<K, TExternal, TInternal>` wenn sich die Typen unterscheiden (z.B. `ColorProp`)\n- Export in `src/internal/props/index.ts` hinzufügen\n- Bestehende Props aus `index.ts` wiederverwenden, wenn möglich\n\nDetails: [ARC42 §4 — Schema Helper Layer](../../packages/components/src/components/_skeleton/ARC42.md#schema-helper-layer)\n\n## Schritt 3 — API-Definition\n\nDatei: `src/internal/functional-components/<component>/api.tsx`\n\n```typescript\nimport { nameProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const myComponentPropsConfig = {\n\trequired: [nameProp],\n\t// optional: [showProp],\n} as const satisfies PropsConfigShape;\n\nexport type MyComponentApi = ApiFromConfig<\n\ttypeof myComponentPropsConfig,\n\t{\n\t\t// Nur definieren, was die Komponente tatsächlich nutzt:\n\t\t// Callbacks: { click: () => void };\n\t\t// Emitters: { change: string };\n\t\t// Methods: { focus: () => void };\n\t\t// States: { count: number };\n\t\t// Refs: { button: HTMLButtonElement };\n\t\t// Listeners: { keydown: KeyboardEvent };\n\t}\n>;\n```\n\nDetails: [ARC42 §4 — API Definition with PropsConfigShape](../../packages/components/src/components/_skeleton/ARC42.md#api-definition-with-propsconfigshape-and-apifromconfig)\n\n## Schritt 4 — Functional Component\n\nDatei: `src/internal/functional-components/<component>/component.tsx`\n\n```tsx\nimport type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { BemRootNodeFC } from '../bem-root-node/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { MyComponentApi } from './api';\n\nexport const MyComponentFC: FC<FunctionalComponentProps<MyComponentApi>> = ({ name }) => {\n\treturn (\n\t\t<BemRootNodeFC block=\"kol-my-component\">\n\t\t\t<span class=\"kol-my-component__name\">{name}</span>\n\t\t</BemRootNodeFC>\n\t);\n};\n```\n\n- Stateless, keine Seiteneffekte\n- Genau ein Root-Node via `BemRootNodeFC`: Der `block` und die optionalen `modifiers` werden gegen `KoliBriComponentsBemSchema` in `src/schema/bem-registry.ts` typgeprüft — der Block muss dort **zweifach registriert** sein: im exportierten Typ `KoliBriComponentsBemSchema` (Kompilierung) und im Runtime-`BEM`-Const (konsumiert vom kolibri-cli SCSS-Generator). Nur-Typ-Registrierung kompiliert, bricht aber lautlos die Theme-SCSS-Generierung\n- `BemRootNodeFC` rendert immer ein `<div>` als Root. Für FCs mit anderem semantischem Root (z.B. `<button>`, siehe `ClickButtonFC`) stattdessen `bem.forBlock('kol-xxx')(modifiers)` direkt nutzen\n- Details: [ARC42 §4 — Functional Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#functional-component-layer)\n\n## Schritt 5 — Web Component\n\nDatei: `src/components/<component>/component.tsx`\n\nDie Web Component ist der **Orchestrator**: Sie erweitert `BaseWebComponent<Api>` direkt und absorbiert die gesamte Logik (Prop-Normalisierung, State, Lifecycle) — es gibt keine separate Controller/Aspect-Klasse.\n\n```tsx\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { MyComponentApi } from '../../internal/functional-components/my-component/api';\nimport { myComponentPropsConfig } from '../../internal/functional-components/my-component/api';\nimport { MyComponentFC } from '../../internal/functional-components/my-component/component';\nimport { nameProp } from '../../internal/props';\n\n@Component({\n\ttag: 'kol-my-component',\n\tshadow: true,\n})\nexport class KolMyComponent extends BaseWebComponent<MyComponentApi> implements WebComponentInterface<MyComponentApi> {\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => this.setRenderProp('name', v));\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.initRenderProps(myComponentPropsConfig);\n\t\tthis.watchName(this._name);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<MyComponentFC name={this.getRenderProp('name')} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n```\n\n- `componentWillLoad()` ruft zuerst `this.initRenderProps(propsConfig)` auf und wendet danach alle Props an (Prop-Dreieck: Deklaration, `@Watch()`, Init)\n- Watcher rufen die Prop-Factory direkt auf: `nameProp.apply(value, (v) => this.setRenderProp('name', v))`\n- `@State`-Felder werden über `this.setState(key, value)` / `this.getState(key)` verwaltet und im `render()` direkt übergeben\n- Immer `shadow: true` und `<Host>` ohne Klassen-Attribut\n- `@Watch` nur auf unterstrichene Props\n- Wiederverwendbare Logik für mehrere Komponenten wird als Behavior ausgegliedert (`BaseBehavior`, z.B. `TooltipBehavior`): `private readonly tooltipBehavior = new TooltipBehavior(this.stateAccess)` — Details: [ARC42 §4 — Behavior Layer](../../packages/components/src/components/_skeleton/ARC42.md#behavior-layer)\n- Details: [ARC42 §4 — Web Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#web-component-layer)\n\nWenn ein Behavior garantiert kein `@State` benötigt, verwende den Sentinel:\n\n```typescript\nprivate readonly myBehavior = new MyBehavior(BaseWebComponent.stateLess);\n```\n\n## Schritt 6 — Tests\n\nTests liegen **direkt neben** `component.tsx` — kein `test/`-Unterordner.\n\n**Snapshot-Test** (`snapshot.spec.tsx`):\n\n```tsx\nimport { executeSnapshotTests } from '../../utils/testing';\nimport { KolMyComponent } from './component';\n\nconst TAG = 'kol-my-component';\n\ntype Props = {\n\t_name: string;\n};\n\nexecuteSnapshotTests<Props>(TAG, [KolMyComponent], [{ _name: 'Test' }, { _name: '' }]);\n```\n\n**Interaction-Test** (`interaction.e2e.ts`):\n\n```typescript\nimport { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\n\ntest.describe('kol-my-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.setContent('<kol-my-component _name=\"Test\"></kol-my-component>');\n\t});\n\n\ttest('should render the name', async ({ page }) => {\n\t\tawait expect(page.locator('kol-my-component')).toBeVisible();\n\t});\n});\n```\n\nDetails: [ARC42 §9 — Design Decision 11](../../packages/components/src/components/_skeleton/ARC42.md#9-design-decisions)\n\n## Schritt 7 — Beispiel in React-Sample-App\n\nDatei: `packages/samples/react/src/scenarios/<component>.tsx`\n\nAnschließend die Route in `packages/samples/react/src/scenarios/routes.ts` registrieren.\n\nZum Testen:\n\n```bash\ncd packages/samples/react\npnpm start\n# Navigiere zu http://localhost:9191\n```\n\n## Schritt 8 — Validierung\n\n```bash\npnpm format # ~10 Sekunden\npnpm lint # ~1 Minute, NICHT abbrechen\npnpm --filter @public-ui/components test:unit # ~2-3 Minuten, NICHT abbrechen\n```\n\nAlle drei Befehle müssen fehlerfrei durchlaufen.\n\n## Referenz\n\nDie vollständige Referenzimplementierung findet sich im Skeleton Blueprint:\n\n- **Architektur**: [`_skeleton/ARC42.md`](../../packages/components/src/components/_skeleton/ARC42.md)\n- **Agent-Instruktionen**: [`_skeleton/AGENTS.md`](../../packages/components/src/components/_skeleton/AGENTS.md)\n- **Refactoring-Leitfaden**: [`_skeleton/REFACTORING_PROMPT.md`](../../packages/components/src/components/_skeleton/REFACTORING_PROMPT.md)\n",
489
489
  "kind": "doc"
490
490
  },
491
491
  {
@@ -517,7 +517,7 @@
517
517
  "group": "abbr",
518
518
  "name": "basic",
519
519
  "path": "packages/samples/react/src/components/abbr/basic.tsx",
520
- "code": "import React from 'react';\n\nimport { KolAbbr } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\nexport const AbbrBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolAbbr shows an abbreviation.</p>\n\t\t</SampleDescription>\n\n\t\t<p>\n\t\t\tI am <KolAbbr>e.g.</KolAbbr> an abbreviation.\n\t\t</p>\n\t</>\n);\n",
520
+ "code": "import React from 'react';\n\nimport { KolAbbr } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\nexport const AbbrBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolAbbr shows an abbreviation.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\" fitContent>\n\t\t\t<span>\n\t\t\t\tI am <KolAbbr>e.g.</KolAbbr> an abbreviation.\n\t\t\t</span>\n\t\t</SampleBlock>\n\t</>\n);\n",
521
521
  "kind": "sample"
522
522
  },
523
523
  {
@@ -525,7 +525,7 @@
525
525
  "group": "accordion",
526
526
  "name": "basic",
527
527
  "path": "packages/samples/react/src/components/accordion/basic.tsx",
528
- "code": "import React from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const AccordionBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAccordion hides its content until opened. The open state can be toggled by clicking the headline or by setting the <code>_open</code>-prop\n\t\t\t\tprogrammatically. Additionally, the sample shows the disabled state for a closed and an open accordion.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 1 (open)\" _open>\n\t\t\t\t<p>Contents Accordion Tab 1</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 2\">\n\t\t\t\t<p>Contents Accordion Tab 2</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 3 (deactivated)\" _disabled>\n\t\t\t\t<p>Contents Accordion Tab 3</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 4 (disabled and open)\" _disabled _open>\n\t\t\t\t<p>Contents Accordion Tab 4</p>\n\t\t\t</KolAccordion>\n\t\t</div>\n\t</>\n);\n",
528
+ "code": "import React from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const AccordionBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAccordion hides its content until opened. The open state can be toggled by clicking the headline or by setting the <code>_open</code>-prop\n\t\t\t\tprogrammatically. Additionally, the sample shows the disabled state for a closed and an open accordion.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\">\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 1 (open)\" _open>\n\t\t\t\t<p>Contents Accordion Tab 1</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 2\">\n\t\t\t\t<p>Contents Accordion Tab 2</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 3 (deactivated)\" _disabled>\n\t\t\t\t<p>Contents Accordion Tab 3</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 4 (disabled and open)\" _disabled _open>\n\t\t\t\t<p>Contents Accordion Tab 4</p>\n\t\t\t</KolAccordion>\n\t\t</SampleBlock>\n\t</>\n);\n",
529
529
  "kind": "sample"
530
530
  },
531
531
  {
@@ -533,7 +533,7 @@
533
533
  "group": "accordion",
534
534
  "name": "headlines",
535
535
  "path": "packages/samples/react/src/components/accordion/headlines.tsx",
536
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AccordionHeadlines: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolAccordion with the different heading levels from 1-6.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolAccordion _label=\"Heading Level 1\" _level={1}>\n\t\t\t\t<p>Contents Accordion Tab 1</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 2\" _level={2}>\n\t\t\t\t<p>Contents Accordion Tab 2</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 3\" _level={3}>\n\t\t\t\t<p>Contents Accordion Tab 3</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 4\" _level={4}>\n\t\t\t\t<p>Contents Accordion Tab 4</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 5\" _level={5}>\n\t\t\t\t<p>Contents Accordion Tab 5</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 6\" _level={6}>\n\t\t\t\t<p>Contents Accordion Tab 6</p>\n\t\t\t</KolAccordion>\n\t\t</div>\n\t</>\n);\n",
536
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AccordionHeadlines: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolAccordion with the different heading levels from 1-6.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"headlines\">\n\t\t\t<KolAccordion _label=\"Heading Level 1\" _level={1}>\n\t\t\t\t<p>Contents Accordion Tab 1</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 2\" _level={2}>\n\t\t\t\t<p>Contents Accordion Tab 2</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 3\" _level={3}>\n\t\t\t\t<p>Contents Accordion Tab 3</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 4\" _level={4}>\n\t\t\t\t<p>Contents Accordion Tab 4</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 5\" _level={5}>\n\t\t\t\t<p>Contents Accordion Tab 5</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 6\" _level={6}>\n\t\t\t\t<p>Contents Accordion Tab 6</p>\n\t\t\t</KolAccordion>\n\t\t</SampleBlock>\n\t</>\n);\n",
537
537
  "kind": "sample"
538
538
  },
539
539
  {
@@ -549,7 +549,7 @@
549
549
  "group": "alert",
550
550
  "name": "basic",
551
551
  "path": "packages/samples/react/src/components/alert/basic.tsx",
552
- "code": "import type { AlertTypePropType, AlertVariantPropType, HeadingLevel } from '@public-ui/components';\nimport { KolAlert } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\ntype PropsByType = {\n\tlevel: HeadingLevel;\n\ttype: AlertTypePropType;\n\tvariant: AlertVariantPropType;\n};\ntype PropsBasic = {\n\tvariant?: AlertVariantPropType;\n};\n\nconst AlertByType: FC<PropsByType> = ({ level, type, variant }) => (\n\t<>\n\t\t<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant}>\n\t\t\tThis is the text of the alert.\n\t\t</KolAlert>\n\t\t<KolAlert _type={type} _variant={variant}>\n\t\t\tIn this alert, only the text without the heading is used.\n\t\t</KolAlert>\n\t\t<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant} _hasCloser>\n\t\t\tThis is the text of the alert. With close button.\n\t\t</KolAlert>\n\t\t<KolAlert _type={type} _variant={variant} _hasCloser>\n\t\t\tIn this alert, only the text without the heading is used. With close button.\n\t\t</KolAlert>\n\t</>\n);\n\nexport const AlertVariants: FC<PropsBasic> = ({ variant = 'msg' }) => (\n\t<div className=\"grid gap-4\">\n\t\t<AlertByType level={1} type=\"default\" variant={variant} />\n\t\t<AlertByType level={2} type=\"error\" variant={variant} />\n\t\t<AlertByType level={3} type=\"info\" variant={variant} />\n\t\t<AlertByType level={4} type=\"success\" variant={variant} />\n\t\t<AlertByType level={5} type=\"warning\" variant={variant} />\n\t</div>\n);\n\nexport const AlertBasic: FC<PropsBasic> = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAlert shows messages of different types. This sample illustrates the variant <code>msg</code>, showing all possible types with and without headlines\n\t\t\t\tand close buttons.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<AlertVariants variant=\"msg\" />\n\t</>\n);\n",
552
+ "code": "import type { AlertTypePropType, AlertVariantPropType, HeadingLevel } from '@public-ui/components';\nimport { KolAlert } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\ntype PropsByType = {\n\tlevel: HeadingLevel;\n\ttype: AlertTypePropType;\n\tvariant: AlertVariantPropType;\n};\ntype PropsBasic = {\n\tvariant?: AlertVariantPropType;\n};\n\nconst AlertByType: FC<PropsByType> = ({ level, type, variant }) => (\n\t<>\n\t\t<SampleBlock id={type} className=\"flex flex-col gap-2\">\n\t\t\t<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant}>\n\t\t\t\tThis is the text of the alert.\n\t\t\t</KolAlert>\n\t\t\t<KolAlert _type={type} _variant={variant}>\n\t\t\t\tIn this alert, only the text without the heading is used.\n\t\t\t</KolAlert>\n\t\t\t<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant} _hasCloser>\n\t\t\t\tThis is the text of the alert. With close button.\n\t\t\t</KolAlert>\n\t\t\t<KolAlert _type={type} _variant={variant} _hasCloser>\n\t\t\t\tIn this alert, only the text without the heading is used. With close button.\n\t\t\t</KolAlert>\n\t\t</SampleBlock>\n\t</>\n);\n\nexport const AlertVariants: FC<PropsBasic> = ({ variant = 'msg' }) => (\n\t<>\n\t\t<AlertByType level={1} type=\"default\" variant={variant} />\n\t\t<AlertByType level={2} type=\"error\" variant={variant} />\n\t\t<AlertByType level={3} type=\"info\" variant={variant} />\n\t\t<AlertByType level={4} type=\"success\" variant={variant} />\n\t\t<AlertByType level={5} type=\"warning\" variant={variant} />\n\t</>\n);\n\nexport const AlertBasic: FC<PropsBasic> = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAlert shows messages of different types. This sample illustrates the variant <code>msg</code>, showing all possible types with and without headlines\n\t\t\t\tand close buttons.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<AlertVariants variant=\"msg\" />\n\t</>\n);\n",
553
553
  "kind": "sample"
554
554
  },
555
555
  {
@@ -565,7 +565,7 @@
565
565
  "group": "avatar",
566
566
  "name": "basic",
567
567
  "path": "packages/samples/react/src/components/avatar/basic.tsx",
568
- "code": "import { KolAvatar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AvatarBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAvatar shows a user&apos;s avatar with customizable colors. It can be used with or without an image. If no image is defined, the name&apos;s initials\n\t\t\t\tare shown instead with a configurable background color.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t<KolAvatar _src=\"assets/img_avatar.jpg\" _label=\"Elke Mustermann\" />\n\n\t\t\t{/* intentional trailing space 👇 - it's supposed to be trimmed */}\n\t\t\t<KolAvatar _label=\"Elke Mustermann \" />\n\t\t\t<KolAvatar _label=\"Marianne\" />\n\t\t\t<KolAvatar _color=\"#0000FF\" _label=\"Christian\" />\n\t\t</div>\n\t</>\n);\n",
568
+ "code": "import { KolAvatar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AvatarBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAvatar shows a user&apos;s avatar with customizable colors. It can be used with or without an image. If no image is defined, the name&apos;s initials\n\t\t\t\tare shown instead with a configurable background color.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock className=\"flex gap-2\" id=\"basic\" fitContent>\n\t\t\t<KolAvatar _src=\"assets/img_avatar.jpg\" _label=\"Elke Mustermann\" />\n\n\t\t\t{/* intentional trailing space 👇 - it's supposed to be trimmed */}\n\t\t\t<KolAvatar _label=\"Elke Mustermann \" />\n\t\t\t<KolAvatar _label=\"Marianne\" />\n\t\t\t<KolAvatar _color=\"#0000FF\" _label=\"Christian\" />\n\t\t</SampleBlock>\n\t</>\n);\n",
569
569
  "kind": "sample"
570
570
  },
571
571
  {
@@ -573,7 +573,7 @@
573
573
  "group": "avatar",
574
574
  "name": "size",
575
575
  "path": "packages/samples/react/src/components/avatar/size.tsx",
576
- "code": "import { KolAvatar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AvatarSize: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAvatar is <code>6.25rem</code> (100px at the default 16px root font-size) wide/tall by default and simply fills its host element, so it can be\n\t\t\t\tresized proportionally with plain CSS <code>width</code> and/or <code>height</code> (set through the <code>style</code> prop). Setting only{' '}\n\t\t\t\t<code>width</code> is the reliable way to size it below the default. If <code>width</code> and <code>height</code> are set to different values, the\n\t\t\t\tavatar stays square by using the larger of the two - it is centered on its host and may visually extend beyond it on the smaller axis. The\n\t\t\t\tinitials&apos; font size always scales with the resulting size automatically.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap items-center gap-4\">\n\t\t\t<KolAvatar style={{ width: '30px' }} _label=\"Elke Mustermann\" />\n\t\t\t<KolAvatar style={{ width: '30px', height: '45px' }} _label=\"Marianne\" />\n\t\t\t<KolAvatar style={{ width: '60px', height: '30px' }} _color=\"#0000FF\" _label=\"Christian\" />\n\t\t\t<KolAvatar _src=\"assets/img_avatar.jpg\" _label=\"Elke Mustermann\" />\n\t\t\t<KolAvatar style={{ width: '150px' }} _src=\"assets/img_avatar.jpg\" _label=\"Elke Mustermann\" />\n\t\t</div>\n\t</>\n);\n",
576
+ "code": "import { KolAvatar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AvatarSize: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAvatar is <code>6.25rem</code> (100px at the default 16px root font-size) wide/tall by default and simply fills its host element, so it can be\n\t\t\t\tresized proportionally with plain CSS <code>width</code> and/or <code>height</code> (set through the <code>style</code> prop). Setting only{' '}\n\t\t\t\t<code>width</code> is the reliable way to size it below the default. If <code>width</code> and <code>height</code> are set to different values, the\n\t\t\t\tavatar stays square by using the larger of the two - it is centered on its host and may visually extend beyond it on the smaller axis. The\n\t\t\t\tinitials&apos; font size always scales with the resulting size automatically.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock className=\"flex flex-wrap items-center gap-4\" id=\"size\" fitContent>\n\t\t\t<KolAvatar style={{ width: '30px' }} _label=\"Elke Mustermann\" />\n\t\t\t<KolAvatar style={{ width: '30px', height: '45px' }} _label=\"Marianne\" />\n\t\t\t<KolAvatar style={{ width: '60px', height: '30px' }} _color=\"#0000FF\" _label=\"Christian\" />\n\t\t\t<KolAvatar _src=\"assets/img_avatar.jpg\" _label=\"Elke Mustermann\" />\n\t\t\t<KolAvatar style={{ width: '150px' }} _src=\"assets/img_avatar.jpg\" _label=\"Elke Mustermann\" />\n\t\t</SampleBlock>\n\t</>\n);\n",
577
577
  "kind": "sample"
578
578
  },
579
579
  {
@@ -581,23 +581,7 @@
581
581
  "group": "badge",
582
582
  "name": "basic",
583
583
  "path": "packages/samples/react/src/components/badge/basic.tsx",
584
- "code": "import React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BadgeBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBadge shows badges with a label, background color and optional icon.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge _label=\"black\"></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" _label=\"teal\"></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" _label=\"blue\"></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _label=\"red with icon\" _icons=\"kolicon-house\"></KolBadge>\n\t\t\t<KolBadge _color=\"#8b008b\" _label=\"purple with icon\" _icons=\"kolicon-kolibri\"></KolBadge>\n\t\t</div>\n\t</>\n);\n",
585
- "kind": "sample"
586
- },
587
- {
588
- "id": "sample/badge/button",
589
- "group": "badge",
590
- "name": "button",
591
- "path": "packages/samples/react/src/components/badge/button.tsx",
592
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst createBadgeProps = (label: string) => ({\n\t_label: label,\n\t_smartButton: {\n\t\t_ariaDescription: label,\n\t\t_icons: 'kolicon-cross',\n\t\t_label: `Remove`,\n\t\t_on: {\n\t\t\tonClick: () => alert('clicked'),\n\t\t},\n\t},\n});\n\nexport const BadgeButton: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolBadge with an optional <code>smartButton</code>. The sample defines a &quot;close&quot; button with X-icon a click event listener.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge {...createBadgeProps('black')}></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" {...createBadgeProps('teal')}></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" {...createBadgeProps('blue')}></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _icons=\"kolicon-house\" {...createBadgeProps('red with icon')}></KolBadge>\n\t\t\t<KolBadge _color=\"#8b008b\" _icons=\"kolicon-kolibri\" {...createBadgeProps('purple with icon')}></KolBadge>\n\t\t</div>\n\t</>\n);\n",
593
- "kind": "sample"
594
- },
595
- {
596
- "id": "sample/badge/formatted-label",
597
- "group": "badge",
598
- "name": "formatted-label",
599
- "path": "packages/samples/react/src/components/badge/formatted-label.tsx",
600
- "code": "import { KolBadge } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const FormattedLabel = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample demonstrates the possibility of formatted text in badges via markdown syntax.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolBadge _color=\"#7db4ebff\" _label=\"**Bold** and _italic_ Markdown label\" />\n\t\t\t\t<KolBadge _color=\"#8feb7dff\" _label=\"This is ~~strikethrough~~ text\" />\n\t\t\t\t<KolBadge _color=\"#e6ee8eff\" _label=\"Source code like `y = mx + n` is possible\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
584
+ "code": "import React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BadgeBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolBadge shows badges with a label, background color and optional icon. The label supports markdown syntax and the badge can host an optional{' '}\n\t\t\t\t<code>smartButton</code> &ndash; here a &quot;remove&quot; button with X-icon and a click event listener.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<SampleBlock id=\"basic-vertical\" heading=\"Basic Badges vertical\" className=\"flex flex-col gap-2\" fitContent>\n\t\t\t\t<KolBadge _label=\"black (default)\"></KolBadge>\n\t\t\t\t<KolBadge _color=\"#06539e\" _label=\"blue\"></KolBadge>\n\t\t\t\t<KolBadge _color=\"#ae0000\" _label=\"red with icon\" _icons=\"kolicon-house\"></KolBadge>\n\t\t\t\t<KolBadge _color=\"#8b008b\" _label=\"purple with icon\" _icons=\"kolicon-kolibri\"></KolBadge>\n\t\t\t</SampleBlock>\n\n\t\t\t<SampleBlock id=\"basic-horizontal\" heading=\"Basic Badges horizontal\" className=\"flex flex-wrap gap-2\" fitContent>\n\t\t\t\t<KolBadge _label=\"black\"></KolBadge>\n\t\t\t\t<KolBadge _color=\"#06539e\" _label=\"blue\"></KolBadge>\n\t\t\t\t<KolBadge _color=\"#ae0000\" _label=\"red with icon\" _icons=\"kolicon-kolibri\"></KolBadge>\n\t\t\t</SampleBlock>\n\n\t\t\t<SampleBlock id=\"smart-button\" heading=\"Badges with Smart Button\" className=\"flex flex-col gap-2\" fitContent>\n\t\t\t\t<KolBadge\n\t\t\t\t\t_color=\"#06539e\"\n\t\t\t\t\t_label=\"blue\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t_ariaDescription: 'blue',\n\t\t\t\t\t\t_icons: 'kolicon-cross',\n\t\t\t\t\t\t_label: 'Remove',\n\t\t\t\t\t\t_on: { onClick: () => alert('clicked') },\n\t\t\t\t\t}}\n\t\t\t\t></KolBadge>\n\t\t\t\t<KolBadge\n\t\t\t\t\t_color=\"#8b008b\"\n\t\t\t\t\t_icons=\"kolicon-kolibri\"\n\t\t\t\t\t_label=\"purple with icon\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t_ariaDescription: 'purple with icon',\n\t\t\t\t\t\t_icons: 'kolicon-cross',\n\t\t\t\t\t\t_label: 'Remove',\n\t\t\t\t\t\t_on: { onClick: () => alert('clicked') },\n\t\t\t\t\t}}\n\t\t\t\t></KolBadge>\n\t\t\t</SampleBlock>\n\n\t\t\t<SampleBlock id=\"formatted-label\" heading=\"Formatted Label\" className=\"flex flex-col gap-2\" fitContent>\n\t\t\t\t<KolBadge _color=\"#7db4ebff\" _label=\"**Bold** and _italic_ Markdown label\" />\n\t\t\t\t<KolBadge _color=\"#8feb7dff\" _label=\"This is ~~strikethrough~~ text\" />\n\t\t\t\t<KolBadge _color=\"#e6ee8eff\" _label=\"Source code like `y = mx + n` is possible\" />\n\t\t\t</SampleBlock>\n\t\t</div>\n\t</>\n);\n",
601
585
  "kind": "sample"
602
586
  },
603
587
  {
@@ -605,7 +589,7 @@
605
589
  "group": "breadcrumb",
606
590
  "name": "basic",
607
591
  "path": "packages/samples/react/src/components/breadcrumb/basic.tsx",
608
- "code": "import React from 'react';\n\nimport { KolBreadcrumb } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BreadcrumbBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBreadcrumb shows a breadcrumb navigation. The sample illustrates a variation of link, text and icon elements.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons or text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t_icons: 'kolicon-house',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the start page with very long link test',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons and text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _icons: 'kolicon-house', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the main page and I_am_a_really_long_compound_word_trying_to_break_the_layout',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb _label=\"Minimal Breadcrumb\" _links={[{ _label: 'Homepage', _href: '#/back-page' }]}></KolBreadcrumb>\n\t\t</div>\n\t</>\n);\n",
592
+ "code": "import React from 'react';\n\nimport { KolBreadcrumb } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BreadcrumbBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBreadcrumb shows a breadcrumb navigation. The sample illustrates a variation of link, text and icon elements.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\" narrow>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons or text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t_icons: 'kolicon-house',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the start page with very long link test',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons and text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _icons: 'kolicon-house', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the main page and I_am_a_really_long_compound_word_trying_to_break_the_layout',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb _label=\"Minimal Breadcrumb\" _links={[{ _label: 'Homepage', _href: '#/back-page' }]}></KolBreadcrumb>\n\t\t</SampleBlock>\n\t</>\n);\n",
609
593
  "kind": "sample"
610
594
  },
611
595
  {
@@ -613,7 +597,7 @@
613
597
  "group": "button-link",
614
598
  "name": "aria-description",
615
599
  "path": "packages/samples/react/src/components/button-link/aria-description.tsx",
616
- "code": "import { KolButtonLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkAriaDescription: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with aria-description</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t<KolButtonLink _label=\"Button Text without area description\"></KolButtonLink>\n\t\t\t<KolButtonLink _label=\"Button Text\" _ariaDescription=\"Button Area Description\"></KolButtonLink>\n\t\t</div>\n\t</>\n);\n",
600
+ "code": "import { KolButtonLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkAriaDescription: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with aria-description</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"aria-description\" className=\"flex flex-wrap gap-4\">\n\t\t\t<KolButtonLink _label=\"Button Text without area description\"></KolButtonLink>\n\t\t\t<KolButtonLink _label=\"Button Text\" _ariaDescription=\"Button Area Description\"></KolButtonLink>\n\t\t</SampleBlock>\n\t</>\n);\n",
617
601
  "kind": "sample"
618
602
  },
619
603
  {
@@ -621,7 +605,7 @@
621
605
  "group": "button-link",
622
606
  "name": "basic",
623
607
  "path": "packages/samples/react/src/components/button-link/basic.tsx",
624
- "code": "import React from 'react';\n\nimport { KolButtonLink, KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolButtonLink shows an element, that behaves like a button but looks like a link. The sample illustrates KolButtonLink with different\n\t\t\t\t\tdisplay-properties such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"text-base\">\n\t\t\t\t<KolHeading _level={2} _label=\"Button-Link with _inline\" />\n\n\t\t\t\t<p>\n\t\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label=\"Simple Link\" /> It is rendered by default as an{' '}\n\t\t\t\t\t<strong>inline element</strong>.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.\n\t\t\t\t\t<KolButtonLink className=\"m-4\" style={{ display: 'inline-block', border: '1px dotted' }} _label=\"Simple Link\" />. This allows you to assign width,\n\t\t\t\t\theight, and other properties to it using CSS styles.\n\t\t\t\t\t<br />\n\t\t\t\t\t<br />\n\t\t\t\t\tAfter that, there is a link that is rendered as a block element.\n\t\t\t\t\t<KolButtonLink style={{ display: 'block' }} _label=\"Simple Link\" />\n\t\t\t\t\tTherefore, I go over the entire width of the parent element to create a line break.\n\t\t\t\t</p>\n\n\t\t\t\t<KolHeading _level={2} _label=\"Button-Link with _inline={false}\" />\n\n\t\t\t\t<p>Use the boolean _inline property to render the link inline (default) or standalone.</p>\n\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"Disabled ButtonLink\" _disabled _inline={false} />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"With access key\" _accessKey=\"c\" _inline={false} _on={dummyEventHandler} />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"With short key\" _shortKey=\"s\" _inline={false} _on={dummyEventHandler} />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"Special Variant ButtonLink\" _variant=\"theme-link\" />\n\t\t\t\t</p>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
608
+ "code": "import React from 'react';\n\nimport { KolButtonLink, KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolButtonLink shows an element, that behaves like a button but looks like a link. The sample illustrates KolButtonLink with different\n\t\t\t\t\tdisplay-properties such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<KolHeading _level={2} _label=\"Button-Link with _inline\" />\n\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label=\"Simple Link\" /> It is rendered by default as an{' '}\n\t\t\t\t<strong>inline element</strong>.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.\n\t\t\t\t<KolButtonLink className=\"m-4\" style={{ display: 'inline-block', border: '1px dotted' }} _label=\"Simple Link\" />. This allows you to assign width,\n\t\t\t\theight, and other properties to it using CSS styles.\n\t\t\t\t<br />\n\t\t\t\t<br />\n\t\t\t\tAfter that, there is a link that is rendered as a block element.\n\t\t\t\t<KolButtonLink style={{ display: 'block' }} _label=\"Simple Link\" />\n\t\t\t\tTherefore, I go over the entire width of the parent element to create a line break.\n\t\t\t</p>\n\n\t\t\t<KolHeading _level={2} _label=\"Button-Link with _inline={false}\" />\n\n\t\t\t<p>Use the boolean _inline property to render the link inline (default) or standalone.</p>\n\n\t\t\t<SampleBlock id=\"basic\" className=\"flex flex-col gap-2\" fitContent>\n\t\t\t\t<KolButtonLink _label=\"Standalone ButtonLink\" _inline={false} _on={dummyEventHandler} />\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"disabled\" className=\"flex flex-col gap-2\" fitContent>\n\t\t\t\t<KolButtonLink _label=\"Disabled ButtonLink\" _disabled _inline={false} />\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"access-key\" className=\"flex flex-col gap-2\" fitContent>\n\t\t\t\t<KolButtonLink _label=\"With access key\" _accessKey=\"c\" _inline={false} _on={dummyEventHandler} />\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"short-key\" className=\"flex flex-col gap-2\" fitContent>\n\t\t\t\t<KolButtonLink _label=\"With short key\" _shortKey=\"s\" _inline={false} _on={dummyEventHandler} />\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"variant\" className=\"flex flex-col gap-2\" fitContent>\n\t\t\t\t<KolButtonLink _label=\"Special Variant ButtonLink\" _variant=\"theme-link\" />\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
625
609
  "kind": "sample"
626
610
  },
627
611
  {
@@ -629,7 +613,7 @@
629
613
  "group": "button-link",
630
614
  "name": "icons",
631
615
  "path": "packages/samples/react/src/components/button-link/icons.tsx",
632
- "code": "import React from 'react';\n\nimport { KolButtonLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with icons in different locations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolButtonLink _icons=\"kolicon-house\" _label=\"I am a link with an icon on the left\" />\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t\tleft: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t/>\n\t\t\t<KolButtonLink _icons=\"kolicon-house\" _hideLabel _label=\"I am a link with icon only\" />\n\t\t</div>\n\t</>\n);\n",
616
+ "code": "import React from 'react';\n\nimport { KolButtonLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with icons in different locations.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"left\" fitContent>\n\t\t\t<KolButtonLink _icons=\"kolicon-house\" _label=\"I am a link with an icon on the left\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"right\" fitContent>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t/>\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"top\" fitContent>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t/>\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"bottom\" fitContent>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t/>\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"all\" fitContent>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t\tleft: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t/>\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"hide-label\" fitContent>\n\t\t\t<KolButtonLink _icons=\"kolicon-house\" _hideLabel _label=\"I am a link with icon only\" />\n\t\t</SampleBlock>\n\t</>\n);\n",
633
617
  "kind": "sample"
634
618
  },
635
619
  {
@@ -637,7 +621,7 @@
637
621
  "group": "button-link",
638
622
  "name": "image",
639
623
  "path": "packages/samples/react/src/components/button-link/image.tsx",
640
- "code": "import React from 'react';\n\nimport { KolButtonLink, KolImage } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkImage: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with slot-content instead of a label. The sample uses an image as content.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolButtonLink _label=\"I am a link that is rendered as text\" />\n\t\t\t<KolButtonLink _label=\"\">\n\t\t\t\t<KolImage\n\t\t\t\t\t_alt=\"KoliBri design system illustration showing three people working on laptops surrounded by UI components, charts, and the KoliBri hummingbird logo\"\n\t\t\t\t\t_src=\"sample-image.png\"\n\t\t\t\t\tclassName=\"w-image\"\n\t\t\t\t\tslot=\"expert\"\n\t\t\t\t/>\n\t\t\t</KolButtonLink>\n\t\t</div>\n\t</>\n);\n",
624
+ "code": "import React from 'react';\n\nimport { KolButtonLink, KolImage } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkImage: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with slot-content instead of a label. The sample uses an image as content.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"image\">\n\t\t\t<KolButtonLink _label=\"I am a link that is rendered as text\" />\n\t\t\t<KolButtonLink _label=\"\">\n\t\t\t\t<KolImage\n\t\t\t\t\t_alt=\"KoliBri design system illustration showing three people working on laptops surrounded by UI components, charts, and the KoliBri hummingbird logo\"\n\t\t\t\t\t_src=\"sample-image.png\"\n\t\t\t\t\tclassName=\"w-image\"\n\t\t\t\t\tslot=\"expert\"\n\t\t\t\t/>\n\t\t\t</KolButtonLink>\n\t\t</SampleBlock>\n\t</>\n);\n",
641
625
  "kind": "sample"
642
626
  },
643
627
  {
@@ -645,7 +629,7 @@
645
629
  "group": "button",
646
630
  "name": "access-key",
647
631
  "path": "packages/samples/react/src/components/button/access-key.tsx",
648
- "code": "import { KolButton, KolHeading, KolLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonAccessKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with{' '}\n\t\t\t\t\t<KolLink _label=\"access keys\" _href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey\" _target=\"blank\" />. Access keys\n\t\t\t\t\tallow users to trigger buttons using keyboard shortcuts.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Access Keys\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With S access key\" _accessKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _accessKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Access key does not appear in label\" _accessKey=\"x\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Access Key with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"access key without label\" _hideLabel _accessKey=\"a\" _icons=\"kolicon-cogwheel\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Access Key with Inline Icons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t\tright: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_accessKey=\"n\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
632
+ "code": "import { KolButton, KolLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonAccessKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with{' '}\n\t\t\t\t\t<KolLink _label=\"access keys\" _href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey\" _target=\"blank\" />. Access keys\n\t\t\t\t\tallow users to trigger buttons using keyboard shortcuts.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"buttons-access-keys\" heading=\"Buttons with Access Keys\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With S access key\" _accessKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _accessKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Access key does not appear in label\" _accessKey=\"x\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"access-key-hidden-label\" heading=\"Access Key with Hidden Label\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"access key without label\" _hideLabel _accessKey=\"a\" _icons=\"kolicon-cogwheel\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"access-key-inline-icons\" heading=\"Access Key with Inline Icons\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t\tright: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_accessKey=\"n\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
649
633
  "kind": "sample"
650
634
  },
651
635
  {
@@ -653,7 +637,7 @@
653
637
  "group": "button",
654
638
  "name": "aria-description",
655
639
  "path": "packages/samples/react/src/components/button/aria-description.tsx",
656
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonAriaDescription: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with ARIA descriptions. The aria-description attribute provides additional descriptive text for screen readers,\n\t\t\t\t\thelping users understand the button&apos;s purpose or action in more detail.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with and without ARIA Description\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Button without ARIA description\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Button with ARIA description\" _ariaDescription=\"This button performs an important action\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
640
+ "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonAriaDescription: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with ARIA descriptions. The aria-description attribute provides additional descriptive text for screen readers,\n\t\t\t\t\thelping users understand the button&apos;s purpose or action in more detail.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"buttons-aria-description\" heading=\"Buttons with and without ARIA Description\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Button without ARIA description\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Button with ARIA description\" _ariaDescription=\"This button performs an important action\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
657
641
  "kind": "sample"
658
642
  },
659
643
  {
@@ -661,7 +645,7 @@
661
645
  "group": "button",
662
646
  "name": "baselined",
663
647
  "path": "packages/samples/react/src/components/button/baselined.tsx",
664
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonBaselined: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates button baseline alignment. It shows multiple buttons with and without icons that are vertically aligned, useful for testing\n\t\t\t\t\tlayout consistency.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Vertically Aligned Buttons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Label-Text with Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
648
+ "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonBaselined: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates button baseline alignment. It shows multiple buttons with and without icons that are vertically aligned, useful for testing\n\t\t\t\t\tlayout consistency.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"vertically-aligned-buttons\" heading=\"Vertically Aligned Buttons\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Label-Text with Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
665
649
  "kind": "sample"
666
650
  },
667
651
  {
@@ -669,7 +653,7 @@
669
653
  "group": "button",
670
654
  "name": "basic",
671
655
  "path": "packages/samples/react/src/components/button/basic.tsx",
672
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the most important features of the KolButton component. It showcases the different button variants, icons, disabled state, and\n\t\t\t\t\thidden labels.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t{/* Button Variants */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Button Variants\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" onClick={dummyClickEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" onClick={dummyClickEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Tertiary\" _variant=\"tertiary\" onClick={dummyClickEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-eye-closed\" _label=\"Ghost\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Disabled State */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled State\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Hidden Label */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Hidden Label (Icon Only)\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Icon Positions */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icons Both Sides\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
656
+ "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the most important features of the KolButton component. It showcases the different button variants, icons, disabled state, and\n\t\t\t\t\thidden labels.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"variants\" heading=\"Button Variants\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" onClick={dummyClickEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" onClick={dummyClickEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Tertiary\" _variant=\"tertiary\" onClick={dummyClickEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-eye-closed\" _label=\"Ghost\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"disabled\" heading=\"Disabled State\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"hide-label\" heading=\"Hidden Label (Icon Only)\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"icon-positions\" heading=\"Icon Positions\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icons Both Sides\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
673
657
  "kind": "sample"
674
658
  },
675
659
  {
@@ -677,7 +661,7 @@
677
661
  "group": "button",
678
662
  "name": "disabled",
679
663
  "path": "packages/samples/react/src/components/button/disabled.tsx",
680
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonDisabled: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story demonstrates the disabled state of buttons. Disabled buttons are not clickable and appear visually dimmed.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled Buttons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-cogwheel\" _label=\"Tertiary\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-cogwheel\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-eye-closed\" _label=\"Ghost\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Comparison: Enabled vs Disabled\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Enabled\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"Disabled\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
664
+ "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonDisabled: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story demonstrates the disabled state of buttons. Disabled buttons are not clickable and appear visually dimmed.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"disabled\" heading=\"Disabled Buttons\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-cogwheel\" _label=\"Tertiary\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-cogwheel\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-eye-closed\" _label=\"Ghost\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"comparison\" heading=\"Comparison: Enabled vs Disabled\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Enabled\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"Disabled\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
681
665
  "kind": "sample"
682
666
  },
683
667
  {
@@ -685,7 +669,7 @@
685
669
  "group": "button",
686
670
  "name": "expert-slot",
687
671
  "path": "packages/samples/react/src/components/button/expert-slot.tsx",
688
- "code": "import { KolButton, KolHeading, KolIcon } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nimport './expert-slot.tooltip.scss';\n\nconst KolTooltip = 'kol-tooltip-wc' as unknown as React.FC<{ _label: string }>;\n\nexport const ButtonExpertSlot: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the expert slot feature of KolButton. The expert slot allows you to insert custom content into the button, providing advanced\n\t\t\t\t\tcustomization options beyond the standard label and icon properties.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Expert Slot Content\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">I am more than just a button</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"\" _variant=\"secondary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Custom content here</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Delete with custom text</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<KolIcon _icons=\"kolicon-alert-warning\" _label=\"Delete with custom text\" slot=\"expert\" />\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolTooltip _label=\"Delete with custom text\" />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled Buttons with Expert Slot\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Disabled expert slot</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-eye-closed\" _label=\"\" _variant=\"ghost\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Another disabled one</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
672
+ "code": "import { KolButton, KolIcon } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport './expert-slot.tooltip.scss';\n\nconst KolTooltip = 'kol-tooltip-wc' as unknown as React.FC<{ _label: string }>;\n\nexport const ButtonExpertSlot: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the expert slot feature of KolButton. The expert slot allows you to insert custom content into the button, providing advanced\n\t\t\t\t\tcustomization options beyond the standard label and icon properties.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"buttons-expert-slot-content\" heading=\"Buttons with Expert Slot Content\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">I am more than just a button</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"\" _variant=\"secondary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Custom content here</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Delete with custom text</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<KolIcon _icons=\"kolicon-alert-warning\" _label=\"Delete with custom text\" slot=\"expert\" />\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolTooltip _label=\"Delete with custom text\" />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"disabled-buttons-expert-slot\" heading=\"Disabled Buttons with Expert Slot\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Disabled expert slot</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-eye-closed\" _label=\"\" _variant=\"ghost\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Another disabled one</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
689
673
  "kind": "sample"
690
674
  },
691
675
  {
@@ -701,7 +685,7 @@
701
685
  "group": "button",
702
686
  "name": "focus-options",
703
687
  "path": "packages/samples/react/src/components/button/focus-options.tsx",
704
- "code": "import type { KolFocusOptions, SelectOption } from '@public-ui/components';\nimport { KolButton, KolHeading, KolSelect } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst BEHAVIOR_OPTIONS: SelectOption<string>[] = [\n\t{ label: 'Auto (instant)', value: 'auto' },\n\t{ label: 'Smooth (animated)', value: 'smooth' },\n];\n\nconst ALIGNMENT_OPTIONS: SelectOption<string>[] = [\n\t{ label: 'Start', value: 'start' },\n\t{ label: 'Center', value: 'center' },\n\t{ label: 'End', value: 'end' },\n\t{ label: 'Nearest', value: 'nearest' },\n];\n\nconst SELECT_CONFIGS = [\n\t{ label: 'Behavior', key: 'behavior' as const, options: BEHAVIOR_OPTIONS },\n\t{ label: 'Block (vertical alignment)', key: 'block' as const, options: ALIGNMENT_OPTIONS },\n\t{ label: 'Inline (horizontal alignment)', key: 'inline' as const, options: ALIGNMENT_OPTIONS },\n];\n\nconst SCROLL_CONTAINER_STYLE: React.CSSProperties = {\n\tpadding: '1rem',\n\tmarginTop: '1rem',\n\tborder: '1px solid #ccc',\n};\n\nexport const ButtonFocusOptions: FC = () => {\n\tconst backToTopRef = useRef<HTMLKolButtonElement>(null);\n\tconst behaviorSelectRef = useRef<HTMLKolSelectElement>(null);\n\tconst [focusOptions, setFocusOptions] = useState<KolFocusOptions>({\n\t\tbehavior: 'auto',\n\t\tblock: 'start',\n\t\tinline: 'start',\n\t});\n\tconst [afterFocusCalled, setAfterFocusCalled] = useState(false);\n\n\tconst handleFocus = useCallback(async () => {\n\t\tif (backToTopRef.current) {\n\t\t\tsetAfterFocusCalled(false);\n\n\t\t\tawait backToTopRef.current.focus({\n\t\t\t\t...focusOptions,\n\t\t\t\tafterFocus: () => {\n\t\t\t\t\tsetAfterFocusCalled(true);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [focusOptions]);\n\n\tconst handleBackToTop = useCallback(async () => {\n\t\tif (behaviorSelectRef.current) {\n\t\t\tsetAfterFocusCalled(false);\n\n\t\t\tawait behaviorSelectRef.current.focus({\n\t\t\t\t...focusOptions,\n\t\t\t\tafterFocus: () => {\n\t\t\t\t\tsetAfterFocusCalled(true);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [focusOptions]);\n\n\tconst setSelectOption = useCallback((key: 'behavior' | 'block' | 'inline', value: string) => {\n\t\tsetFocusOptions((prev) => ({\n\t\t\t...prev,\n\t\t\t[key]: value,\n\t\t}));\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates KolFocusOptions for manual focus control with scroll-into-view behavior. It showcases vertical scrolling (element positioned\n\t\t\t\t\tbelow viewport) and horizontal scrolling (element positioned outside viewport). The focus options control how the element is scrolled into view, with\n\t\t\t\t\tthe afterFocus callback triggering after scrolling completes.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t{/* Scroll Into View Options */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Scroll Behavior Options\" />\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThese options control how elements are scrolled into view. <code>preventScroll</code> and <code>focusVisible</code> are always enabled for optimal\n\t\t\t\t\t\tfocus management. Customize the scroll behavior and alignment below:\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t{SELECT_CONFIGS.map((config, index) => (\n\t\t\t\t\t\t\t<div key={config.key} className=\"grid gap-2\">\n\t\t\t\t\t\t\t\t<KolSelect\n\t\t\t\t\t\t\t\t\tref={index === 0 ? behaviorSelectRef : null}\n\t\t\t\t\t\t\t\t\t_label={config.label}\n\t\t\t\t\t\t\t\t\t_options={config.options}\n\t\t\t\t\t\t\t\t\t_value={focusOptions[config.key as keyof KolFocusOptions]}\n\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\tonChange: (_event, v) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectOption(config.key, v as string);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Scroll Example */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Scroll Example\" />\n\t\t\t\t\t<p>The target button is positioned bottom-right. Scroll down and right to find it, then click &quot;Focus Target&quot; to apply scroll behavior.</p>\n\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Focus Target\" _variant=\"primary\" onClick={handleFocus} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tCallback invoked: <strong>{afterFocusCalled ? 'Yes ✓' : 'No'}</strong>\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...SCROLL_CONTAINER_STYLE,\n\t\t\t\t\t\t\toverflow: 'auto',\n\t\t\t\t\t\t\twidth: '500px',\n\t\t\t\t\t\t\theight: '600px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '2400px',\n\t\t\t\t\t\t\t\theight: '2400px',\n\t\t\t\t\t\t\t\tpadding: '1rem',\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div style={{ padding: '1rem', backgroundColor: '#f9f9f9', borderRadius: '4px' }}>Content area (scroll to find button)</div>\n\t\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t\tref={backToTopRef}\n\t\t\t\t\t\t\t\t_label=\"Back to Top\"\n\t\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={handleBackToTop}\n\t\t\t\t\t\t\t\tstyle={{ position: 'absolute', bottom: '1rem', right: '1rem' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<hr />\n\n\t\t\t\t{/* Description */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"About KolFocusOptions\" />\n\t\t\t\t\t<div className=\"indented-text\">\n\t\t\t\t\t\t<p>KolFocusOptions enables advanced focus control with scroll-into-view behavior:</p>\n\t\t\t\t\t\t<ul className=\"list-disc pl-5\">\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>preventScroll:</strong> Always enabled — prevents browser auto-scroll and uses custom scroll options instead\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>focusVisible:</strong> Always enabled — ensures the focus ring is visible after focus\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>behavior:</strong> &quot;auto&quot; (instant) or &quot;smooth&quot; (animated) scroll\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>block:</strong> Vertical alignment (start, center, end, nearest)\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>inline:</strong> Horizontal alignment (start, center, end, nearest)\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>afterFocus:</strong> Optional callback invoked after focus and scroll complete\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
688
+ "code": "import type { KolFocusOptions, SelectOption } from '@public-ui/components';\nimport { KolButton, KolSelect } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst BEHAVIOR_OPTIONS: SelectOption<string>[] = [\n\t{ label: 'Auto (instant)', value: 'auto' },\n\t{ label: 'Smooth (animated)', value: 'smooth' },\n];\n\nconst ALIGNMENT_OPTIONS: SelectOption<string>[] = [\n\t{ label: 'Start', value: 'start' },\n\t{ label: 'Center', value: 'center' },\n\t{ label: 'End', value: 'end' },\n\t{ label: 'Nearest', value: 'nearest' },\n];\n\nconst SELECT_CONFIGS = [\n\t{ label: 'Behavior', key: 'behavior' as const, options: BEHAVIOR_OPTIONS },\n\t{ label: 'Block (vertical alignment)', key: 'block' as const, options: ALIGNMENT_OPTIONS },\n\t{ label: 'Inline (horizontal alignment)', key: 'inline' as const, options: ALIGNMENT_OPTIONS },\n];\n\nconst SCROLL_CONTAINER_STYLE: React.CSSProperties = {\n\tpadding: '1rem',\n\tmarginTop: '1rem',\n\tborder: '1px solid #ccc',\n};\n\nexport const ButtonFocusOptions: FC = () => {\n\tconst backToTopRef = useRef<HTMLKolButtonElement>(null);\n\tconst behaviorSelectRef = useRef<HTMLKolSelectElement>(null);\n\tconst [focusOptions, setFocusOptions] = useState<KolFocusOptions>({\n\t\tbehavior: 'auto',\n\t\tblock: 'start',\n\t\tinline: 'start',\n\t});\n\tconst [afterFocusCalled, setAfterFocusCalled] = useState(false);\n\n\tconst handleFocus = useCallback(async () => {\n\t\tif (backToTopRef.current) {\n\t\t\tsetAfterFocusCalled(false);\n\n\t\t\tawait backToTopRef.current.focus({\n\t\t\t\t...focusOptions,\n\t\t\t\tafterFocus: () => {\n\t\t\t\t\tsetAfterFocusCalled(true);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [focusOptions]);\n\n\tconst handleBackToTop = useCallback(async () => {\n\t\tif (behaviorSelectRef.current) {\n\t\t\tsetAfterFocusCalled(false);\n\n\t\t\tawait behaviorSelectRef.current.focus({\n\t\t\t\t...focusOptions,\n\t\t\t\tafterFocus: () => {\n\t\t\t\t\tsetAfterFocusCalled(true);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [focusOptions]);\n\n\tconst setSelectOption = useCallback((key: 'behavior' | 'block' | 'inline', value: string) => {\n\t\tsetFocusOptions((prev) => ({\n\t\t\t...prev,\n\t\t\t[key]: value,\n\t\t}));\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates KolFocusOptions for manual focus control with scroll-into-view behavior. It showcases vertical scrolling (element positioned\n\t\t\t\t\tbelow viewport) and horizontal scrolling (element positioned outside viewport). The focus options control how the element is scrolled into view, with\n\t\t\t\t\tthe afterFocus callback triggering after scrolling completes.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t{/* Scroll Into View Options */}\n\t\t\t\t<SampleBlock id=\"scroll-behavior-options\" heading=\"Scroll Behavior Options\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThese options control how elements are scrolled into view. <code>preventScroll</code> and <code>focusVisible</code> are always enabled for optimal\n\t\t\t\t\t\tfocus management. Customize the scroll behavior and alignment below:\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t{SELECT_CONFIGS.map((config, index) => (\n\t\t\t\t\t\t\t<div key={config.key} className=\"grid gap-2\">\n\t\t\t\t\t\t\t\t<KolSelect\n\t\t\t\t\t\t\t\t\tref={index === 0 ? behaviorSelectRef : null}\n\t\t\t\t\t\t\t\t\t_label={config.label}\n\t\t\t\t\t\t\t\t\t_options={config.options}\n\t\t\t\t\t\t\t\t\t_value={focusOptions[config.key as keyof KolFocusOptions]}\n\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\tonChange: (_event, v) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectOption(config.key, v as string);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t{/* Scroll Example */}\n\t\t\t\t<SampleBlock id=\"scroll-example\" heading=\"Scroll Example\">\n\t\t\t\t\t<p>The target button is positioned bottom-right. Scroll down and right to find it, then click &quot;Focus Target&quot; to apply scroll behavior.</p>\n\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Focus Target\" _variant=\"primary\" onClick={handleFocus} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tCallback invoked: <strong>{afterFocusCalled ? 'Yes ✓' : 'No'}</strong>\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...SCROLL_CONTAINER_STYLE,\n\t\t\t\t\t\t\toverflow: 'auto',\n\t\t\t\t\t\t\twidth: '500px',\n\t\t\t\t\t\t\theight: '600px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '2400px',\n\t\t\t\t\t\t\t\theight: '2400px',\n\t\t\t\t\t\t\t\tpadding: '1rem',\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div style={{ padding: '1rem', backgroundColor: '#f9f9f9', borderRadius: '4px' }}>Content area (scroll to find button)</div>\n\t\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t\tref={backToTopRef}\n\t\t\t\t\t\t\t\t_label=\"Back to Top\"\n\t\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={handleBackToTop}\n\t\t\t\t\t\t\t\tstyle={{ position: 'absolute', bottom: '1rem', right: '1rem' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<hr />\n\n\t\t\t\t{/* Description */}\n\t\t\t\t<SampleBlock id=\"about-kol-focus-options\" heading=\"About KolFocusOptions\">\n\t\t\t\t\t<div className=\"indented-text\">\n\t\t\t\t\t\t<p>KolFocusOptions enables advanced focus control with scroll-into-view behavior:</p>\n\t\t\t\t\t\t<ul className=\"list-disc pl-5\">\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>preventScroll:</strong> Always enabled — prevents browser auto-scroll and uses custom scroll options instead\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>focusVisible:</strong> Always enabled — ensures the focus ring is visible after focus\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>behavior:</strong> &quot;auto&quot; (instant) or &quot;smooth&quot; (animated) scroll\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>block:</strong> Vertical alignment (start, center, end, nearest)\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>inline:</strong> Horizontal alignment (start, center, end, nearest)\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>afterFocus:</strong> Optional callback invoked after focus and scroll complete\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
705
689
  "kind": "sample"
706
690
  },
707
691
  {
@@ -709,7 +693,7 @@
709
693
  "group": "button",
710
694
  "name": "hide-label",
711
695
  "path": "packages/samples/react/src/components/button/hide-label.tsx",
712
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonHideLabel: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with hidden labels. The label is still accessible to screen readers but visually hidden, showing only the icon. This\n\t\t\t\t\tis useful for icon-only buttons.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Hidden Labels\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-kolibri\" _label=\"Like\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Subscribe\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Buy me a coffee\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-alert-warning\" _label=\"Delete\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-eye-closed\" _label=\"Settings\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Comparison: With and Without Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-kolibri\" _label=\"Like\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Subscribe\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Buy me a coffee\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-alert-warning\" _label=\"Delete\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
696
+ "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonHideLabel: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with hidden labels. The label is still accessible to screen readers but visually hidden, showing only the icon. This\n\t\t\t\t\tis useful for icon-only buttons.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"hide-label\" heading=\"Buttons with Hidden Labels\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-kolibri\" _label=\"Like\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Subscribe\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Buy me a coffee\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-alert-warning\" _label=\"Delete\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-eye-closed\" _label=\"Settings\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"comparison\" heading=\"Comparison: With and Without Hidden Label\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"disabled\" heading=\"Disabled with Hidden Label\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-kolibri\" _label=\"Like\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Subscribe\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Buy me a coffee\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-alert-warning\" _label=\"Delete\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
713
697
  "kind": "sample"
714
698
  },
715
699
  {
@@ -717,7 +701,7 @@
717
701
  "group": "button",
718
702
  "name": "icons",
719
703
  "path": "packages/samples/react/src/components/button/icons.tsx",
720
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple\n\t\t\t\t\tpositions at once.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Basic Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Top\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Multiple Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Left & Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Top & Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"All Directions\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Simple Icon String\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Home Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"Heart Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"Trash Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Large Icon on Top\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t'font-size': '400%',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-house',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Home\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
704
+ "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple\n\t\t\t\t\tpositions at once.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"basic-positions\" heading=\"Basic Icon Positions\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Top\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"multiple-positions\" heading=\"Multiple Icon Positions\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Left & Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Top & Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"all-positions\" heading=\"All Icon Positions\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"All Directions\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"icon-string\" heading=\"Simple Icon String\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Home Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"Heart Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"Trash Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"large-icon\" heading=\"Large Icon on Top\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t'font-size': '400%',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-house',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Home\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
721
705
  "kind": "sample"
722
706
  },
723
707
  {
@@ -725,7 +709,7 @@
725
709
  "group": "button",
726
710
  "name": "row-reverse-tooltip",
727
711
  "path": "packages/samples/react/src/components/button/row-reverse-tooltip.tsx",
728
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonRowReverseTooltip: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates how the tooltip adapts its width when containing long text inside a row-reverse flex container. The effect becomes visible\n\t\t\t\t\twhen inspecting the layout with DevTools and reducing the available width (e.g., by narrowing the screen).\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Button in Row-Reverse Container\" />\n\t\t\t\t\t<div className=\"flex flex-row-reverse\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _hideLabel _label=\"This is a very, very long tooltip text that exceeds the width.\" _variant=\"primary\" />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
712
+ "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonRowReverseTooltip: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates how the tooltip adapts its width when containing long text inside a row-reverse flex container. The effect becomes visible\n\t\t\t\t\twhen inspecting the layout with DevTools and reducing the available width (e.g., by narrowing the screen).\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"button-row-reverse-container\" heading=\"Button in Row-Reverse Container\">\n\t\t\t\t\t<div className=\"flex flex-row-reverse\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _hideLabel _label=\"This is a very, very long tooltip text that exceeds the width.\" _variant=\"primary\" />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
729
713
  "kind": "sample"
730
714
  },
731
715
  {
@@ -733,7 +717,7 @@
733
717
  "group": "button",
734
718
  "name": "short-key",
735
719
  "path": "packages/samples/react/src/components/button/short-key.tsx",
736
- "code": "import { KolAlert, KolButton, KolHeading, KolLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonShortKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\t// The short key announced via `_shortKey` is purely visual/assistive – it does NOT\n\t// wire up a keyboard handler. The example below shows how to make it interactive by\n\t// registering a matching `keydown` listener yourself.\n\tconst interactiveShortKey = 'm';\n\t// Keep a stable reference to the (per-render) handler so the global listener is\n\t// registered only once instead of on every render.\n\tconst dummyClickEventHandlerRef = React.useRef(dummyClickEventHandler);\n\tReact.useEffect(() => {\n\t\tdummyClickEventHandlerRef.current = dummyClickEventHandler;\n\t}, [dummyClickEventHandler]);\n\tReact.useEffect(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\t// Match on `event.code` (layout-independent): on macOS, Alt + M emits a special\n\t\t\t// character, so `event.key` would not equal \"m\".\n\t\t\tif (event.altKey && event.code === 'KeyM') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tdummyClickEventHandlerRef.current();\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener('keydown', handleKeyDown);\n\t\treturn () => document.removeEventListener('keydown', handleKeyDown);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with short keys. The short key is displayed as a visual indicator within the button label to communicate a recommended\n\t\t\t\t\tkeyboard shortcut to the user.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolAlert _label=\"Short keys are display-only\" _type=\"info\" _variant=\"card\">\n\t\t\t\t<p>\n\t\t\t\t\t<code>_shortKey</code> is <strong>purely visual and assistive</strong>: it renders the badge and announces the shortcut via{' '}\n\t\t\t\t\t<code>aria-keyshortcuts</code>, but it does <strong>not</strong> bind a keyboard handler. Pressing the displayed combination on its own does nothing –\n\t\t\t\t\tyou have to register the listener yourself (see the interactive example below).\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIf you need a native, browser-handled shortcut instead, use{' '}\n\t\t\t\t\t<KolLink _label=\"_accessKey\" _href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey\" _target=\"_blank\" />. Note that\n\t\t\t\t\tnative access keys are triggered in a browser-specific way (e.g. <kbd>Alt</kbd> + <kbd>Shift</kbd> + key in Chrome on Windows).\n\t\t\t\t</p>\n\t\t\t</KolAlert>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Short Keys\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With S short key\" _shortKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _shortKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Short key does not appear in label\" _shortKey=\"x\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Short Key with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"short key without label\" _hideLabel _shortKey=\"k\" _icons=\"kolicon-cogwheel\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Short Key with Inline Icons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t\tright: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_shortKey=\"n\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Interactive Short Key\" />\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThis button wires the announced short key up manually: a <code>keydown</code> listener triggers the same action as a click. Press <kbd>Alt</kbd> +{' '}\n\t\t\t\t\t\t<kbd>M</kbd> (or click the button) to open the toast.\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With working M short key\" _shortKey={interactiveShortKey} _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
720
+ "code": "import { KolAlert, KolButton, KolLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonShortKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\t// The short key announced via `_shortKey` is purely visual/assistive – it does NOT\n\t// wire up a keyboard handler. The example below shows how to make it interactive by\n\t// registering a matching `keydown` listener yourself.\n\tconst interactiveShortKey = 'm';\n\t// Keep a stable reference to the (per-render) handler so the global listener is\n\t// registered only once instead of on every render.\n\tconst dummyClickEventHandlerRef = React.useRef(dummyClickEventHandler);\n\tReact.useEffect(() => {\n\t\tdummyClickEventHandlerRef.current = dummyClickEventHandler;\n\t}, [dummyClickEventHandler]);\n\tReact.useEffect(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\t// Match on `event.code` (layout-independent): on macOS, Alt + M emits a special\n\t\t\t// character, so `event.key` would not equal \"m\".\n\t\t\tif (event.altKey && event.code === 'KeyM') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tdummyClickEventHandlerRef.current();\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener('keydown', handleKeyDown);\n\t\treturn () => document.removeEventListener('keydown', handleKeyDown);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with short keys. The short key is displayed as a visual indicator within the button label to communicate a recommended\n\t\t\t\t\tkeyboard shortcut to the user.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolAlert _label=\"Short keys are display-only\" _type=\"info\" _variant=\"card\">\n\t\t\t\t<p>\n\t\t\t\t\t<code>_shortKey</code> is <strong>purely visual and assistive</strong>: it renders the badge and announces the shortcut via{' '}\n\t\t\t\t\t<code>aria-keyshortcuts</code>, but it does <strong>not</strong> bind a keyboard handler. Pressing the displayed combination on its own does nothing –\n\t\t\t\t\tyou have to register the listener yourself (see the interactive example below).\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIf you need a native, browser-handled shortcut instead, use{' '}\n\t\t\t\t\t<KolLink _label=\"_accessKey\" _href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey\" _target=\"_blank\" />. Note that\n\t\t\t\t\tnative access keys are triggered in a browser-specific way (e.g. <kbd>Alt</kbd> + <kbd>Shift</kbd> + key in Chrome on Windows).\n\t\t\t\t</p>\n\t\t\t</KolAlert>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"short-keys\" heading=\"Buttons with Short Keys\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With S short key\" _shortKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _shortKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Short key does not appear in label\" _shortKey=\"x\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"hide-label\" heading=\"Short Key with Hidden Label\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"short key without label\" _hideLabel _shortKey=\"k\" _icons=\"kolicon-cogwheel\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"inline-icons\" heading=\"Short Key with Inline Icons\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t\tright: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_shortKey=\"n\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<p>\n\t\t\t\t\tThis button wires the announced short key up manually: a <code>keydown</code> listener triggers the same action as a click. Press <kbd>Alt</kbd> +{' '}\n\t\t\t\t\t<kbd>M</kbd> (or click the button) to open the toast.\n\t\t\t\t</p>\n\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t<KolButton _label=\"With working M short key\" _shortKey={interactiveShortKey} _on={dummyEventHandler} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
737
721
  "kind": "sample"
738
722
  },
739
723
  {
@@ -741,7 +725,7 @@
741
725
  "group": "button",
742
726
  "name": "spinner",
743
727
  "path": "packages/samples/react/src/components/button/spinner.tsx",
744
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonSpinner: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates icon-only buttons with an animated spinning loader icon. The animation is applied using CSS parts to target the icon element\n\t\t\t\t\tdirectly.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Animated Spinner Icon via CSS Part\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Loading\"\n\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button spinner-slow\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Syncing\"\n\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button spinner-slower\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Processing\"\n\t\t\t\t\t\t\t_variant=\"tertiary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Spinner with Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Loading...\"\n\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Syncing...\"\n\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\n\t\t\t<style>\n\t\t\t\t{`\n\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\tfrom {\n\t\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tto {\n\t\t\t\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Target the icon part inside the button */\n\t\t\t\t\t.spinner-button::part(icon) {\n\t\t\t\t\t\tanimation: spin 1s linear infinite;\n\t\t\t\t\t}\n\n\t\t\t\t\t.spinner-slow::part(icon) {\n\t\t\t\t\t\tanimation-duration: 1.5s;\n\t\t\t\t\t}\n\n\t\t\t\t\t.spinner-slower::part(icon) {\n\t\t\t\t\t\tanimation-duration: 2s;\n\t\t\t\t\t}\n\n\t\t\t\t\t@media (prefers-reduced-motion) {\n\t\t\t\t\t\t.spinner-button::part(icon){\n\t\t\t\t\t\t\tanimation-duration: 10s;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t`}\n\t\t\t</style>\n\t\t</>\n\t);\n};\n",
728
+ "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonSpinner: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates icon-only buttons with an animated spinning loader icon. The animation is applied using CSS parts to target the icon element\n\t\t\t\t\tdirectly.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"animated-spinner-icon-css-part\" heading=\"Animated Spinner Icon via CSS Part\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Loading\"\n\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button spinner-slow\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Syncing\"\n\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button spinner-slower\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Processing\"\n\t\t\t\t\t\t\t_variant=\"tertiary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"spinner-label\" heading=\"Spinner with Label\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Loading...\"\n\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Syncing...\"\n\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\n\t\t\t<style>\n\t\t\t\t{`\n\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\tfrom {\n\t\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tto {\n\t\t\t\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Target the icon part inside the button */\n\t\t\t\t\t.spinner-button::part(icon) {\n\t\t\t\t\t\tanimation: spin 1s linear infinite;\n\t\t\t\t\t}\n\n\t\t\t\t\t.spinner-slow::part(icon) {\n\t\t\t\t\t\tanimation-duration: 1.5s;\n\t\t\t\t\t}\n\n\t\t\t\t\t.spinner-slower::part(icon) {\n\t\t\t\t\t\tanimation-duration: 2s;\n\t\t\t\t\t}\n\n\t\t\t\t\t@media (prefers-reduced-motion) {\n\t\t\t\t\t\t.spinner-button::part(icon){\n\t\t\t\t\t\t\tanimation-duration: 10s;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t`}\n\t\t\t</style>\n\t\t</>\n\t);\n};\n",
745
729
  "kind": "sample"
746
730
  },
747
731
  {
@@ -749,7 +733,7 @@
749
733
  "group": "button",
750
734
  "name": "variants",
751
735
  "path": "packages/samples/react/src/components/button/variants.tsx",
752
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonVariants: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);\n\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases all available button variants for this theme. You can import <code>ButtonVariantsEnum</code> from your theme to always use the\n\t\t\t\t\tright variants.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All theme exclusive button variants\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn <KolButton _icons=\"kolicon-house\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn <KolButton _hideLabel _icons=\"kolicon-settings\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
736
+ "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getTheme } from '../../shares/store';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonVariants: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getTheme();\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);\n\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases all available button variants for this theme. You can import <code>ButtonVariantsEnum</code> from your theme to always use the\n\t\t\t\t\tright variants.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"variants\" heading=\"All theme exclusive button variants\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn <KolButton _icons=\"kolicon-house\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn <KolButton _hideLabel _icons=\"kolicon-settings\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
753
737
  "kind": "sample"
754
738
  },
755
739
  {
@@ -757,7 +741,7 @@
757
741
  "group": "button",
758
742
  "name": "width",
759
743
  "path": "packages/samples/react/src/components/button/width.tsx",
760
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonWidth: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst ARGS = {\n\t\tclassName: 'w-8rem',\n\t\t_on: {\n\t\t\tonClick: dummyClickEventHandler,\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story demonstrates buttons with custom widths. You can control the button width using CSS classes.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Fixed Width Buttons (8rem)\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Primary\" _variant=\"primary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Secondary\" _variant=\"secondary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Normal\" _variant=\"normal\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Danger\" _variant=\"danger\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Ghost\" _variant=\"ghost\" {...ARGS} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Fixed Width Disabled Buttons (8rem)\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _label=\"Primary\" _variant=\"primary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Secondary\" _variant=\"secondary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Normal\" _variant=\"normal\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Danger\" _variant=\"danger\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Ghost\" _variant=\"ghost\" {...ARGS} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
744
+ "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonWidth: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst ARGS = {\n\t\tclassName: 'w-8rem',\n\t\t_on: {\n\t\t\tonClick: dummyClickEventHandler,\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story demonstrates buttons with custom widths. You can control the button width using CSS classes.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"fixed-width-buttons-8rem\" heading=\"Fixed Width Buttons (8rem)\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Primary\" _variant=\"primary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Secondary\" _variant=\"secondary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Normal\" _variant=\"normal\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Danger\" _variant=\"danger\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Ghost\" _variant=\"ghost\" {...ARGS} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"fixed-width-disabled-buttons\" heading=\"Fixed Width Disabled Buttons (8rem)\" fitContent>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _label=\"Primary\" _variant=\"primary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Secondary\" _variant=\"secondary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Normal\" _variant=\"normal\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Danger\" _variant=\"danger\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Ghost\" _variant=\"ghost\" {...ARGS} />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
761
745
  "kind": "sample"
762
746
  },
763
747
  {
@@ -765,7 +749,7 @@
765
749
  "group": "card",
766
750
  "name": "basic",
767
751
  "path": "packages/samples/react/src/components/card/basic.tsx",
768
- "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolCard shows a card with title and slot content. The second sample features a close button.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"w-full grid grid-cols-2 gap-4\">\n\t\t\t<KolCard _label=\"Card with title and content\">\n\t\t\t\t<p>Card contents.</p>\n\t\t\t</KolCard>\n\n\t\t\t<KolCard _label=\"Card with closer\" _hasCloser>\n\t\t\t\t<p>This card has a close button.</p>\n\t\t\t</KolCard>\n\t\t</div>\n\t</>\n);\n",
752
+ "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolCard shows a card with title and slot content. The second sample features a close button.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\" className=\"w-full grid grid-cols-2 gap-4\" narrow>\n\t\t\t<KolCard _label=\"Card with title and content\">\n\t\t\t\t<p>Card contents.</p>\n\t\t\t</KolCard>\n\n\t\t\t<KolCard _label=\"Card with closer\" _hasCloser>\n\t\t\t\t<p>This card has a close button.</p>\n\t\t\t</KolCard>\n\t\t</SampleBlock>\n\t</>\n);\n",
769
753
  "kind": "sample"
770
754
  },
771
755
  {
@@ -773,7 +757,7 @@
773
757
  "group": "card",
774
758
  "name": "headlines",
775
759
  "path": "packages/samples/react/src/components/card/headlines.tsx",
776
- "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardHeadlines: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows cards with all headline levels as title.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid grid-cols-2 gap-4\">\n\t\t\t\t<KolCard _label=\"Card with headline level 0\" _level={0}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 1\" _level={1}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 2\" _level={2}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 3\" _level={3}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 4\" _level={4}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 5\" _level={5}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 6\" _level={6}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
760
+ "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardHeadlines: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows cards with all headline levels as title.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"headlines\" className=\"w-full grid grid-cols-2 gap-4\">\n\t\t\t\t<KolCard _label=\"Card with headline level 0\" _level={0}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 1\" _level={1}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 2\" _level={2}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 3\" _level={3}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 4\" _level={4}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 5\" _level={5}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 6\" _level={6}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
777
761
  "kind": "sample"
778
762
  },
779
763
  {
@@ -781,7 +765,7 @@
781
765
  "group": "card",
782
766
  "name": "linked",
783
767
  "path": "packages/samples/react/src/components/card/linked.tsx",
784
- "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardLinked: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolCards with links. The headline is wrapped with an a-tag. The whole card is clickable.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid grid-cols-2 gap-4\">\n\t\t\t\t<KolCard _label=\"Card with title and content\" _href=\"#/back-page\">\n\t\t\t\t\t<p>This card has a link.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with title and content\" _href=\"#/back-page\" _target=\"_blank\">\n\t\t\t\t\t<p>This card has a link and a target.</p>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
768
+ "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardLinked: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolCards with links. The headline is wrapped with an a-tag. The whole card is clickable.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"linked\" className=\"w-full grid grid-cols-2 gap-4\">\n\t\t\t\t<KolCard _label=\"Card with title and content\" _href=\"#/back-page\">\n\t\t\t\t\t<p>This card has a link.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with title and content\" _href=\"#/back-page\" _target=\"_blank\">\n\t\t\t\t\t<p>This card has a link and a target.</p>\n\t\t\t\t</KolCard>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
785
769
  "kind": "sample"
786
770
  },
787
771
  {
@@ -813,7 +797,7 @@
813
797
  "group": "details",
814
798
  "name": "basic",
815
799
  "path": "packages/samples/react/src/components/details/basic.tsx",
816
- "code": "import React from 'react';\n\nimport { KolDetails } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const DetailsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolDetails hides its content until opened. The open state can be toggled either by clicking the label or by setting the <code>_open</code>-prop\n\t\t\t\tprogrammatically. The sample includes an initially open state and a disabled but open Details component.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"grid gap-4\">\n\t\t\t<KolDetails _label=\"Closed initially\">\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t\t</p>\n\t\t\t</KolDetails>\n\t\t\t<KolDetails _disabled _label=\"Open initially (disabled)\" _open>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t\t</p>\n\t\t\t</KolDetails>\n\t\t\t<KolDetails _label=\"Open initially\" _open>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t\t</p>\n\t\t\t</KolDetails>\n\t\t</section>\n\t</>\n);\n",
800
+ "code": "import React from 'react';\n\nimport { KolDetails } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const DetailsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolDetails hides its content until opened. The open state can be toggled either by clicking the label or by setting the <code>_open</code>-prop\n\t\t\t\tprogrammatically. The sample includes an initially open state and a disabled but open Details component.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\">\n\t\t\t<KolDetails _label=\"Closed initially\">\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t\t</p>\n\t\t\t</KolDetails>\n\t\t\t<KolDetails _disabled _label=\"Open initially (disabled)\" _open>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t\t</p>\n\t\t\t</KolDetails>\n\t\t\t<KolDetails _label=\"Open initially\" _open>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t\t</p>\n\t\t\t</KolDetails>\n\t\t</SampleBlock>\n\t</>\n);\n",
817
801
  "kind": "sample"
818
802
  },
819
803
  {
@@ -877,7 +861,7 @@
877
861
  "group": "form",
878
862
  "name": "basic",
879
863
  "path": "packages/samples/react/src/components/form/basic.tsx",
880
- "code": "import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const FormBasic: FC = () => {\n\tconst formEventHAndler = {\n\t\tonSubmit: (event: any) => console.log('submitted:', event),\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolForm renders a form around the input components provided in a slot. This sample shows a basic form with three input fields and a submit button.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolForm className=\"w-full\" _on={formEventHAndler}>\n\t\t\t\t<div className=\"grid gap-2\">\n\t\t\t\t\t<KolInputText id=\"input1\" _label=\"Input 1\" />\n\t\t\t\t\t<KolInputText id=\"input2\" _label=\"Input 2\" />\n\t\t\t\t\t<KolInputText id=\"input3\" _label=\"Input 3\" />\n\t\t\t\t\t<KolButton _label=\"Submit\" _variant=\"primary\" _type=\"submit\" />\n\t\t\t\t</div>\n\t\t\t</KolForm>\n\t\t</>\n\t);\n};\n",
864
+ "code": "import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const FormBasic: FC = () => {\n\tconst formEventHAndler = {\n\t\tonSubmit: (event: any) => console.log('submitted:', event),\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolForm renders a form around the input components provided in a slot. This sample shows a basic form with three input fields and a submit button.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"form-basic\" className=\"grid gap-2\">\n\t\t\t\t<KolForm className=\"w-full\" _on={formEventHAndler}>\n\t\t\t\t\t<KolInputText id=\"input1\" _label=\"Input 1\" />\n\t\t\t\t\t<KolInputText id=\"input2\" _label=\"Input 2\" />\n\t\t\t\t\t<KolInputText id=\"input3\" _label=\"Input 3\" />\n\t\t\t\t\t<KolButton _label=\"Submit\" _variant=\"primary\" _type=\"submit\" />\n\t\t\t\t</KolForm>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
881
865
  "kind": "sample"
882
866
  },
883
867
  {
@@ -885,7 +869,15 @@
885
869
  "group": "form",
886
870
  "name": "error-list",
887
871
  "path": "packages/samples/react/src/components/form/error-list.tsx",
888
- "code": "import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const FormErrorList: FC = () => {\n\tconst formRef = useRef<HTMLKolFormElement | null>(null);\n\n\tconst scrollTo = () => {\n\t\tformRef.current?.focusErrorList();\n\t};\n\n\t/**\n\t * Simulate the form submission\n\t */\n\tuseEffect(() => {\n\t\tformRef.current?.focusErrorList();\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows a form with error messages.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolForm\n\t\t\t\tclassName=\"w-full\"\n\t\t\t\tref={formRef}\n\t\t\t\t_on={{\n\t\t\t\t\tonSubmit: scrollTo,\n\t\t\t\t}}\n\t\t\t\t_errorList={[\n\t\t\t\t\t{\n\t\t\t\t\t\tmessage: 'Error in Input 2 (default scroll behaviour)',\n\t\t\t\t\t\tselector: '#input2',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tmessage: 'Error in Input 3 (no scrolling, just alert)',\n\t\t\t\t\t\tselector: () => alert('Error in Input 3'),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tmessage: 'Error in Input 4 (custom scroll behaviour)',\n\t\t\t\t\t\tselector: '#input4',\n\t\t\t\t\t\toptions: { behavior: 'instant', block: 'start', afterFocus: () => console.log('after Focus Input 4') },\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t>\n\t\t\t\t<div className=\"grid gap-250\">\n\t\t\t\t\t<KolInputText id=\"input1\" _label=\"Input 1\" />\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\tid=\"input2\"\n\t\t\t\t\t\t_label=\"Input 2\"\n\t\t\t\t\t\t_touched\n\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\tid=\"input3\"\n\t\t\t\t\t\t_label=\"Input 3\"\n\t\t\t\t\t\t_touched\n\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\tid=\"input4\"\n\t\t\t\t\t\t_label=\"Input 4\"\n\t\t\t\t\t\t_touched\n\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<KolButton _label=\"ScrollTo\" _type=\"submit\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</KolForm>\n\t\t</>\n\t);\n};\n",
872
+ "code": "import { KolForm, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const FormErrorList: FC = () => {\n\tconst formRef = useRef<HTMLKolFormElement | null>(null);\n\n\tconst scrollTo = () => {\n\t\tformRef.current?.focusErrorList();\n\t};\n\n\t/**\n\t * Simulate the form submission\n\t */\n\tuseEffect(() => {\n\t\tformRef.current?.focusErrorList();\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows a form with error messages.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"error-list\">\n\t\t\t\t<KolForm\n\t\t\t\t\tclassName=\"w-full\"\n\t\t\t\t\tref={formRef}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonSubmit: scrollTo,\n\t\t\t\t\t}}\n\t\t\t\t\t_errorList={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmessage: 'Error in Input 2 (default scroll behaviour)',\n\t\t\t\t\t\t\tselector: '#input2',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmessage: 'Error in Input 3 (no scrolling, just alert)',\n\t\t\t\t\t\t\tselector: () => alert('Error in Input 3'),\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmessage: 'Error in Input 4 (custom scroll behaviour)',\n\t\t\t\t\t\t\tselector: '#input4',\n\t\t\t\t\t\t\toptions: { behavior: 'instant', block: 'start', afterFocus: () => console.log('after Focus Input 4') },\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t<KolInputText id=\"input1\" _label=\"Input 1\" />\n\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\tid=\"input2\"\n\t\t\t\t\t\t\t_label=\"Input 2\"\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\tid=\"input3\"\n\t\t\t\t\t\t\t_label=\"Input 3\"\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\tid=\"input4\"\n\t\t\t\t\t\t\t_label=\"Input 4\"\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolForm>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
873
+ "kind": "sample"
874
+ },
875
+ {
876
+ "id": "sample/form/error-list-scroll",
877
+ "group": "form",
878
+ "name": "error-list-scroll",
879
+ "path": "packages/samples/react/src/components/form/error-list-scroll.tsx",
880
+ "code": "import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const FormErrorListScroll: FC = () => {\n\tconst formRef = useRef<HTMLKolFormElement | null>(null);\n\n\tconst scrollTo = () => {\n\t\tformRef.current?.focusErrorList();\n\t};\n\n\t/**\n\t * Simulate the form submission\n\t */\n\tuseEffect(() => {\n\t\tformRef.current?.focusErrorList();\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows a form with error messages.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"error-list\">\n\t\t\t\t<KolForm\n\t\t\t\t\tclassName=\"w-full\"\n\t\t\t\t\tref={formRef}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonSubmit: scrollTo,\n\t\t\t\t\t}}\n\t\t\t\t\t_errorList={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmessage: 'Error in Input 2 (default scroll behaviour)',\n\t\t\t\t\t\t\tselector: '#input2',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmessage: 'Error in Input 3 (no scrolling, just alert)',\n\t\t\t\t\t\t\tselector: () => alert('Error in Input 3'),\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmessage: 'Error in Input 4 (custom scroll behaviour)',\n\t\t\t\t\t\t\tselector: '#input4',\n\t\t\t\t\t\t\toptions: { behavior: 'instant', block: 'start', afterFocus: () => console.log('after Focus Input 4') },\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex flex-col gap-250\">\n\t\t\t\t\t\t<KolInputText id=\"input1\" _label=\"Input 1\" />\n\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\tid=\"input2\"\n\t\t\t\t\t\t\t_label=\"Input 2\"\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\tid=\"input3\"\n\t\t\t\t\t\t\t_label=\"Input 3\"\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\tid=\"input4\"\n\t\t\t\t\t\t\t_label=\"Input 4\"\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolButton _label=\"ScrollTo\" _type=\"submit\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolForm>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
889
881
  "kind": "sample"
890
882
  },
891
883
  {
@@ -901,7 +893,7 @@
901
893
  "group": "heading",
902
894
  "name": "badge",
903
895
  "path": "packages/samples/react/src/components/heading/badged.tsx",
904
- "code": "import React from 'react';\n\nimport { KolBadge, KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingBadged: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolHeading with its different levels and content provided using the export slot instead of the <code>_label</code>-property.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolHeading _label=\"\" _level={1}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={2}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#86ffc6\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={3}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#06539e\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={4}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#ae0000\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={5}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#8b008b\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={6}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#ffc0cb\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t</div>\n\t</>\n);\n",
896
+ "code": "import React from 'react';\n\nimport { KolBadge, KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingBadged: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolHeading with its different levels and content provided using the export slot instead of the <code>_label</code>-property.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"badged\">\n\t\t\t<KolHeading _label=\"\" _level={1}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={2}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#86ffc6\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={3}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#06539e\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={4}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#ae0000\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={5}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#8b008b\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={6}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#ffc0cb\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t</SampleBlock>\n\t</>\n);\n",
905
897
  "kind": "sample"
906
898
  },
907
899
  {
@@ -909,7 +901,7 @@
909
901
  "group": "heading",
910
902
  "name": "basic",
911
903
  "path": "packages/samples/react/src/components/heading/basic.tsx",
912
- "code": "import React from 'react';\n\nimport { KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolHeading renders a heading with the given level.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolHeading _label=\"I'm a H1-heading\" _level={1} />\n\t\t\t<KolHeading _label=\"I'm a H2-heading\" _level={2} />\n\t\t\t<KolHeading _label=\"I'm a H3-heading\" _level={3} />\n\t\t\t<KolHeading _label=\"I'm a H4-heading\" _level={4} />\n\t\t\t<KolHeading _label=\"I'm a H5-heading\" _level={5} />\n\t\t\t<KolHeading _label=\"I'm a H6-heading\" _level={6} />\n\t\t</div>\n\t</>\n);\n",
904
+ "code": "import React from 'react';\n\nimport { KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolHeading renders a heading with the given level.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\">\n\t\t\t<KolHeading _label=\"I'm a H1-heading\" _level={1} />\n\t\t\t<KolHeading _label=\"I'm a H2-heading\" _level={2} />\n\t\t\t<KolHeading _label=\"I'm a H3-heading\" _level={3} />\n\t\t\t<KolHeading _label=\"I'm a H4-heading\" _level={4} />\n\t\t\t<KolHeading _label=\"I'm a H5-heading\" _level={5} />\n\t\t\t<KolHeading _label=\"I'm a H6-heading\" _level={6} />\n\t\t</SampleBlock>\n\t</>\n);\n",
913
905
  "kind": "sample"
914
906
  },
915
907
  {
@@ -917,7 +909,7 @@
917
909
  "group": "heading",
918
910
  "name": "paragraph",
919
911
  "path": "packages/samples/react/src/components/heading/paragraph.tsx",
920
- "code": "import React from 'react';\n\nimport { KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingParagraph: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolHeading with its different levels combined with some text content each.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolHeading _label=\"Ich bin eine H1-Überschrift\" _level={1} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H2-Überschrift\" _level={2} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H3-Überschrift\" _level={3} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H4-Überschrift\" _level={4} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H5-Überschrift\" _level={5} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H6-Überschrift\" _level={6} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t</div>\n\t</>\n);\n",
912
+ "code": "import React from 'react';\n\nimport { KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingParagraph: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolHeading with its different levels combined with some text content each.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"paragraph\">\n\t\t\t<KolHeading _label=\"Ich bin eine H1-Überschrift\" _level={1} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H2-Überschrift\" _level={2} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H3-Überschrift\" _level={3} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H4-Überschrift\" _level={4} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H5-Überschrift\" _level={5} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H6-Überschrift\" _level={6} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t</SampleBlock>\n\t</>\n);\n",
921
913
  "kind": "sample"
922
914
  },
923
915
  {
@@ -925,7 +917,7 @@
925
917
  "group": "heading",
926
918
  "name": "secondary",
927
919
  "path": "packages/samples/react/src/components/heading/secondary.tsx",
928
- "code": "import React from 'react';\n\nimport { KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingSecondary: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolHeading with the prop <code>_secondaryHeadline</code> in use.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolHeading _label=\"This is a H1 headline\" _secondaryHeadline=\"This is a secondary headline\" _level={1} />\n\t\t</div>\n\t</>\n);\n",
920
+ "code": "import React from 'react';\n\nimport { KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingSecondary: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolHeading with the prop <code>_secondaryHeadline</code> in use.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"secondary\">\n\t\t\t<KolHeading _label=\"This is a H1 headline\" _secondaryHeadline=\"This is a secondary headline\" _level={1} />\n\t\t</SampleBlock>\n\t</>\n);\n",
929
921
  "kind": "sample"
930
922
  },
931
923
  {
@@ -933,7 +925,7 @@
933
925
  "group": "icon",
934
926
  "name": "all-kolicons",
935
927
  "path": "packages/samples/react/src/components/icon/all-kolicons.tsx",
936
- "code": "import React, { useEffect, useState } from 'react';\n\nimport { KolIcon } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconAllKolicons: FC = () => {\n\tconst [icons, setIcons] = useState<object>({});\n\n\tuseEffect(() => {\n\t\tfetch('/assets/kolicons/kolicons.json')\n\t\t\t.then((response) => response.json())\n\t\t\t.then((data) => {\n\t\t\t\tsetIcons(data);\n\t\t\t});\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows all kolicons with their names.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{Object.entries(icons).map(([key]) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div className=\"flex gap-4\" key={key}>\n\t\t\t\t\t\t\t<KolIcon _label=\"\" _icons={'kolicon-' + key} />\n\t\t\t\t\t\t\t<span>kolicon-{key}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
928
+ "code": "import React, { useEffect, useState } from 'react';\n\nimport { KolIcon } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconAllKolicons: FC = () => {\n\tconst [icons, setIcons] = useState<object>({});\n\n\tuseEffect(() => {\n\t\tfetch('/assets/kolicons/kolicons.json')\n\t\t\t.then((response) => response.json())\n\t\t\t.then((data) => {\n\t\t\t\tsetIcons(data);\n\t\t\t});\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows all kolicons with their names.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{Object.entries(icons).map(([key]) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div className=\"flex gap-4\" key={key}>\n\t\t\t\t\t\t\t<KolIcon _label={`Icon ${key}`} _icons={'kolicon-' + key} />\n\t\t\t\t\t\t\t<span>kolicon-{key}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
937
929
  "kind": "sample"
938
930
  },
939
931
  {
@@ -941,7 +933,7 @@
941
933
  "group": "icon",
942
934
  "name": "basic",
943
935
  "path": "packages/samples/react/src/components/icon/basic.tsx",
944
- "code": "import React from 'react';\n\nimport { KolIcon } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolIcon renders codicon icons. This sample shows regular icons and one with a custom style-property, changing the icon color.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-alert-info\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-kolibri\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-house\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-settings\" />\n\n\t\t\t<KolIcon\n\t\t\t\tclassName=\"block w-[1em] h-[1em]\"\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: 'red',\n\t\t\t\t}}\n\t\t\t\t_label=\"\"\n\t\t\t\t_icons=\"kolicon-house\"\n\t\t\t/>\n\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"codicon codicon-plus\" />\n\t\t</div>\n\t</>\n);\n",
936
+ "code": "import React from 'react';\n\nimport { KolIcon } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolIcon renders codicon icons. This sample shows regular icons and one with a custom style-property, changing the icon color.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolIcon className=\"block\" _label=\"Alert Info Icon\" _icons=\"kolicon-alert-info\" />\n\t\t\t<KolIcon className=\"block\" _label=\"Kolibri Icon\" _icons=\"kolicon-kolibri\" />\n\t\t\t<KolIcon className=\"block\" _label=\"House Icon\" _icons=\"kolicon-house\" />\n\t\t\t<KolIcon className=\"block\" _label=\"Settings Icon\" _icons=\"kolicon-settings\" />\n\n\t\t\t<KolIcon\n\t\t\t\tclassName=\"block w-[1em] h-[1em]\"\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: 'red',\n\t\t\t\t}}\n\t\t\t\t_label=\"House Icon\"\n\t\t\t\t_icons=\"kolicon-house\"\n\t\t\t/>\n\n\t\t\t<KolIcon className=\"block\" _label=\"Plus Icon\" _icons=\"codicon codicon-plus\" />\n\t\t</div>\n\t</>\n);\n",
945
937
  "kind": "sample"
946
938
  },
947
939
  {
@@ -949,7 +941,7 @@
949
941
  "group": "icon",
950
942
  "name": "font",
951
943
  "path": "packages/samples/react/src/components/icon/font.tsx",
952
- "code": "import React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\n\nimport { KolButton, KolIcon, KolInputText } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconFont: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst iconVariants = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariants') : []), [theme]);\n\tconst iconVariantsButton = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariantsButton') : []), [theme]);\n\tconst iconVariantsInput = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariantsInput') : []), [theme]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolIcon renders different icon fonts depending on your theme.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{!Array.isArray(iconVariants) || iconVariants.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for icons.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariants.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4\" key={element}>\n\t\t\t\t\t\t\t\t<KolIcon _label=\"\" _icons={element} />\n\t\t\t\t\t\t\t\t<span>&lt;KolIcon _icons='{element}' _label=\"\" /&gt;</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{!Array.isArray(iconVariantsButton) || iconVariantsButton.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for icons in buttons.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariantsButton.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4 items-center\" key={element}>\n\t\t\t\t\t\t\t\t<KolButton _icons={element} _label=\"Button\" _variant=\"primary\" />\n\t\t\t\t\t\t\t\t<span>&lt;KolButton _icons='{element}' _label=\"Button\" _variant=\"primary\" /&gt;</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-8 p-8\">\n\t\t\t\t{!Array.isArray(iconVariantsInput) || iconVariantsInput.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for icons in inputs.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariantsInput.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4 items-center\" key={element}>\n\t\t\t\t\t\t\t\t<KolInputText _icons={element} _label=\"Input with Icon\" />\n\t\t\t\t\t\t\t\t<span>&lt;KolInputText _icons='{element}' _label=\"Input with Icon\" /&gt;</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
944
+ "code": "import React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\n\nimport { KolButton, KolIcon, KolInputText } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getTheme } from '../../shares/store';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconFont: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getTheme();\n\tconst iconVariants = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariants') : []), [theme]);\n\tconst iconVariantsButton = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariantsButton') : []), [theme]);\n\tconst iconVariantsInput = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariantsInput') : []), [theme]);\n\n\t/* Themes without variants only render the fallback text – there is nothing theme specific to snapshot. */\n\tconst hasIconVariants = Array.isArray(iconVariants) && iconVariants.length > 0;\n\tconst hasIconVariantsButton = Array.isArray(iconVariantsButton) && iconVariantsButton.length > 0;\n\tconst hasIconVariantsInput = Array.isArray(iconVariantsInput) && iconVariantsInput.length > 0;\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolIcon renders different icon fonts depending on your theme.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"icons\" className=\"grid grid-cols-2 gap-8 p-8\" skipSnapshot={!hasIconVariants}>\n\t\t\t\t{!hasIconVariants ? (\n\t\t\t\t\t<p>This theme has no variants for icons.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariants.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4\" key={element}>\n\t\t\t\t\t\t\t\t<KolIcon _label={element} _icons={element} />\n\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t&lt;KolIcon _icons='{element}' _label=\"{element}\" /&gt;\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"buttons\" className=\"grid grid-cols-2 gap-8 p-8\" skipSnapshot={!hasIconVariantsButton}>\n\t\t\t\t{!hasIconVariantsButton ? (\n\t\t\t\t\t<p>This theme has no variants for icons in buttons.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariantsButton.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4 items-center\" key={element}>\n\t\t\t\t\t\t\t\t<KolButton _icons={element} _label=\"Button\" _variant=\"primary\" />\n\t\t\t\t\t\t\t\t<span>&lt;KolButton _icons='{element}' _label=\"Button\" _variant=\"primary\" /&gt;</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"inputs\" className=\"grid gap-8 p-8\" skipSnapshot={!hasIconVariantsInput}>\n\t\t\t\t{!hasIconVariantsInput ? (\n\t\t\t\t\t<p>This theme has no variants for icons in inputs.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariantsInput.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4 items-center\" key={element}>\n\t\t\t\t\t\t\t\t<KolInputText _icons={element} _label=\"Input with Icon\" />\n\t\t\t\t\t\t\t\t<span>&lt;KolInputText _icons='{element}' _label=\"Input with Icon\" /&gt;</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
953
945
  "kind": "sample"
954
946
  },
955
947
  {
@@ -957,7 +949,7 @@
957
949
  "group": "image",
958
950
  "name": "basic",
959
951
  "path": "packages/samples/react/src/components/image/basic.tsx",
960
- "code": "import { KolImage } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ImageBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolImage renders an image. The sample shows an image with alternative text.</p>\n\t\t</SampleDescription>\n\n\t\t<KolImage\n\t\t\t_alt=\"KoliBri design system illustration showing three people working on laptops surrounded by UI components, charts, and the KoliBri hummingbird logo\"\n\t\t\t_src=\"assets/sample-image.png\"\n\t\t\tclassName=\"w-image\"\n\t\t/>\n\t</>\n);\n",
952
+ "code": "import { KolImage } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ImageBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolImage renders an image. The sample shows an image with alternative text.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\" fitContent>\n\t\t\t<KolImage\n\t\t\t\t_alt=\"KoliBri design system illustration showing three people working on laptops surrounded by UI components, charts, and the KoliBri hummingbird logo\"\n\t\t\t\t_src=\"assets/sample-image.png\"\n\t\t\t\tclassName=\"w-image\"\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
961
953
  "kind": "sample"
962
954
  },
963
955
  {
@@ -1117,7 +1109,7 @@
1117
1109
  "group": "input-number",
1118
1110
  "name": "number-formatter",
1119
1111
  "path": "packages/samples/react/src/components/input-number/number-formatter.tsx",
1120
- "code": "import { KolForm, KolInputNumber, KolInputText } from '@public-ui/react-v19';\nimport React, { type BaseSyntheticEvent } from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { NumericFormat, type NumberFormatValues, type NumericFormatProps } from 'react-number-format';\n\nimport { SampleDescription } from '../SampleDescription';\n\ntype KolInputTextEvents = {\n\tonBlur?: (event: Event) => void;\n\tonChange?: (event: Event, value: unknown) => void;\n\tonFocus?: (event: Event) => void;\n\tonInput?: (event: Event, value: unknown) => void;\n};\n\nclass NumberFormatter {\n\tpublic parse(value: unknown): string {\n\t\tif (value === undefined || value === null || value === '') {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst stringValue = String(value);\n\t\treturn stringValue.replace(/[eE.,]/g, '').replace(/\\d[+-]/g, '');\n\t}\n}\n\nconst disallowedCharactersPattern = /[.,+eE]/;\n\nconst preventInvalidKeyDown = (event: KeyboardEvent) => {\n\tif (event.key.length === 1 && !event.ctrlKey && !event.metaKey && disallowedCharactersPattern.test(event.key)) {\n\t\tevent.preventDefault();\n\t}\n};\n\ntype KolNumericFormatControllerProps = {\n\t_label: string;\n\t_msg?: React.ComponentProps<typeof KolInputText>['_msg'];\n\t_touched?: boolean;\n\t_on?: React.ComponentProps<typeof KolInputText>['_on'];\n\t_required?: boolean;\n\tvalue?: number;\n} & Omit<NumericFormatProps, 'customInput' | 'value' | 'onBlur' | 'onValueChange'>;\n\nfunction KolNumericFormat({\n\t_label,\n\t_msg,\n\t_touched,\n\t_on,\n\t_required,\n\tvalue,\n\tthousandSeparator = true,\n\tsuffix = '€',\n\t...props\n}: KolNumericFormatControllerProps) {\n\tconst normalizedOn = _on && typeof _on === 'object' ? (_on as KolInputTextEvents) : undefined;\n\n\treturn (\n\t\t<NumericFormat\n\t\t\t{...(props as any)}\n\t\t\tvalue={value}\n\t\t\tsuffix={suffix}\n\t\t\tthousandSeparator={thousandSeparator}\n\t\t\tvalueIsNumericString={false}\n\t\t\tcustomInput={(inputProps: any) => {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\tconst inputValue = inputProps.value;\n\t\t\t\treturn (\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\t_value={inputValue}\n\t\t\t\t\t\t_label={_label}\n\t\t\t\t\t\t_msg={_msg}\n\t\t\t\t\t\t_touched={_touched}\n\t\t\t\t\t\t_required={_required}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonBlur: inputProps.onBlur as ((event: Event) => void) | undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonChange: inputProps.onChange as ((event: Event, value: unknown) => void) | undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonFocus: inputProps.onFocus as ((event: Event) => void) | undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonInput: inputProps.onInput as ((event: Event, value: unknown) => void) | undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}}\n\t\t\tonValueChange={(numericValue: NumberFormatValues) => {\n\t\t\t\tconst fakeEvent = new Event('input');\n\t\t\t\tnormalizedOn?.onInput?.(fakeEvent, numericValue.floatValue);\n\t\t\t}}\n\t\t\tonBlur={(event) => {\n\t\t\t\tnormalizedOn?.onBlur?.(event.nativeEvent);\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nfunction KolNumericFormatController(props: any) {\n\tconst { name, control, rules, defaultValue, shouldUnregister, disabled, _label, _required, ...componentProps } = props;\n\treturn (\n\t\t<Controller\n\t\t\tname={name}\n\t\t\tcontrol={control}\n\t\t\trules={rules}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tshouldUnregister={shouldUnregister}\n\t\t\tdisabled={disabled}\n\t\t\trender={({ field, fieldState }) => {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\tconst userHandlers = componentProps._on as KolInputTextEvents | undefined;\n\t\t\t\treturn (\n\t\t\t\t\t<KolNumericFormat\n\t\t\t\t\t\t{...(componentProps as any)}\n\t\t\t\t\t\t_label={_label}\n\t\t\t\t\t\t_required={_required}\n\t\t\t\t\t\tvalue={field.value}\n\t\t\t\t\t\t_touched={fieldState.isTouched}\n\t\t\t\t\t\t_msg={\n\t\t\t\t\t\t\tfieldState.error\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t_type: 'error' as const,\n\t\t\t\t\t\t\t\t\t\t_description: fieldState.error.message || String(fieldState.error),\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonInput: (event: Event, value: unknown) => {\n\t\t\t\t\t\t\t\tfield.onChange(value);\n\t\t\t\t\t\t\t\tuserHandlers?.onInput?.(event, value);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonBlur: () => field.onBlur(),\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}}\n\t\t/>\n\t);\n}\n\ntype CurrencyExampleFormValues = {\n\tcurrency: number;\n};\n\nexport function InputNumberNumberFormatter() {\n\tconst formatter = new NumberFormatter();\n\tconst [displayValue, setDisplayValue] = React.useState<number | undefined>(undefined);\n\tconst [value, setValue] = React.useState<number | undefined>(-128);\n\tconst [touched, setTouched] = React.useState(false);\n\n\tconst initialCurrencyExampleValues: CurrencyExampleFormValues = {\n\t\tcurrency: 1000000,\n\t};\n\n\tconst currencyForm = useForm<CurrencyExampleFormValues>({\n\t\tdefaultValues: initialCurrencyExampleValues,\n\t\tmode: 'onTouched',\n\t});\n\n\tconst currencyValues = currencyForm.watch();\n\n\tconst handleCurrencySubmit = (event: Event) => {\n\t\tvoid currencyForm.handleSubmit(async () => {})(event as unknown as BaseSyntheticEvent);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis example demonstrates formatting number input. The first example shows whole number formatting where decimal separators (. and ,) and scientific\n\t\t\t\t\tnotation (e) are automatically removed on input. The second example shows currency formatting with react-number-format in a react-hook-form context.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"w-full grid gap-4\">\n\t\t\t\t<div>\n\t\t\t\t\t<KolForm>\n\t\t\t\t\t\t<KolInputNumber\n\t\t\t\t\t\t\t_label=\"Whole number\"\n\t\t\t\t\t\t\t_step={1}\n\t\t\t\t\t\t\t_value={displayValue ?? value}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonKeyDown: preventInvalidKeyDown,\n\t\t\t\t\t\t\t\tonBlur: () => {\n\t\t\t\t\t\t\t\t\tsetTouched(true);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tonInput: (_event: Event, inputValue: unknown) => {\n\t\t\t\t\t\t\t\t\tconst cleaned = formatter.parse(inputValue);\n\t\t\t\t\t\t\t\t\tconst numValue = cleaned === '' ? undefined : Number(cleaned);\n\n\t\t\t\t\t\t\t\t\tsetDisplayValue(numValue);\n\t\t\t\t\t\t\t\t\tsetValue(numValue);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</KolForm>\n\t\t\t\t\t<pre className=\"text-base mt-2\">{JSON.stringify({ value, touched }, null, 2)}</pre>\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<KolForm _on={{ onSubmit: handleCurrencySubmit }}>\n\t\t\t\t\t\t<KolNumericFormatController\n\t\t\t\t\t\t\tcontrol={currencyForm.control as any}\n\t\t\t\t\t\t\tname=\"currency\"\n\t\t\t\t\t\t\tdecimalScale={2}\n\t\t\t\t\t\t\tdisplayType=\"input\"\n\t\t\t\t\t\t\trules={{ required: 'Please enter a currency amount.' }}\n\t\t\t\t\t\t\t_label=\"Currency\"\n\t\t\t\t\t\t\t_required\n\t\t\t\t\t\t/>\n\t\t\t\t\t</KolForm>\n\t\t\t\t\t<pre className=\"text-base mt-2\">{JSON.stringify(currencyValues, null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n",
1112
+ "code": "import { KolForm, KolInputNumber, KolInputText } from '@public-ui/react-v19';\nimport React, { type BaseSyntheticEvent } from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { NumericFormat, type NumberFormatValues, type NumericFormatProps } from 'react-number-format';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\ntype KolInputTextEvents = {\n\tonBlur?: (event: Event) => void;\n\tonChange?: (event: Event, value: unknown) => void;\n\tonFocus?: (event: Event) => void;\n\tonInput?: (event: Event, value: unknown) => void;\n};\n\nclass NumberFormatter {\n\tpublic parse(value: unknown): string {\n\t\tif (value === undefined || value === null || value === '') {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst stringValue = String(value);\n\t\treturn stringValue.replace(/[eE.,]/g, '').replace(/\\d[+-]/g, '');\n\t}\n}\n\nconst disallowedCharactersPattern = /[.,+eE]/;\n\nconst preventInvalidKeyDown = (event: KeyboardEvent) => {\n\tif (event.key.length === 1 && !event.ctrlKey && !event.metaKey && disallowedCharactersPattern.test(event.key)) {\n\t\tevent.preventDefault();\n\t}\n};\n\ntype KolNumericFormatControllerProps = {\n\t_label: string;\n\t_msg?: React.ComponentProps<typeof KolInputText>['_msg'];\n\t_touched?: boolean;\n\t_on?: React.ComponentProps<typeof KolInputText>['_on'];\n\t_required?: boolean;\n\tvalue?: number;\n} & Omit<NumericFormatProps, 'customInput' | 'value' | 'onBlur' | 'onValueChange'>;\n\nfunction KolNumericFormat({\n\t_label,\n\t_msg,\n\t_touched,\n\t_on,\n\t_required,\n\tvalue,\n\tthousandSeparator = true,\n\tsuffix = '€',\n\t...props\n}: KolNumericFormatControllerProps) {\n\tconst normalizedOn = _on && typeof _on === 'object' ? (_on as KolInputTextEvents) : undefined;\n\n\treturn (\n\t\t<NumericFormat\n\t\t\t{...(props as any)}\n\t\t\tvalue={value}\n\t\t\tsuffix={suffix}\n\t\t\tthousandSeparator={thousandSeparator}\n\t\t\tvalueIsNumericString={false}\n\t\t\tcustomInput={(inputProps: any) => {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\tconst inputValue = inputProps.value;\n\t\t\t\treturn (\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\t_value={inputValue}\n\t\t\t\t\t\t_label={_label}\n\t\t\t\t\t\t_msg={_msg}\n\t\t\t\t\t\t_touched={_touched}\n\t\t\t\t\t\t_required={_required}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonBlur: inputProps.onBlur as ((event: Event) => void) | undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonChange: inputProps.onChange as ((event: Event, value: unknown) => void) | undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonFocus: inputProps.onFocus as ((event: Event) => void) | undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonInput: inputProps.onInput as ((event: Event, value: unknown) => void) | undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}}\n\t\t\tonValueChange={(numericValue: NumberFormatValues) => {\n\t\t\t\tconst fakeEvent = new Event('input');\n\t\t\t\tnormalizedOn?.onInput?.(fakeEvent, numericValue.floatValue);\n\t\t\t}}\n\t\t\tonBlur={(event) => {\n\t\t\t\tnormalizedOn?.onBlur?.(event.nativeEvent);\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nfunction KolNumericFormatController(props: any) {\n\tconst { name, control, rules, defaultValue, shouldUnregister, disabled, _label, _required, ...componentProps } = props;\n\treturn (\n\t\t<Controller\n\t\t\tname={name}\n\t\t\tcontrol={control}\n\t\t\trules={rules}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tshouldUnregister={shouldUnregister}\n\t\t\tdisabled={disabled}\n\t\t\trender={({ field, fieldState }) => {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\tconst userHandlers = componentProps._on as KolInputTextEvents | undefined;\n\t\t\t\treturn (\n\t\t\t\t\t<KolNumericFormat\n\t\t\t\t\t\t{...(componentProps as any)}\n\t\t\t\t\t\t_label={_label}\n\t\t\t\t\t\t_required={_required}\n\t\t\t\t\t\tvalue={field.value}\n\t\t\t\t\t\t_touched={fieldState.isTouched}\n\t\t\t\t\t\t_msg={\n\t\t\t\t\t\t\tfieldState.error\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t_type: 'error' as const,\n\t\t\t\t\t\t\t\t\t\t_description: fieldState.error.message || String(fieldState.error),\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonInput: (event: Event, value: unknown) => {\n\t\t\t\t\t\t\t\tfield.onChange(value);\n\t\t\t\t\t\t\t\tuserHandlers?.onInput?.(event, value);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonBlur: () => field.onBlur(),\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}}\n\t\t/>\n\t);\n}\n\ntype CurrencyExampleFormValues = {\n\tcurrency: number;\n};\n\nexport function InputNumberNumberFormatter() {\n\tconst formatter = new NumberFormatter();\n\tconst [displayValue, setDisplayValue] = React.useState<number | undefined>(undefined);\n\tconst [value, setValue] = React.useState<number | undefined>(-128);\n\tconst [touched, setTouched] = React.useState(false);\n\n\tconst initialCurrencyExampleValues: CurrencyExampleFormValues = {\n\t\tcurrency: 1000000,\n\t};\n\n\tconst currencyForm = useForm<CurrencyExampleFormValues>({\n\t\tdefaultValues: initialCurrencyExampleValues,\n\t\tmode: 'onTouched',\n\t});\n\n\tconst currencyValues = currencyForm.watch();\n\n\tconst handleCurrencySubmit = (event: Event) => {\n\t\tvoid currencyForm.handleSubmit(async () => {})(event as unknown as BaseSyntheticEvent);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis example demonstrates formatting number input. The first example shows whole number formatting where decimal separators (. and ,) and scientific\n\t\t\t\t\tnotation (e) are automatically removed on input. The second example shows currency formatting with react-number-format in a react-hook-form context.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"w-full grid gap-4\">\n\t\t\t\t<SampleBlock id=\"whole-number\">\n\t\t\t\t\t<KolForm>\n\t\t\t\t\t\t<KolInputNumber\n\t\t\t\t\t\t\t_label=\"Whole number\"\n\t\t\t\t\t\t\t_step={1}\n\t\t\t\t\t\t\t_value={displayValue ?? value}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonKeyDown: preventInvalidKeyDown,\n\t\t\t\t\t\t\t\tonBlur: () => {\n\t\t\t\t\t\t\t\t\tsetTouched(true);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tonInput: (_event: Event, inputValue: unknown) => {\n\t\t\t\t\t\t\t\t\tconst cleaned = formatter.parse(inputValue);\n\t\t\t\t\t\t\t\t\tconst numValue = cleaned === '' ? undefined : Number(cleaned);\n\n\t\t\t\t\t\t\t\t\tsetDisplayValue(numValue);\n\t\t\t\t\t\t\t\t\tsetValue(numValue);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</KolForm>\n\t\t\t\t\t<pre className=\"text-base mt-2\">{JSON.stringify({ value, touched }, null, 2)}</pre>\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<SampleBlock id=\"currency\">\n\t\t\t\t\t<KolForm _on={{ onSubmit: handleCurrencySubmit }}>\n\t\t\t\t\t\t<KolNumericFormatController\n\t\t\t\t\t\t\tcontrol={currencyForm.control as any}\n\t\t\t\t\t\t\tname=\"currency\"\n\t\t\t\t\t\t\tdecimalScale={2}\n\t\t\t\t\t\t\tdisplayType=\"input\"\n\t\t\t\t\t\t\trules={{ required: 'Please enter a currency amount.' }}\n\t\t\t\t\t\t\t_label=\"Currency\"\n\t\t\t\t\t\t\t_required\n\t\t\t\t\t\t/>\n\t\t\t\t\t</KolForm>\n\t\t\t\t\t<pre className=\"text-base mt-2\">{JSON.stringify(currencyValues, null, 2)}</pre>\n\t\t\t\t</SampleBlock>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n",
1121
1113
  "kind": "sample"
1122
1114
  },
1123
1115
  {
@@ -1141,7 +1133,7 @@
1141
1133
  "group": "input-password",
1142
1134
  "name": "show-password",
1143
1135
  "path": "packages/samples/react/src/components/input-password/show-password.tsx",
1144
- "code": "import type { FC } from 'react';\nimport React, { useRef } from 'react';\n\nimport { KolForm, KolInputPassword } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputPasswordShowPassword: FC = () => {\n\tconst passwordRef = useRef<HTMLKolInputPasswordElement>(null);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows KolInputPassword in the variant &quot;visibility-toggle&quot;. It features a button to toggle between a visible and hidden password\n\t\t\t\t\tinput.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolForm className=\"w-full\">\n\t\t\t\t<KolInputPassword _placeholder=\"With 'Show password' button\" _label=\"Password\" ref={passwordRef} className=\"block\" _visibilityToggle={true} />\n\t\t\t\t<KolInputPassword\n\t\t\t\t\t_placeholder=\"With 'Show password' button\"\n\t\t\t\t\t_label=\"Password\"\n\t\t\t\t\tref={passwordRef}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_visibilityToggle={true}\n\t\t\t\t\t_value=\"Password\"\n\t\t\t\t/>\n\t\t\t\t<KolInputPassword\n\t\t\t\t\t_placeholder=\"With 'Show password' button and disabled\"\n\t\t\t\t\t_label=\"Password\"\n\t\t\t\t\tref={passwordRef}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_disabled\n\t\t\t\t\t_visibilityToggle={true}\n\t\t\t\t/>\n\t\t\t</KolForm>\n\t\t</>\n\t);\n};\n",
1136
+ "code": "import type { FC } from 'react';\nimport React, { useRef } from 'react';\n\nimport { KolForm, KolInputPassword } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputPasswordShowPassword: FC = () => {\n\tconst passwordRef = useRef<HTMLKolInputPasswordElement>(null);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows KolInputPassword in the variant &quot;visibility-toggle&quot;. It features a button to toggle between a visible and hidden password\n\t\t\t\t\tinput.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"show-password\">\n\t\t\t\t<KolForm className=\"w-full\">\n\t\t\t\t\t<KolInputPassword _placeholder=\"With 'Show password' button\" _label=\"Password\" ref={passwordRef} className=\"block\" _visibilityToggle={true} />\n\t\t\t\t\t<KolInputPassword\n\t\t\t\t\t\t_placeholder=\"With 'Show password' button\"\n\t\t\t\t\t\t_label=\"Password\"\n\t\t\t\t\t\tref={passwordRef}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_visibilityToggle={true}\n\t\t\t\t\t\t_value=\"Password\"\n\t\t\t\t\t/>\n\t\t\t\t\t<KolInputPassword\n\t\t\t\t\t\t_placeholder=\"With 'Show password' button and disabled\"\n\t\t\t\t\t\t_label=\"Password\"\n\t\t\t\t\t\tref={passwordRef}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_disabled\n\t\t\t\t\t\t_visibilityToggle={true}\n\t\t\t\t\t/>\n\t\t\t\t</KolForm>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1145
1137
  "kind": "sample"
1146
1138
  },
1147
1139
  {
@@ -1165,7 +1157,7 @@
1165
1157
  "group": "input-radio",
1166
1158
  "name": "horizontal",
1167
1159
  "path": "packages/samples/react/src/components/input-radio/horizontal.tsx",
1168
- "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { OrientationPropType } from '@public-ui/components';\nexport const InputRadioHorizontal: FC = () => {\n\tconst [show, setShow] = useState(true);\n\tconst [orientation, setOrientation] = useState<OrientationPropType>('horizontal');\n\n\tconst options = [\n\t\t{ label: 'Field 1', value: 1 },\n\t\t{ label: 'Field 2', value: 2 },\n\t];\n\n\tconst showClick = () => {\n\t\tsetShow((s) => !s);\n\t};\n\n\tconst toggleOrientation = () => {\n\t\tsetOrientation((o) => (o === 'horizontal' ? 'vertical' : 'horizontal'));\n\t};\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows the <code>horizontal</code> and <code>vertical</code> orientation of KolInoutRadio. It also features a button to test re-rendering.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t<KolButton _label=\"Click me a few times\" _on={{ onClick: showClick }} />\n\t\t\t\t<KolInputCheckbox _label=\"Switch orientation (horizontal/vertical)\" _on={{ onChange: toggleOrientation }} _variant=\"switch\" />\n\t\t\t</div>\n\t\t\t{show && (\n\t\t\t\t<KolForm>\n\t\t\t\t\t<div className=\"container my-4 d-grid gap-4\">\n\t\t\t\t\t\t<KolInputRadio _label={`Test (${orientation})`} _options={options} _orientation={orientation} _required />\n\t\t\t\t\t\t<KolInputRadio _hideLabel _label={`Test (${orientation})`} _options={options} _orientation={orientation} _required />\n\t\t\t\t\t</div>\n\t\t\t\t</KolForm>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n",
1160
+ "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react-v19';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { OrientationPropType } from '@public-ui/components';\nexport const InputRadioHorizontal: FC = () => {\n\tconst [show, setShow] = useState(true);\n\tconst [orientation, setOrientation] = useState<OrientationPropType>('horizontal');\n\n\tconst options = [\n\t\t{ label: 'Field 1', value: 1 },\n\t\t{ label: 'Field 2', value: 2 },\n\t];\n\n\tconst showClick = () => {\n\t\tsetShow((s) => !s);\n\t};\n\n\tconst toggleOrientation = () => {\n\t\tsetOrientation((o) => (o === 'horizontal' ? 'vertical' : 'horizontal'));\n\t};\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows the <code>horizontal</code> and <code>vertical</code> orientation of KolInoutRadio. It also features a button to test re-rendering.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t<KolButton _label=\"Click me a few times\" _on={{ onClick: showClick }} />\n\t\t\t\t<KolInputCheckbox _label=\"Switch orientation (horizontal/vertical)\" _on={{ onChange: toggleOrientation }} _variant=\"switch\" />\n\t\t\t</div>\n\t\t\t{show && (\n\t\t\t\t<KolForm>\n\t\t\t\t\t<SampleBlock id=\"orientation\" className=\"container my-4 d-grid gap-4\">\n\t\t\t\t\t\t<KolInputRadio _label={`Test (${orientation})`} _options={options} _orientation={orientation} _required />\n\t\t\t\t\t\t<KolInputRadio _hideLabel _label={`Test (${orientation})`} _options={options} _orientation={orientation} _required />\n\t\t\t\t\t</SampleBlock>\n\t\t\t\t</KolForm>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n",
1169
1161
  "kind": "sample"
1170
1162
  },
1171
1163
  {
@@ -1173,7 +1165,7 @@
1173
1165
  "group": "input-radio",
1174
1166
  "name": "object",
1175
1167
  "path": "packages/samples/react/src/components/input-radio/objectValue.tsx",
1176
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolForm, KolInputRadio } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputRadioObjectValue: FC = () => {\n\tconst options = [\n\t\t{ label: 'Field 1', value: { id: 1, name: 'Option 1' } },\n\t\t{ label: 'Field 2', value: { id: 2, name: 'Option 2' } },\n\t];\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleDescription>\n\t\t\t\tThis sample shows KolInputRadio with <code>object</code> and <code>undefined</code> values.\n\t\t\t</SampleDescription>\n\n\t\t\t<KolForm>\n\t\t\t\t<p>\n\t\t\t\t\tIn this example for <code>KolInputRadio</code>, the values of the options are defined as objects.\n\t\t\t\t</p>\n\t\t\t\t<div className=\"container my-4 d-grid gap-4\">\n\t\t\t\t\t<KolInputRadio _value={options[1].value} _options={options} _label=\"Test (with object value)\" />\n\t\t\t\t</div>\n\n\t\t\t\t<p>\n\t\t\t\t\tIn this example for <code>KolInputRadio</code>, no value is set.\n\t\t\t\t</p>\n\t\t\t\t<div className=\"container my-4 d-grid gap-4\">\n\t\t\t\t\t<KolInputRadio _options={options} _label=\"Test (without value)\" />\n\t\t\t\t</div>\n\t\t\t</KolForm>\n\t\t</div>\n\t);\n};\n",
1168
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolForm, KolInputRadio } from '@public-ui/react-v19';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputRadioObjectValue: FC = () => {\n\tconst options = [\n\t\t{ label: 'Field 1', value: { id: 1, name: 'Option 1' } },\n\t\t{ label: 'Field 2', value: { id: 2, name: 'Option 2' } },\n\t];\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleDescription>\n\t\t\t\tThis sample shows KolInputRadio with <code>object</code> and <code>undefined</code> values.\n\t\t\t</SampleDescription>\n\n\t\t\t<KolForm>\n\t\t\t\t<p>\n\t\t\t\t\tIn this example for <code>KolInputRadio</code>, the values of the options are defined as objects.\n\t\t\t\t</p>\n\t\t\t\t<SampleBlock id=\"object-value\" className=\"container my-4 d-grid gap-4\">\n\t\t\t\t\t<KolInputRadio _value={options[1].value} _options={options} _label=\"Test (with object value)\" />\n\t\t\t\t</SampleBlock>\n\n\t\t\t\t<p>\n\t\t\t\t\tIn this example for <code>KolInputRadio</code>, no value is set.\n\t\t\t\t</p>\n\t\t\t\t<SampleBlock id=\"no-value\" className=\"container my-4 d-grid gap-4\">\n\t\t\t\t\t<KolInputRadio _options={options} _label=\"Test (without value)\" />\n\t\t\t\t</SampleBlock>\n\t\t\t</KolForm>\n\t\t</div>\n\t);\n};\n",
1177
1169
  "kind": "sample"
1178
1170
  },
1179
1171
  {
@@ -1197,7 +1189,7 @@
1197
1189
  "group": "input-text",
1198
1190
  "name": "access-short-key",
1199
1191
  "path": "packages/samples/react/src/components/input-text/access-short-key.tsx",
1200
- "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextAccessShortKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates access keys and short keys for KolInputText. Access keys provide keyboard shortcuts for focusing inputs.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"With access key (Alt+F)\" _value=\"Press Alt+F to focus\" _accessKey=\"f\" />\n\t\t\t<KolInputText _label=\"With short key (Alt+N)\" _value=\"Press Alt+N to focus\" _shortKey=\"n\" />\n\t\t\t<KolInputText _label=\"Access key (Alt+E)\" _value=\"\" _placeholder=\"Email address\" _accessKey=\"e\" />\n\t\t\t<KolInputText _label=\"Short key (Alt+P)\" _value=\"\" _placeholder=\"Phone number\" _shortKey=\"p\" />\n\t\t</div>\n\t</>\n);\n",
1192
+ "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextAccessShortKey: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates access keys and short keys for KolInputText. Access keys provide keyboard shortcuts for focusing inputs.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"access-key-value\">\n\t\t\t<KolInputText _label=\"With access key (Alt+F)\" _value=\"Press Alt+F to focus\" _accessKey=\"f\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"short-key-value\">\n\t\t\t<KolInputText _label=\"With short key (Alt+N)\" _value=\"Press Alt+N to focus\" _shortKey=\"n\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"access-key-placeholder\">\n\t\t\t<KolInputText _label=\"Access key (Alt+E)\" _value=\"\" _placeholder=\"Email address\" _accessKey=\"e\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"short-key-placeholder\">\n\t\t\t<KolInputText _label=\"Short key (Alt+P)\" _value=\"\" _placeholder=\"Phone number\" _shortKey=\"p\" />\n\t\t</SampleBlock>\n\t</div>\n);\n",
1201
1193
  "kind": "sample"
1202
1194
  },
1203
1195
  {
@@ -1205,7 +1197,7 @@
1205
1197
  "group": "input-text",
1206
1198
  "name": "aria-details",
1207
1199
  "path": "packages/samples/react/src/components/input-text/aria-details.tsx",
1208
- "code": "import { KolCombobox, KolInputText, KolSelect, KolTextarea } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextAriaDetails: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tDemonstrates how to use <code>_ariaDetails</code> to reference an external element that provides detailed information about form inputs. All inputs\n\t\t\t\tbelow reference the same details box via their <code>_ariaDetails</code> prop.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tThe <code>_ariaDetails</code> prop uses <code>ElementInternals.ariaDetailsElements</code> to cross the Shadow DOM boundary, making it accessible to\n\t\t\t\tscreen readers. This works across all form input components: input-text, select, textarea, and combobox.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t{/* Input Form with all 4 components */}\n\t\t\t<div className=\"grid gap-4 p-4 border border-gray-300 rounded\">\n\t\t\t\t<h2 className=\"text-lg font-semibold\">Form Inputs with Shared Details</h2>\n\n\t\t\t\t<KolInputText _label=\"Email Address\" _ariaDetails=\"details-box\" _placeholder=\"user@example.com\" _hint=\"We'll never share your email\" />\n\n\t\t\t\t<KolSelect\n\t\t\t\t\t_label=\"Country\"\n\t\t\t\t\t_ariaDetails=\"details-box\"\n\t\t\t\t\t_options={[\n\t\t\t\t\t\t{ label: 'Germany', value: 'de' },\n\t\t\t\t\t\t{ label: 'Austria', value: 'at' },\n\t\t\t\t\t\t{ label: 'Switzerland', value: 'ch' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\n\t\t\t\t<KolTextarea _label=\"Message\" _ariaDetails=\"details-box\" _placeholder=\"Enter your message here...\" _rows={4} />\n\n\t\t\t\t<KolCombobox _label=\"Favorite Language\" _ariaDetails=\"details-box\" _suggestions={['TypeScript', 'JavaScript', 'Python', 'Go', 'Rust', 'Java']} />\n\t\t\t</div>\n\n\t\t\t{/* Shared details box */}\n\t\t\t<div id=\"details-box\" className=\"p-4 bg-blue-50 border-l-4 border-blue-400 rounded\" role=\"complementary\">\n\t\t\t\t<h3 className=\"font-semibold text-blue-900 mb-2\">💡 Form Details</h3>\n\t\t\t\t<ul className=\"text-sm text-blue-800 space-y-2\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Email:</strong> Please enter a valid email address. We use this to contact you about your submission.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Country:</strong> Select your country of residence. This helps us provide localized support.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Message:</strong> Provide as much detail as possible. The more information you give, the better we can assist you.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Language:</strong> Choose your preferred programming language. This helps us recommend relevant resources.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</div>\n\t</>\n);\n",
1200
+ "code": "import { KolCombobox, KolInputText, KolSelect, KolTextarea } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextAriaDetails: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tDemonstrates how to use <code>_ariaDetails</code> to reference an external element that provides detailed information about form inputs. All inputs\n\t\t\t\tbelow reference the same details box via their <code>_ariaDetails</code> prop.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tThe <code>_ariaDetails</code> prop uses <code>ElementInternals.ariaDetailsElements</code> to cross the Shadow DOM boundary, making it accessible to\n\t\t\t\tscreen readers. This works across all form input components: input-text, select, textarea, and combobox.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"aria-details\" className=\"grid gap-8\">\n\t\t\t{/* Input Form with all 4 components */}\n\t\t\t<div className=\"grid gap-4 p-4 border border-gray-300 rounded\">\n\t\t\t\t<h2 className=\"text-lg font-semibold\">Form Inputs with Shared Details</h2>\n\n\t\t\t\t<KolInputText _label=\"Email Address\" _ariaDetails=\"details-box\" _placeholder=\"user@example.com\" _hint=\"We'll never share your email\" />\n\n\t\t\t\t<KolSelect\n\t\t\t\t\t_label=\"Country\"\n\t\t\t\t\t_ariaDetails=\"details-box\"\n\t\t\t\t\t_options={[\n\t\t\t\t\t\t{ label: 'Germany', value: 'de' },\n\t\t\t\t\t\t{ label: 'Austria', value: 'at' },\n\t\t\t\t\t\t{ label: 'Switzerland', value: 'ch' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\n\t\t\t\t<KolTextarea _label=\"Message\" _ariaDetails=\"details-box\" _placeholder=\"Enter your message here...\" _rows={4} />\n\n\t\t\t\t<KolCombobox _label=\"Favorite Language\" _ariaDetails=\"details-box\" _suggestions={['TypeScript', 'JavaScript', 'Python', 'Go', 'Rust', 'Java']} />\n\t\t\t</div>\n\n\t\t\t{/* Shared details box */}\n\t\t\t<div id=\"details-box\" className=\"p-4 bg-blue-50 border-l-4 border-blue-400 rounded\" role=\"complementary\">\n\t\t\t\t<h3 className=\"font-semibold text-blue-900 mb-2\">💡 Form Details</h3>\n\t\t\t\t<ul className=\"text-sm text-blue-800 space-y-2\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Email:</strong> Please enter a valid email address. We use this to contact you about your submission.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Country:</strong> Select your country of residence. This helps us provide localized support.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Message:</strong> Provide as much detail as possible. The more information you give, the better we can assist you.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Language:</strong> Choose your preferred programming language. This helps us recommend relevant resources.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</SampleBlock>\n\t</>\n);\n",
1209
1201
  "kind": "sample"
1210
1202
  },
1211
1203
  {
@@ -1213,7 +1205,7 @@
1213
1205
  "group": "input-text",
1214
1206
  "name": "background",
1215
1207
  "path": "packages/samples/react/src/components/input-text/background-test.tsx",
1216
- "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBackground: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases the component placed on a colored background.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4 bg-blue-400 p-4 rounded\">\n\t\t\t<strong>Default background:</strong>\n\t\t\t<KolInputText _label=\"First name\" _value=\"John Doe\" />\n\n\t\t\t<strong>Unset background:</strong>\n\t\t\t<KolInputText style={{ backgroundColor: 'unset' }} _label=\"First name\" _value=\"John Doe\" />\n\t\t</div>\n\t</>\n);\n",
1208
+ "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBackground: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases the component placed on a colored background.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"background-default\" className=\"grid gap-4 bg-blue-400 p-4 rounded\">\n\t\t\t<strong>Default background:</strong>\n\t\t\t<KolInputText _label=\"First name\" _value=\"John Doe\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"background-unset\" className=\"grid gap-4 bg-blue-400 p-4 rounded\">\n\t\t\t<strong>Unset background:</strong>\n\t\t\t<KolInputText style={{ backgroundColor: 'unset' }} _label=\"First name\" _value=\"John Doe\" />\n\t\t</SampleBlock>\n\t</div>\n);\n",
1217
1209
  "kind": "sample"
1218
1210
  },
1219
1211
  {
@@ -1221,7 +1213,15 @@
1221
1213
  "group": "input-text",
1222
1214
  "name": "basic",
1223
1215
  "path": "packages/samples/react/src/components/input-text/basic.tsx",
1224
- "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { logKoliBriCallbackEvent, logKoliBriNativeEvent } from '../../shares/utils';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only and with icons.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Name\"\n\t\t\t\t_value=\"Anderson-Clark\"\n\t\t\t\t_on={{\n\t\t\t\t\tonBlur: logKoliBriCallbackEvent,\n\t\t\t\t\tonChange: logKoliBriCallbackEvent,\n\t\t\t\t\tonClick: logKoliBriCallbackEvent,\n\t\t\t\t\tonFocus: logKoliBriCallbackEvent,\n\t\t\t\t\tonInput: logKoliBriCallbackEvent,\n\t\t\t\t\tonKeyDown: logKoliBriCallbackEvent,\n\t\t\t\t}}\n\t\t\t\tonBlur={logKoliBriNativeEvent}\n\t\t\t\tonChange={logKoliBriNativeEvent}\n\t\t\t\tonClick={logKoliBriNativeEvent}\n\t\t\t\tonFocus={logKoliBriNativeEvent}\n\t\t\t\tonInput={logKoliBriNativeEvent}\n\t\t\t\tonKeyDown={logKoliBriNativeEvent}\n\t\t\t/>\n\t\t\t<KolInputText _label=\"Name\" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />\n\t\t\t<KolInputText _label=\"Name\" _required _hint=\"Enter your surname\" />\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" _disabled />\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Name\"\n\t\t\t\t_required\n\t\t\t\t_value=\"Anderson-Clark\"\n\t\t\t\t_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}\n\t\t\t/>\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Name\"\n\t\t\t\t_readOnly\n\t\t\t\t_value=\"Anderson-Clark\"\n\t\t\t\t_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}\n\t\t\t/>\n\t\t\t<KolInputText _label=\"Name\" _icons=\"kolicon-house\" _value=\"Anderson-Clark\" />\n\t\t</div>\n\t</>\n);\n",
1216
+ "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { logKoliBriCallbackEvent, logKoliBriNativeEvent } from '../../shares/utils';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBasic: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis story showcases the most important InputText variants: default, required, validation error, disabled, read-only, search with clear button, and with\n\t\t\t\ticons.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"events\">\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Name\"\n\t\t\t\t_value=\"Anderson-Clark\"\n\t\t\t\t_on={{\n\t\t\t\t\tonBlur: logKoliBriCallbackEvent,\n\t\t\t\t\tonChange: logKoliBriCallbackEvent,\n\t\t\t\t\tonClick: logKoliBriCallbackEvent,\n\t\t\t\t\tonFocus: logKoliBriCallbackEvent,\n\t\t\t\t\tonInput: logKoliBriCallbackEvent,\n\t\t\t\t\tonKeyDown: logKoliBriCallbackEvent,\n\t\t\t\t}}\n\t\t\t\tonBlur={logKoliBriNativeEvent}\n\t\t\t\tonChange={logKoliBriNativeEvent}\n\t\t\t\tonClick={logKoliBriNativeEvent}\n\t\t\t\tonFocus={logKoliBriNativeEvent}\n\t\t\t\tonInput={logKoliBriNativeEvent}\n\t\t\t\tonKeyDown={logKoliBriNativeEvent}\n\t\t\t/>\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"error\">\n\t\t\t<KolInputText _label=\"Name\" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"hint\">\n\t\t\t<KolInputText _label=\"Name\" _required _hint=\"Enter your surname\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"disabled\">\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" _disabled />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"info-popover\">\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Name\"\n\t\t\t\t_required\n\t\t\t\t_value=\"Anderson-Clark\"\n\t\t\t\t_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}\n\t\t\t/>\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"readonly-popover\">\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Name\"\n\t\t\t\t_readOnly\n\t\t\t\t_value=\"Anderson-Clark\"\n\t\t\t\t_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}\n\t\t\t/>\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"icon\">\n\t\t\t<KolInputText _label=\"Name\" _icons=\"kolicon-house\" _value=\"Anderson-Clark\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"search\">\n\t\t\t<KolInputText _label=\"Search\" _type=\"search\" _value=\"test\" _placeholder=\"Search with clear button\" />\n\t\t</SampleBlock>\n\t</div>\n);\n",
1217
+ "kind": "sample"
1218
+ },
1219
+ {
1220
+ "id": "sample/input-text/clear-button",
1221
+ "group": "input-text",
1222
+ "name": "clear-button",
1223
+ "path": "packages/samples/react/src/components/input-text/clear-button.tsx",
1224
+ "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextClearButton: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>This sample demonstrates the clear button for search type input fields.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"search-empty\">\n\t\t\t<KolInputText _label=\"Search\" _type=\"search\" _placeholder=\"Enter search term\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"search-value\">\n\t\t\t<KolInputText _label=\"Search (with value)\" _type=\"search\" _value=\"test\" _placeholder=\"Enter search term\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"search-disabled\">\n\t\t\t<KolInputText _label=\"Search (disabled)\" _type=\"search\" _disabled _value=\"test\" _placeholder=\"Disabled search\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"text-no-clear-button\">\n\t\t\t<KolInputText _label=\"Text (no clear button)\" _type=\"text\" _value=\"test\" _placeholder=\"Regular text input\" />\n\t\t</SampleBlock>\n\t</div>\n);\n",
1225
1225
  "kind": "sample"
1226
1226
  },
1227
1227
  {
@@ -1229,7 +1229,7 @@
1229
1229
  "group": "input-text",
1230
1230
  "name": "counter",
1231
1231
  "path": "packages/samples/react/src/components/input-text/counter.tsx",
1232
- "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextCounter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases an input with a counter for the chars in the field. Maximal length is 30.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Name\" _icons=\"kolicon-house\" _value=\"Anderson-Clark\" _hasCounter _maxLength={30} />\n\t\t</div>\n\t</>\n);\n",
1232
+ "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextCounter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases an input with a counter for the chars in the field. Maximal length is 30.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"counter\">\n\t\t\t<KolInputText _label=\"Name\" _icons=\"kolicon-house\" _value=\"Anderson-Clark\" _hasCounter _maxLength={30} />\n\t\t</SampleBlock>\n\t</>\n);\n",
1233
1233
  "kind": "sample"
1234
1234
  },
1235
1235
  {
@@ -1237,7 +1237,7 @@
1237
1237
  "group": "input-text",
1238
1238
  "name": "disabled",
1239
1239
  "path": "packages/samples/react/src/components/input-text/disabled.tsx",
1240
- "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextDisabled: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates the disabled state of KolInputText. Disabled inputs cannot be edited or focused.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Disabled with placeholder\" _placeholder=\"Placeholder text\" _disabled />\n\t\t\t<KolInputText _label=\"Disabled with value\" _value=\"This field is disabled\" _disabled />\n\t\t\t<KolInputText _label=\"Disabled with error message\" _value=\"Invalid value\" _msg={{ _type: 'error', _description: 'Error message' }} _disabled _touched />\n\t\t\t<KolInputText _label=\"Comparison: Enabled\" _value=\"This field is enabled\" />\n\t\t</div>\n\t</>\n);\n",
1240
+ "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextDisabled: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates the disabled state of KolInputText. Disabled inputs cannot be edited or focused.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"placeholder\">\n\t\t\t<KolInputText _label=\"Disabled with placeholder\" _placeholder=\"Placeholder text\" _disabled />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"value\">\n\t\t\t<KolInputText _label=\"Disabled with value\" _value=\"This field is disabled\" _disabled />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"error\">\n\t\t\t<KolInputText _label=\"Disabled with error message\" _value=\"Invalid value\" _msg={{ _type: 'error', _description: 'Error message' }} _disabled _touched />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"enabled\">\n\t\t\t<KolInputText _label=\"Comparison: Enabled\" _value=\"This field is enabled\" />\n\t\t</SampleBlock>\n\t</div>\n);\n",
1241
1241
  "kind": "sample"
1242
1242
  },
1243
1243
  {
@@ -1245,7 +1245,7 @@
1245
1245
  "group": "input-text",
1246
1246
  "name": "expert-slot",
1247
1247
  "path": "packages/samples/react/src/components/input-text/expert-slot.tsx",
1248
- "code": "import { KolBadge, KolIcon, KolInputText, KolPopoverButton } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextExpertSlot = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolInputText with expert slot. The expert slot allows for complex custom content beyond simple text inputs.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\">\n\t\t\t\t\t<span slot=\"expert\">I am more than just a input field</span>\n\t\t\t\t</KolInputText>\n\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\" _value=\"Complex example\">\n\t\t\t\t\t<div slot=\"expert\" className=\"flex items-center gap-2\">\n\t\t\t\t\t\t<KolBadge _label=\"Premium\" _color=\"#1a73e8\" />\n\t\t\t\t\t\t<KolIcon _icons=\"kolicon-check\" _label=\"\" />\n\t\t\t\t\t\t<span>Verified account with premium features</span>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputText>\n\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\" _placeholder=\"Enter your email\">\n\t\t\t\t\t<div slot=\"expert\" style={{ padding: '0.5rem', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>\n\t\t\t\t\t\t<strong>Note:</strong> This email will be used for account recovery and notifications.\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputText>\n\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\" _required>\n\t\t\t\t\t<div slot=\"expert\" className=\"inline-block\">\n\t\t\t\t\t\t<span className=\"expert-slot-required-label\">Username</span>\n\t\t\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _variant=\"ghost\" _hideLabel _inline>\n\t\t\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">You have to take care of the asterics on your own!</div>\n\t\t\t\t\t\t</KolPopoverButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputText>\n\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\" _readOnly _value=\"(read only) is also not appended\">\n\t\t\t\t\t<div slot=\"expert\" className=\"inline-block\">\n\t\t\t\t\t\t<span className=\"expert-slot-required-label\">Username</span>\n\t\t\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _variant=\"ghost\" _hideLabel _inline>\n\t\t\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">Readonly is also not appended</div>\n\t\t\t\t\t\t</KolPopoverButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputText>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1248
+ "code": "import { KolBadge, KolIcon, KolInputText, KolPopoverButton } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextExpertSlot = () => {\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolInputText with expert slot. The expert slot allows for complex custom content beyond simple text inputs.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"text\">\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\">\n\t\t\t\t\t<span slot=\"expert\">I am more than just a input field</span>\n\t\t\t\t</KolInputText>\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"badge\">\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\" _value=\"Complex example\">\n\t\t\t\t\t<div slot=\"expert\" className=\"flex items-center gap-2\">\n\t\t\t\t\t\t<KolBadge _label=\"Premium\" _color=\"#1a73e8\" />\n\t\t\t\t\t\t<KolIcon _icons=\"kolicon-check\" _label=\"\" />\n\t\t\t\t\t\t<span>Verified account with premium features</span>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputText>\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"note\">\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\" _placeholder=\"Enter your email\">\n\t\t\t\t\t<div slot=\"expert\" style={{ padding: '0.5rem', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>\n\t\t\t\t\t\t<strong>Note:</strong> This email will be used for account recovery and notifications.\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputText>\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"required\">\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\" _required>\n\t\t\t\t\t<div slot=\"expert\" className=\"inline-block\">\n\t\t\t\t\t\t<span className=\"expert-slot-required-label\">Username</span>\n\t\t\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _variant=\"ghost\" _hideLabel _inline>\n\t\t\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">You have to take care of the asterics on your own!</div>\n\t\t\t\t\t\t</KolPopoverButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputText>\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"readonly\">\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\" _readOnly _value=\"(read only) is also not appended\">\n\t\t\t\t\t<div slot=\"expert\" className=\"inline-block\">\n\t\t\t\t\t\t<span className=\"expert-slot-required-label\">Username</span>\n\t\t\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _variant=\"ghost\" _hideLabel _inline>\n\t\t\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">Readonly is also not appended</div>\n\t\t\t\t\t\t</KolPopoverButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputText>\n\t\t\t</SampleBlock>\n\t\t</div>\n\t);\n};\n",
1249
1249
  "kind": "sample"
1250
1250
  },
1251
1251
  {
@@ -1261,7 +1261,7 @@
1261
1261
  "group": "input-text",
1262
1262
  "name": "hide-label",
1263
1263
  "path": "packages/samples/react/src/components/input-text/hide-label.tsx",
1264
- "code": "import { KolAlert, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextHideLabel: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis story demonstrates the <code>_hideLabel</code> feature for KolInputText. It allows hiding the label visually while keeping it accessible for screen\n\t\t\t\treaders.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section>\n\t\t\t<KolInputText _hideLabel _label=\"Search\" _placeholder=\"Search...\" _type=\"search\" />\n\t\t</section>\n\n\t\t<section>\n\t\t\t<KolInputText _hideLabel _label=\"Email\" _placeholder=\"Enter email\" _msg={{ _type: 'error', _description: 'Invalid email format' }} _touched />\n\t\t</section>\n\n\t\t<section>\n\t\t\t<fieldset className=\"grid md:grid-cols-2 gap-4\">\n\t\t\t\t<legend>Street Address</legend>\n\t\t\t\t<KolAlert className=\"col-span-2\" _level={0} _type=\"error\">\n\t\t\t\t\tPlease complete the address\n\t\t\t\t</KolAlert>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_hideMsg\n\t\t\t\t\t_label=\"Street name\"\n\t\t\t\t\t_placeholder=\"Street name\"\n\t\t\t\t\t_msg={{ _type: 'error', _description: 'Please complete the address' }}\n\t\t\t\t\t_touched\n\t\t\t\t/>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_hideMsg\n\t\t\t\t\t_label=\"House number\"\n\t\t\t\t\t_placeholder=\"Number\"\n\t\t\t\t\t_msg={{ _type: 'error', _description: 'Please complete the address' }}\n\t\t\t\t\t_touched\n\t\t\t\t/>\n\t\t\t</fieldset>\n\t\t</section>\n\t</div>\n);\n",
1264
+ "code": "import { KolAlert, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextHideLabel: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis story demonstrates the <code>_hideLabel</code> feature for KolInputText. It allows hiding the label visually while keeping it accessible for screen\n\t\t\t\treaders.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"search\">\n\t\t\t<KolInputText _hideLabel _label=\"Search\" _placeholder=\"Search...\" _type=\"search\" />\n\t\t</SampleBlock>\n\n\t\t<SampleBlock id=\"error\">\n\t\t\t<KolInputText _hideLabel _label=\"Email\" _placeholder=\"Enter email\" _msg={{ _type: 'error', _description: 'Invalid email format' }} _touched />\n\t\t</SampleBlock>\n\n\t\t<SampleBlock id=\"address-group\">\n\t\t\t<fieldset className=\"grid md:grid-cols-2 gap-4\">\n\t\t\t\t<legend>Street Address</legend>\n\t\t\t\t<KolAlert className=\"col-span-2\" _level={0} _type=\"error\">\n\t\t\t\t\tPlease complete the address\n\t\t\t\t</KolAlert>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_hideMsg\n\t\t\t\t\t_label=\"Street name\"\n\t\t\t\t\t_placeholder=\"Street name\"\n\t\t\t\t\t_msg={{ _type: 'error', _description: 'Please complete the address' }}\n\t\t\t\t\t_touched\n\t\t\t\t/>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_hideMsg\n\t\t\t\t\t_label=\"House number\"\n\t\t\t\t\t_placeholder=\"Number\"\n\t\t\t\t\t_msg={{ _type: 'error', _description: 'Please complete the address' }}\n\t\t\t\t\t_touched\n\t\t\t\t/>\n\t\t\t</fieldset>\n\t\t</SampleBlock>\n\t</div>\n);\n",
1265
1265
  "kind": "sample"
1266
1266
  },
1267
1267
  {
@@ -1269,7 +1269,7 @@
1269
1269
  "group": "input-text",
1270
1270
  "name": "hide-msg",
1271
1271
  "path": "packages/samples/react/src/components/input-text/hide-msg.tsx",
1272
- "code": "import { KolAlert, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextHideMsg: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows the <code>_hideMsg</code> feature for KolInputText. It allows to hide the message from an input field and can be used, when the\n\t\t\t\tmessage (e.g. error) is already shown somewhere else, e.g. for a group of inputs.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section>\n\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label=\"Input with error\" _touched />\n\t\t</section>\n\t\t<section>\n\t\t\t<fieldset className=\"grid md:grid-cols-2 gap-4\">\n\t\t\t\t<legend>Combined input field</legend>\n\t\t\t\t<KolAlert className=\"col-span-2\" _level={0} _type=\"error\">\n\t\t\t\t\tThis is a combined error message\n\t\t\t\t</KolAlert>\n\t\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label=\"First input\" _touched />\n\t\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label=\"Second input with error\" _touched />\n\t\t\t</fieldset>\n\t\t</section>\n\t</div>\n);\n",
1272
+ "code": "import { KolAlert, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextHideMsg: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows the <code>_hideMsg</code> feature for KolInputText. It allows to hide the message from an input field and can be used, when the\n\t\t\t\tmessage (e.g. error) is already shown somewhere else, e.g. for a group of inputs.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"single-error\">\n\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label=\"Input with error\" _touched />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"combined-error\">\n\t\t\t<fieldset className=\"grid md:grid-cols-2 gap-4\">\n\t\t\t\t<legend>Combined input field</legend>\n\t\t\t\t<KolAlert className=\"col-span-2\" _level={0} _type=\"error\">\n\t\t\t\t\tThis is a combined error message\n\t\t\t\t</KolAlert>\n\t\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label=\"First input\" _touched />\n\t\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label=\"Second input with error\" _touched />\n\t\t\t</fieldset>\n\t\t</SampleBlock>\n\t</div>\n);\n",
1273
1273
  "kind": "sample"
1274
1274
  },
1275
1275
  {
@@ -1277,7 +1277,7 @@
1277
1277
  "group": "input-text",
1278
1278
  "name": "message-types",
1279
1279
  "path": "packages/samples/react/src/components/input-text/message-types.tsx",
1280
- "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextMessageTypes: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates all available message types for KolInputText: default, info, error, warning, and success.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Default message\" _value=\"Valid value\" _msg={{ _type: 'default', _description: 'This is a default message' }} _touched />\n\t\t\t<KolInputText _label=\"Error message\" _value=\"Invalid value\" _msg={{ _type: 'error', _description: 'This is an error message' }} _touched />\n\t\t\t<KolInputText _label=\"Info message\" _value=\"Some value\" _msg={{ _type: 'info', _description: 'This is an informational message' }} _touched />\n\t\t\t<KolInputText _label=\"Success message\" _value=\"Valid value\" _msg={{ _type: 'success', _description: 'This is a success message' }} _touched />\n\t\t\t<KolInputText _label=\"Warning message\" _value=\"Valid value\" _msg={{ _type: 'warning', _description: 'This is a warning message' }} _touched />\n\t\t</div>\n\t</>\n);\n",
1280
+ "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextMessageTypes: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates all available message types for KolInputText: default, info, error, warning, and success.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"msg-default\">\n\t\t\t<KolInputText _label=\"Default message\" _value=\"Valid value\" _msg={{ _type: 'default', _description: 'This is a default message' }} _touched />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"msg-error\">\n\t\t\t<KolInputText _label=\"Error message\" _value=\"Invalid value\" _msg={{ _type: 'error', _description: 'This is an error message' }} _touched />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"msg-info\">\n\t\t\t<KolInputText _label=\"Info message\" _value=\"Some value\" _msg={{ _type: 'info', _description: 'This is an informational message' }} _touched />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"msg-success\">\n\t\t\t<KolInputText _label=\"Success message\" _value=\"Valid value\" _msg={{ _type: 'success', _description: 'This is a success message' }} _touched />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"msg-warning\">\n\t\t\t<KolInputText _label=\"Warning message\" _value=\"Valid value\" _msg={{ _type: 'warning', _description: 'This is a warning message' }} _touched />\n\t\t</SampleBlock>\n\t</div>\n);\n",
1281
1281
  "kind": "sample"
1282
1282
  },
1283
1283
  {
@@ -1285,7 +1285,7 @@
1285
1285
  "group": "input-text",
1286
1286
  "name": "msg-and-counter",
1287
1287
  "path": "packages/samples/react/src/components/input-text/msg-and-counter.tsx",
1288
- "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextMsgAndCounter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>Regression sample for #9073: when both _msg and _hasCounter are set, aria-describedby must reference both the message and counter elements.</p>\n\t\t\t<p>Open DevTools and inspect each input to confirm aria-describedby contains both IDs.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Warning + Counter\" _msg={{ _type: 'warning', _description: 'Bitte prüfen Sie Ihre Eingabe.' }} _hasCounter _maxLength={30} />\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Error + Counter (touched)\"\n\t\t\t\t_msg={{ _type: 'error', _description: 'Pflichtfeld – bitte ausfüllen.' }}\n\t\t\t\t_hasCounter\n\t\t\t\t_maxLength={30}\n\t\t\t\t_touched\n\t\t\t/>\n\t\t\t<KolInputText _label=\"Info + Counter\" _msg={{ _type: 'info', _description: 'Hinweis: maximal 20 Zeichen.' }} _hasCounter _maxLength={20} />\n\t\t</div>\n\t</>\n);\n",
1288
+ "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextMsgAndCounter: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>Regression sample for #9073: when both _msg and _hasCounter are set, aria-describedby must reference both the message and counter elements.</p>\n\t\t\t<p>Open DevTools and inspect each input to confirm aria-describedby contains both IDs.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"warning\">\n\t\t\t<KolInputText _label=\"Warning + Counter\" _msg={{ _type: 'warning', _description: 'Bitte prüfen Sie Ihre Eingabe.' }} _hasCounter _maxLength={30} />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"error\">\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Error + Counter (touched)\"\n\t\t\t\t_msg={{ _type: 'error', _description: 'Pflichtfeld – bitte ausfüllen.' }}\n\t\t\t\t_hasCounter\n\t\t\t\t_maxLength={30}\n\t\t\t\t_touched\n\t\t\t/>\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"info\">\n\t\t\t<KolInputText _label=\"Info + Counter\" _msg={{ _type: 'info', _description: 'Hinweis: maximal 20 Zeichen.' }} _hasCounter _maxLength={20} />\n\t\t</SampleBlock>\n\t</div>\n);\n",
1289
1289
  "kind": "sample"
1290
1290
  },
1291
1291
  {
@@ -1293,7 +1293,7 @@
1293
1293
  "group": "input-text",
1294
1294
  "name": "pattern",
1295
1295
  "path": "packages/samples/react/src/components/input-text/pattern.tsx",
1296
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolInputText } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst PATTERN = '^[A-Za-z]{3}-\\\\d{3}$';\n\nexport const InputTextPattern: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample demonstrates HTML5 pattern validation for both native input and KolInputText components.</p>\n\t\t</SampleDescription>\n\t\t<form className=\"grid gap-4\">\n\t\t\t<div className=\"grid gap-2\">\n\t\t\t\t<label htmlFor=\"native-input\">Native Input (Pattern: AAA-123, case-insensitive)</label>\n\t\t\t\t<input id=\"native-input\" name=\"native-input\" pattern={PATTERN} type=\"text\" />\n\t\t\t</div>\n\t\t\t<KolInputText\n\t\t\t\t_label=\"KoliBri Input (Pattern: AAA-123, case-insensitive)\"\n\t\t\t\t_name=\"kolibri-input\"\n\t\t\t\t_pattern={PATTERN}\n\t\t\t\t_hint=\"Note: This input is not linked to the form element. The validation inside the Shadow DOM is currently not triggered on form submit.\"\n\t\t\t/>\n\t\t\t<div>\n\t\t\t\t<button type=\"submit\">Submit</button>\n\t\t\t</div>\n\t\t</form>\n\t</>\n);\n",
1296
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolInputText } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst PATTERN = '^[A-Za-z]{3}-\\\\d{3}$';\n\nexport const InputTextPattern: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample demonstrates HTML5 pattern validation for both native input and KolInputText components.</p>\n\t\t</SampleDescription>\n\t\t<SampleBlock id=\"pattern\">\n\t\t\t<form className=\"grid gap-4\">\n\t\t\t\t<div className=\"grid gap-2\">\n\t\t\t\t\t<label htmlFor=\"native-input\">Native Input (Pattern: AAA-123, case-insensitive)</label>\n\t\t\t\t\t<input id=\"native-input\" name=\"native-input\" pattern={PATTERN} type=\"text\" />\n\t\t\t\t</div>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"KoliBri Input (Pattern: AAA-123, case-insensitive)\"\n\t\t\t\t\t_name=\"kolibri-input\"\n\t\t\t\t\t_pattern={PATTERN}\n\t\t\t\t\t_hint=\"Note: This input is not linked to the form element. The validation inside the Shadow DOM is currently not triggered on form submit.\"\n\t\t\t\t/>\n\t\t\t\t<div>\n\t\t\t\t\t<button type=\"submit\">Submit</button>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</SampleBlock>\n\t</>\n);\n",
1297
1297
  "kind": "sample"
1298
1298
  },
1299
1299
  {
@@ -1301,7 +1301,7 @@
1301
1301
  "group": "input-text",
1302
1302
  "name": "placeholder",
1303
1303
  "path": "packages/samples/react/src/components/input-text/placeholder.tsx",
1304
- "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextPlaceholder: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates the placeholder feature of KolInputText.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"First name\" _placeholder=\"Enter your first name\" />\n\t\t\t<KolInputText _label=\"Email address\" _placeholder=\"user@example.com\" />\n\t\t\t<KolInputText _label=\"Phone number\" _placeholder=\"+49 123 456789\" _type=\"tel\" />\n\t\t\t<KolInputText _label=\"Website\" _placeholder=\"https://example.com\" _type=\"url\" />\n\t\t\t<KolInputText _label=\"Search\" _placeholder=\"Search...\" _type=\"search\" />\n\t\t</div>\n\t</>\n);\n",
1304
+ "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextPlaceholder: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates the placeholder feature of KolInputText.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"first-name\">\n\t\t\t<KolInputText _label=\"First name\" _placeholder=\"Enter your first name\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"email\">\n\t\t\t<KolInputText _label=\"Email address\" _placeholder=\"user@example.com\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"tel\">\n\t\t\t<KolInputText _label=\"Phone number\" _placeholder=\"+49 123 456789\" _type=\"tel\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"url\">\n\t\t\t<KolInputText _label=\"Website\" _placeholder=\"https://example.com\" _type=\"url\" />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"search\">\n\t\t\t<KolInputText _label=\"Search\" _placeholder=\"Search...\" _type=\"search\" />\n\t\t</SampleBlock>\n\t</div>\n);\n",
1305
1305
  "kind": "sample"
1306
1306
  },
1307
1307
  {
@@ -1309,7 +1309,7 @@
1309
1309
  "group": "input-text",
1310
1310
  "name": "readonly",
1311
1311
  "path": "packages/samples/react/src/components/input-text/readonly.tsx",
1312
- "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextReadonly: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates the readonly state of KolInputText. Readonly inputs can be focused but not edited.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Readonly with placeholder\" _placeholder=\"Placeholder text\" _readOnly />\n\t\t\t<KolInputText _label=\"Readonly with value\" _value=\"This field is readonly\" _readOnly />\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Readonly with info message\"\n\t\t\t\t_value=\"Read-only value\"\n\t\t\t\t_msg={{ _type: 'info', _description: 'This field cannot be edited' }}\n\t\t\t\t_readOnly\n\t\t\t\t_touched\n\t\t\t/>\n\t\t\t<KolInputText _label=\"Comparison: Editable\" _value=\"This field is editable\" />\n\t\t</div>\n\t</>\n);\n",
1312
+ "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextReadonly: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates the readonly state of KolInputText. Readonly inputs can be focused but not edited.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"placeholder\">\n\t\t\t<KolInputText _label=\"Readonly with placeholder\" _placeholder=\"Placeholder text\" _readOnly />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"value\">\n\t\t\t<KolInputText _label=\"Readonly with value\" _value=\"This field is readonly\" _readOnly />\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"info\">\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Readonly with info message\"\n\t\t\t\t_value=\"Read-only value\"\n\t\t\t\t_msg={{ _type: 'info', _description: 'This field cannot be edited' }}\n\t\t\t\t_readOnly\n\t\t\t\t_touched\n\t\t\t/>\n\t\t</SampleBlock>\n\t\t<SampleBlock id=\"editable\">\n\t\t\t<KolInputText _label=\"Comparison: Editable\" _value=\"This field is editable\" />\n\t\t</SampleBlock>\n\t</div>\n);\n",
1313
1313
  "kind": "sample"
1314
1314
  },
1315
1315
  {
@@ -1317,7 +1317,7 @@
1317
1317
  "group": "input-text",
1318
1318
  "name": "select-range",
1319
1319
  "path": "packages/samples/react/src/components/input-text/select-range.tsx",
1320
- "code": "import { KolButtonLink, KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextSelectRange = () => {\n\tconst textInput = React.useRef<HTMLKolInputTextElement>(null);\n\n\tfunction setSelectioStart() {\n\t\ttextInput.current?.focus();\n\t\ttextInput.current?.setSelectionStart(8);\n\t}\n\n\tfunction setSelectionRange() {\n\t\ttextInput.current?.focus();\n\t\ttextInput.current?.setSelectionRange(2, 5);\n\t}\n\n\tfunction setRangeText() {\n\t\ttextInput.current?.focus();\n\t\ttextInput.current?.setRangeText('INSERTED', 5, 9, 'select');\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows how to change the selection in a KolInputText.</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolInputText _value=\"Very long value\" _label=\"Text Input Label\" ref={textInput} />\n\t\t\t\t<KolButtonLink _label=\"Set Start\" onClick={setSelectioStart} />\n\t\t\t\t<KolButtonLink _label=\"Set Range\" onClick={setSelectionRange} />\n\t\t\t\t<KolButtonLink _label=\"Set Range Text\" onClick={setRangeText} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1320
+ "code": "import { KolButtonLink, KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextSelectRange = () => {\n\tconst textInput = React.useRef<HTMLKolInputTextElement>(null);\n\n\tfunction setSelectioStart() {\n\t\ttextInput.current?.focus();\n\t\ttextInput.current?.setSelectionStart(8);\n\t}\n\n\tfunction setSelectionRange() {\n\t\ttextInput.current?.focus();\n\t\ttextInput.current?.setSelectionRange(2, 5);\n\t}\n\n\tfunction setRangeText() {\n\t\ttextInput.current?.focus();\n\t\ttextInput.current?.setRangeText('INSERTED', 5, 9, 'select');\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows how to change the selection in a KolInputText.</p>\n\t\t\t</SampleDescription>\n\t\t\t<SampleBlock id=\"select-range\">\n\t\t\t\t<KolInputText _value=\"Very long value\" _label=\"Text Input Label\" ref={textInput} />\n\t\t\t\t<KolButtonLink _label=\"Set Start\" onClick={setSelectioStart} />\n\t\t\t\t<KolButtonLink _label=\"Set Range\" onClick={setSelectionRange} />\n\t\t\t\t<KolButtonLink _label=\"Set Range Text\" onClick={setRangeText} />\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1321
1321
  "kind": "sample"
1322
1322
  },
1323
1323
  {
@@ -1325,7 +1325,7 @@
1325
1325
  "group": "input-text",
1326
1326
  "name": "smart-button",
1327
1327
  "path": "packages/samples/react/src/components/input-text/smart-button.tsx",
1328
- "code": "import { ToasterService } from '@public-ui/components';\nimport { KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst smartButtonProps = {\n\t_icons: 'kolicon-alert-info',\n\t_hideLabel: true,\n};\n\nconst icons = {\n\tleft: {\n\t\ticon: 'kolicon-eye',\n\t},\n\tright: {\n\t\ticon: 'kolicon-check',\n\t},\n};\n\nexport const InputTextSmartButton = () => {\n\tconst toaster = ToasterService.getInstance(document);\n\n\tconst handleClick = {\n\t\tonClick: () => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Smart-Button clicked',\n\t\t\t\tlabel: `Toaster`,\n\t\t\t\ttype: 'default',\n\t\t\t});\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the smart button feature for KolInputText. It allows the usage of a button inside the bnput.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Input with button and icons\"\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Open Toast',\n\t\t\t\t\t\t_on: handleClick,\n\t\t\t\t\t}}\n\t\t\t\t\t_icons={icons}\n\t\t\t\t></KolInputText>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Disabled input with button and icons\"\n\t\t\t\t\t_disabled\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Disabled Button',\n\t\t\t\t\t}}\n\t\t\t\t\t_icons={icons}\n\t\t\t\t></KolInputText>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1328
+ "code": "import { ToasterService } from '@public-ui/components';\nimport { KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst smartButtonProps = {\n\t_icons: 'kolicon-alert-info',\n\t_hideLabel: true,\n};\n\nconst icons = {\n\tleft: {\n\t\ticon: 'kolicon-eye',\n\t},\n\tright: {\n\t\ticon: 'kolicon-check',\n\t},\n};\n\nexport const InputTextSmartButton = () => {\n\tconst toaster = ToasterService.getInstance(document);\n\n\tconst handleClick = {\n\t\tonClick: () => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Smart-Button clicked',\n\t\t\t\tlabel: `Toaster`,\n\t\t\t\ttype: 'default',\n\t\t\t});\n\t\t},\n\t};\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the smart button feature for KolInputText. It allows the usage of a button inside the bnput.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"enabled\">\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Input with button and icons\"\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Open Toast',\n\t\t\t\t\t\t_on: handleClick,\n\t\t\t\t\t}}\n\t\t\t\t\t_icons={icons}\n\t\t\t\t></KolInputText>\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"disabled\">\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Disabled input with button and icons\"\n\t\t\t\t\t_disabled\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Disabled Button',\n\t\t\t\t\t}}\n\t\t\t\t\t_icons={icons}\n\t\t\t\t></KolInputText>\n\t\t\t</SampleBlock>\n\t\t</div>\n\t);\n};\n",
1329
1329
  "kind": "sample"
1330
1330
  },
1331
1331
  {
@@ -1333,7 +1333,7 @@
1333
1333
  "group": "input-text",
1334
1334
  "name": "text-formatter",
1335
1335
  "path": "packages/samples/react/src/components/input-text/text-formatter.tsx",
1336
- "code": "import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { SampleDescription } from '../SampleDescription';\n\n/**\n * IbanFormatter handles formatting and parsing of IBAN values.\n * It groups characters in blocks of 4, separated by spaces.\n * Example: \"DE89370400440532013000\" → \"DE89 3704 0044 0532 0130 00\"\n */\nclass IbanFormatter {\n\tprivate readonly SEPARATOR = ' ';\n\tprivate readonly CHARS_PER_GROUP = 4;\n\tprivate readonly KEEP_ALPHANUM = /[^a-zA-Z0-9]/g;\n\n\t/**\n\t * Removes all non-alphanumeric characters and converts to uppercase.\n\t * This is the raw value stored in the form model.\n\t */\n\tparse(value: string): string {\n\t\treturn value.replace(this.KEEP_ALPHANUM, '').toUpperCase();\n\t}\n\n\t/**\n\t * Formats the value into groups of 4 characters separated by spaces.\n\t * This is the display value shown in the input field.\n\t */\n\tformat(value: string): string {\n\t\tconst clean = this.parse(value);\n\t\tconst regex = new RegExp(`(.{${this.CHARS_PER_GROUP}})(?!$)`, 'g');\n\t\treturn clean.replace(regex, `$1${this.SEPARATOR}`);\n\t}\n\n\t/**\n\t * Calculates the correct cursor position after formatting changes.\n\t * This ensures the cursor stays at the expected position when separators are added/removed.\n\t */\n\tadjustCursorPosition(oldValue: string, newValue: string, oldCursorPos: number): number {\n\t\tconst oldText = this.format(oldValue);\n\t\tconst newText = this.format(newValue);\n\n\t\tif (oldCursorPos >= oldText.length) return newText.length;\n\n\t\t// Count significant characters (excluding separators) up to cursor position\n\t\tlet significantChars = 0;\n\t\tfor (let i = 0; i < oldCursorPos && i < oldText.length; i++) {\n\t\t\tif (oldText[i] !== this.SEPARATOR) significantChars++;\n\t\t}\n\n\t\t// Find the corresponding position in the new formatted text\n\t\tlet count = 0;\n\t\tfor (let i = 0; i < newText.length; i++) {\n\t\t\tif (newText[i] !== this.SEPARATOR && count++ === significantChars) return i;\n\t\t}\n\t\treturn newText.length;\n\t}\n}\n\n/**\n * CurrencyFormatter handles formatting and parsing of currency values.\n * It uses the browser's locale for formatting and intelligently detects\n * decimal vs. thousand separators when parsing.\n * Example: 1000000 → \"1.000.000,00 €\" (German locale)\n */\nclass CurrencyFormatter {\n\tprivate readonly LOCALE = navigator.language;\n\tprivate readonly CURRENCY_SYMBOL = ' €';\n\n\t/**\n\t * Parses a formatted currency string back to a raw number.\n\t * Intelligently detects which character is the decimal separator:\n\t * - German format: \"1.000.000,00\" → 1000000 (dot is thousand, comma is decimal)\n\t * - English format: \"1,000,000.00\" → 1000000 (comma is thousand, dot is decimal)\n\t */\n\tparse(value: string): number {\n\t\t// Remove currency symbols and keep only digits, dots, and commas\n\t\tconst sanitized = value.replace(/[^\\d.,]/g, '');\n\n\t\t// Determine which character is the decimal separator\n\t\t// The rightmost occurrence is typically the decimal separator\n\t\tconst lastCommaIndex = sanitized.lastIndexOf(',');\n\t\tconst lastDotIndex = sanitized.lastIndexOf('.');\n\n\t\tlet normalizedValue: string;\n\n\t\tif (lastCommaIndex > lastDotIndex) {\n\t\t\t// Comma is decimal separator (e.g., German: 1.000.000,00)\n\t\t\t// Remove all dots (thousand separators) and replace comma with dot for parseFloat\n\t\t\tnormalizedValue = sanitized.replace(/\\./g, '').replace(',', '.');\n\t\t} else if (lastDotIndex > lastCommaIndex) {\n\t\t\t// Dot is decimal separator (e.g., English: 1,000,000.00)\n\t\t\t// Remove all commas (thousand separators)\n\t\t\tnormalizedValue = sanitized.replace(/,/g, '');\n\t\t} else {\n\t\t\t// No decimal separator present, remove all dots and commas\n\t\t\tnormalizedValue = sanitized.replace(/[.,]/g, '');\n\t\t}\n\n\t\treturn parseFloat(normalizedValue) || 0;\n\t}\n\n\t/**\n\t * Formats a number as currency according to the browser's locale.\n\t * Always shows 2 decimal places and appends the currency symbol.\n\t */\n\tformat(value: number | string): string {\n\t\tconst number = typeof value === 'string' ? this.parse(value) : value;\n\t\tconst formatted = new Intl.NumberFormat(this.LOCALE, {\n\t\t\tminimumFractionDigits: 2,\n\t\t\tmaximumFractionDigits: 2,\n\t\t}).format(number);\n\t\treturn formatted + this.CURRENCY_SYMBOL;\n\t}\n\n\t/**\n\t * Calculates the correct cursor position after formatting changes.\n\t * This ensures the cursor stays aligned with digits when thousand separators are added/removed.\n\t */\n\tadjustCursorPosition(oldValue: string, newValue: string, oldCursorPos: number): number {\n\t\tconst oldText = this.format(oldValue);\n\t\tconst newText = this.format(newValue);\n\n\t\tif (oldCursorPos >= oldText.length) return newText.length;\n\n\t\t// Count digits up to cursor position (ignoring separators and currency symbols)\n\t\tlet digitCount = 0;\n\t\tfor (let i = 0; i < oldCursorPos && i < oldText.length; i++) {\n\t\t\tif (/\\d/.test(oldText[i])) digitCount++;\n\t\t}\n\n\t\t// Find the corresponding position in the new formatted text\n\t\tlet count = 0;\n\t\tfor (let i = 0; i < newText.length; i++) {\n\t\t\tif (/\\d/.test(newText[i]) && count++ === digitCount) return i;\n\t\t}\n\t\treturn newText.length;\n\t}\n}\n\ntype IbanExampleFormValues = {\n\tiban: string;\n};\n\ntype CurrencyExampleFormValues = {\n\tcurrency: number;\n};\n\n/**\n * Demo component showcasing two different text formatting strategies for input fields.\n *\n * Strategy 1 - Live Formatting (IBAN):\n * - Formats text while typing\n * - Maintains intelligent cursor positioning\n * - Best for: Fixed-format values where users expect immediate visual feedback\n *\n * Strategy 2 - On-Blur Formatting (Currency):\n * - Formats only when field loses focus (onBlur event)\n * - Allows free typing without formatting interruptions\n * - Best for: Numeric values where users might type in various formats\n */\nexport function InputTextFormatterDemo() {\n\tconst ibanFormatter = new IbanFormatter();\n\tconst currencyFormatter = new CurrencyFormatter();\n\n\tconst ibanForm = useForm<IbanExampleFormValues>({\n\t\tdefaultValues: { iban: 'DE89370400440532013000' },\n\t});\n\tconst currencyForm = useForm<CurrencyExampleFormValues>({\n\t\tdefaultValues: { currency: 1000000 },\n\t});\n\n\t/**\n\t * Handles input events for the IBAN field with live formatting.\n\t * Updates the model value and adjusts cursor position to maintain UX during formatting.\n\t */\n\tconst handleIbanInput = (event: Event) => {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tconst newValue = ibanFormatter.parse(input.value);\n\t\tconst newCursorPos = ibanFormatter.adjustCursorPosition(ibanForm.getValues('iban'), newValue, input.selectionStart || 0);\n\n\t\t// Update the form model with the parsed (unformatted) value\n\t\tibanForm.setValue('iban', newValue);\n\n\t\t// Use double requestAnimationFrame to ensure cursor position is set after React re-render\n\t\trequestAnimationFrame(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tinput.setSelectionRange(newCursorPos, newCursorPos);\n\t\t\t});\n\t\t});\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example demonstrates two different formatting strategies for input fields:</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Live Formatting (IBAN):</strong> Formatting happens while typing. The value is immediately formatted and displayed with intelligent cursor\n\t\t\t\t\t\tpositioning. Best for fixed-format values where users expect visual feedback during input.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>On-Blur Formatting (Currency):</strong> Formatting happens when leaving the field (onBlur event). Allows free typing without interruption.\n\t\t\t\t\t\tBest for numeric values where users might input in various formats.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>Key Concept:</strong> The form model always stores the <em>unformatted</em> value (raw IBAN string, numeric currency value), while the input\n\t\t\t\t\tfield displays the <em>formatted</em> value for better readability.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"w-full flex flex-col\">\n\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t<KolHeading _label=\"Live Formatting - IBAN\" _level={2} />\n\t\t\t\t\t<p className=\"text-sm mb-2\">Formatting occurs during input with intelligent cursor control</p>\n\t\t\t\t\t<KolForm>\n\t\t\t\t\t\t<form onSubmit={ibanForm.handleSubmit(async () => {})}>\n\t\t\t\t\t\t\t<Controller\n\t\t\t\t\t\t\t\tname=\"iban\"\n\t\t\t\t\t\t\t\tcontrol={ibanForm.control}\n\t\t\t\t\t\t\t\trender={({ field }) => (\n\t\t\t\t\t\t\t\t\t<div className=\"block mt-2\">\n\t\t\t\t\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\t\t\t\t\tid=\"field-iban\"\n\t\t\t\t\t\t\t\t\t\t\t_label=\"IBAN\"\n\t\t\t\t\t\t\t\t\t\t\t_value={ibanFormatter.format(field.value ?? '')}\n\t\t\t\t\t\t\t\t\t\t\t_required\n\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\tonInput: handleIbanInput,\n\t\t\t\t\t\t\t\t\t\t\t\tonBlur: field.onBlur,\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</KolForm>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t<KolHeading _label=\"Model (Unformatted Value)\" _level={2} />\n\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(ibanForm.watch(), null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</section>\n\n\t\t\t<section className=\"w-full flex flex-col\">\n\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t<KolHeading _label=\"On-Blur Formatting - Currency\" _level={2} />\n\t\t\t\t\t<p className=\"text-sm mb-2\">Formatting occurs when leaving the field (onBlur) for uninterrupted input</p>\n\t\t\t\t\t<KolForm>\n\t\t\t\t\t\t<form onSubmit={currencyForm.handleSubmit(async () => {})}>\n\t\t\t\t\t\t\t<Controller\n\t\t\t\t\t\t\t\tname=\"currency\"\n\t\t\t\t\t\t\t\tcontrol={currencyForm.control}\n\t\t\t\t\t\t\t\trender={({ field }) => (\n\t\t\t\t\t\t\t\t\t<div className=\"block mt-2\">\n\t\t\t\t\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\t\t\t\t\tid=\"field-currency\"\n\t\t\t\t\t\t\t\t\t\t\t_label=\"Currency\"\n\t\t\t\t\t\t\t\t\t\t\t_value={currencyFormatter.format(field.value ?? 0)}\n\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\tonBlur: (event: Event) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst input = event.target as HTMLInputElement;\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst parsedValue = currencyFormatter.parse(input.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield.onChange(parsedValue);\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield.onBlur();\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</KolForm>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t<KolHeading _label=\"Model (Numeric Value)\" _level={2} />\n\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(currencyForm.watch(), null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n",
1336
+ "code": "import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\n/**\n * IbanFormatter handles formatting and parsing of IBAN values.\n * It groups characters in blocks of 4, separated by spaces.\n * Example: \"DE89370400440532013000\" → \"DE89 3704 0044 0532 0130 00\"\n */\nclass IbanFormatter {\n\tprivate readonly SEPARATOR = ' ';\n\tprivate readonly CHARS_PER_GROUP = 4;\n\tprivate readonly KEEP_ALPHANUM = /[^a-zA-Z0-9]/g;\n\n\t/**\n\t * Removes all non-alphanumeric characters and converts to uppercase.\n\t * This is the raw value stored in the form model.\n\t */\n\tparse(value: string): string {\n\t\treturn value.replace(this.KEEP_ALPHANUM, '').toUpperCase();\n\t}\n\n\t/**\n\t * Formats the value into groups of 4 characters separated by spaces.\n\t * This is the display value shown in the input field.\n\t */\n\tformat(value: string): string {\n\t\tconst clean = this.parse(value);\n\t\tconst regex = new RegExp(`(.{${this.CHARS_PER_GROUP}})(?!$)`, 'g');\n\t\treturn clean.replace(regex, `$1${this.SEPARATOR}`);\n\t}\n\n\t/**\n\t * Calculates the correct cursor position after formatting changes.\n\t * This ensures the cursor stays at the expected position when separators are added/removed.\n\t */\n\tadjustCursorPosition(oldValue: string, newValue: string, oldCursorPos: number): number {\n\t\tconst oldText = this.format(oldValue);\n\t\tconst newText = this.format(newValue);\n\n\t\tif (oldCursorPos >= oldText.length) return newText.length;\n\n\t\t// Count significant characters (excluding separators) up to cursor position\n\t\tlet significantChars = 0;\n\t\tfor (let i = 0; i < oldCursorPos && i < oldText.length; i++) {\n\t\t\tif (oldText[i] !== this.SEPARATOR) significantChars++;\n\t\t}\n\n\t\t// Find the corresponding position in the new formatted text\n\t\tlet count = 0;\n\t\tfor (let i = 0; i < newText.length; i++) {\n\t\t\tif (newText[i] !== this.SEPARATOR && count++ === significantChars) return i;\n\t\t}\n\t\treturn newText.length;\n\t}\n}\n\n/**\n * CurrencyFormatter handles formatting and parsing of currency values.\n * It uses the browser's locale for formatting and intelligently detects\n * decimal vs. thousand separators when parsing.\n * Example: 1000000 → \"1.000.000,00 €\" (German locale)\n */\nclass CurrencyFormatter {\n\tprivate readonly LOCALE = navigator.language;\n\tprivate readonly CURRENCY_SYMBOL = ' €';\n\n\t/**\n\t * Parses a formatted currency string back to a raw number.\n\t * Intelligently detects which character is the decimal separator:\n\t * - German format: \"1.000.000,00\" → 1000000 (dot is thousand, comma is decimal)\n\t * - English format: \"1,000,000.00\" → 1000000 (comma is thousand, dot is decimal)\n\t */\n\tparse(value: string): number {\n\t\t// Remove currency symbols and keep only digits, dots, and commas\n\t\tconst sanitized = value.replace(/[^\\d.,]/g, '');\n\n\t\t// Determine which character is the decimal separator\n\t\t// The rightmost occurrence is typically the decimal separator\n\t\tconst lastCommaIndex = sanitized.lastIndexOf(',');\n\t\tconst lastDotIndex = sanitized.lastIndexOf('.');\n\n\t\tlet normalizedValue: string;\n\n\t\tif (lastCommaIndex > lastDotIndex) {\n\t\t\t// Comma is decimal separator (e.g., German: 1.000.000,00)\n\t\t\t// Remove all dots (thousand separators) and replace comma with dot for parseFloat\n\t\t\tnormalizedValue = sanitized.replace(/\\./g, '').replace(',', '.');\n\t\t} else if (lastDotIndex > lastCommaIndex) {\n\t\t\t// Dot is decimal separator (e.g., English: 1,000,000.00)\n\t\t\t// Remove all commas (thousand separators)\n\t\t\tnormalizedValue = sanitized.replace(/,/g, '');\n\t\t} else {\n\t\t\t// No decimal separator present, remove all dots and commas\n\t\t\tnormalizedValue = sanitized.replace(/[.,]/g, '');\n\t\t}\n\n\t\treturn parseFloat(normalizedValue) || 0;\n\t}\n\n\t/**\n\t * Formats a number as currency according to the browser's locale.\n\t * Always shows 2 decimal places and appends the currency symbol.\n\t */\n\tformat(value: number | string): string {\n\t\tconst number = typeof value === 'string' ? this.parse(value) : value;\n\t\tconst formatted = new Intl.NumberFormat(this.LOCALE, {\n\t\t\tminimumFractionDigits: 2,\n\t\t\tmaximumFractionDigits: 2,\n\t\t}).format(number);\n\t\treturn formatted + this.CURRENCY_SYMBOL;\n\t}\n\n\t/**\n\t * Calculates the correct cursor position after formatting changes.\n\t * This ensures the cursor stays aligned with digits when thousand separators are added/removed.\n\t */\n\tadjustCursorPosition(oldValue: string, newValue: string, oldCursorPos: number): number {\n\t\tconst oldText = this.format(oldValue);\n\t\tconst newText = this.format(newValue);\n\n\t\tif (oldCursorPos >= oldText.length) return newText.length;\n\n\t\t// Count digits up to cursor position (ignoring separators and currency symbols)\n\t\tlet digitCount = 0;\n\t\tfor (let i = 0; i < oldCursorPos && i < oldText.length; i++) {\n\t\t\tif (/\\d/.test(oldText[i])) digitCount++;\n\t\t}\n\n\t\t// Find the corresponding position in the new formatted text\n\t\tlet count = 0;\n\t\tfor (let i = 0; i < newText.length; i++) {\n\t\t\tif (/\\d/.test(newText[i]) && count++ === digitCount) return i;\n\t\t}\n\t\treturn newText.length;\n\t}\n}\n\ntype IbanExampleFormValues = {\n\tiban: string;\n};\n\ntype CurrencyExampleFormValues = {\n\tcurrency: number;\n};\n\n/**\n * Demo component showcasing two different text formatting strategies for input fields.\n *\n * Strategy 1 - Live Formatting (IBAN):\n * - Formats text while typing\n * - Maintains intelligent cursor positioning\n * - Best for: Fixed-format values where users expect immediate visual feedback\n *\n * Strategy 2 - On-Blur Formatting (Currency):\n * - Formats only when field loses focus (onBlur event)\n * - Allows free typing without formatting interruptions\n * - Best for: Numeric values where users might type in various formats\n */\nexport function InputTextFormatterDemo() {\n\tconst ibanFormatter = new IbanFormatter();\n\tconst currencyFormatter = new CurrencyFormatter();\n\n\tconst ibanForm = useForm<IbanExampleFormValues>({\n\t\tdefaultValues: { iban: 'DE89370400440532013000' },\n\t});\n\tconst currencyForm = useForm<CurrencyExampleFormValues>({\n\t\tdefaultValues: { currency: 1000000 },\n\t});\n\n\t/**\n\t * Handles input events for the IBAN field with live formatting.\n\t * Updates the model value and adjusts cursor position to maintain UX during formatting.\n\t */\n\tconst handleIbanInput = (event: Event) => {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tconst newValue = ibanFormatter.parse(input.value);\n\t\tconst newCursorPos = ibanFormatter.adjustCursorPosition(ibanForm.getValues('iban'), newValue, input.selectionStart || 0);\n\n\t\t// Update the form model with the parsed (unformatted) value\n\t\tibanForm.setValue('iban', newValue);\n\n\t\t// Use double requestAnimationFrame to ensure cursor position is set after React re-render\n\t\trequestAnimationFrame(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tinput.setSelectionRange(newCursorPos, newCursorPos);\n\t\t\t});\n\t\t});\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example demonstrates two different formatting strategies for input fields:</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Live Formatting (IBAN):</strong> Formatting happens while typing. The value is immediately formatted and displayed with intelligent cursor\n\t\t\t\t\t\tpositioning. Best for fixed-format values where users expect visual feedback during input.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>On-Blur Formatting (Currency):</strong> Formatting happens when leaving the field (onBlur event). Allows free typing without interruption.\n\t\t\t\t\t\tBest for numeric values where users might input in various formats.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>Key Concept:</strong> The form model always stores the <em>unformatted</em> value (raw IBAN string, numeric currency value), while the input\n\t\t\t\t\tfield displays the <em>formatted</em> value for better readability.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<SampleBlock id=\"iban\" className=\"w-full flex flex-col\">\n\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t<KolHeading _label=\"Live Formatting - IBAN\" _level={2} />\n\t\t\t\t\t<p className=\"text-sm mb-2\">Formatting occurs during input with intelligent cursor control</p>\n\t\t\t\t\t<KolForm>\n\t\t\t\t\t\t<form onSubmit={ibanForm.handleSubmit(async () => {})}>\n\t\t\t\t\t\t\t<Controller\n\t\t\t\t\t\t\t\tname=\"iban\"\n\t\t\t\t\t\t\t\tcontrol={ibanForm.control}\n\t\t\t\t\t\t\t\trender={({ field }) => (\n\t\t\t\t\t\t\t\t\t<div className=\"block mt-2\">\n\t\t\t\t\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\t\t\t\t\tid=\"field-iban\"\n\t\t\t\t\t\t\t\t\t\t\t_label=\"IBAN\"\n\t\t\t\t\t\t\t\t\t\t\t_value={ibanFormatter.format(field.value ?? '')}\n\t\t\t\t\t\t\t\t\t\t\t_required\n\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\tonInput: handleIbanInput,\n\t\t\t\t\t\t\t\t\t\t\t\tonBlur: field.onBlur,\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</KolForm>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t<KolHeading _label=\"Model (Unformatted Value)\" _level={2} />\n\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(ibanForm.watch(), null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</SampleBlock>\n\n\t\t\t<SampleBlock id=\"currency\" className=\"w-full flex flex-col\">\n\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t<KolHeading _label=\"On-Blur Formatting - Currency\" _level={2} />\n\t\t\t\t\t<p className=\"text-sm mb-2\">Formatting occurs when leaving the field (onBlur) for uninterrupted input</p>\n\t\t\t\t\t<KolForm>\n\t\t\t\t\t\t<form onSubmit={currencyForm.handleSubmit(async () => {})}>\n\t\t\t\t\t\t\t<Controller\n\t\t\t\t\t\t\t\tname=\"currency\"\n\t\t\t\t\t\t\t\tcontrol={currencyForm.control}\n\t\t\t\t\t\t\t\trender={({ field }) => (\n\t\t\t\t\t\t\t\t\t<div className=\"block mt-2\">\n\t\t\t\t\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\t\t\t\t\tid=\"field-currency\"\n\t\t\t\t\t\t\t\t\t\t\t_label=\"Currency\"\n\t\t\t\t\t\t\t\t\t\t\t_value={currencyFormatter.format(field.value ?? 0)}\n\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\tonBlur: (event: Event) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst input = event.target as HTMLInputElement;\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst parsedValue = currencyFormatter.parse(input.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield.onChange(parsedValue);\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield.onBlur();\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</KolForm>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t<KolHeading _label=\"Model (Numeric Value)\" _level={2} />\n\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(currencyForm.watch(), null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n}\n",
1337
1337
  "kind": "sample"
1338
1338
  },
1339
1339
  {
@@ -1341,7 +1341,7 @@
1341
1341
  "group": "input-text",
1342
1342
  "name": "variant",
1343
1343
  "path": "packages/samples/react/src/components/input-text/variant.tsx",
1344
- "code": "import {\n\tKolCombobox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputVariant: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst inputVariants = useMemo(() => (theme ? fetchVariantData(theme, 'inputVariants') : []), [theme]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story showcases input variants depending on your choosen theme.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{!Array.isArray(inputVariants) || inputVariants.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for inputs.</p>\n\t\t\t\t) : (\n\t\t\t\t\tinputVariants.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div key={element} className=\"grid gap-4 p-8\">\n\t\t\t\t\t\t\t\t<h2>Variante: {element}</h2>\n\t\t\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\t\t\t_label=\"Input Text\"\n\t\t\t\t\t\t\t\t\t_hint=\"Enter your surname\"\n\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: 'Error message' }}\n\t\t\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t\t\t_hasCounter\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<KolInputPassword _label=\"Input Passwort\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputColor _label=\"Input Color\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputDate _label=\"Input Date\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputEmail _label=\"Input Email\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputFile _label=\"Input File\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputNumber _label=\"Input Number\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputRange _label=\"Input Range\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolSelect\n\t\t\t\t\t\t\t\t\t_label=\"Select\"\n\t\t\t\t\t\t\t\t\t_options={[\n\t\t\t\t\t\t\t\t\t\t{ label: 'Please select…', value: '' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'One', value: 'one' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Two', value: 'two' },\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<KolSingleSelect\n\t\t\t\t\t\t\t\t\t_label=\"Single Select\"\n\t\t\t\t\t\t\t\t\t_options={[\n\t\t\t\t\t\t\t\t\t\t{ label: 'One', value: 'one' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Two', value: 'two' },\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<KolCombobox _label=\"Combobox\" _suggestions=\"['Herr','Frau','Firma']\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t\t\t_label=\"Radio Group\"\n\t\t\t\t\t\t\t\t\t_options={[\n\t\t\t\t\t\t\t\t\t\t{ label: 'Field 1', value: 1 },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Field 2', value: 2 },\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<KolTextarea _label=\"Textarea\" _variant={element} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1344
+ "code": "import {\n\tKolCombobox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getTheme } from '../../shares/store';\nimport { SampleBlock, toKebabCase } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputVariant: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getTheme();\n\tconst inputVariants = useMemo(() => (theme ? fetchVariantData(theme, 'inputVariants') : []), [theme]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story showcases input variants depending on your choosen theme.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{!Array.isArray(inputVariants) || inputVariants.length === 0 ? (\n\t\t\t\t\t<SampleBlock id=\"no-variants\">\n\t\t\t\t\t\t<p>This theme has no variants for inputs.</p>\n\t\t\t\t\t</SampleBlock>\n\t\t\t\t) : (\n\t\t\t\t\tinputVariants.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SampleBlock key={element} id={`variant-${toKebabCase(String(element))}`} heading={`Variante: ${String(element)}`} className=\"grid gap-4 p-8\">\n\t\t\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\t\t\t_label=\"Input Text\"\n\t\t\t\t\t\t\t\t\t_hint=\"Enter your surname\"\n\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: 'Error message' }}\n\t\t\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t\t\t_hasCounter\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<KolInputPassword _label=\"Input Passwort\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputColor _label=\"Input Color\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputDate _label=\"Input Date\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputEmail _label=\"Input Email\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputFile _label=\"Input File\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputNumber _label=\"Input Number\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputRange _label=\"Input Range\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolSelect\n\t\t\t\t\t\t\t\t\t_label=\"Select\"\n\t\t\t\t\t\t\t\t\t_options={[\n\t\t\t\t\t\t\t\t\t\t{ label: 'Please select…', value: '' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'One', value: 'one' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Two', value: 'two' },\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<KolSingleSelect\n\t\t\t\t\t\t\t\t\t_label=\"Single Select\"\n\t\t\t\t\t\t\t\t\t_options={[\n\t\t\t\t\t\t\t\t\t\t{ label: 'One', value: 'one' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Two', value: 'two' },\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<KolCombobox _label=\"Combobox\" _suggestions=\"['Herr','Frau','Firma']\" _variant={element} />\n\t\t\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t\t\t_label=\"Radio Group\"\n\t\t\t\t\t\t\t\t\t_options={[\n\t\t\t\t\t\t\t\t\t\t{ label: 'Field 1', value: 1 },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Field 2', value: 2 },\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<KolTextarea _label=\"Textarea\" _variant={element} />\n\t\t\t\t\t\t\t</SampleBlock>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1345
1345
  "kind": "sample"
1346
1346
  },
1347
1347
  {
@@ -1349,7 +1349,7 @@
1349
1349
  "group": "kolibri",
1350
1350
  "name": "basic",
1351
1351
  "path": "packages/samples/react/src/components/kolibri/basic.tsx",
1352
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolKolibri } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nexport const KolibriBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolKolibri renders the KoliBri logo. The sample show the logo with and without label and with a custom color.</p>\n\t\t</SampleDescription>\n\n\t\t<KolHeading class=\"block\" _level={3} _label=\"Regular\" />\n\t\t<KolKolibri class=\"block\" style={{ width: 300 }} />\n\t\t<KolHeading class=\"block\" _level={3} _label=\"Without Label\" />\n\t\t<KolKolibri class=\"block\" style={{ width: 300 }} _labeled={false} />\n\t\t<KolHeading class=\"block\" _level={3} _label=\"Customized color\" />\n\t\t<KolKolibri class=\"block\" style={{ width: 300 }} _color=\"#cc006e\" />\n\t</>\n);\n",
1352
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolKolibri } from '@public-ui/react-v19';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const KolibriBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolKolibri renders the KoliBri logo. The sample show the logo with and without label and with a custom color.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\">\n\t\t\t<KolHeading class=\"block\" _level={3} _label=\"Regular\" />\n\t\t\t<KolKolibri class=\"block\" style={{ width: 300 }} />\n\t\t\t<KolHeading class=\"block\" _level={3} _label=\"Without Label\" />\n\t\t\t<KolKolibri class=\"block\" style={{ width: 300 }} _labeled={false} />\n\t\t\t<KolHeading class=\"block\" _level={3} _label=\"Customized color\" />\n\t\t\t<KolKolibri class=\"block\" style={{ width: 300 }} _color=\"#cc006e\" />\n\t\t</SampleBlock>\n\t</>\n);\n",
1353
1353
  "kind": "sample"
1354
1354
  },
1355
1355
  {
@@ -1357,7 +1357,7 @@
1357
1357
  "group": "link-button",
1358
1358
  "name": "aria-description",
1359
1359
  "path": "packages/samples/react/src/components/link-button/aria-description.tsx",
1360
- "code": "import { KolLinkButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkButtonAriaDescription: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLinkButton with aria-description</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"Link Button Text without area description\"></KolLinkButton>\n\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"Link Button Text\" _ariaDescription=\"Link Button Area Description\"></KolLinkButton>\n\t\t</div>\n\t</>\n);\n",
1360
+ "code": "import { KolLinkButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkButtonAriaDescription: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLinkButton with aria-description</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"Link Button Text without area description\"></KolLinkButton>\n\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"Link Button Text\" _ariaDescription=\"Link Button Aria Description\"></KolLinkButton>\n\t\t\t<KolLinkButton\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t\t_label=\"Link Button Text\"\n\t\t\t\t_ariaDescription=\"Link Button Aria Description with external Link\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t></KolLinkButton>\n\t\t</div>\n\t</>\n);\n",
1361
1361
  "kind": "sample"
1362
1362
  },
1363
1363
  {
@@ -1365,7 +1365,15 @@
1365
1365
  "group": "link-button",
1366
1366
  "name": "basic",
1367
1367
  "path": "packages/samples/react/src/components/link-button/basic.tsx",
1368
- "code": "import React, { useMemo } from 'react';\n\nimport { KolLinkButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkButtonBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);\n\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolLinkButton renders a link that looks like a button. The sample shows the different theme exclusive styling variants.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons=\"kolicon-house\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<KolLinkButton\n\t\t\t\t\t\t\t\t\t\t_href=\"#/back-page\"\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-settings\"\n\t\t\t\t\t\t\t\t\t\t_label={`${element}`}\n\t\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t\t\tkey={element}\n\t\t\t\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1368
+ "code": "import React, { useMemo } from 'react';\n\nimport { KolLinkButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getTheme } from '../../shares/store';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkButtonBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getTheme();\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);\n\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolLinkButton renders a link that looks like a button. The sample shows the different theme exclusive styling variants.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"variants\">\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons=\"kolicon-house\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<KolLinkButton\n\t\t\t\t\t\t\t\t\t\t_href=\"#/back-page\"\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-settings\"\n\t\t\t\t\t\t\t\t\t\t_label={`${element}`}\n\t\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t\t\tkey={element}\n\t\t\t\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1369
+ "kind": "sample"
1370
+ },
1371
+ {
1372
+ "id": "sample/link-button/target",
1373
+ "group": "link-button",
1374
+ "name": "target",
1375
+ "path": "packages/samples/react/src/components/link-button/target.tsx",
1376
+ "code": "import { KolLinkButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkButtonTarget: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLinkButton with diffrent Targets</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"target\" className=\"flex flex-wrap gap-2\">\n\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"Link Button Target default\"></KolLinkButton>\n\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"Link Button Target _self\" _target=\"_blank\"></KolLinkButton>\n\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"Link Button Target _blank\" _target=\"_blank\"></KolLinkButton>\n\t\t</SampleBlock>\n\t</>\n);\n",
1369
1377
  "kind": "sample"
1370
1378
  },
1371
1379
  {
@@ -1389,7 +1397,7 @@
1389
1397
  "group": "link",
1390
1398
  "name": "basic",
1391
1399
  "path": "packages/samples/react/src/components/link/basic.tsx",
1392
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolLink renders a link. This sample shows disabled links, links with hidden label, the boolean _inline property and links with different CSS{' '}\n\t\t\t\t<code>display</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _inline={false} _label=\"Simple Link\" />\n\t\t\t<KolLink _disabled _href=\"#/back-page\" _inline={false} _label=\"Simple Link (disabled)\" />\n\t\t\t<KolLink _hideLabel _icons=\"kolicon-house\" _href=\"#/back-page\" _inline={false} _label=\"Icon Link\" />\n\t\t\t<KolLink _disabled _hideLabel _icons=\"kolicon-house\" _href=\"#/back-page\" _inline={false} _label=\"Icon Link (disabled)\" />\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolLink _href=\"#/back-page\" _label=\"Simple Link\" /> It is rendered by\n\t\t\t\tdefault as a <strong>inline element</strong>.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.{' '}\n\t\t\t\t<KolLink class=\"d-inline-block\" _accessKey=\"S\" _href=\"#/back-page\" _label=\"Simple Link\" />. This allows you to assign width, height, and other\n\t\t\t\tproperties to it using CSS styles.\n\t\t\t\t<br />\n\t\t\t\t<br />\n\t\t\t\tAfter that, there is a link that is rendered as a block element. <KolLink class=\"d-block\" _href=\"#/back-page\" _label=\"Simple Link\" />, therefore, I span\n\t\t\t\tthe entire width of the parent element, causing a line break.\n\t\t\t</p>\n\t\t\t<KolLink _href=\"#/back-page\" _inline={false} _label=\"Special Variant Link\" _variant=\"theme-link\" />\n\t\t</div>\n\t</>\n);\n",
1400
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolLink renders a link. This sample shows disabled links, links with hidden label, the boolean _inline property and links with different CSS{' '}\n\t\t\t\t<code>display</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\">\n\t\t\t<KolLink _href=\"#/back-page\" _inline={false} _label=\"Simple Link\" />\n\t\t\t<KolLink _disabled _href=\"#/back-page\" _inline={false} _label=\"Simple Link (disabled)\" />\n\t\t\t<KolLink _hideLabel _icons=\"kolicon-house\" _href=\"#/back-page\" _inline={false} _label=\"Icon Link\" />\n\t\t\t<KolLink _disabled _hideLabel _icons=\"kolicon-house\" _href=\"#/back-page\" _inline={false} _label=\"Icon Link (disabled)\" />\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolLink _href=\"#/back-page\" _label=\"Simple Link\" /> It is rendered by\n\t\t\t\tdefault as a <strong>inline element</strong>.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.{' '}\n\t\t\t\t<KolLink class=\"d-inline-block\" _accessKey=\"S\" _href=\"#/back-page\" _label=\"Simple Link\" />. This allows you to assign width, height, and other\n\t\t\t\tproperties to it using CSS styles.\n\t\t\t\t<br />\n\t\t\t\t<br />\n\t\t\t\tAfter that, there is a link that is rendered as a block element. <KolLink class=\"d-block\" _href=\"#/back-page\" _label=\"Simple Link\" />, therefore, I span\n\t\t\t\tthe entire width of the parent element, causing a line break.\n\t\t\t</p>\n\t\t\t<KolLink _href=\"#/back-page\" _inline={false} _label=\"Special Variant Link\" _variant=\"theme-link\" />\n\t\t</SampleBlock>\n\t</>\n);\n",
1393
1401
  "kind": "sample"
1394
1402
  },
1395
1403
  {
@@ -1397,7 +1405,7 @@
1397
1405
  "group": "link",
1398
1406
  "name": "icons",
1399
1407
  "path": "packages/samples/react/src/components/link/icons.tsx",
1400
- "code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with icons in different alignments and combinations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _icons=\"kolicon-house\" _label=\"I am a link with an icon on the left\" _href=\"#/back-page\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t\tleft: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\n\t\t\t<KolLink _icons=\"kolicon-house\" _href=\"https://public-ui.github.io/\" _label=\"I am a external link with an icon on the left\" _target=\"_blank\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external linkwith an icon on the right\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with an icon at the top\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with icon below\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with all icons\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t\tleft: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
1408
+ "code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with icons in different alignments and combinations.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"icons\">\n\t\t\t<KolLink _icons=\"kolicon-house\" _label=\"I am a link with an icon on the left\" _href=\"#/back-page\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t\tleft: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\n\t\t\t<KolLink _icons=\"kolicon-house\" _href=\"https://public-ui.github.io/\" _label=\"I am a external link with an icon on the left\" _target=\"_blank\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external linkwith an icon on the right\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with an icon at the top\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with icon below\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with all icons\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t\tleft: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1401
1409
  "kind": "sample"
1402
1410
  },
1403
1411
  {
@@ -1405,7 +1413,7 @@
1405
1413
  "group": "link",
1406
1414
  "name": "image",
1407
1415
  "path": "packages/samples/react/src/components/link/image.tsx",
1408
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolImage, KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkImage: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolLink can be used with slot-content instead of a label as well. This sample demonstrates the slot content used to display an image.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"I am a link that is rendered as text\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"\">\n\t\t\t\t<KolImage\n\t\t\t\t\t_alt=\"KoliBri design system illustration showing three people working on laptops surrounded by UI components, charts, and the KoliBri hummingbird logo\"\n\t\t\t\t\t_src=\"sample-image.png\"\n\t\t\t\t\tclassName=\"w-image\"\n\t\t\t\t\tslot=\"expert\"\n\t\t\t\t/>\n\t\t\t</KolLink>\n\t\t</div>\n\t</>\n);\n",
1416
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolImage, KolLink } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkImage: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolLink can be used with slot-content instead of a label as well. This sample demonstrates the slot content used to display an image.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"image\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"I am a link that is rendered as text\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"\">\n\t\t\t\t<KolImage\n\t\t\t\t\t_alt=\"KoliBri design system illustration showing three people working on laptops surrounded by UI components, charts, and the KoliBri hummingbird logo\"\n\t\t\t\t\t_src=\"sample-image.png\"\n\t\t\t\t\tclassName=\"w-image\"\n\t\t\t\t\tslot=\"expert\"\n\t\t\t\t/>\n\t\t\t</KolLink>\n\t\t</SampleBlock>\n\t</>\n);\n",
1409
1417
  "kind": "sample"
1410
1418
  },
1411
1419
  {
@@ -1413,7 +1421,7 @@
1413
1421
  "group": "link",
1414
1422
  "name": "link-variant",
1415
1423
  "path": "packages/samples/react/src/components/link/variant.tsx",
1416
- "code": "import React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const LinkVariant: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'linkVariants') : []), [theme]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the theme specific variants of KolLink.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Normal link without a variant\" />\n\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t) : (\n\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\treturn <KolLink _href=\"#/back-page\" _label={`Theme exclusive variant: ${element}`} _variant={element} key={element} />;\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1424
+ "code": "import React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getTheme } from '../../shares/store';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const LinkVariant: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getTheme();\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'linkVariants') : []), [theme]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the theme specific variants of KolLink.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"variants\">\n\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Normal link without a variant\" />\n\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t) : (\n\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\treturn <KolLink _href=\"#/back-page\" _label={`Theme exclusive variant: ${element}`} _variant={element} key={element} />;\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1417
1425
  "kind": "sample"
1418
1426
  },
1419
1427
  {
@@ -1445,7 +1453,7 @@
1445
1453
  "group": "link",
1446
1454
  "name": "target",
1447
1455
  "path": "packages/samples/react/src/components/link/target.tsx",
1448
- "code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkTarget: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolLink with different <code>_target</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"text-base d-flex gap-4\">\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</>\n);\n",
1456
+ "code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkTarget: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolLink with different <code>_target</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"target\" className=\"text-base d-flex gap-4\">\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</SampleBlock>\n\t</>\n);\n",
1449
1457
  "kind": "sample"
1450
1458
  },
1451
1459
  {
@@ -1453,7 +1461,7 @@
1453
1461
  "group": "meter",
1454
1462
  "name": "basic",
1455
1463
  "path": "packages/samples/react/src/components/meter/basic.tsx",
1456
- "code": "import { KolHeading, KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolMeter renders a semantic meter element. You can use _min (default 0), _max (default 1) and _unit (default %) to customize it.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Basic\" />\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Storage used\" _value={0.5} />\n\t\t\t\t\t<KolMeter _label=\"Weight\" _max={100} _value={75} _unit=\"kg\" />\n\t\t\t\t\t<KolMeter _label=\"Temperature\" _min={-100} _max={100} _value={-50} _unit=\"°C\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</>\n);\n",
1464
+ "code": "import { KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolMeter renders a semantic meter element. You can use _min (default 0), _max (default 1) and _unit (default %) to customize it.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<SampleBlock id=\"basic\" heading=\"Basic\">\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Storage used\" _value={0.5} />\n\t\t\t\t\t<KolMeter _label=\"Weight\" _max={100} _value={75} _unit=\"kg\" />\n\t\t\t\t\t<KolMeter _label=\"Temperature\" _min={-100} _max={100} _value={-50} _unit=\"°C\" />\n\t\t\t\t</div>\n\t\t\t</SampleBlock>\n\t\t</div>\n\t</>\n);\n",
1457
1465
  "kind": "sample"
1458
1466
  },
1459
1467
  {
@@ -1461,7 +1469,7 @@
1461
1469
  "group": "meter",
1462
1470
  "name": "dynamic",
1463
1471
  "path": "packages/samples/react/src/components/meter/dynamic.tsx",
1464
- "code": "import { KolButton, KolHeading, KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterDynamic: FC = () => {\n\tconst [usedStorage, setUsedStorage] = useState(120);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolMeter announces value changes immediately to screen readers. Use the buttons below to verify the live region updates without delay.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Dynamic value\" />\n\t\t\t\t\t<KolMeter _label=\"Used hard disk space\" _max={500} _min={0} _unit=\"GB\" _value={usedStorage} />\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"120 GB\" _on={{ onClick: () => setUsedStorage(120) }} _variant=\"secondary\" />\n\t\t\t\t\t\t<KolButton _label=\"240 GB\" _on={{ onClick: () => setUsedStorage(240) }} _variant=\"secondary\" />\n\t\t\t\t\t\t<KolButton _label=\"360 GB\" _on={{ onClick: () => setUsedStorage(360) }} _variant=\"secondary\" />\n\t\t\t\t\t\t<KolButton _label=\"480 GB\" _on={{ onClick: () => setUsedStorage(480) }} _variant=\"secondary\" />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1472
+ "code": "import { KolButton, KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterDynamic: FC = () => {\n\tconst [usedStorage, setUsedStorage] = useState(120);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolMeter announces value changes immediately to screen readers. Use the buttons below to verify the live region updates without delay.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"dynamic-value\" heading=\"Dynamic value\">\n\t\t\t\t\t<KolMeter _label=\"Used hard disk space\" _max={500} _min={0} _unit=\"GB\" _value={usedStorage} />\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"120 GB\" _on={{ onClick: () => setUsedStorage(120) }} _variant=\"secondary\" />\n\t\t\t\t\t\t<KolButton _label=\"240 GB\" _on={{ onClick: () => setUsedStorage(240) }} _variant=\"secondary\" />\n\t\t\t\t\t\t<KolButton _label=\"360 GB\" _on={{ onClick: () => setUsedStorage(360) }} _variant=\"secondary\" />\n\t\t\t\t\t\t<KolButton _label=\"480 GB\" _on={{ onClick: () => setUsedStorage(480) }} _variant=\"secondary\" />\n\t\t\t\t\t</div>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1465
1473
  "kind": "sample"
1466
1474
  },
1467
1475
  {
@@ -1469,7 +1477,7 @@
1469
1477
  "group": "meter",
1470
1478
  "name": "optimum",
1471
1479
  "path": "packages/samples/react/src/components/meter/optimum.tsx",
1472
- "code": "import { KolHeading, KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterOptimum: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThe _optimum prop indicates the preferred value. Combined with _low and _high, the browser uses it to determine whether the current value is in a good,\n\t\t\t\tacceptable or bad zone – which affects the semantic coloring.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Optimum in medium zone (good = medium)\" />\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Temperature is nice\" _min={-20} _max={60} _low={10} _high={30} _optimum={20} _value={20} _unit=\"°C\" />\n\t\t\t\t\t<KolMeter _label=\"It's too cold\" _min={-20} _max={60} _low={10} _high={30} _optimum={20} _value={-10} _unit=\"°C\" />\n\t\t\t\t\t<KolMeter _label=\"It's too hot\" _min={-20} _max={60} _low={10} _high={30} _optimum={20} _value={50} _unit=\"°C\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Optimum in low zone (good = low)\" />\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Memory Usage\" _max={100} _value={10} _low={25} _high={75} _optimum={10} />\n\t\t\t\t\t<KolMeter _label=\"Memory Usage\" _max={100} _value={50} _low={25} _high={75} _optimum={10} />\n\t\t\t\t\t<KolMeter _label=\"Memory Usage\" _max={100} _value={90} _low={25} _high={75} _optimum={10} />\n\t\t\t\t</div>\n\t\t\t</section>\n\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Optimum in high zone (good = high)\" />\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Battery level\" _max={100} _value={10} _low={25} _high={75} _optimum={90} />\n\t\t\t\t\t<KolMeter _label=\"Battery level\" _max={100} _value={50} _low={25} _high={75} _optimum={90} />\n\t\t\t\t\t<KolMeter _label=\"Battery level\" _max={100} _value={90} _low={25} _high={75} _optimum={90} />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</>\n);\n",
1480
+ "code": "import { KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterOptimum: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThe _optimum prop indicates the preferred value. Combined with _low and _high, the browser uses it to determine whether the current value is in a good,\n\t\t\t\tacceptable or bad zone – which affects the semantic coloring.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<SampleBlock id=\"optimum-medium-zone-good\" heading=\"Optimum in medium zone (good = medium)\">\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Temperature is nice\" _min={-20} _max={60} _low={10} _high={30} _optimum={20} _value={20} _unit=\"°C\" />\n\t\t\t\t\t<KolMeter _label=\"It's too cold\" _min={-20} _max={60} _low={10} _high={30} _optimum={20} _value={-10} _unit=\"°C\" />\n\t\t\t\t\t<KolMeter _label=\"It's too hot\" _min={-20} _max={60} _low={10} _high={30} _optimum={20} _value={50} _unit=\"°C\" />\n\t\t\t\t</div>\n\t\t\t</SampleBlock>\n\n\t\t\t<SampleBlock id=\"optimum-low-zone-good-low\" heading=\"Optimum in low zone (good = low)\">\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Memory Usage\" _max={100} _value={10} _low={25} _high={75} _optimum={10} />\n\t\t\t\t\t<KolMeter _label=\"Memory Usage\" _max={100} _value={50} _low={25} _high={75} _optimum={10} />\n\t\t\t\t\t<KolMeter _label=\"Memory Usage\" _max={100} _value={90} _low={25} _high={75} _optimum={10} />\n\t\t\t\t</div>\n\t\t\t</SampleBlock>\n\n\t\t\t<SampleBlock id=\"optimum-high-zone-good-high\" heading=\"Optimum in high zone (good = high)\">\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Battery level\" _max={100} _value={10} _low={25} _high={75} _optimum={90} />\n\t\t\t\t\t<KolMeter _label=\"Battery level\" _max={100} _value={50} _low={25} _high={75} _optimum={90} />\n\t\t\t\t\t<KolMeter _label=\"Battery level\" _max={100} _value={90} _low={25} _high={75} _optimum={90} />\n\t\t\t\t</div>\n\t\t\t</SampleBlock>\n\t\t</div>\n\t</>\n);\n",
1473
1481
  "kind": "sample"
1474
1482
  },
1475
1483
  {
@@ -1477,7 +1485,7 @@
1477
1485
  "group": "meter",
1478
1486
  "name": "orientation",
1479
1487
  "path": "packages/samples/react/src/components/meter/orientation.tsx",
1480
- "code": "import { KolHeading, KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterOrientation: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThe _orientation prop switches the meter bar between horizontal (default) and vertical. Vertical meters grow from bottom to top and are useful for tank\n\t\t\t\tfill levels, signal strength or similar scalar indicators.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Vertical\" />\n\t\t\t\t<div className=\"flex flex-row gap-8 items-end\">\n\t\t\t\t\t<KolMeter style={{ '--kol-meter-vertical-height': '100' }} _label=\"Tank 100l\" _max={100} _value={50} _orientation=\"vertical\" _unit=\"l\" />\n\t\t\t\t\t<KolMeter style={{ '--kol-meter-vertical-height': '150' }} _label=\"Tank 150l\" _max={150} _value={50} _orientation=\"vertical\" _unit=\"l\" />\n\t\t\t\t\t<KolMeter style={{ '--kol-meter-vertical-height': '200' }} _label=\"Tank 200l\" _max={200} _value={150} _orientation=\"vertical\" _unit=\"l\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Vertical with ranges and optimum\" />\n\t\t\t\t<div className=\"flex flex-row gap-8\">\n\t\t\t\t\t<KolMeter _label=\"Low\" _max={100} _value={10} _low={25} _high={75} _optimum={50} _orientation=\"vertical\" />\n\t\t\t\t\t<KolMeter _label=\"OK\" _max={100} _value={50} _low={25} _high={75} _optimum={50} _orientation=\"vertical\" />\n\t\t\t\t\t<KolMeter _label=\"High\" _max={100} _value={90} _low={25} _high={75} _optimum={50} _orientation=\"vertical\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</>\n);\n",
1488
+ "code": "import { KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterOrientation: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThe _orientation prop switches the meter bar between horizontal (default) and vertical. Vertical meters grow from bottom to top and are useful for tank\n\t\t\t\tfill levels, signal strength or similar scalar indicators.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<SampleBlock id=\"vertical\" heading=\"Vertical\">\n\t\t\t\t<div className=\"flex flex-row gap-8 items-end\">\n\t\t\t\t\t<KolMeter style={{ '--kol-meter-vertical-height': '100' }} _label=\"Tank 100l\" _max={100} _value={50} _orientation=\"vertical\" _unit=\"l\" />\n\t\t\t\t\t<KolMeter style={{ '--kol-meter-vertical-height': '150' }} _label=\"Tank 150l\" _max={150} _value={50} _orientation=\"vertical\" _unit=\"l\" />\n\t\t\t\t\t<KolMeter style={{ '--kol-meter-vertical-height': '200' }} _label=\"Tank 200l\" _max={200} _value={150} _orientation=\"vertical\" _unit=\"l\" />\n\t\t\t\t</div>\n\t\t\t</SampleBlock>\n\n\t\t\t<SampleBlock id=\"vertical-ranges-optimum\" heading=\"Vertical with ranges and optimum\">\n\t\t\t\t<div className=\"flex flex-row gap-8\">\n\t\t\t\t\t<KolMeter _label=\"Low\" _max={100} _value={10} _low={25} _high={75} _optimum={50} _orientation=\"vertical\" />\n\t\t\t\t\t<KolMeter _label=\"OK\" _max={100} _value={50} _low={25} _high={75} _optimum={50} _orientation=\"vertical\" />\n\t\t\t\t\t<KolMeter _label=\"High\" _max={100} _value={90} _low={25} _high={75} _optimum={50} _orientation=\"vertical\" />\n\t\t\t\t</div>\n\t\t\t</SampleBlock>\n\t\t</div>\n\t</>\n);\n",
1481
1489
  "kind": "sample"
1482
1490
  },
1483
1491
  {
@@ -1493,7 +1501,7 @@
1493
1501
  "group": "nav",
1494
1502
  "name": "aria-current",
1495
1503
  "path": "packages/samples/react/src/components/nav/aria-current.tsx",
1496
- "code": "import React from 'react';\n\nimport { KolNav } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\nexport const NavAriaCurrent: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolNav with a link to the current page. This makes the component automatically assign <code>aria-current=&quot;page&quot;</code>\n\t\t\t\tto it.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolNav\n\t\t\tclass=\"block w-sm\"\n\t\t\t_label=\"Main navigation\"\n\t\t\t_links={[\n\t\t\t\t{\n\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t_label: 'Nav - aria-current (Current page)',\n\t\t\t\t\t_href: '#/nav/aria-current', // Please don't change this link. It's necessary to be the \"current page\" for the sample.\n\t\t\t\t\t_active: true,\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</>\n);\n",
1504
+ "code": "import React from 'react';\n\nimport { KolNav } from '@public-ui/react-v19';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\nexport const NavAriaCurrent: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolNav with a link to the current page. This makes the component automatically assign <code>aria-current=&quot;page&quot;</code>\n\t\t\t\tto it.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"aria-current\">\n\t\t\t<KolNav\n\t\t\t\tclass=\"block w-sm\"\n\t\t\t\t_label=\"Main navigation\"\n\t\t\t\t_links={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Nav - aria-current (Current page)',\n\t\t\t\t\t\t_href: '#/nav/aria-current', // Please don't change this link. It's necessary to be the \"current page\" for the sample.\n\t\t\t\t\t\t_active: true,\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1497
1505
  "kind": "sample"
1498
1506
  },
1499
1507
  {
@@ -1501,7 +1509,7 @@
1501
1509
  "group": "nav",
1502
1510
  "name": "basic",
1503
1511
  "path": "packages/samples/react/src/components/nav/basic.tsx",
1504
- "code": "import React, { useState } from 'react';\n\nimport { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport { LINKS, LINKS_SUB_ACTIVE, LINKS_WITHOUT_SUBMENU } from './links';\n\nimport type { FC } from 'react';\nexport const NavBasic: FC = () => {\n\tconst [hasIconsWhenExpanded, setHasIconsWhenExpanded] = useState(true);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolNav renders a navigation. In this sample, icons for the navigation elements can be shown or hidden using a checkbox and the navigation can be\n\t\t\t\t\tcollapsed, showing only icons and no text labels.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"grid gap-8\">\n\t\t\t\t<section>\n\t\t\t\t\t<KolInputCheckbox\n\t\t\t\t\t\t_label=\"Show icons when expanded\"\n\t\t\t\t\t\t_checked={hasIconsWhenExpanded}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: (_event, value: unknown) => {\n\t\t\t\t\t\t\t\tsetHasIconsWhenExpanded(value as boolean);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolInputCheckbox>\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Navigation without submenu\" />\n\t\t\t\t\t<KolNav\n\t\t\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t\t\t_label=\"Navigation without submenu\"\n\t\t\t\t\t\t_links={LINKS_WITHOUT_SUBMENU}\n\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t_hasIconsWhenExpanded={hasIconsWhenExpanded}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Navigation with submenu\" />\n\t\t\t\t\t<KolNav class=\"block w-fit\" _label=\"Navigation with submenu\" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Navigation with submenu active\" />\n\t\t\t\t\t<KolNav\n\t\t\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t\t\t_label=\"Navigation with submenu active\"\n\t\t\t\t\t\t_links={LINKS_SUB_ACTIVE}\n\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t_hasIconsWhenExpanded={hasIconsWhenExpanded}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1512
+ "code": "import React, { useState } from 'react';\n\nimport { KolInputCheckbox, KolNav } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nimport { LINKS, LINKS_SUB_ACTIVE, LINKS_WITHOUT_SUBMENU } from './links';\n\nimport type { FC } from 'react';\nexport const NavBasic: FC = () => {\n\tconst [hasIconsWhenExpanded, setHasIconsWhenExpanded] = useState(true);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolNav renders a navigation. In this sample, icons for the navigation elements can be shown or hidden using a checkbox and the navigation can be\n\t\t\t\t\tcollapsed, showing only icons and no text labels.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"grid gap-8\">\n\t\t\t\t<section>\n\t\t\t\t\t<KolInputCheckbox\n\t\t\t\t\t\t_label=\"Show icons when expanded\"\n\t\t\t\t\t\t_checked={hasIconsWhenExpanded}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: (_event, value: unknown) => {\n\t\t\t\t\t\t\t\tsetHasIconsWhenExpanded(value as boolean);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolInputCheckbox>\n\t\t\t\t</section>\n\t\t\t\t<SampleBlock id=\"navigation-submenu\" heading=\"Navigation without submenu\" fitContent>\n\t\t\t\t\t<KolNav\n\t\t\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t\t\t_label=\"Navigation without submenu\"\n\t\t\t\t\t\t_links={LINKS_WITHOUT_SUBMENU}\n\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t_hasIconsWhenExpanded={hasIconsWhenExpanded}\n\t\t\t\t\t/>\n\t\t\t\t</SampleBlock>\n\t\t\t\t<SampleBlock id=\"navigation-submenu-2\" heading=\"Navigation with submenu\" fitContent>\n\t\t\t\t\t<KolNav class=\"block w-fit\" _label=\"Navigation with submenu\" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />\n\t\t\t\t</SampleBlock>\n\t\t\t\t<SampleBlock id=\"navigation-submenu-active\" heading=\"Navigation with submenu active\" fitContent>\n\t\t\t\t\t<KolNav\n\t\t\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t\t\t_label=\"Navigation with submenu active\"\n\t\t\t\t\t\t_links={LINKS_SUB_ACTIVE}\n\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t_hasIconsWhenExpanded={hasIconsWhenExpanded}\n\t\t\t\t\t/>\n\t\t\t\t</SampleBlock>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1505
1513
  "kind": "sample"
1506
1514
  },
1507
1515
  {
@@ -1509,7 +1517,7 @@
1509
1517
  "group": "pagination",
1510
1518
  "name": "basic",
1511
1519
  "path": "packages/samples/react/src/components/pagination/basic.tsx",
1512
- "code": "import React from 'react';\n\nimport { KolPagination } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PaginationBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolPagination renders a pagination for datasets. The sample shows the different states and variations of a pagination and the option to change the page\n\t\t\t\tsize.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolPagination\n\t\t\t\t_max={316514}\n\t\t\t\t_page={15475}\n\t\t\t\t_pageSize={20}\n\t\t\t\t_siblingCount={3}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Large dataset, page in the middle (Entries 309481 to 309500 of 316514)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={316514}\n\t\t\t\t_page={1}\n\t\t\t\t_pageSize={50}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Large dataset, first page (Entries 1 to 50 of 316514)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={316514}\n\t\t\t\t_page={6331}\n\t\t\t\t_pageSize={50}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Large dataset, last page (Entries 316501 to 316514 of 316514)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={14}\n\t\t\t\t_page={14}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={1}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_label=\"Small dataset, last page (Entries 14 to 14 of 14)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination _max={4} _page={1} _pageSize={4} _siblingCount={0} _boundaryCount={2} _label=\"Tiny dataset, first page (Entries 1 to 4 of 4)\" _on={{}} />\n\t\t\t<KolPagination\n\t\t\t\t_max={10}\n\t\t\t\t_page={15}\n\t\t\t\t_pageSize={5}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_hasButtons={false}\n\t\t\t\t_label=\"Edge case: page exceeds max (corrected to page 2, Entries 6 to 10 of 10)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={1000}\n\t\t\t\t_page={10}\n\t\t\t\t_pageSize={25}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_hasButtons={false}\n\t\t\t\t_label=\"Medium dataset with boundary buttons only (Entries 226 to 250 of 1000)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={379}\n\t\t\t\t_page={6}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_hasButtons={false}\n\t\t\t\t_label=\"With page size options\"\n\t\t\t\t_on={{}}\n\t\t\t\t_pageSizeOptions={[10, 25, 50, 100]}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={1}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Page size 10, sibling count 1 (Entries 41 to 50 of 100)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={250}\n\t\t\t\t_page={3}\n\t\t\t\t_pageSize={30}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={0}\n\t\t\t\t_label=\"No boundary buttons, sibling count 2 (Entries 61 to 90 of 250)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
1520
+ "code": "import React from 'react';\n\nimport { KolPagination } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PaginationBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolPagination renders a pagination for datasets. The sample shows the different states and variations of a pagination and the option to change the page\n\t\t\t\tsize.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\" narrow>\n\t\t\t<KolPagination\n\t\t\t\t_max={316514}\n\t\t\t\t_page={15475}\n\t\t\t\t_pageSize={20}\n\t\t\t\t_siblingCount={3}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Large dataset, page in the middle (Entries 309481 to 309500 of 316514)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={316514}\n\t\t\t\t_page={1}\n\t\t\t\t_pageSize={50}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Large dataset, first page (Entries 1 to 50 of 316514)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={316514}\n\t\t\t\t_page={6331}\n\t\t\t\t_pageSize={50}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Large dataset, last page (Entries 316501 to 316514 of 316514)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={14}\n\t\t\t\t_page={14}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={1}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_label=\"Small dataset, last page (Entries 14 to 14 of 14)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination _max={4} _page={1} _pageSize={4} _siblingCount={0} _boundaryCount={2} _label=\"Tiny dataset, first page (Entries 1 to 4 of 4)\" _on={{}} />\n\t\t\t<KolPagination\n\t\t\t\t_max={10}\n\t\t\t\t_page={15}\n\t\t\t\t_pageSize={5}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_hasButtons={false}\n\t\t\t\t_label=\"Edge case: page exceeds max (corrected to page 2, Entries 6 to 10 of 10)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={1000}\n\t\t\t\t_page={10}\n\t\t\t\t_pageSize={25}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_hasButtons={false}\n\t\t\t\t_label=\"Medium dataset with boundary buttons only (Entries 226 to 250 of 1000)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={379}\n\t\t\t\t_page={6}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_hasButtons={false}\n\t\t\t\t_label=\"With page size options\"\n\t\t\t\t_on={{}}\n\t\t\t\t_pageSizeOptions={[10, 25, 50, 100]}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={1}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Page size 10, sibling count 1 (Entries 41 to 50 of 100)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t\t<KolPagination\n\t\t\t\t_max={250}\n\t\t\t\t_page={3}\n\t\t\t\t_pageSize={30}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={0}\n\t\t\t\t_label=\"No boundary buttons, sibling count 2 (Entries 61 to 90 of 250)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1513
1521
  "kind": "sample"
1514
1522
  },
1515
1523
  {
@@ -1517,7 +1525,7 @@
1517
1525
  "group": "pagination",
1518
1526
  "name": "button-visibility",
1519
1527
  "path": "packages/samples/react/src/components/pagination/button-visibility.tsx",
1520
- "code": "import React from 'react';\n\nimport { KolPagination } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PaginationButtonVisibility: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates how to show or hide the navigation buttons (first, previous, next, last) in a pagination. All examples use the same dataset\n\t\t\t\tconfiguration (_max=100, _page=5, _pageSize=10) to show the effect of different button visibility settings.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t{/* Default: All buttons visible */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Default: All buttons visible (first, previous, next, last)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* Only first and last buttons */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Only first and last buttons\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: true, last: true, next: false, previous: false }}\n\t\t\t/>\n\n\t\t\t{/* Only previous and next buttons */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Only previous and next buttons\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: false, last: false, next: true, previous: true }}\n\t\t\t/>\n\n\t\t\t{/* No navigation buttons, only page numbers */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"No navigation buttons, only page numbers\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={false}\n\t\t\t/>\n\n\t\t\t{/* All buttons except first */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"All buttons except first\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: false, last: true, next: true, previous: true }}\n\t\t\t/>\n\n\t\t\t{/* All buttons except last */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"All buttons except last\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: true, last: false, next: true, previous: true }}\n\t\t\t/>\n\n\t\t\t{/* All buttons except previous */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"All buttons except previous\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: true, last: true, next: true, previous: false }}\n\t\t\t/>\n\n\t\t\t{/* All buttons except next */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"All buttons except next\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: true, last: true, next: false, previous: true }}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
1528
+ "code": "import React from 'react';\n\nimport { KolPagination } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PaginationButtonVisibility: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates how to show or hide the navigation buttons (first, previous, next, last) in a pagination. All examples use the same dataset\n\t\t\t\tconfiguration (_max=100, _page=5, _pageSize=10) to show the effect of different button visibility settings.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t{/* Snapshotted: the three distinct shapes the button group can take – full, inner buttons only, none at all. */}\n\t\t<SampleBlock id=\"button-visibility\">\n\t\t\t{/* Default: All buttons visible */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Default: All buttons visible (first, previous, next, last)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* Only previous and next buttons */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Only previous and next buttons\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: false, last: false, next: true, previous: true }}\n\t\t\t/>\n\n\t\t\t{/* No navigation buttons, only page numbers */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"No navigation buttons, only page numbers\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={false}\n\t\t\t/>\n\t\t</SampleBlock>\n\n\t\t{/* Not snapshotted: these combinations only differ in which button is missing – prop logic, no additional theme styling. */}\n\t\t<SampleBlock id=\"button-combinations\" skipSnapshot>\n\t\t\t{/* Only first and last buttons */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"Only first and last buttons\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: true, last: true, next: false, previous: false }}\n\t\t\t/>\n\n\t\t\t{/* All buttons except first */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"All buttons except first\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: false, last: true, next: true, previous: true }}\n\t\t\t/>\n\n\t\t\t{/* All buttons except last */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"All buttons except last\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: true, last: false, next: true, previous: true }}\n\t\t\t/>\n\n\t\t\t{/* All buttons except previous */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"All buttons except previous\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: true, last: true, next: true, previous: false }}\n\t\t\t/>\n\n\t\t\t{/* All buttons except next */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={10}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"All buttons except next\"\n\t\t\t\t_on={{}}\n\t\t\t\t_hasButtons={{ first: true, last: true, next: false, previous: true }}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1521
1529
  "kind": "sample"
1522
1530
  },
1523
1531
  {
@@ -1525,7 +1533,7 @@
1525
1533
  "group": "pagination",
1526
1534
  "name": "sibling-boundary",
1527
1535
  "path": "packages/samples/react/src/components/pagination/sibling-boundary.tsx",
1528
- "code": "import React from 'react';\n\nimport { KolPagination } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PaginationSiblingBoundary: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates how _siblingCount and _boundaryCount affect the number of page buttons shown. All examples use the same dataset configuration\n\t\t\t\t(_max=20, _page=5, _pageSize=1) to clearly show the effect of these settings. _siblingCount controls how many page buttons appear next to the current\n\t\t\t\tpage, while _boundaryCount controls how many buttons appear at the beginning and end of the pagination.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t{/* Default: siblingCount=1, boundaryCount=1 */}\n\t\t\t<KolPagination _max={20} _page={5} _pageSize={1} _label=\"Default: siblingCount=1, boundaryCount=1 (shows pages 1, 4, 5, 6, 20)\" _on={{}} />\n\n\t\t\t{/* More siblings: siblingCount=2, boundaryCount=1 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"siblingCount=2, boundaryCount=1 (shows pages 1, 3, 4, 5, 6, 7, 20)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* Many siblings: siblingCount=3, boundaryCount=1 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={3}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"siblingCount=3, boundaryCount=1 (shows pages 1, 2, 3, 4, 5, 6, 7, 8, 20)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* No siblings: siblingCount=0, boundaryCount=1 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"siblingCount=0, boundaryCount=1 (shows pages 1, 5, 20 only)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* More boundaries: siblingCount=1, boundaryCount=2 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={1}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_label=\"siblingCount=1, boundaryCount=2 (shows pages 1, 2, 4, 5, 6, 19, 20)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* Many boundaries: siblingCount=1, boundaryCount=3 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={1}\n\t\t\t\t_boundaryCount={3}\n\t\t\t\t_label=\"siblingCount=1, boundaryCount=3 (shows pages 1, 2, 3, 4, 5, 6, 18, 19, 20)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* No boundaries: siblingCount=1, boundaryCount=0 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={1}\n\t\t\t\t_boundaryCount={0}\n\t\t\t\t_label=\"siblingCount=1, boundaryCount=0 (shows pages 4, 5, 6 only, with ellipsis)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* No siblings, no boundaries: siblingCount=0, boundaryCount=0 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={0}\n\t\t\t\t_label=\"siblingCount=0, boundaryCount=0 (shows page 5 only, with ellipsis on both sides)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* High values: siblingCount=5, boundaryCount=2 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={5}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_label=\"siblingCount=5, boundaryCount=2 (shows almost all pages)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* Middle page with high sibling count: shows clipping */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={50}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={3}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_label=\"Larger dataset: _max=100, _page=50, siblingCount=3, boundaryCount=2\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
1536
+ "code": "import React from 'react';\n\nimport { KolPagination } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PaginationSiblingBoundary: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates how _siblingCount and _boundaryCount affect the number of page buttons shown. All examples use the same dataset configuration\n\t\t\t\t(_max=20, _page=5, _pageSize=1) to clearly show the effect of these settings. _siblingCount controls how many page buttons appear next to the current\n\t\t\t\tpage, while _boundaryCount controls how many buttons appear at the beginning and end of the pagination.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"sibling-boundary\">\n\t\t\t{/* Default: siblingCount=1, boundaryCount=1 */}\n\t\t\t<KolPagination _max={20} _page={5} _pageSize={1} _label=\"Default: siblingCount=1, boundaryCount=1 (shows pages 1, 4, 5, 6, 20)\" _on={{}} />\n\n\t\t\t{/* More siblings: siblingCount=2, boundaryCount=1 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={2}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"siblingCount=2, boundaryCount=1 (shows pages 1, 3, 4, 5, 6, 7, 20)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* Many siblings: siblingCount=3, boundaryCount=1 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={3}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"siblingCount=3, boundaryCount=1 (shows pages 1, 2, 3, 4, 5, 6, 7, 8, 20)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* No siblings: siblingCount=0, boundaryCount=1 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={1}\n\t\t\t\t_label=\"siblingCount=0, boundaryCount=1 (shows pages 1, 5, 20 only)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* More boundaries: siblingCount=1, boundaryCount=2 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={1}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_label=\"siblingCount=1, boundaryCount=2 (shows pages 1, 2, 4, 5, 6, 19, 20)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* Many boundaries: siblingCount=1, boundaryCount=3 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={1}\n\t\t\t\t_boundaryCount={3}\n\t\t\t\t_label=\"siblingCount=1, boundaryCount=3 (shows pages 1, 2, 3, 4, 5, 6, 18, 19, 20)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* No boundaries: siblingCount=1, boundaryCount=0 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={1}\n\t\t\t\t_boundaryCount={0}\n\t\t\t\t_label=\"siblingCount=1, boundaryCount=0 (shows pages 4, 5, 6 only, with ellipsis)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* No siblings, no boundaries: siblingCount=0, boundaryCount=0 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={0}\n\t\t\t\t_label=\"siblingCount=0, boundaryCount=0 (shows page 5 only, with ellipsis on both sides)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* High values: siblingCount=5, boundaryCount=2 */}\n\t\t\t<KolPagination\n\t\t\t\t_max={20}\n\t\t\t\t_page={5}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={5}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_label=\"siblingCount=5, boundaryCount=2 (shows almost all pages)\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\n\t\t\t{/* Middle page with high sibling count: shows clipping */}\n\t\t\t<KolPagination\n\t\t\t\t_max={100}\n\t\t\t\t_page={50}\n\t\t\t\t_pageSize={1}\n\t\t\t\t_siblingCount={3}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_label=\"Larger dataset: _max=100, _page=50, siblingCount=3, boundaryCount=2\"\n\t\t\t\t_on={{}}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1529
1537
  "kind": "sample"
1530
1538
  },
1531
1539
  {
@@ -1541,7 +1549,7 @@
1541
1549
  "group": "popover-button",
1542
1550
  "name": "inline",
1543
1551
  "path": "packages/samples/react/src/components/popover-button/inline.tsx",
1544
- "code": "import { KolHeading, KolPopoverButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonInline: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tA PopoverButton inline with some dummy text. Here the PopoverButton has the height of the surrounding text. As statet in\n\t\t\t\t\t<a href=\"https://www.w3.org/WAI/WCAG21/Understanding/target-size.html\">Understanding SC 2.5.5</a> target size of a help icon in text can be smaller\n\t\t\t\t\tthan 44px by 44px.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t<KolPopoverButton _inline={true} _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolPopoverButton>\n\t\t\t\t\t<br />\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1552
+ "code": "import { KolHeading, KolPopoverButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonInline: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tA PopoverButton inline with some dummy text. Here the PopoverButton has the height of the surrounding text. As statet in\n\t\t\t\t\t<a href=\"https://www.w3.org/WAI/WCAG21/Understanding/target-size.html\">Understanding SC 2.5.5</a> target size of a help icon in text can be smaller\n\t\t\t\t\tthan 44px by 44px.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<SampleBlock id=\"inline\" className=\"flex flex-col gap-4\">\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium.\n\t\t\t\t\t<KolPopoverButton _inline={true} _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolPopoverButton>\n\t\t\t\t\t<br />\n\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t</p>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1545
1553
  "kind": "sample"
1546
1554
  },
1547
1555
  {
@@ -1549,7 +1557,7 @@
1549
1557
  "group": "progress",
1550
1558
  "name": "basic",
1551
1559
  "path": "packages/samples/react/src/components/progress/basic.tsx",
1552
- "code": "import React from 'react';\n\nimport { KolProgress } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ProgressBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4 grid-cols-1 sm:grid-cols-2\">\n\t\t\t<fieldset title=\"Percentages\" className=\"flex flex-col gap-4\">\n\t\t\t\t<KolProgress _variant=\"bar\" _max={7} _value={0}></KolProgress>\n\t\t\t\t<KolProgress _variant=\"bar\" _max={7} _value={2}></KolProgress>\n\t\t\t\t<KolProgress _variant=\"bar\" _max={7} _value={7}></KolProgress>\n\t\t\t\t<KolProgress _variant=\"cycle\" _max={7} _value={6}></KolProgress>\n\t\t\t</fieldset>\n\t\t\t<fieldset title=\"Custom units\" className=\"flex flex-col gap-4\">\n\t\t\t\t<KolProgress _label=\"Distance\" _variant=\"bar\" _max={65434} _value={7236} _unit=\"m\"></KolProgress>\n\t\t\t\t<KolProgress _label=\"12 Tasks to do\" _variant=\"bar\" _max={12} _value={5} _unit=\"tasks completed\"></KolProgress>\n\t\t\t\t<KolProgress _label=\"Max 150 kg\" _variant=\"cycle\" _max={150} _value={42} _unit=\"kg\"></KolProgress>\n\t\t\t</fieldset>\n\t\t\t<fieldset title=\"Min & Max\" className=\"flex flex-col gap-4\">\n\t\t\t\t<KolProgress _label=\"More than max\" _variant=\"bar\" _max={7} _value={14}></KolProgress>\n\t\t\t\t<KolProgress _label=\"Less than min\" _variant=\"bar\" _max={7} _value={-7}></KolProgress>\n\t\t\t</fieldset>\n\t\t</div>\n\t</>\n);\n",
1560
+ "code": "import React from 'react';\n\nimport { KolProgress } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ProgressBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4 grid-cols-1 sm:grid-cols-2\">\n\t\t\t<SampleBlock id=\"percentages\" heading=\"Percentages\" className=\"flex flex-col gap-4\">\n\t\t\t\t<KolProgress _variant=\"bar\" _max={7} _value={0}></KolProgress>\n\t\t\t\t<KolProgress _variant=\"bar\" _max={7} _value={2}></KolProgress>\n\t\t\t\t<KolProgress _variant=\"bar\" _max={7} _value={7}></KolProgress>\n\t\t\t\t<KolProgress _variant=\"cycle\" _max={7} _value={6}></KolProgress>\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"custom-units\" heading=\"Custom units\" className=\"flex flex-col gap-4\">\n\t\t\t\t<KolProgress _label=\"Distance\" _variant=\"bar\" _max={65434} _value={7236} _unit=\"m\"></KolProgress>\n\t\t\t\t<KolProgress _label=\"12 Tasks to do\" _variant=\"bar\" _max={12} _value={5} _unit=\"tasks completed\"></KolProgress>\n\t\t\t\t<KolProgress _label=\"Max 150 kg\" _variant=\"cycle\" _max={150} _value={42} _unit=\"kg\"></KolProgress>\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"min-max\" heading=\"Min & Max\" className=\"flex flex-col gap-4\">\n\t\t\t\t<KolProgress _label=\"More than max\" _variant=\"bar\" _max={7} _value={14}></KolProgress>\n\t\t\t\t<KolProgress _label=\"Less than min\" _variant=\"bar\" _max={7} _value={-7}></KolProgress>\n\t\t\t</SampleBlock>\n\t\t</div>\n\t</>\n);\n",
1553
1561
  "kind": "sample"
1554
1562
  },
1555
1563
  {
@@ -1565,7 +1573,7 @@
1565
1573
  "group": "quote",
1566
1574
  "name": "basic",
1567
1575
  "path": "packages/samples/react/src/components/quote/basic.tsx",
1568
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolQuote } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const QuoteBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolQuote renders a quote with optional citation. This sample shows a quote in the variant &quot;inline&quot; with a link for citation.</p>\n\t\t</SampleDescription>\n\n\t\t<KolQuote _href=\"https://datatracker.ietf.org/doc/html/rfc1149\" _quote=\"Avian carriers can provide high delay.\" _variant=\"inline\"></KolQuote>\n\t</>\n);\n",
1576
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolQuote } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const QuoteBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolQuote renders a quote with optional citation. This sample shows a quote in the variant &quot;inline&quot; with a link for citation.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\">\n\t\t\t<KolQuote _href=\"https://datatracker.ietf.org/doc/html/rfc1149\" _quote=\"Avian carriers can provide high delay.\" _variant=\"inline\"></KolQuote>\n\t\t</SampleBlock>\n\t</>\n);\n",
1569
1577
  "kind": "sample"
1570
1578
  },
1571
1579
  {
@@ -1573,7 +1581,7 @@
1573
1581
  "group": "quote",
1574
1582
  "name": "block",
1575
1583
  "path": "packages/samples/react/src/components/quote/block.tsx",
1576
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolQuote } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const QuoteBlock: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows a quote in the &quot;block&quot; variant.</p>\n\t\t</SampleDescription>\n\n\t\t<KolQuote\n\t\t\t_label=\"RFC 1149\"\n\t\t\t_href=\"https://datatracker.ietf.org/doc/html/rfc1149\"\n\t\t\t_quote=\"Avian carriers can provide high delay, low throughput, and low altitude\n\t\t\t\t\t\t\t\tservice. The connection topology is limited to a single point-to-point path\n\t\t\t\t\t\t\t\tfor each carrier, used with standard carriers, but many carriers can be used\n\t\t\t\t\t\t\t\twithout significant interference with each other, outside early spring.\n\t\t\t\t\t\t\t\tThis is because of the 3D ether space available to the carriers, in contrast\n\t\t\t\t\t\t\t\tto the 1D ether used by IEEE802.3. The carriers have an intrinsic collision\n\t\t\t\t\t\t\t\tavoidance system, which increases availability.\"\n\t\t\t_variant=\"block\"\n\t\t></KolQuote>\n\t</>\n);\n",
1584
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolQuote } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const QuoteBlock: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows a quote in the &quot;block&quot; variant.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"block\">\n\t\t\t<KolQuote\n\t\t\t\t_label=\"RFC 1149\"\n\t\t\t\t_href=\"https://datatracker.ietf.org/doc/html/rfc1149\"\n\t\t\t\t_quote=\"Avian carriers can provide high delay, low throughput, and low altitude\n\t\t\t\t\t\t\t\tservice. The connection topology is limited to a single point-to-point path\n\t\t\t\t\t\t\t\tfor each carrier, used with standard carriers, but many carriers can be used\n\t\t\t\t\t\t\t\twithout significant interference with each other, outside early spring.\n\t\t\t\t\t\t\t\tThis is because of the 3D ether space available to the carriers, in contrast\n\t\t\t\t\t\t\t\tto the 1D ether used by IEEE802.3. The carriers have an intrinsic collision\n\t\t\t\t\t\t\t\tavoidance system, which increases availability.\"\n\t\t\t\t_variant=\"block\"\n\t\t\t></KolQuote>\n\t\t</SampleBlock>\n\t</>\n);\n",
1577
1585
  "kind": "sample"
1578
1586
  },
1579
1587
  {
@@ -1637,39 +1645,7 @@
1637
1645
  "group": "spin",
1638
1646
  "name": "basic",
1639
1647
  "path": "packages/samples/react/src/components/spin/basic.tsx",
1640
- "code": "import React from 'react';\n\nimport { KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolSpin renders a loading indicator. This sample shows the default variant &quot;dot&quot;.</p>\n\t\t</SampleDescription>\n\n\t\t<KolSpin _show />\n\t</>\n);\n",
1641
- "kind": "sample"
1642
- },
1643
- {
1644
- "id": "sample/spin/custom",
1645
- "group": "spin",
1646
- "name": "custom",
1647
- "path": "packages/samples/react/src/components/spin/custom.tsx",
1648
- "code": "import { SampleDescription } from '../SampleDescription';\nimport './custom.css';\n\nimport React from 'react';\n\nimport { KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\n\nexport const SpinCustom: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows a custom loading animation. Using the expert slot, it is possible to insert custom animations. Custom animations are not necessarily\n\t\t\t\tbarrier-free.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolSpin _show _variant=\"none\">\n\t\t\t<span slot=\"expert\" className=\"loader\"></span>\n\t\t</KolSpin>\n\t</>\n);\n",
1649
- "kind": "sample"
1650
- },
1651
- {
1652
- "id": "sample/spin/cycle",
1653
- "group": "spin",
1654
- "name": "cycle",
1655
- "path": "packages/samples/react/src/components/spin/cycle.tsx",
1656
- "code": "import React from 'react';\n\nimport { KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinCycle: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows the KolSpin variant &quot;cycle&quot; and that you can change its color and size.</p>\n\t\t</SampleDescription>\n\n\t\t<KolSpin _show _variant=\"cycle\" />\n\t</>\n);\n",
1657
- "kind": "sample"
1658
- },
1659
- {
1660
- "id": "sample/spin/label",
1661
- "group": "spin",
1662
- "name": "label",
1663
- "path": "packages/samples/react/src/components/spin/label.tsx",
1664
- "code": "import { KolSpin } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinLabel: FC = () => {\n\tconst [show, setShow] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst id = setInterval(() => setShow((value) => !value), 3000);\n\t\treturn () => clearInterval(id);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolSpin with a label.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolSpin _show={show} _label={show ? 'Loading data...' : 'Data loaded.'} />\n\t\t</>\n\t);\n};\n",
1665
- "kind": "sample"
1666
- },
1667
- {
1668
- "id": "sample/spin/variables",
1669
- "group": "spin",
1670
- "name": "variables",
1671
- "path": "packages/samples/react/src/components/spin/variables.tsx",
1672
- "code": "import React from 'react';\n\nimport { KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinVariables: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>You can change the color and size of the spinners with CSS properties.</p>\n\t\t</SampleDescription>\n\n\t\t<KolSpin _show style={{ '--kol-spin-color': 'green', '--kol-spin-size': '80' }} />\n\t</>\n);\n",
1648
+ "code": "import React from 'react';\n\nimport { KolHeading, KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nimport './custom.css';\n\nexport const SpinBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolSpin renders a loading indicator. It supports the variants &quot;dot&quot; (default) and &quot;cycle&quot;. With{' '}\n\t\t\t\t<code>_variant=&quot;none&quot;</code> and the expert slot a custom animation can be used &ndash; custom animations are not necessarily barrier-free.\n\t\t\t\tColor and size can be changed with the CSS properties <code>--kol-spin-color</code> and <code>--kol-spin-size</code>. The label (<code>_label</code>) is\n\t\t\t\tonly exposed to assistive technology, so it does not change the visual appearance.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<SampleBlock id=\"basic\" heading=\"Variant dot (default)\" fitContent>\n\t\t\t\t<KolSpin _show />\n\t\t\t</SampleBlock>\n\n\t\t\t<SampleBlock id=\"cycle\" heading=\"Variant cycle\" fitContent>\n\t\t\t\t<KolSpin _show _variant=\"cycle\" />\n\t\t\t</SampleBlock>\n\n\t\t\t<SampleBlock id=\"custom\" heading=\"Custom animation (expert slot)\" fitContent>\n\t\t\t\t<KolSpin _show _variant=\"none\">\n\t\t\t\t\t<span slot=\"expert\" className=\"loader\"></span>\n\t\t\t\t</KolSpin>\n\t\t\t</SampleBlock>\n\n\t\t\t<div>\n\t\t\t\t<KolHeading _level={2} _label=\"With label (screen reader only)\" />\n\t\t\t\t<KolSpin _show _label=\"Loading data...\" />\n\t\t\t</div>\n\n\t\t\t<div>\n\t\t\t\t<KolHeading _level={2} _label=\"Custom color and size (CSS properties)\" />\n\t\t\t\t<KolSpin _show style={{ '--kol-spin-color': 'green', '--kol-spin-size': '80' }} />\n\t\t\t</div>\n\t\t</div>\n\t</>\n);\n",
1673
1649
  "kind": "sample"
1674
1650
  },
1675
1651
  {
@@ -1677,7 +1653,7 @@
1677
1653
  "group": "split-button",
1678
1654
  "name": "basic",
1679
1655
  "path": "packages/samples/react/src/components/split-button/basic.tsx",
1680
- "code": "import React from 'react';\n\nimport type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolSplitButton, KolToolbar } from '@public-ui/react-v19';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonBasic: FC = () => {\n\tconst { buttonWithTextClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: buttonWithTextClickEventHandler,\n\t};\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Save',\n\t\t\t_icons: 'kolicon-check',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Move Up',\n\t\t\t_icons: 'kolicon-chevron-up',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'kolicon-minus',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe <code>SplitButton</code> component combines a primary action button with a context menu. Clicking the main button triggers the\n\t\t\t\t\t<strong> Edit</strong> action. The context menu opens a vertical list of additional actions:\n\t\t\t\t\t<strong> Save</strong>, <strong>Move</strong>, and <strong>Delete</strong>.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolSplitButton _label=\"Edit\" _on={dummyEventHandler}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolSplitButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1656
+ "code": "import React from 'react';\n\nimport type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolSplitButton, KolToolbar } from '@public-ui/react-v19';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonBasic: FC = () => {\n\tconst { buttonWithTextClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: buttonWithTextClickEventHandler,\n\t};\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Save',\n\t\t\t_icons: 'kolicon-check',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Move Up',\n\t\t\t_icons: 'kolicon-chevron-up',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'kolicon-minus',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe <code>SplitButton</code> component combines a primary action button with a context menu. Clicking the main button triggers the\n\t\t\t\t\t<strong> Edit</strong> action. The context menu opens a vertical list of additional actions:\n\t\t\t\t\t<strong> Save</strong>, <strong>Move</strong>, and <strong>Delete</strong>.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"basic\" className=\"flex flex-col gap-4\">\n\t\t\t\t<KolSplitButton _label=\"Edit\" _on={dummyEventHandler}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolSplitButton>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1681
1657
  "kind": "sample"
1682
1658
  },
1683
1659
  {
@@ -1701,7 +1677,7 @@
1701
1677
  "group": "table",
1702
1678
  "name": "action-columns",
1703
1679
  "path": "packages/samples/react/src/components/table/action-columns.tsx",
1704
- "code": "import type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\ntype ProjectTask = {\n\tid: string;\n\tproject: string;\n\towner: string;\n};\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'id', label: 'ID', width: 80 },\n\t\t\t{ key: 'project', label: 'Project' },\n\t\t\t{ key: 'owner', label: 'Owner', width: 140 },\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Actions',\n\t\t\t\twidth: 250,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Details',\n\t\t\t\t\t\t\t_icons: 'kolicon-eye',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Details: ${simpleRow.id} - ${simpleRow.project}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Start',\n\t\t\t\t\t\t\t_icons: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t_variant: 'secondary',\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Start task ${simpleRow.id}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t\t_label: 'View',\n\t\t\t\t\t\t\t_href: `#/back-page?taskId=${simpleRow.id}`,\n\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t_icons: 'kolicon-external-link',\n\t\t\t\t\t\t\t_hideLabel: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'externalActions',\n\t\t\t\tlabel: 'External Actions',\n\t\t\t\twidth: 280,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t\t_label: 'View on Dashboard',\n\t\t\t\t\t\t\t_href: `#/back-page?taskId=${simpleRow.id}`,\n\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t_icons: 'kolicon-external-link',\n\t\t\t\t\t\t\t_hideLabel: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst DATA: ProjectTask[] = [\n\t{\n\t\tid: 'T-01',\n\t\tproject: 'Onboarding checklist',\n\t\towner: 'Alex Rivera',\n\t},\n\t{\n\t\tid: 'T-02',\n\t\tproject: 'Accessibility audit',\n\t\towner: 'Jamie Chen',\n\t},\n];\n\nexport const TableActionColumns: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tSimple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with\n\t\t\t\tinline action buttons demonstrate clean separation between data and UI behavior.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Tasks with action buttons\" _headers={HEADERS} _data={DATA} className=\"block\" />\n\t\t</section>\n\t</>\n);\n",
1680
+ "code": "import type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\ntype ProjectTask = {\n\tid: string;\n\tproject: string;\n\towner: string;\n};\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'id', label: 'ID', width: 80 },\n\t\t\t{ key: 'project', label: 'Project' },\n\t\t\t{ key: 'owner', label: 'Owner', width: 140 },\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Actions',\n\t\t\t\twidth: 250,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Details',\n\t\t\t\t\t\t\t_icons: 'kolicon-eye',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Details: ${simpleRow.id} - ${simpleRow.project}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Start',\n\t\t\t\t\t\t\t_icons: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t_variant: 'secondary',\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Start task ${simpleRow.id}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t\t_label: 'View',\n\t\t\t\t\t\t\t_href: `#/back-page?taskId=${simpleRow.id}`,\n\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t_icons: 'kolicon-external-link',\n\t\t\t\t\t\t\t_hideLabel: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'externalActions',\n\t\t\t\tlabel: 'External Actions',\n\t\t\t\twidth: 280,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t\t_label: 'View on Dashboard',\n\t\t\t\t\t\t\t_href: `#/back-page?taskId=${simpleRow.id}`,\n\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t_icons: 'kolicon-external-link',\n\t\t\t\t\t\t\t_hideLabel: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst DATA: ProjectTask[] = [\n\t{\n\t\tid: 'T-01',\n\t\tproject: 'Onboarding checklist',\n\t\towner: 'Alex Rivera',\n\t},\n\t{\n\t\tid: 'T-02',\n\t\tproject: 'Accessibility audit',\n\t\towner: 'Jamie Chen',\n\t},\n];\n\nexport const TableActionColumns: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tSimple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with\n\t\t\t\tinline action buttons demonstrate clean separation between data and UI behavior.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"action-columns\" className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Tasks with action buttons\" _headers={HEADERS} _data={DATA} className=\"block\" />\n\t\t</SampleBlock>\n\t</>\n);\n",
1705
1681
  "kind": "sample"
1706
1682
  },
1707
1683
  {
@@ -1733,7 +1709,7 @@
1733
1709
  "group": "table",
1734
1710
  "name": "column-alignment",
1735
1711
  "path": "packages/samples/react/src/components/table/column-alignment.tsx",
1736
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];\nconst genericNonSorter = () => 0;\n\nexport const TableColumnAlignment: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with columns headers and data in different text alignments.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col\">\n\t\t\t<KolHeading _label=\"Simple table\" _level={3}></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with different text align properties\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table with sortable columns\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with sortable columns\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table some sortable columns\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with some but not all columns sortable\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table with vertical heading\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with vertical heading\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [[{ label: 'Vertical', width: 160 }]],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
1712
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];\nconst genericNonSorter = () => 0;\n\nexport const TableColumnAlignment: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with columns headers and data in different text alignments.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"column-alignment\" className=\"w-full flex flex-col\" fitContent>\n\t\t\t<KolHeading _label=\"Simple table\" _level={3}></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with different text align properties\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table with sortable columns\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with sortable columns\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table some sortable columns\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with some but not all columns sortable\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table with vertical heading\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with vertical heading\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [[{ label: 'Vertical', width: 160 }]],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1737
1713
  "kind": "sample"
1738
1714
  },
1739
1715
  {
@@ -1741,7 +1717,7 @@
1741
1717
  "group": "table",
1742
1718
  "name": "complex-headers",
1743
1719
  "path": "packages/samples/react/src/components/table/complex-headers.tsx",
1744
- "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TableComplexHeaders: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using vertical and horizontal headers, applying colspan and rowspan.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col\">\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Business hours\"\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Center',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t\tsaturday: '09:00',\n\t\t\t\t\t\tsunday: '10:00',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Tiergarten',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t\tsaturday: '09:00',\n\t\t\t\t\t\tsunday: '10:00',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Maxvorstadt',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t\tsaturday: '09:00',\n\t\t\t\t\t\tsunday: '10:00',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\t_headers={{\n\t\t\t\t\tvertical: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Berlin',\n\t\t\t\t\t\t\t\trowSpan: 2,\n\t\t\t\t\t\t\t\twidth: 100,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'München',\n\t\t\t\t\t\t\t\twidth: 100,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'District',\n\t\t\t\t\t\t\t\trowSpan: 2,\n\t\t\t\t\t\t\t\tkey: 'asp',\n\t\t\t\t\t\t\t\twidth: 120,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Workdays',\n\t\t\t\t\t\t\t\tcolSpan: 5,\n\t\t\t\t\t\t\t\twidth: 580,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Weekend',\n\t\t\t\t\t\t\t\tcolSpan: 2,\n\t\t\t\t\t\t\t\twidth: 200,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Monday',\n\t\t\t\t\t\t\t\tkey: 'monday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Tuesday',\n\t\t\t\t\t\t\t\tkey: 'tuesday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Wednesday',\n\t\t\t\t\t\t\t\tkey: 'wednesday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Thursday',\n\t\t\t\t\t\t\t\tkey: 'thursday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Friday',\n\t\t\t\t\t\t\t\tkey: 'friday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Saturday',\n\t\t\t\t\t\t\t\tkey: 'saturday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Sunday',\n\t\t\t\t\t\t\t\tkey: 'sunday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
1720
+ "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TableComplexHeaders: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using vertical and horizontal headers, applying colspan and rowspan.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"complex-headers\" className=\"w-full flex flex-col\">\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Business hours\"\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Center',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t\tsaturday: '09:00',\n\t\t\t\t\t\tsunday: '10:00',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Tiergarten',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t\tsaturday: '09:00',\n\t\t\t\t\t\tsunday: '10:00',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Maxvorstadt',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t\tsaturday: '09:00',\n\t\t\t\t\t\tsunday: '10:00',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\t_headers={{\n\t\t\t\t\tvertical: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Berlin',\n\t\t\t\t\t\t\t\trowSpan: 2,\n\t\t\t\t\t\t\t\twidth: 100,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'München',\n\t\t\t\t\t\t\t\twidth: 100,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'District',\n\t\t\t\t\t\t\t\trowSpan: 2,\n\t\t\t\t\t\t\t\tkey: 'asp',\n\t\t\t\t\t\t\t\twidth: 120,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Workdays',\n\t\t\t\t\t\t\t\tcolSpan: 5,\n\t\t\t\t\t\t\t\twidth: 580,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Weekend',\n\t\t\t\t\t\t\t\tcolSpan: 2,\n\t\t\t\t\t\t\t\twidth: 200,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Monday',\n\t\t\t\t\t\t\t\tkey: 'monday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Tuesday',\n\t\t\t\t\t\t\t\tkey: 'tuesday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Wednesday',\n\t\t\t\t\t\t\t\tkey: 'wednesday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Thursday',\n\t\t\t\t\t\t\t\tkey: 'thursday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Friday',\n\t\t\t\t\t\t\t\tkey: 'friday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Saturday',\n\t\t\t\t\t\t\t\tkey: 'saturday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Sunday',\n\t\t\t\t\t\t\t\tkey: 'sunday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1745
1721
  "kind": "sample"
1746
1722
  },
1747
1723
  {
@@ -1752,6 +1728,14 @@
1752
1728
  "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\ntype TemperatureRow = {\n\tcity: string;\n\ttemperature: number;\n};\n\nconst COMFORTABLE_TEMPERATURE = 22;\n\nconst TEMPERATURE_DATA: TemperatureRow[] = [\n\t{ city: 'Reykjavík', temperature: 6 },\n\t{ city: 'Berlin', temperature: 21 },\n\t{ city: 'Palma de Mallorca', temperature: 29 },\n\t{ city: 'Cairo', temperature: 35 },\n\t{ city: 'Helsinki', temperature: 14 },\n];\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'City', key: 'city', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'Temperature (°C)',\n\t\t\t\tkey: 'temperature',\n\t\t\t\ttextAlign: 'right',\n\t\t\t\twidth: 160,\n\t\t\t\tcompareFn: (rowA, rowB, direction = 'ASC') => {\n\t\t\t\t\tconst temperatureA = (rowA as TemperatureRow).temperature;\n\t\t\t\t\tconst temperatureB = (rowB as TemperatureRow).temperature;\n\t\t\t\t\tconst differenceA = Math.abs(temperatureA - COMFORTABLE_TEMPERATURE);\n\t\t\t\t\tconst differenceB = Math.abs(temperatureB - COMFORTABLE_TEMPERATURE);\n\n\t\t\t\t\tif (differenceA !== differenceB) {\n\t\t\t\t\t\treturn direction === 'DESC' ? differenceB - differenceA : differenceA - differenceB;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn direction === 'DESC' ? temperatureB - temperatureA : temperatureA - temperatureB;\n\t\t\t\t},\n\t\t\t\trender: (_element, _cell, row) => {\n\t\t\t\t\tconst difference = Math.abs((row as TemperatureRow).temperature - COMFORTABLE_TEMPERATURE);\n\t\t\t\t\treturn `${(row as TemperatureRow).temperature} °C (Δ ${difference} °C)`;\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableDirectionAwareSort: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates how <code>compareFn</code> receives the current <code>sortDirection</code>. Ascending sorts show cities that are closest to\n\t\t\t\t22&nbsp;°C first, descending sorts highlight the most extreme temperatures.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Direction aware compare function\" _data={TEMPERATURE_DATA} _headers={HEADERS} className=\"block\" />\n\t\t</section>\n\t</>\n);\n",
1753
1729
  "kind": "sample"
1754
1730
  },
1731
+ {
1732
+ "id": "sample/table/empty",
1733
+ "group": "table",
1734
+ "name": "empty",
1735
+ "path": "packages/samples/react/src/components/table/empty.tsx",
1736
+ "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t],\n\t],\n};\n\nexport const TableEmpty: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows an empty KolTableStateful.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolTableStateful _label=\"Table for demonstration purposes\" _headers={HEADERS_HORIZONTAL} _data={[]} />\n\t\t</>\n\t);\n};\n",
1737
+ "kind": "sample"
1738
+ },
1755
1739
  {
1756
1740
  "id": "sample/table/highlight-row",
1757
1741
  "group": "table",
@@ -1765,7 +1749,7 @@
1765
1749
  "group": "table",
1766
1750
  "name": "horizontal-scrollbar",
1767
1751
  "path": "packages/samples/react/src/components/table/horizontal-scrollbar.tsx",
1768
- "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA as tableData } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\nconst DATA = [{ small: 'Small Example', large: 'Larger Example' }];\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Small Column', key: 'small', textAlign: 'left', width: 200 },\n\t\t\t{ label: 'Large Column', key: 'large', textAlign: 'left', width: 300 },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 400 },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 400 },\n\t\t],\n\t],\n};\nconst COMPACT_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Small Column', key: 'small', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Large Column', key: 'large', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 160 },\n\t\t],\n\t],\n};\nconst genericNonSorter = () => 0;\nconst ORDER_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'Date',\n\t\t\t\tkey: 'date',\n\t\t\t\twidth: 160,\n\t\t\t\tcompareFn: genericNonSorter,\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date),\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableHorizontalScrollbar: FC = () => {\n\tconst [hasWidthRestriction, setHasWidthRestriction] = useState(true);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows KolTableStateful with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table\n\t\t\t\t\tcontainer and to scroll it using arrow keys.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full flex flex-col gap-4\">\n\t\t\t\t<div className=\"w-[400px] flex flex-col gap-4\">\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Table for demonstration purposes with horizontal scrollbar.\"\n\t\t\t\t\t\t_headers={hasWidthRestriction ? HEADERS : COMPACT_HEADERS}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t/>\n\t\t\t\t\t<KolTableStateful _label=\"Table for demonstration horizontal scrolling with pagination.\" _headers={ORDER_HEADERS} _data={tableData} _pagination />\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Table for demonstration purposes with horizontal scrollbar with auto width calculation.\"\n\t\t\t\t\t\t_headers={hasWidthRestriction ? HEADERS : COMPACT_HEADERS}\n\t\t\t\t\t\t_data={[]}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<KolInputCheckbox\n\t\t\t\t\t_checked={hasWidthRestriction}\n\t\t\t\t\t_label=\"Toggle width restriction\"\n\t\t\t\t\t_variant=\"switch\"\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonChange: (_event, value) => {\n\t\t\t\t\t\t\tsetHasWidthRestriction(Boolean(value));\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t></KolInputCheckbox>\n\n\t\t\t\t<KolHeading _label=\"Same table without scrollbar\" _level={2} className=\"block mt-4\" />\n\t\t\t\t<p className=\"mt-0\">\n\t\t\t\t\t<i>Scrollbar appears on very small viewport sizes</i>\n\t\t\t\t</p>\n\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Table for demonstration purposes without horizontal scrollbar\"\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_pagination\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1752
+ "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA as tableData } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\nconst DATA = [{ small: 'Small Example', large: 'Larger Example' }];\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Small Column', key: 'small', textAlign: 'left', width: 200 },\n\t\t\t{ label: 'Large Column', key: 'large', textAlign: 'left', width: 300 },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 400 },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 400 },\n\t\t],\n\t],\n};\nconst COMPACT_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Small Column', key: 'small', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Large Column', key: 'large', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 160 },\n\t\t],\n\t],\n};\nconst genericNonSorter = () => 0;\nconst ORDER_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'Date',\n\t\t\t\tkey: 'date',\n\t\t\t\twidth: 160,\n\t\t\t\tcompareFn: genericNonSorter,\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date),\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableHorizontalScrollbar: FC = () => {\n\tconst [hasWidthRestriction, setHasWidthRestriction] = useState(true);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows KolTableStateful with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table\n\t\t\t\t\tcontainer and to scroll it using arrow keys.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-[400px] flex flex-col gap-4\">\n\t\t\t\t<SampleBlock id=\"scrollbar-horizontal\" className=\"w-full flex flex-col gap-4\">\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Table for demonstration purposes with horizontal scrollbar.\"\n\t\t\t\t\t\t_headers={hasWidthRestriction ? HEADERS : COMPACT_HEADERS}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t/>\n\t\t\t\t</SampleBlock>\n\t\t\t\t<KolTableStateful _label=\"Table for demonstration horizontal scrolling with pagination.\" _headers={ORDER_HEADERS} _data={tableData} _pagination />\n\t\t\t\t<SampleBlock id=\"scrollbar-horizontal-empty\" className=\"w-full flex flex-col gap-4\">\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Table for demonstration purposes with horizontal scrollbar with auto width calculation.\"\n\t\t\t\t\t\t_headers={hasWidthRestriction ? HEADERS : COMPACT_HEADERS}\n\t\t\t\t\t\t_data={[]}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t/>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\n\t\t\t<KolInputCheckbox\n\t\t\t\t_checked={hasWidthRestriction}\n\t\t\t\t_label=\"Toggle width restriction\"\n\t\t\t\t_variant=\"switch\"\n\t\t\t\t_on={{\n\t\t\t\t\tonChange: (_event, value) => {\n\t\t\t\t\t\tsetHasWidthRestriction(Boolean(value));\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t></KolInputCheckbox>\n\n\t\t\t<KolHeading _label=\"Same table without scrollbar\" _level={2} className=\"block mt-4\" />\n\t\t\t<p className=\"mt-0\">\n\t\t\t\t<i>Scrollbar appears on very small viewport sizes</i>\n\t\t\t</p>\n\n\t\t\t<SampleBlock id=\"scrollbar-horizontal-large\" className=\"w-full flex flex-col gap-4\" skipSnapshot>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Table for demonstration purposes without horizontal scrollbar\"\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_pagination\n\t\t\t\t/>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1769
1753
  "kind": "sample"
1770
1754
  },
1771
1755
  {
@@ -1781,7 +1765,7 @@
1781
1765
  "group": "table",
1782
1766
  "name": "multi-sort",
1783
1767
  "path": "packages/samples/react/src/components/table/multi-sort.tsx",
1784
- "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolButtonLink, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\ntype BacklogEntry = {\n\tdate: Date;\n\tassignee: string;\n\tdepartment: string;\n\tpriority: 'High' | 'Medium' | 'Low';\n\tstatus: 'Blocked' | 'In progress' | 'Ready';\n\topenTickets: number;\n};\n\nconst ASSIGNEES = ['Devon Chen', 'Fatima Alvi', 'Leon Köhler', 'Mila Schmidt', 'Sven Lindholm'];\nconst DEPARTMENTS = ['Customer Service', 'Digital Services', 'Infrastructure', 'Municipal Office'];\nconst PRIORITY_SEQUENCE: BacklogEntry['priority'][] = ['High', 'Medium', 'Low'];\nconst STATUS_SEQUENCE: BacklogEntry['status'][] = ['Blocked', 'In progress', 'Ready'];\n\nconst PRIORITY_ORDER = PRIORITY_SEQUENCE.reduce<Record<BacklogEntry['priority'], number>>(\n\t(order, priority, index) => {\n\t\torder[priority] = index;\n\t\treturn order;\n\t},\n\t{} as Record<BacklogEntry['priority'], number>,\n);\n\nconst STATUS_ORDER = STATUS_SEQUENCE.reduce<Record<BacklogEntry['status'], number>>(\n\t(order, status, index) => {\n\t\torder[status] = index;\n\t\treturn order;\n\t},\n\t{} as Record<BacklogEntry['status'], number>,\n);\n\nconst BACKLOG_DATA: BacklogEntry[] = Array.from({ length: 15 }).map((_, index) => ({\n\tdate: new Date(Date.now() - index * 1000 * 60 * 60 * 24),\n\tassignee: ASSIGNEES[index % ASSIGNEES.length],\n\tdepartment: DEPARTMENTS[index % DEPARTMENTS.length],\n\tpriority: PRIORITY_SEQUENCE[index % PRIORITY_SEQUENCE.length],\n\tstatus: STATUS_SEQUENCE[index % STATUS_SEQUENCE.length],\n\topenTickets: (index * 3) % 11,\n}));\n\nconst TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [\n\t{\n\t\tlabel: 'Assignee',\n\t\tkey: 'assignee',\n\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t(data0 as BacklogEntry).assignee.localeCompare((data1 as BacklogEntry).assignee, 'de'),\n\t\tsortDirection: 'ASC',\n\t},\n\t{\n\t\tlabel: 'Department',\n\t\tkey: 'department',\n\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t(data0 as BacklogEntry).department.localeCompare((data1 as BacklogEntry).department, 'de'),\n\t},\n\t{\n\t\tlabel: 'Priority',\n\t\tkey: 'priority',\n\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\tPRIORITY_ORDER[(data0 as BacklogEntry).priority] - PRIORITY_ORDER[(data1 as BacklogEntry).priority],\n\t\tsortDirection: 'DESC',\n\t},\n\t{\n\t\tlabel: 'Status',\n\t\tkey: 'status',\n\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\tSTATUS_ORDER[(data0 as BacklogEntry).status] - STATUS_ORDER[(data1 as BacklogEntry).status],\n\t},\n\t{\n\t\tlabel: 'Open tickets',\n\t\tkey: 'openTickets',\n\n\t\ttextAlign: 'right',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => (data0 as BacklogEntry).openTickets - (data1 as BacklogEntry).openTickets,\n\t},\n\t{\n\t\tlabel: 'Last updated',\n\t\tkey: 'date',\n\n\t\ttextAlign: 'center',\n\t\trender: (_el, _cell, tuple) => DATE_FORMATTER.format((tuple as BacklogEntry).date),\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\tif ((data0 as BacklogEntry).date < (data1 as BacklogEntry).date) return -1;\n\t\t\telse if ((data1 as BacklogEntry).date < (data0 as BacklogEntry).date) return 1;\n\t\t\telse return 0;\n\t\t},\n\t},\n];\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [TABLE_HEADER_CELLS],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [TABLE_HEADER_CELLS],\n};\n\nexport const MultiSortTable: FC = () => {\n\tconst [verticallHeader, setVerticalHeader] = useState(HEADERS_VERTICAL);\n\tconst [horizontalHeader, setHorizontalHeader] = useState(HEADERS_HORIZONTAL);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tMulti-sort allows layering multiple column sorts at once. Compare the compact examples with the project backlog showcase to see how the sort order\n\t\t\t\t\tindicator helps track complex prioritisation.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full grid gap-6\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Vertical\" />\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Sort Table with Order and Date\"\n\t\t\t\t\t\t_data={BACKLOG_DATA.slice(0, 10)}\n\t\t\t\t\t\t_headers={verticallHeader}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={true}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Horizontal\" />\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful _label=\"Sort Table with Order and Date\" _data={BACKLOG_DATA} _headers={horizontalHeader} className=\"block\" _allowMultiSort={true} />\n\t\t\t\t</section>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1768
+ "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolButtonLink, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\ntype BacklogEntry = {\n\tdate: Date;\n\tassignee: string;\n\tdepartment: string;\n\tpriority: 'High' | 'Medium' | 'Low';\n\tstatus: 'Blocked' | 'In progress' | 'Ready';\n\topenTickets: number;\n};\n\nconst ASSIGNEES = ['Devon Chen', 'Fatima Alvi', 'Leon Köhler', 'Mila Schmidt', 'Sven Lindholm'];\nconst DEPARTMENTS = ['Customer Service', 'Digital Services', 'Infrastructure', 'Municipal Office'];\nconst PRIORITY_SEQUENCE: BacklogEntry['priority'][] = ['High', 'Medium', 'Low'];\nconst STATUS_SEQUENCE: BacklogEntry['status'][] = ['Blocked', 'In progress', 'Ready'];\n\nconst PRIORITY_ORDER = PRIORITY_SEQUENCE.reduce<Record<BacklogEntry['priority'], number>>(\n\t(order, priority, index) => {\n\t\torder[priority] = index;\n\t\treturn order;\n\t},\n\t{} as Record<BacklogEntry['priority'], number>,\n);\n\nconst STATUS_ORDER = STATUS_SEQUENCE.reduce<Record<BacklogEntry['status'], number>>(\n\t(order, status, index) => {\n\t\torder[status] = index;\n\t\treturn order;\n\t},\n\t{} as Record<BacklogEntry['status'], number>,\n);\n\nconst BACKLOG_DATA: BacklogEntry[] = Array.from({ length: 15 }).map((_, index) => ({\n\tdate: new Date(Date.now() - index * 1000 * 60 * 60 * 24),\n\tassignee: ASSIGNEES[index % ASSIGNEES.length],\n\tdepartment: DEPARTMENTS[index % DEPARTMENTS.length],\n\tpriority: PRIORITY_SEQUENCE[index % PRIORITY_SEQUENCE.length],\n\tstatus: STATUS_SEQUENCE[index % STATUS_SEQUENCE.length],\n\topenTickets: (index * 3) % 11,\n}));\n\nconst TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [\n\t{\n\t\tlabel: 'Assignee',\n\t\tkey: 'assignee',\n\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t(data0 as BacklogEntry).assignee.localeCompare((data1 as BacklogEntry).assignee, 'de'),\n\t\tsortDirection: 'ASC',\n\t},\n\t{\n\t\tlabel: 'Department',\n\t\tkey: 'department',\n\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t(data0 as BacklogEntry).department.localeCompare((data1 as BacklogEntry).department, 'de'),\n\t},\n\t{\n\t\tlabel: 'Priority',\n\t\tkey: 'priority',\n\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\tPRIORITY_ORDER[(data0 as BacklogEntry).priority] - PRIORITY_ORDER[(data1 as BacklogEntry).priority],\n\t\tsortDirection: 'DESC',\n\t},\n\t{\n\t\tlabel: 'Status',\n\t\tkey: 'status',\n\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\tSTATUS_ORDER[(data0 as BacklogEntry).status] - STATUS_ORDER[(data1 as BacklogEntry).status],\n\t},\n\t{\n\t\tlabel: 'Open tickets',\n\t\tkey: 'openTickets',\n\n\t\ttextAlign: 'right',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => (data0 as BacklogEntry).openTickets - (data1 as BacklogEntry).openTickets,\n\t},\n\t{\n\t\tlabel: 'Last updated',\n\t\tkey: 'date',\n\n\t\ttextAlign: 'center',\n\t\trender: (_el, _cell, tuple) => DATE_FORMATTER.format((tuple as BacklogEntry).date),\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\tif ((data0 as BacklogEntry).date < (data1 as BacklogEntry).date) return -1;\n\t\t\telse if ((data1 as BacklogEntry).date < (data0 as BacklogEntry).date) return 1;\n\t\t\telse return 0;\n\t\t},\n\t},\n];\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [TABLE_HEADER_CELLS],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [TABLE_HEADER_CELLS],\n};\n\nexport const MultiSortTable: FC = () => {\n\tconst [verticallHeader, setVerticalHeader] = useState(HEADERS_VERTICAL);\n\tconst [horizontalHeader, setHorizontalHeader] = useState(HEADERS_HORIZONTAL);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tMulti-sort allows layering multiple column sorts at once. Compare the compact examples with the project backlog showcase to see how the sort order\n\t\t\t\t\tindicator helps track complex prioritisation.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full grid gap-6\">\n\t\t\t\t<SampleBlock id=\"vertical\" heading=\"Vertical\">\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Sort Table with Order and Date\"\n\t\t\t\t\t\t_data={BACKLOG_DATA.slice(0, 10)}\n\t\t\t\t\t\t_headers={verticallHeader}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={true}\n\t\t\t\t\t/>\n\t\t\t\t</SampleBlock>\n\t\t\t\t<SampleBlock id=\"horizontal\" heading=\"Horizontal\">\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful _label=\"Sort Table with Order and Date\" _data={BACKLOG_DATA} _headers={horizontalHeader} className=\"block\" _allowMultiSort={true} />\n\t\t\t\t</SampleBlock>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1785
1769
  "kind": "sample"
1786
1770
  },
1787
1771
  {
@@ -1789,7 +1773,7 @@
1789
1773
  "group": "table",
1790
1774
  "name": "non-hidable-columns",
1791
1775
  "path": "packages/samples/react/src/components/table/non-hidable-columns.tsx",
1792
- "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [\n\t{ id: '1001', name: 'John', age: 30 },\n\t{ id: '1002', name: 'Jane', age: 25 },\n];\n\nexport const TableNonHidableColumns: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This example demonstrates a column that cannot be hidden in the settings.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful\n\t\t\t_label=\"Table with a non-hidable column\"\n\t\t\t_hasSettingsMenu\n\t\t\t_headers={{\n\t\t\t\thorizontal: [\n\t\t\t\t\t[\n\t\t\t\t\t\t{ key: 'id', label: 'ID', hidable: false, width: 160 },\n\t\t\t\t\t\t{ key: 'name', label: 'Name', width: 160 },\n\t\t\t\t\t\t{ key: 'age', label: 'Age', width: 160 },\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t}}\n\t\t\t_data={DATA}\n\t\t\tclassName=\"block\"\n\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t/>\n\t</>\n);\n",
1776
+ "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [\n\t{ id: '1001', name: 'John', age: 30 },\n\t{ id: '1002', name: 'Jane', age: 25 },\n];\n\nexport const TableNonHidableColumns: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This example demonstrates a column that cannot be hidden in the settings.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"non-hidable\" fitContent>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table with a non-hidable column\"\n\t\t\t\t_hasSettingsMenu\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'id', label: 'ID', hidable: false, width: 160 },\n\t\t\t\t\t\t\t{ key: 'name', label: 'Name', width: 160 },\n\t\t\t\t\t\t\t{ key: 'age', label: 'Age', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1793
1777
  "kind": "sample"
1794
1778
  },
1795
1779
  {
@@ -1797,7 +1781,7 @@
1797
1781
  "group": "table",
1798
1782
  "name": "pagination-position",
1799
1783
  "path": "packages/samples/react/src/components/table/pagination-position.tsx",
1800
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\n\nexport const PaginationPosition: FC = () => (\n\t<div className=\"w-full grid gap-14\">\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with different pagination positions. All paginations hide the first and last buttons.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col gap-14\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at the bottom.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at the bottom\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\tnext: true,\n\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\tprevious: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"bottom\"\n\t\t\t\t\t_variant=\"small\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at the top.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at the top\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 2,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: true,\n\t\t\t\t\t\t\tnext: false,\n\t\t\t\t\t\t\tlast: true,\n\t\t\t\t\t\t\tprevious: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"top\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at both top and bottom.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at both top and bottom\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 3,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\tnext: false,\n\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\tprevious: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"both\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t</section>\n\t</div>\n);\n",
1784
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\n\nexport const PaginationPosition: FC = () => (\n\t<div className=\"w-full grid gap-14\">\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with different pagination positions. All paginations hide the first and last buttons.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col gap-14\">\n\t\t\t<SampleBlock id=\"bottom\" heading=\"Table with pagination at the bottom.\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at the bottom\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\tnext: true,\n\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\tprevious: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"bottom\"\n\t\t\t\t\t_variant=\"small\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"top\" heading=\"Table with pagination at the top.\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at the top\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 2,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: true,\n\t\t\t\t\t\t\tnext: false,\n\t\t\t\t\t\t\tlast: true,\n\t\t\t\t\t\t\tprevious: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"top\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"both\" heading=\"Table with pagination at both top and bottom.\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at both top and bottom\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 3,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\tnext: false,\n\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\tprevious: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"both\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</SampleBlock>\n\t\t</section>\n\t</div>\n);\n",
1801
1785
  "kind": "sample"
1802
1786
  },
1803
1787
  {
@@ -1829,7 +1813,15 @@
1829
1813
  "group": "table",
1830
1814
  "name": "sort-data",
1831
1815
  "path": "packages/samples/react/src/components/table/sort-data.tsx",
1832
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\nconst compareByDate =\n\t(sortDirection = 'ASC') =>\n\t(data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\tconst first = (data0 as Data).date.getTime();\n\t\tconst second = (data1 as Data).date.getTime();\n\t\tconst result = first - second;\n\t\treturn sortDirection === 'DESC' ? -result : result;\n\t};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 160,\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 160,\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableSortData: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full grid gap-4\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Vertical headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className=\"block\" />\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Horizontal headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _data={DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" />\n\t\t\t</section>\n\t\t</section>\n\t</>\n);\n",
1816
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\nconst compareByDate =\n\t(sortDirection = 'ASC') =>\n\t(data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\tconst first = (data0 as Data).date.getTime();\n\t\tconst second = (data1 as Data).date.getTime();\n\t\tconst result = first - second;\n\t\treturn sortDirection === 'DESC' ? -result : result;\n\t};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 160,\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 160,\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableSortData: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full grid gap-4\">\n\t\t\t<SampleBlock id=\"vertical-headers\" heading=\"Vertical headers\">\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className=\"block\" />\n\t\t\t</SampleBlock>\n\t\t\t<SampleBlock id=\"horizontal-headers\" heading=\"Horizontal headers\">\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _data={DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" />\n\t\t\t</SampleBlock>\n\t\t</section>\n\t</>\n);\n",
1817
+ "kind": "sample"
1818
+ },
1819
+ {
1820
+ "id": "sample/table/stateful-async",
1821
+ "group": "table",
1822
+ "name": "stateful-async",
1823
+ "path": "packages/samples/react/src/components/table/stateful-async.tsx",
1824
+ "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { ComplexData } from './test-complex-data';\nimport { COMPLEX_DATA } from './test-complex-data';\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t],\n\t],\n};\n\nexport const TableStatefulAsync: FC = () => {\n\tconst getAsyncData = () => new Promise<{ COMPLEX_DATA: ComplexData[] }>((resolve) => setTimeout(() => resolve({ COMPLEX_DATA }), 50000));\n\tconst loadData = () => {\n\t\tsetLoading(true);\n\t\tgetAsyncData().then((result: Awaited<ReturnType<typeof getAsyncData>>) => {\n\t\t\tsetComplexData(result.COMPLEX_DATA.slice(0, 15));\n\t\t\tsetLoading(false);\n\t\t});\n\t};\n\n\tconst [complexData, setComplexData] = useState<ComplexData[]>([]);\n\tconst [loading, setLoading] = useState<boolean>(true);\n\n\tuseEffect(() => loadData(), []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows how KolTableStateful can load data async.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full relative\">\n\t\t\t\t<KolTableStateful _label=\"Table for demonstration purposes\" _loading={loading} _headers={HEADERS_HORIZONTAL} _data={complexData} />\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1833
1825
  "kind": "sample"
1834
1826
  },
1835
1827
  {
@@ -1861,7 +1853,7 @@
1861
1853
  "group": "table",
1862
1854
  "name": "stateful-with-selection",
1863
1855
  "path": "packages/samples/react/src/components/table/stateful-with-selection.tsx",
1864
- "code": "import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\n\ntype ProjectTask = {\n\tid: string;\n\tproject: string;\n\towner: string;\n};\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'id', label: 'ID', width: 80 },\n\t\t\t{ key: 'project', label: 'Project', width: 200 },\n\t\t\t{ key: 'owner', label: 'Owner', width: 200 },\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Actions',\n\t\t\t\twidth: 250,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Details',\n\t\t\t\t\t\t\t_icons: 'kolicon-eye',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Details: ${simpleRow.id} - ${simpleRow.project}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst DATA: ProjectTask[] = [\n\t{\n\t\tid: 'T-01',\n\t\tproject: 'Onboarding checklist',\n\t\towner: 'Alex Rivera',\n\t},\n\t{\n\t\tid: 'T-02',\n\t\tproject: 'Accessibility audit',\n\t\towner: 'Jamie Chen',\n\t},\n\t{\n\t\tid: 'T-03',\n\t\tproject: 'UX audit',\n\t\towner: 'Tyler Gray',\n\t},\n\t{\n\t\tid: 'T-04',\n\t\tproject: 'Software Architectur',\n\t\towner: 'Tess Richardson',\n\t},\n];\n\nexport const TableStatefulWithSelection: FC = () => {\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as ProjectTask).id}`,\n\t\tselectedKeys: ['T-01'],\n\t\tdisabledKeys: ['T-04'],\n\t\tkeyPropertyName: 'id',\n\t};\n\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tSimple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with\n\t\t\t\t\tinline action buttons demonstrate clean separation between data and UI behavior.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Tasks with action buttons\"\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1856
+ "code": "import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\n\ntype ProjectTask = {\n\tid: string;\n\tproject: string;\n\towner: string;\n};\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'id', label: 'ID', width: 80 },\n\t\t\t{ key: 'project', label: 'Project', width: 200 },\n\t\t\t{ key: 'owner', label: 'Owner', width: 200 },\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Actions',\n\t\t\t\twidth: 250,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Details',\n\t\t\t\t\t\t\t_icons: 'kolicon-eye',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Details: ${simpleRow.id} - ${simpleRow.project}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst DATA: ProjectTask[] = [\n\t{\n\t\tid: 'T-01',\n\t\tproject: 'Onboarding checklist',\n\t\towner: 'Alex Rivera',\n\t},\n\t{\n\t\tid: 'T-02',\n\t\tproject: 'Accessibility audit',\n\t\towner: 'Jamie Chen',\n\t},\n\t{\n\t\tid: 'T-03',\n\t\tproject: 'UX audit',\n\t\towner: 'Tyler Gray',\n\t},\n\t{\n\t\tid: 'T-04',\n\t\tproject: 'Software Architectur',\n\t\towner: 'Tess Richardson',\n\t},\n];\n\nexport const TableStatefulWithSelection: FC = () => {\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as ProjectTask).id}`,\n\t\tselectedKeys: ['T-01'],\n\t\tdisabledKeys: ['T-04'],\n\t\tkeyPropertyName: 'id',\n\t};\n\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tSimple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with\n\t\t\t\t\tinline action buttons demonstrate clean separation between data and UI behavior.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"selection\" className=\"w-full\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Tasks with action buttons\"\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t/>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1865
1857
  "kind": "sample"
1866
1858
  },
1867
1859
  {
@@ -1869,7 +1861,7 @@
1869
1861
  "group": "table",
1870
1862
  "name": "stateful-with-single-selection",
1871
1863
  "path": "packages/samples/react/src/components/table/stateful-with-single-selection.tsx",
1872
- "code": "import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\n\ntype ProjectTask = {\n\tid: string;\n\tproject: string;\n\towner: string;\n};\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'id', label: 'ID', width: 80 },\n\t\t\t{ key: 'project', label: 'Project', width: 200 },\n\t\t\t{ key: 'owner', label: 'Owner', width: 200 },\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Actions',\n\t\t\t\twidth: 250,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Start',\n\t\t\t\t\t\t\t_icons: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t_variant: 'secondary',\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Start task ${simpleRow.id}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst DATA: ProjectTask[] = [\n\t{\n\t\tid: 'T-01',\n\t\tproject: 'Onboarding checklist',\n\t\towner: 'Alex Rivera',\n\t},\n\t{\n\t\tid: 'T-02',\n\t\tproject: 'Accessibility audit',\n\t\towner: 'Jamie Chen',\n\t},\n\t{\n\t\tid: 'T-03',\n\t\tproject: 'UX audit',\n\t\towner: 'Tyler Gray',\n\t},\n\t{\n\t\tid: 'T-04',\n\t\tproject: 'Software Architectur',\n\t\towner: 'Tess Richardson',\n\t},\n];\n\nexport const TableStatefulWithSingleSelection: FC = () => {\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as ProjectTask).id}`,\n\t\tselectedKeys: ['T-01'],\n\t\tdisabledKeys: ['T-04'],\n\t\tkeyPropertyName: 'id',\n\t\tmultiple: false,\n\t};\n\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tSimple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with\n\t\t\t\t\tinline action buttons demonstrate clean separation between data and UI behavior.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Tasks with action buttons\"\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1864
+ "code": "import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\n\ntype ProjectTask = {\n\tid: string;\n\tproject: string;\n\towner: string;\n};\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'id', label: 'ID', width: 80 },\n\t\t\t{ key: 'project', label: 'Project', width: 200 },\n\t\t\t{ key: 'owner', label: 'Owner', width: 200 },\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Actions',\n\t\t\t\twidth: 250,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Start',\n\t\t\t\t\t\t\t_icons: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t_variant: 'secondary',\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Start task ${simpleRow.id}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst DATA: ProjectTask[] = [\n\t{\n\t\tid: 'T-01',\n\t\tproject: 'Onboarding checklist',\n\t\towner: 'Alex Rivera',\n\t},\n\t{\n\t\tid: 'T-02',\n\t\tproject: 'Accessibility audit',\n\t\towner: 'Jamie Chen',\n\t},\n\t{\n\t\tid: 'T-03',\n\t\tproject: 'UX audit',\n\t\towner: 'Tyler Gray',\n\t},\n\t{\n\t\tid: 'T-04',\n\t\tproject: 'Software Architectur',\n\t\towner: 'Tess Richardson',\n\t},\n];\n\nexport const TableStatefulWithSingleSelection: FC = () => {\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as ProjectTask).id}`,\n\t\tselectedKeys: ['T-01'],\n\t\tdisabledKeys: ['T-04'],\n\t\tkeyPropertyName: 'id',\n\t\tmultiple: false,\n\t};\n\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tSimple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with\n\t\t\t\t\tinline action buttons demonstrate clean separation between data and UI behavior.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"single-selection\" className=\"w-full\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Tasks with action buttons\"\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t/>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1873
1865
  "kind": "sample"
1874
1866
  },
1875
1867
  {
@@ -1877,7 +1869,7 @@
1877
1869
  "group": "table",
1878
1870
  "name": "stateless",
1879
1871
  "path": "packages/samples/react/src/components/table/stateless.tsx",
1880
- "code": "import { KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];\n\nexport const TableStateless: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolTableStateless can be used directly, with the KolTableStateful wrapper.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Table for demonstration purposes\"\n\t\t\t\t_headerCells={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },\n\t\t\t\t\t\t\t{ key: 'center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },\n\t\t\t\t\t\t\t{ key: 'right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },\n\t\t\t\t\t\t\t{ key: 'nosort', label: 'no sort option' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'vertical-left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },\n\t\t\t\t\t\t\t{ key: 'vertical-center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },\n\t\t\t\t\t\t\t{ key: 'vertical-right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },\n\t\t\t\t\t\t\t{ key: 'vertical-nosort', label: 'no sort option' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t_on={{\n\t\t\t\t\tonSort: (_event, payload) => {\n\t\t\t\t\t\tconsole.log(payload);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
1872
+ "code": "import { KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];\n\nexport const TableStateless: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolTableStateless can be used directly, with the KolTableStateful wrapper.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"stateless\" className=\"w-full\" fitContent>\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Table for demonstration purposes\"\n\t\t\t\t_headerCells={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },\n\t\t\t\t\t\t\t{ key: 'center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },\n\t\t\t\t\t\t\t{ key: 'right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },\n\t\t\t\t\t\t\t{ key: 'nosort', label: 'no sort option' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'vertical-left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },\n\t\t\t\t\t\t\t{ key: 'vertical-center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },\n\t\t\t\t\t\t\t{ key: 'vertical-right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },\n\t\t\t\t\t\t\t{ key: 'vertical-nosort', label: 'no sort option' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t_on={{\n\t\t\t\t\tonSort: (_event, payload) => {\n\t\t\t\t\t\tconsole.log(payload);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1881
1873
  "kind": "sample"
1882
1874
  },
1883
1875
  {
@@ -1885,7 +1877,7 @@
1885
1877
  "group": "table",
1886
1878
  "name": "stateless-async",
1887
1879
  "path": "packages/samples/react/src/components/table/stateless-async-paging.tsx",
1888
- "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolPagination, KolSpin, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { ComplexData } from './test-complex-data';\nimport { COMPLEX_DATA } from './test-complex-data';\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t],\n\t],\n};\n\nconst LoadingOverlayFC: FC<{\n\tlabel: string;\n\tshow: boolean;\n}> = ({ label, show }) => {\n\tif (show) {\n\t\treturn (\n\t\t\t<div className=\"loading-overlay\">\n\t\t\t\t<KolSpin\n\t\t\t\t\t_label={label}\n\t\t\t\t\t_show={show}\n\t\t\t\t\t_variant=\"cycle\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n\nexport const TableStatelessAsync: FC = () => {\n\tconst getAsyncData = () => new Promise<{ COMPLEX_DATA: ComplexData[] }>((resolve) => setTimeout(() => resolve({ COMPLEX_DATA }), 5000));\n\tconst loadData = (action: 'sort' | 'paginate') => {\n\t\tsetLoading(true);\n\t\tsetCurrentAction(action);\n\t\tgetAsyncData().then((result: Awaited<ReturnType<typeof getAsyncData>>) => {\n\t\t\tsetComplexData(result.COMPLEX_DATA.slice(0, 15));\n\t\t\tsetLoading(false);\n\t\t});\n\t};\n\n\tconst [complexData, setComplexData] = useState<ComplexData[]>([]);\n\tconst [loading, setLoading] = useState<boolean>(true);\n\tconst [currentAction, setCurrentAction] = useState<'sort' | 'paginate'>('sort');\n\n\tuseEffect(() => loadData('sort'), []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows how KolTableStateless can be used async and with KolPagination. Paging and sorting are not functional here, because a backend would\n\t\t\t\t\toffer this in real life.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full relative\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table for demonstration purposes\"\n\t\t\t\t\t_headerCells={HEADERS_HORIZONTAL}\n\t\t\t\t\t_data={complexData}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonSort: () => loadData('sort'),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<KolPagination\n\t\t\t\t\t_max={200}\n\t\t\t\t\t_page={1}\n\t\t\t\t\t_siblingCount={0}\n\t\t\t\t\t_boundaryCount={2}\n\t\t\t\t\t_pageSize={15}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonChangePage: () => loadData('paginate'),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<LoadingOverlayFC label={currentAction === 'sort' ? 'Table is being sorted...' : 'Page is loading...'} show={loading} />\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1880
+ "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolPagination, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { ComplexData } from './test-complex-data';\nimport { COMPLEX_DATA } from './test-complex-data';\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160, sortDirection: 'NOS' },\n\t\t],\n\t],\n};\n\nexport const TableStatelessAsync: FC = () => {\n\tconst getAsyncData = () => new Promise<{ COMPLEX_DATA: ComplexData[] }>((resolve) => setTimeout(() => resolve({ COMPLEX_DATA }), 5000));\n\tconst loadData = () => {\n\t\tsetLoading(true);\n\t\tgetAsyncData().then((result: Awaited<ReturnType<typeof getAsyncData>>) => {\n\t\t\tsetComplexData(result.COMPLEX_DATA.slice(0, 15));\n\t\t\tsetLoading(false);\n\t\t});\n\t};\n\n\tconst [complexData, setComplexData] = useState<ComplexData[]>([]);\n\tconst [loading, setLoading] = useState<boolean>(true);\n\n\tuseEffect(() => loadData(), []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows how KolTableStateless can be used async and with KolPagination. Paging and sorting are not functional here, because a backend would\n\t\t\t\t\toffer this in real life.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"async\" className=\"w-full relative\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table for demonstration purposes\"\n\t\t\t\t\t_loading={loading}\n\t\t\t\t\t_headerCells={HEADERS_HORIZONTAL}\n\t\t\t\t\t_data={complexData}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonSort: () => loadData(),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<KolPagination\n\t\t\t\t\t_max={200}\n\t\t\t\t\t_page={1}\n\t\t\t\t\t_siblingCount={0}\n\t\t\t\t\t_boundaryCount={2}\n\t\t\t\t\t_pageSize={15}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonChangePage: () => loadData(),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1889
1881
  "kind": "sample"
1890
1882
  },
1891
1883
  {
@@ -1893,7 +1885,7 @@
1893
1885
  "group": "table",
1894
1886
  "name": "stateless-with-selection",
1895
1887
  "path": "packages/samples/react/src/components/table/stateless-with-selection.tsx",
1896
- "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\ntype KolTableStatelessElement = {\n\taddEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n\tremoveEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n};\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },\n\t{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['AAA1002', 'AAA1004']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tselectedKeys,\n\t\tkeyPropertyName: 'internalIdentifier',\n\t\tdisabledKeys: ['AAA1003', 'AAA1004'],\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<SelectionValue[]>) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(selection);\n\t};\n\n\tuseEffect(() => {\n\t\tconst tableElement = kolTableStatelessRef.current as unknown as KolTableStatelessElement | null;\n\t\tconst selectionChangeEvent = 'kolSelectionChange';\n\t\ttableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\ttableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tconst data = (cell as { data?: Data }).data;\n\t\tconst id = data?.id;\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1888
+ "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\ntype KolTableStatelessElement = {\n\taddEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n\tremoveEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n};\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },\n\t{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['AAA1002', 'AAA1004']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tselectedKeys,\n\t\tkeyPropertyName: 'internalIdentifier',\n\t\tdisabledKeys: ['AAA1003', 'AAA1004'],\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<SelectionValue[]>) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(selection);\n\t};\n\n\tuseEffect(() => {\n\t\tconst tableElement = kolTableStatelessRef.current as unknown as KolTableStatelessElement | null;\n\t\tconst selectionChangeEvent = 'kolSelectionChange';\n\t\ttableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\ttableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tconst data = (cell as { data?: Data }).data;\n\t\tconst id = data?.id;\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"selection\" className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1897
1889
  "kind": "sample"
1898
1890
  },
1899
1891
  {
@@ -1909,7 +1901,7 @@
1909
1901
  "group": "table",
1910
1902
  "name": "stateless-with-single-selection",
1911
1903
  "path": "packages/samples/react/src/components/table/stateless-with-single-selection.tsx",
1912
- "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\ntype KolTableStatelessElement = {\n\taddEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n\tremoveEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n};\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'Foo Disabled', internalIdentifier: `AAA1003` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSingleSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['1002']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tmultiple: false,\n\t\tselectedKeys,\n\t\tdisabledKeys: ['AAA1003'],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = useCallback(({ detail: selection }: CustomEvent<SelectionValue[]>) => {\n\t\tconsole.log('Selection change via event', selection);\n\t}, []);\n\tconst handleSelectionChangeCallback = useCallback((_event: Event, selection: SelectionValue[]) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(selection);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst tableElement = kolTableStatelessRef.current as unknown as KolTableStatelessElement | null;\n\t\tconst selectionChangeEvent = 'kolSelectionChange';\n\t\ttableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\ttableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef, handleSelectionChangeEvent]);\n\n\tconst renderButton = useCallback((element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tconst data = (cell as { data?: Data }).data;\n\t\tconst id = data?.id;\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1904
+ "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\ntype KolTableStatelessElement = {\n\taddEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n\tremoveEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n};\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'Foo Disabled', internalIdentifier: `AAA1003` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSingleSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['1002']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tmultiple: false,\n\t\tselectedKeys,\n\t\tdisabledKeys: ['AAA1003'],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = useCallback(({ detail: selection }: CustomEvent<SelectionValue[]>) => {\n\t\tconsole.log('Selection change via event', selection);\n\t}, []);\n\tconst handleSelectionChangeCallback = useCallback((_event: Event, selection: SelectionValue[]) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(selection);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst tableElement = kolTableStatelessRef.current as unknown as KolTableStatelessElement | null;\n\t\tconst selectionChangeEvent = 'kolSelectionChange';\n\t\ttableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\ttableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef, handleSelectionChangeEvent]);\n\n\tconst renderButton = useCallback((element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tconst data = (cell as { data?: Data }).data;\n\t\tconst id = data?.id;\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"single-selection\" className=\"w-full\" fitContent>\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1913
1905
  "kind": "sample"
1914
1906
  },
1915
1907
  {
@@ -1917,7 +1909,7 @@
1917
1909
  "group": "table",
1918
1910
  "name": "sticky-cols",
1919
1911
  "path": "packages/samples/react/src/components/table/sticky-col.tsx",
1920
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport { COMPLEX_DATA } from './test-complex-data';\n\ntype Data = (typeof COMPLEX_DATA)[0];\n\nconst selection: KoliBriTableSelection = {\n\tlabel: (row) => `Selection for ${(row as Data).common_name}`,\n\tmultiple: false,\n\tkeyPropertyName: 'internalIdentifier',\n};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width: 60 },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 250 },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 400 },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 250 },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 400 },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 200 },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 300 },\n\t\t],\n\t],\n};\n\nexport const TableStickyCol: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTableStateful with the first three and last columns sticky. It should be focusable and scrollable with the keyboard. The table\n\t\t\t\theadline should be sticky at the top of the table. The data lists animal species with conservation-focused details.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolHeading _level={2} _label=\"Sticky columns\" />\n\t\t<KolTableStateful\n\t\t\t_label=\"Animal species overview\"\n\t\t\t_data={COMPLEX_DATA}\n\t\t\t_headers={HEADERS_HORIZONTAL}\n\t\t\tclassName=\"block\"\n\t\t\t_selection={selection}\n\t\t\t_fixedCols={[2, 1]}\n\t\t/>\n\t</>\n);\n",
1912
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nimport { COMPLEX_DATA } from './test-complex-data';\n\ntype Data = (typeof COMPLEX_DATA)[0];\n\nconst selection: KoliBriTableSelection = {\n\tlabel: (row) => `Selection for ${(row as Data).common_name}`,\n\tmultiple: false,\n\tkeyPropertyName: 'internalIdentifier',\n};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width: 60 },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 250 },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 400 },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 250 },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 400 },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 200 },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 300 },\n\t\t],\n\t],\n};\n\nexport const TableStickyCol: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTableStateful with the first three and last columns sticky. It should be focusable and scrollable with the keyboard. The table\n\t\t\t\theadline should be sticky at the top of the table. The data lists animal species with conservation-focused details.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"sticky-cols\" heading=\"Sticky columns\">\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Animal species overview\"\n\t\t\t\t_data={COMPLEX_DATA}\n\t\t\t\t_headers={HEADERS_HORIZONTAL}\n\t\t\t\tclassName=\"block\"\n\t\t\t\t_selection={selection}\n\t\t\t\t_fixedCols={[2, 1]}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1921
1913
  "kind": "sample"
1922
1914
  },
1923
1915
  {
@@ -1925,7 +1917,7 @@
1925
1917
  "group": "table",
1926
1918
  "name": "sticky-header",
1927
1919
  "path": "packages/samples/react/src/components/table/sticky-header.tsx",
1928
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport { COMPLEX_DATA } from './test-complex-data';\n\ntype Data = (typeof COMPLEX_DATA)[0];\n\nconst selection: KoliBriTableSelection = {\n\tlabel: (row) => `Selection for ${(row as Data).common_name}`,\n\tmultiple: false,\n\tkeyPropertyName: 'internalIdentifier',\n};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width: 60 },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160 },\n\t\t],\n\t],\n};\n\nexport const TableStickyHeader: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTableStateful with vertical scrollbar. It should be focusable and scrollable with the keyboard. The table headline should be sticky\n\t\t\t\tat the top of the table, if your chosen theme supports sticky header. The table's maximum height is set to 75vh with the CSS property\n\t\t\t\t--kol-table-max-height. The data lists animal species with conservation-focused details.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolHeading _level={2} _label=\"Sticky headers\" />\n\t\t<KolTableStateful\n\t\t\t_label=\"Animal species overview\"\n\t\t\t_data={COMPLEX_DATA}\n\t\t\t_headers={HEADERS_HORIZONTAL}\n\t\t\tclassName=\"block\"\n\t\t\t_selection={selection}\n\t\t\tstyle={{ '--kol-table-max-height': '75vh' }}\n\t\t/>\n\t</>\n);\n",
1920
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nimport { COMPLEX_DATA } from './test-complex-data';\n\ntype Data = (typeof COMPLEX_DATA)[0];\n\nconst selection: KoliBriTableSelection = {\n\tlabel: (row) => `Selection for ${(row as Data).common_name}`,\n\tmultiple: false,\n\tkeyPropertyName: 'internalIdentifier',\n};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width: 60 },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160 },\n\t\t],\n\t],\n};\n\nexport const TableStickyHeader: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTableStateful with vertical scrollbar. It should be focusable and scrollable with the keyboard. The table headline should be sticky\n\t\t\t\tat the top of the table, if your chosen theme supports sticky header. The table's maximum height is set to 75vh with the CSS property\n\t\t\t\t--kol-table-max-height. The data lists animal species with conservation-focused details.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"sticky-header\" heading=\"Sticky headers\">\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Animal species overview\"\n\t\t\t\t_data={COMPLEX_DATA}\n\t\t\t\t_headers={HEADERS_HORIZONTAL}\n\t\t\t\tclassName=\"block\"\n\t\t\t\t_selection={selection}\n\t\t\t\tstyle={{ '--kol-table-max-height': '75vh' }}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1929
1921
  "kind": "sample"
1930
1922
  },
1931
1923
  {
@@ -1933,7 +1925,7 @@
1933
1925
  "group": "table",
1934
1926
  "name": "variant",
1935
1927
  "path": "packages/samples/react/src/components/table/variant.tsx",
1936
- "code": "import type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport { KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { useSearchParams } from 'react-router';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\n\nexport const TableVariant: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst tableVariants = useMemo(() => (theme ? fetchVariantData(theme, 'tableVariants') : []), [theme]);\n\n\treturn (\n\t\t<div className=\"w-full grid gap-14\">\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with different variants controlled by the theme.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full flex flex-col gap-14\">\n\t\t\t\t{!Array.isArray(tableVariants) || tableVariants.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for tables.</p>\n\t\t\t\t) : (\n\t\t\t\t\ttableVariants.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t\t\t_label={'Table with variant: ' + element}\n\t\t\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\t\t\t\tnext: true,\n\t\t\t\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\t\t\t\tprevious: true,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_paginationPosition=\"bottom\"\n\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t></KolTableStateful>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</section>\n\t\t</div>\n\t);\n};\n",
1928
+ "code": "import type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport { KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { useSearchParams } from 'react-router';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getTheme } from '../../shares/store';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\n\nexport const TableVariant: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getTheme();\n\tconst tableVariants = useMemo(() => (theme ? fetchVariantData(theme, 'tableVariants') : []), [theme]);\n\n\treturn (\n\t\t<div className=\"w-full grid gap-14\">\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with different variants controlled by the theme.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"variants\" className=\"w-full flex flex-col gap-14\">\n\t\t\t\t{!Array.isArray(tableVariants) || tableVariants.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for tables.</p>\n\t\t\t\t) : (\n\t\t\t\t\ttableVariants.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t\t\t_label={'Table with variant: ' + element}\n\t\t\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\t\t\t\tnext: true,\n\t\t\t\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\t\t\t\tprevious: true,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_paginationPosition=\"bottom\"\n\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t></KolTableStateful>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</SampleBlock>\n\t\t</div>\n\t);\n};\n",
1937
1929
  "kind": "sample"
1938
1930
  },
1939
1931
  {
@@ -1941,7 +1933,7 @@
1941
1933
  "group": "table",
1942
1934
  "name": "with-footer",
1943
1935
  "path": "packages/samples/react/src/components/table/with-footer.tsx",
1944
- "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TableWithFooter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with footer data.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful\n\t\t\tclassName=\"w-full\"\n\t\t\t_label=\"Business hours\"\n\t\t\t_headers={{\n\t\t\t\thorizontal: [\n\t\t\t\t\t[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'District',\n\t\t\t\t\t\t\tkey: 'asp',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Monday',\n\t\t\t\t\t\t\tkey: 'monday',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Tuesday',\n\t\t\t\t\t\t\tkey: 'tuesday',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Wednesday',\n\t\t\t\t\t\t\tkey: 'wednesday',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Thursday',\n\t\t\t\t\t\t\tkey: 'thursday',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Friday',\n\t\t\t\t\t\t\tkey: 'friday',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t}}\n\t\t\t_data={[\n\t\t\t\t{\n\t\t\t\t\tasp: 'Center',\n\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\tfriday: '08:00',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tasp: 'Tiergarten',\n\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\tfriday: '08:00',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tasp: 'Maxvorstadt',\n\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\tfriday: '08:00',\n\t\t\t\t},\n\t\t\t]}\n\t\t\t_dataFoot={[\n\t\t\t\t{\n\t\t\t\t\ttuesday: \"Lunch break from 11 to 14 o'clock\",\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</>\n);\n",
1936
+ "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TableWithFooter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with footer data.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"with-footer\">\n\t\t\t<KolTableStateful\n\t\t\t\tclassName=\"w-full\"\n\t\t\t\t_label=\"Business hours\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'District',\n\t\t\t\t\t\t\t\tkey: 'asp',\n\t\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Monday',\n\t\t\t\t\t\t\t\tkey: 'monday',\n\t\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Tuesday',\n\t\t\t\t\t\t\t\tkey: 'tuesday',\n\t\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Wednesday',\n\t\t\t\t\t\t\t\tkey: 'wednesday',\n\t\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Thursday',\n\t\t\t\t\t\t\t\tkey: 'thursday',\n\t\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Friday',\n\t\t\t\t\t\t\t\tkey: 'friday',\n\t\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Center',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Tiergarten',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Maxvorstadt',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\t_dataFoot={[\n\t\t\t\t\t{\n\t\t\t\t\t\ttuesday: \"Lunch break from 11 to 14 o'clock\",\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</SampleBlock>\n\t</>\n);\n",
1945
1937
  "kind": "sample"
1946
1938
  },
1947
1939
  {
@@ -1949,7 +1941,7 @@
1949
1941
  "group": "table",
1950
1942
  "name": "with-pagination",
1951
1943
  "path": "packages/samples/react/src/components/table/with-pagination.tsx",
1952
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\nconst PAGINATION: KoliBriTablePaginationProps = { _page: 2 };\n\nexport const TableWithPagination: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>\n\t\t</SampleDescription>\n\t\t<div className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Table description\" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>\n\t\t</div>\n\t</>\n);\n",
1944
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\nconst PAGINATION: KoliBriTablePaginationProps = { _page: 2 };\n\nexport const TableWithPagination: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>\n\t\t</SampleDescription>\n\t\t<SampleBlock id=\"with-pagination\" className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Table description\" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>\n\t\t</SampleBlock>\n\t</>\n);\n",
1953
1945
  "kind": "sample"
1954
1946
  },
1955
1947
  {
@@ -1965,7 +1957,7 @@
1965
1957
  "group": "tabs",
1966
1958
  "name": "basic",
1967
1959
  "path": "packages/samples/react/src/components/tabs/basic.tsx",
1968
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\n\nconst tabsWithoutIcons = tabs.map((tab) => ({\n\t...tab,\n\t_icons: undefined,\n}));\n\nexport const TabsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTabs _tabs={tabsWithoutIcons} _label=\"Regular tabs\">\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\n\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with icons\">\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\t</>\n);\n",
1960
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\n\nconst tabsWithoutIcons = tabs.map((tab) => ({\n\t...tab,\n\t_icons: undefined,\n}));\n\nexport const TabsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"regular\" fitContent>\n\t\t\t<KolTabs _tabs={tabsWithoutIcons} _label=\"Regular tabs\">\n\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t</KolTabs>\n\t\t</SampleBlock>\n\n\t\t<SampleBlock id=\"icons\" fitContent>\n\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with icons\">\n\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t</KolTabs>\n\t\t</SampleBlock>\n\t</>\n);\n",
1969
1961
  "kind": "sample"
1970
1962
  },
1971
1963
  {
@@ -1981,7 +1973,7 @@
1981
1973
  "group": "tabs",
1982
1974
  "name": "create-button",
1983
1975
  "path": "packages/samples/react/src/components/tabs/create-button.tsx",
1984
- "code": "import { KolTabs } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CreateButton: FC = () => {\n\tconst [tabs, setTabs] = useState([\n\t\t{\n\t\t\t_label: 'First tab',\n\t\t},\n\t\t{\n\t\t\t_label: 'Second Tab',\n\t\t},\n\t]);\n\n\tconst addTab = () => {\n\t\tsetTabs([\n\t\t\t...tabs,\n\t\t\t{\n\t\t\t\t_label: `Tab #${tabs.length + 1}`,\n\t\t\t},\n\t\t]);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with create button\" _hasCreateButton _on={{ onCreate: addTab }}>\n\t\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t\t<div key={`tab-${index}`} slot={`tab-${index}`}>\n\t\t\t\t\t\tContents of {tab._label}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t</KolTabs>\n\t\t</>\n\t);\n};\n",
1976
+ "code": "import { KolTabs } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CreateButton: FC = () => {\n\tconst [tabs, setTabs] = useState([\n\t\t{\n\t\t\t_label: 'First tab',\n\t\t},\n\t\t{\n\t\t\t_label: 'Second Tab',\n\t\t},\n\t]);\n\n\tconst addTab = () => {\n\t\tsetTabs([\n\t\t\t...tabs,\n\t\t\t{\n\t\t\t\t_label: `Tab #${tabs.length + 1}`,\n\t\t\t},\n\t\t]);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"create-button\" fitContent>\n\t\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with create button\" _hasCreateButton _on={{ onCreate: addTab }}>\n\t\t\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t\t\t<div key={`tab-${index}`} slot={`tab-${index}`}>\n\t\t\t\t\t\t\tContents of {tab._label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t</KolTabs>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
1985
1977
  "kind": "sample"
1986
1978
  },
1987
1979
  {
@@ -1989,7 +1981,7 @@
1989
1981
  "group": "tabs",
1990
1982
  "name": "icons-only",
1991
1983
  "path": "packages/samples/react/src/components/tabs/icons-only.tsx",
1992
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\nexport const TabsIconsOnly: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTabs with hidden labels.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTabs _label=\"Tabs with icons\" _tabs={tabs}>\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\t</>\n);\n",
1984
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_hideLabel: true,\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\nexport const TabsIconsOnly: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTabs with hidden labels.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"icons-only\" fitContent>\n\t\t\t<KolTabs _label=\"Tabs with icons\" _tabs={tabs}>\n\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t</KolTabs>\n\t\t</SampleBlock>\n\t</>\n);\n",
1993
1985
  "kind": "sample"
1994
1986
  },
1995
1987
  {
@@ -1997,7 +1989,7 @@
1997
1989
  "group": "textarea",
1998
1990
  "name": "adjust-height",
1999
1991
  "path": "packages/samples/react/src/components/textarea/adjust-height.tsx",
2000
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolForm, KolTextarea } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore\nmagna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd\ngubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing\nelitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos\net accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor\nsit amet.`;\n\nexport const TextareaAdjustHeight: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_adjustHeight</code>-property of KolTextarea. The textarea automatically grows with its content.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolForm className=\"w-full\">\n\t\t\t<KolTextarea _adjustHeight={true} _value={VALUE} _label=\"Text input (auto grow)\" />\n\t\t</KolForm>\n\t</>\n);\n",
1992
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolForm, KolTextarea } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nconst VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore\nmagna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd\ngubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing\nelitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos\net accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor\nsit amet.`;\n\nexport const TextareaAdjustHeight: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_adjustHeight</code>-property of KolTextarea. The textarea automatically grows with its content.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"adjust-height\">\n\t\t\t<KolForm className=\"w-full\">\n\t\t\t\t<KolTextarea _adjustHeight={true} _value={VALUE} _label=\"Text input (auto grow)\" />\n\t\t\t</KolForm>\n\t\t</SampleBlock>\n\t</>\n);\n",
2001
1993
  "kind": "sample"
2002
1994
  },
2003
1995
  {
@@ -2021,7 +2013,7 @@
2021
2013
  "group": "textarea",
2022
2014
  "name": "resize",
2023
2015
  "path": "packages/samples/react/src/components/textarea/resize.tsx",
2024
- "code": "import React from 'react';\n\nimport { KolForm, KolTextarea } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nexport const TextareaResize: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_resize</code>-property of KolTextarea. The sample textarea can (only) be resized in the given direction.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolForm className=\"w-full\">\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolTextarea _label=\"Text input (unset)\" />\n\t\t\t\t<KolTextarea _resize=\"vertical\" _label=\"Text input (vertical)\" />\n\t\t\t\t<KolTextarea _resize=\"none\" _label=\"Text input (none)\" />\n\t\t\t</div>\n\t\t</KolForm>\n\t</>\n);\n",
2016
+ "code": "import React from 'react';\n\nimport { KolForm, KolTextarea } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nexport const TextareaResize: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_resize</code>-property of KolTextarea. The sample textarea can (only) be resized in the given direction.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolForm className=\"w-full\">\n\t\t\t<SampleBlock id=\"resize\" className=\"flex flex-col gap-4\">\n\t\t\t\t<KolTextarea _label=\"Text input (unset)\" />\n\t\t\t\t<KolTextarea _resize=\"vertical\" _label=\"Text input (vertical)\" />\n\t\t\t\t<KolTextarea _resize=\"none\" _label=\"Text input (none)\" />\n\t\t\t</SampleBlock>\n\t\t</KolForm>\n\t</>\n);\n",
2025
2017
  "kind": "sample"
2026
2018
  },
2027
2019
  {
@@ -2029,7 +2021,7 @@
2029
2021
  "group": "textarea",
2030
2022
  "name": "rows",
2031
2023
  "path": "packages/samples/react/src/components/textarea/rows.tsx",
2032
- "code": "import React from 'react';\n\nimport { KolForm, KolTextarea } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TextareaRows: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_rows</code>-property of KolTextarea. The sample textarea has a fixed row number of 10.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolForm className=\"w-full\">\n\t\t\t<KolTextarea _rows={10} _label=\"Texteingabe\" />\n\t\t</KolForm>\n\t</>\n);\n",
2024
+ "code": "import React from 'react';\n\nimport { KolForm, KolTextarea } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TextareaRows: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_rows</code>-property of KolTextarea. The sample textarea has a fixed row number of 10.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"rows\">\n\t\t\t<KolForm className=\"w-full\">\n\t\t\t\t<KolTextarea _rows={10} _label=\"Texteingabe\" />\n\t\t\t</KolForm>\n\t\t</SampleBlock>\n\t</>\n);\n",
2033
2025
  "kind": "sample"
2034
2026
  },
2035
2027
  {
@@ -2037,7 +2029,7 @@
2037
2029
  "group": "textarea",
2038
2030
  "name": "with-counter",
2039
2031
  "path": "packages/samples/react/src/components/textarea/with-counter.tsx",
2040
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTextarea } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TextareaWithCounter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThe sample demonstrates various <code>KolTextarea</code> configurations — contrasting soft vs. hard <code>_maxLength</code> settings and the optional\n\t\t\t\t<code>_hasCounter</code> — including one instance without length limits.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col gap-4\">\n\t\t\t<KolTextarea _label=\"Textarea with soft max length\" _value={'Lorem Ipsum'} className=\"mt-2\" _maxLength={20} _hasCounter _maxLengthBehavior=\"soft\" />\n\t\t\t<KolTextarea _label=\"Textarea with max length\" _value={'Lorem Ipsum'} className=\"mt-2\" _maxLength={20} />\n\t\t\t<KolTextarea _label=\"Textarea with max length and counter\" _value={'Lorem Ipsum'} className=\"mt-2\" _maxLength={20} _hasCounter />\n\t\t\t<KolTextarea _label=\"Textarea with counter\" _value={'Lorem Ipsum'} className=\"mt-2\" _hasCounter />\n\t\t</section>\n\t</>\n);\n",
2032
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTextarea } from '@public-ui/react-v19';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TextareaWithCounter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThe sample demonstrates various <code>KolTextarea</code> configurations — contrasting soft vs. hard <code>_maxLength</code> settings and the optional\n\t\t\t\t<code>_hasCounter</code> — including one instance without length limits.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"with-counter\" className=\"w-full flex flex-col gap-4\">\n\t\t\t<KolTextarea _label=\"Textarea with soft max length\" _value={'Lorem Ipsum'} className=\"mt-2\" _maxLength={20} _hasCounter _maxLengthBehavior=\"soft\" />\n\t\t\t<KolTextarea _label=\"Textarea with max length\" _value={'Lorem Ipsum'} className=\"mt-2\" _maxLength={20} />\n\t\t\t<KolTextarea _label=\"Textarea with max length and counter\" _value={'Lorem Ipsum'} className=\"mt-2\" _maxLength={20} _hasCounter />\n\t\t\t<KolTextarea _label=\"Textarea with counter\" _value={'Lorem Ipsum'} className=\"mt-2\" _hasCounter />\n\t\t</SampleBlock>\n\t</>\n);\n",
2041
2033
  "kind": "sample"
2042
2034
  },
2043
2035
  {
@@ -2061,7 +2053,7 @@
2061
2053
  "group": "toolbar",
2062
2054
  "name": "basic",
2063
2055
  "path": "packages/samples/react/src/components/toolbar/basic.tsx",
2064
- "code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ToolbarBasic: FC = () => {\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Back',\n\t\t\t_hideLabel: true,\n\t\t\t_icons: {\n\t\t\t\tleft: {\n\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Next',\n\t\t\t_hideLabel: true,\n\t\t\t_icons: {\n\t\t\t\tright: {\n\t\t\t\t\ticon: 'kolicon-chevron-right',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'link',\n\t\t\t_href: '#/back-page',\n\t\t\t_label: 'Simple Link 1',\n\t\t},\n\t\t{\n\t\t\ttype: 'link',\n\t\t\t_href: '#/back-page',\n\t\t\t_label: 'Simple Link 3',\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Bold',\n\t\t\t_variant: 'secondary',\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Delete',\n\t\t\t_icons: {\n\t\t\t\tright: {\n\t\t\t\t\ticon: 'kolicon-cross',\n\t\t\t\t},\n\t\t\t},\n\t\t\t_variant: 'danger',\n\t\t},\n\t];\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolToolbars renders a set of given control elements grouped into one toolbar where focus can be moved using the keyboard arrow keys. The sample\n\t\t\t\t\tfeatures button and link elements.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolHeading _label=\"Orientation horizontal\" _level={2} />\n\t\t\t\t<KolToolbar class=\"block w-fit\" _label=\"Toolbar\" _items={TOOLBAR_ITEMS} />\n\n\t\t\t\t<KolHeading _label=\"Orientation vertical\" _level={2} />\n\t\t\t\t<KolToolbar class=\"block w-fit\" _label=\"Toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
2056
+ "code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ToolbarBasic: FC = () => {\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Back',\n\t\t\t_hideLabel: true,\n\t\t\t_icons: {\n\t\t\t\tleft: {\n\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Next',\n\t\t\t_hideLabel: true,\n\t\t\t_icons: {\n\t\t\t\tright: {\n\t\t\t\t\ticon: 'kolicon-chevron-right',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'link',\n\t\t\t_href: '#/back-page',\n\t\t\t_label: 'Simple Link 1',\n\t\t},\n\t\t{\n\t\t\ttype: 'link',\n\t\t\t_href: '#/back-page',\n\t\t\t_label: 'Simple Link 3',\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Bold',\n\t\t\t_variant: 'secondary',\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Delete',\n\t\t\t_icons: {\n\t\t\t\tright: {\n\t\t\t\t\ticon: 'kolicon-cross',\n\t\t\t\t},\n\t\t\t},\n\t\t\t_variant: 'danger',\n\t\t},\n\t];\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolToolbars renders a set of given control elements grouped into one toolbar where focus can be moved using the keyboard arrow keys. The sample\n\t\t\t\t\tfeatures button and link elements.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"horizontal\" heading=\"Orientation horizontal\" fitContent narrow>\n\t\t\t\t<KolToolbar class=\"block w-fit\" _label=\"Toolbar\" _items={TOOLBAR_ITEMS} />\n\t\t\t</SampleBlock>\n\n\t\t\t<SampleBlock id=\"vertical\" heading=\"Orientation vertical\" fitContent>\n\t\t\t\t<KolToolbar class=\"block w-fit\" _label=\"Toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
2065
2057
  "kind": "sample"
2066
2058
  },
2067
2059
  {
@@ -2069,7 +2061,7 @@
2069
2061
  "group": "toolbar",
2070
2062
  "name": "disabled",
2071
2063
  "path": "packages/samples/react/src/components/toolbar/disabled.tsx",
2072
- "code": "import { KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ToolbarDisabled: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolToolbars with some of the elements disabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolToolbar\n\t\t\t\t_label=\"Toolbar\"\n\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t_items={[\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t_label: 'Back',\n\t\t\t\t\t\t_disabled: true,\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_icons: {\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t_label: 'Next',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_icons: {\n\t\t\t\t\t\t\tright: {\n\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t_label: 'Simple Link 1',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t_disabled: true,\n\t\t\t\t\t\t_label: 'Simple Link 3',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t_label: 'Bold',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
2064
+ "code": "import { KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ToolbarDisabled: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolToolbars with some of the elements disabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"disabled\" fitContent>\n\t\t\t\t<KolToolbar\n\t\t\t\t\t_label=\"Toolbar\"\n\t\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t\t_items={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Back',\n\t\t\t\t\t\t\t_disabled: true,\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_icons: {\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Next',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_icons: {\n\t\t\t\t\t\t\t\tright: {\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t_label: 'Simple Link 1',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t_disabled: true,\n\t\t\t\t\t\t\t_label: 'Simple Link 3',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Bold',\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t</SampleBlock>\n\t\t</>\n\t);\n};\n",
2073
2065
  "kind": "sample"
2074
2066
  },
2075
2067
  {
@@ -2077,7 +2069,7 @@
2077
2069
  "group": "tree",
2078
2070
  "name": "basic/:subPage",
2079
2071
  "path": "packages/samples/react/src/components/tree/basic.tsx",
2080
- "code": "import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useContext, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { HideMenusContext } from '../../shares/HideMenusContext';\nimport { getRandomEmoji } from '../../shares/randomEmoji';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TreeBasic: FC = () => {\n\tconst hideMenus = useContext(HideMenusContext);\n\tconst { subPage } = useParams();\n\tconst [homeLabel, setHomeLabel] = useState('1 Home');\n\tconst [showPets, setShowPets] = useState(false);\n\tconst [showEurope, setShowEurope] = useState(false);\n\tconst [showProducts, setShowProducts] = useState(true);\n\tconst updateHomeLabel = () => {\n\t\tsetHomeLabel(`1 Home ${getRandomEmoji()}`);\n\t};\n\n\tconst getItemProps = (page: string) => {\n\t\treturn {\n\t\t\t_href: `#/tree/basic/${page}${hideMenus ? '?hideMenus' : ''}`,\n\t\t\t_active: page === subPage,\n\t\t};\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolTree renders a keyboard accessible nested navigation. Branches of the tree can be collapsed or expanded.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolTree _label=\"Sitemap\" class=\"block w-fit\">\n\t\t\t\t<KolTreeItem _label={homeLabel} {...getItemProps('home')}></KolTreeItem>\n\t\t\t\t<KolTreeItem _label=\"2 About (open initially)\" {...getItemProps('about')} _open>\n\t\t\t\t\t<KolTreeItem _label=\"2.0 Legal\" {...getItemProps('legal')}></KolTreeItem>\n\t\t\t\t\t<KolTreeItem _label=\"2.1 Team\" {...getItemProps('team')}>\n\t\t\t\t\t\t<KolTreeItem _label=\"2.1.1. Values\" {...getItemProps('values')}></KolTreeItem>\n\t\t\t\t\t\t<KolTreeItem _label=\"2.1.2. Members\" {...getItemProps('members')}>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.2.1 Humans\" {...getItemProps('humans')}></KolTreeItem>\n\t\t\t\t\t\t\t{showPets && <KolTreeItem _label=\"2.1.2.2 Pets\" {...getItemProps('pets')}></KolTreeItem>}\n\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3 Locations\" {...getItemProps('locations')}>\n\t\t\t\t\t\t\t{showEurope && (\n\t\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3.1 Europe\" {...getItemProps('europe')}>\n\t\t\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3.1.1 Denmark\" {...getItemProps('denmark')} />\n\t\t\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3.1.2 Netherlands\" {...getItemProps('netherlands')} />\n\t\t\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t</KolTreeItem>\n\t\t\t\t</KolTreeItem>\n\t\t\t\t{showProducts && (\n\t\t\t\t\t<KolTreeItem _label=\"3. Products\" {...getItemProps('products')}>\n\t\t\t\t\t\t<KolTreeItem _label=\"3.1 Home\" {...getItemProps('home-products')}>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"3.1.1 Refrigerators\" {...getItemProps('fridges')}></KolTreeItem>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"3.1.2 Coffee makers\" {...getItemProps('coffee-makers')}></KolTreeItem>\n\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t<KolTreeItem _label=\"3.1 Office\" {...getItemProps('office-products')}>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"3.2.1 Printers\" {...getItemProps('printers')}></KolTreeItem>\n\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t</KolTreeItem>\n\t\t\t\t)}\n\t\t\t</KolTree>\n\n\t\t\t<p>Current tree item: {subPage ?? 'none'}</p>\n\n\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t<KolButton _label=\"Change label for '1 Home'\" _on={{ onClick: updateHomeLabel }}></KolButton>\n\t\t\t\t<KolButton _label=\"Toggle '2.1.2.2 Pets'\" _on={{ onClick: () => setShowPets(!showPets) }}></KolButton>\n\t\t\t\t<KolButton _label=\"Toggle '2.2.1 Europe' (two levels at once)\" _on={{ onClick: () => setShowEurope(!showEurope) }}></KolButton>\n\t\t\t\t<KolButton _label=\"Toggle '3. Products'\" _on={{ onClick: () => setShowProducts(!showProducts) }}></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
2072
+ "code": "import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useContext, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { HideMenusContext } from '../../shares/HideMenusContext';\nimport { getRandomEmoji } from '../../shares/randomEmoji';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TreeBasic: FC = () => {\n\tconst hideMenus = useContext(HideMenusContext);\n\tconst { subPage } = useParams();\n\tconst [homeLabel, setHomeLabel] = useState('1 Home');\n\tconst [showPets, setShowPets] = useState(false);\n\tconst [showEurope, setShowEurope] = useState(false);\n\tconst [showProducts, setShowProducts] = useState(true);\n\tconst updateHomeLabel = () => {\n\t\tsetHomeLabel(`1 Home ${getRandomEmoji()}`);\n\t};\n\n\tconst getItemProps = (page: string) => {\n\t\treturn {\n\t\t\t_href: `#/tree/basic/${page}${hideMenus ? '?hideMenus' : ''}`,\n\t\t\t_active: page === subPage,\n\t\t};\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolTree renders a keyboard accessible nested navigation. Branches of the tree can be collapsed or expanded.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<SampleBlock id=\"tree\" fitContent>\n\t\t\t\t<KolTree _label=\"Sitemap\" class=\"block w-fit\">\n\t\t\t\t\t<KolTreeItem _label={homeLabel} {...getItemProps('home')}></KolTreeItem>\n\t\t\t\t\t<KolTreeItem _label=\"2 About (open initially)\" {...getItemProps('about')} _open>\n\t\t\t\t\t\t<KolTreeItem _label=\"2.0 Legal\" {...getItemProps('legal')}></KolTreeItem>\n\t\t\t\t\t\t<KolTreeItem _label=\"2.1 Team\" {...getItemProps('team')}>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.1. Values\" {...getItemProps('values')}></KolTreeItem>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.2. Members\" {...getItemProps('members')}>\n\t\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.2.1 Humans\" {...getItemProps('humans')}></KolTreeItem>\n\t\t\t\t\t\t\t\t{showPets && <KolTreeItem _label=\"2.1.2.2 Pets\" {...getItemProps('pets')}></KolTreeItem>}\n\t\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3 Locations\" {...getItemProps('locations')}>\n\t\t\t\t\t\t\t\t{showEurope && (\n\t\t\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3.1 Europe\" {...getItemProps('europe')}>\n\t\t\t\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3.1.1 Denmark\" {...getItemProps('denmark')} />\n\t\t\t\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3.1.2 Netherlands\" {...getItemProps('netherlands')} />\n\t\t\t\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t{showProducts && (\n\t\t\t\t\t\t<KolTreeItem _label=\"3. Products\" {...getItemProps('products')}>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"3.1 Home\" {...getItemProps('home-products')}>\n\t\t\t\t\t\t\t\t<KolTreeItem _label=\"3.1.1 Refrigerators\" {...getItemProps('fridges')}></KolTreeItem>\n\t\t\t\t\t\t\t\t<KolTreeItem _label=\"3.1.2 Coffee makers\" {...getItemProps('coffee-makers')}></KolTreeItem>\n\t\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"3.1 Office\" {...getItemProps('office-products')}>\n\t\t\t\t\t\t\t\t<KolTreeItem _label=\"3.2.1 Printers\" {...getItemProps('printers')}></KolTreeItem>\n\t\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t)}\n\t\t\t\t</KolTree>\n\t\t\t</SampleBlock>\n\n\t\t\t<p>Current tree item: {subPage ?? 'none'}</p>\n\n\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t<KolButton _label=\"Change label for '1 Home'\" _on={{ onClick: updateHomeLabel }}></KolButton>\n\t\t\t\t<KolButton _label=\"Toggle '2.1.2.2 Pets'\" _on={{ onClick: () => setShowPets(!showPets) }}></KolButton>\n\t\t\t\t<KolButton _label=\"Toggle '2.2.1 Europe' (two levels at once)\" _on={{ onClick: () => setShowEurope(!showEurope) }}></KolButton>\n\t\t\t\t<KolButton _label=\"Toggle '3. Products'\" _on={{ onClick: () => setShowProducts(!showProducts) }}></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
2081
2073
  "kind": "sample"
2082
2074
  },
2083
2075
  {
@@ -2085,7 +2077,7 @@
2085
2077
  "group": "version",
2086
2078
  "name": "basic",
2087
2079
  "path": "packages/samples/react/src/components/version/basic.tsx",
2088
- "code": "import React from 'react';\n\nimport { KolVersion } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nexport const VersionBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolVersion renders a label showing the given version number.</p>\n\t\t</SampleDescription>\n\n\t\t<KolVersion _label=\"1.1.1\" />\n\t</>\n);\n",
2080
+ "code": "import React from 'react';\n\nimport { KolVersion } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\nexport const VersionBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolVersion renders a label showing the given version number.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"basic\" fitContent>\n\t\t\t<KolVersion _label=\"1.1.1\" />\n\t\t</SampleBlock>\n\t</>\n);\n",
2089
2081
  "kind": "sample"
2090
2082
  },
2091
2083
  {
@@ -2093,7 +2085,7 @@
2093
2085
  "group": "version",
2094
2086
  "name": "context",
2095
2087
  "path": "packages/samples/react/src/components/version/context.tsx",
2096
- "code": "import React from 'react';\n\nimport { KolVersion } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const VersionContext: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolVersion inline with text paragraph content.</p>\n\t\t</SampleDescription>\n\n\t\t<p>\n\t\t\t<KolVersion _label=\"1.0.0\" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna\n\t\t\taliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n\t\t\tipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t</p>\n\t</>\n);\n",
2088
+ "code": "import React from 'react';\n\nimport { KolVersion } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleBlock } from '../SampleBlock';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const VersionContext: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolVersion inline with text paragraph content.</p>\n\t\t</SampleDescription>\n\n\t\t<SampleBlock id=\"context\">\n\t\t\t<p>\n\t\t\t\t<KolVersion _label=\"1.0.0\" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna\n\t\t\t\taliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n\t\t\t\tipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t</SampleBlock>\n\t</>\n);\n",
2097
2089
  "kind": "sample"
2098
2090
  },
2099
2091
  {
@@ -2109,7 +2101,7 @@
2109
2101
  "group": "scenarios",
2110
2102
  "name": "button-shortkey-table",
2111
2103
  "path": "packages/samples/react/src/scenarios/button-shortkey-table.tsx",
2112
- "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { getRoot } from '../shares/react-roots';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.focus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.focus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tgap: 'calc(10rem / var(--kolibri-root-font-size, 16))',\n\t\t\t}}\n\t\t\tonKeyUp={handleKeyUp}\n\t\t>\n\t\t\t<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />\n\t\t\t<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />\n\t\t</div>\n\t);\n};\n\nexport const ButtonShortkeyTable: FC = () => {\n\ttype Data = {\n\t\tlabel: string;\n\t};\n\tconst DATA: Data[] = [\n\t\t{\n\t\t\tlabel: 'Row 1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 2',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 3',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 4',\n\t\t},\n\t];\n\n\tconst HEADERS: KoliBriTableHeaders = {\n\t\thorizontal: [\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Label',\n\t\t\t\t\tkey: 'label',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\twidth: 200,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Actions',\n\t\t\t\t\tkey: 'actions',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\twidth: 150,\n\t\t\t\t\trender: (el, cell) => {\n\t\t\t\t\t\tconst data = cell.data as Data | undefined;\n\t\t\t\t\t\tif (!data?.label) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(<RowActions label={data.label} />);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis scenario demonstrates an interactive table where each row contains buttons with shortcut keys. The shortcut keys provide visual keyboard\n\t\t\t\t\tindicators and are also functionally implemented.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>How to use:</strong> Move focus within one of the &quot;Actions&quot; cells and press &quot;e&quot; to edit or &quot;d&quot; to delete the\n\t\t\t\t\tcorresponding row.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Interactive Table with Button Shortkeys\" />\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label={`Interactive table with shortkey buttons in each row`}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
2104
+ "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { SampleBlock } from '../components/SampleBlock';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { getRoot } from '../shares/react-roots';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.focus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.focus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tgap: 'calc(10rem / var(--kolibri-root-font-size, 16))',\n\t\t\t}}\n\t\t\tonKeyUp={handleKeyUp}\n\t\t>\n\t\t\t<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />\n\t\t\t<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />\n\t\t</div>\n\t);\n};\n\nexport const ButtonShortkeyTable: FC = () => {\n\ttype Data = {\n\t\tlabel: string;\n\t};\n\tconst DATA: Data[] = [\n\t\t{\n\t\t\tlabel: 'Row 1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 2',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 3',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 4',\n\t\t},\n\t];\n\n\tconst HEADERS: KoliBriTableHeaders = {\n\t\thorizontal: [\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Label',\n\t\t\t\t\tkey: 'label',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\twidth: 200,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Actions',\n\t\t\t\t\tkey: 'actions',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\twidth: 150,\n\t\t\t\t\trender: (el, cell) => {\n\t\t\t\t\t\tconst data = cell.data as Data | undefined;\n\t\t\t\t\t\tif (!data?.label) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(<RowActions label={data.label} />);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis scenario demonstrates an interactive table where each row contains buttons with shortcut keys. The shortcut keys provide visual keyboard\n\t\t\t\t\tindicators and are also functionally implemented.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>How to use:</strong> Move focus within one of the &quot;Actions&quot; cells and press &quot;e&quot; to edit or &quot;d&quot; to delete the\n\t\t\t\t\tcorresponding row.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<SampleBlock id=\"interactive-table-button\" heading=\"Interactive Table with Button Shortkeys\">\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label={`Interactive table with shortkey buttons in each row`}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</SampleBlock>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
2113
2105
  "kind": "scenario"
2114
2106
  },
2115
2107
  {
@@ -2261,7 +2253,7 @@
2261
2253
  "group": "spec",
2262
2254
  "name": "_skeleton",
2263
2255
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/_skeleton.md",
2264
- "code": "# TODO: Props-Pattern-Enforcement\n\n## Problem\n\nWenn Props über `PropsConfigShape` + `ApiFromConfig` in `api.tsx` definiert werden, erzwingt TypeScript nur einen Teil des erforderlichen Boilerplates in der Web-Component-Klasse.\n\nDas **Prop-Dreieck** besteht aus drei Teilen — nur einer davon ist type-erzwungen:\n\n| Teil | Type-erzwungen? | Was passiert bei Fehlen |\n| ----------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------ |\n| Felddeklaration `_name!: string` | **Ja** — via `ComponentProps<T>` in `WebComponentInterface` | compile error |\n| `@Prop()` Decorator | **Nein** | kein Attribut-Binding, silent runtime bug |\n| `@Watch('_name')` Decorator | **Nein** (`watchName()` Methode wird erzwungen, aber nicht der Decorator) | Stencil ruft Methode nie auf, silent runtime bug |\n| Forwarding in `componentWillLoad()` | **Nein** | Prop-Wert kommt nie im Controller an |\n\n## Aktueller Stand\n\n`implements WebComponentInterface<SkeletonApi>` ist korrekt und schon vorhanden — es deckt alles ab, was TypeScript abdecken _kann_. Die Lücke ist Stencil-spezifisch: Stencil-Decorators sind reine Metadaten und für das TypeScript-Typsystem unsichtbar.\n\n## Lösungsoptionen\n\n### Option A: Custom ESLint-Regel (empfohlen, kurzfristig)\n\nEine AST-basierte Regel mit `@typescript-eslint`, die prüft:\n\n> Jedes Feld einer Klasse, die `implements WebComponentInterface<...>` trägt und dem Muster `_${name}` entspricht, muss `@Prop()` und ein `@Watch('_${name}')` besitzen.\n\n- Machbar ohne Änderungen am Typsystem\n- Greift in CI/CD und im Editor\n- Schließt die Lücke für bestehende und neue Komponenten\n\n### Option B: Code-Generator für Prop-Dreieck-Boilerplate (empfohlen, langfristig)\n\nEin Script/Tool, das aus `propsConfig` automatisch den WebComponent-Boilerplate erzeugt:\n\n```ts\n// aus: skeletonPropsConfig.required = [nameProp]\n// wird generiert:\n\n@Prop() public _name!: string;\n\n@Watch('_name')\nwatchName(value?: string): void {\n this.ctrl.watchName(value);\n}\n\n// in componentWillLoad():\n// name: this._name,\n```\n\n- Eliminiert die Fehlerquelle bei neuen Props vollständig\n- Kein Scaffolding-Tool existiert aktuell im Projekt\n\n### Option C: JSDoc-Warnung auf `WebComponentInterface<T>` (minimal, sofort)\n\n```ts\n/**\n * @remarks\n * TypeScript erzwingt Felddeklarationen und Watcher-Methodensignaturen.\n * NICHT erzwungen werden: @Prop() Decorator, @Watch() Decorator, componentWillLoad() Forwarding.\n * Alle drei Teile des Prop-Dreiecks müssen manuell korrekt implementiert werden.\n */\nexport type WebComponentInterface<T extends ComponentApi> = ...\n```\n\n## Offene Punkte (Needs Deeper Look)\n\n- [ ] **Custom ESLint-Regel implementieren** für `@Prop()` + `@Watch()` Enforcement\n- [ ] **Code-Generator** für Prop-Dreieck-Boilerplate aus `propsConfig`\n- [ ] **`label` State-Disconnect im Skeleton** beheben — `@State label = 'Label'` im WebComponent und `'Click me'` im Controller sind unverbunden\n- [ ] **`@Watch('_name')` Typo-Risiko** — `@Watch('_nane')` wäre kein TypeScript-Fehler; ESLint-Regel würde das mit abdecken\n- [ ] **Alle Komponenten auditen** (`avatar`, `click-button`, `icon`, `image`, `progress`, `quote`) auf Prop-Dreieck-Vollständigkeit\n- [ ] **A11y-Tests** für Skeleton hinzufügen — kein `*.e2e.ts` / `*.spec.ts` vorhanden\n- [ ] **`event.preventDefault()` in `ClickButtonFC`** prüfen — blockiert alle Keyboard-Events (NVDA/JAWS-Test nötig)\n- [ ] **JSDoc `@remarks`** auf `WebComponentInterface<T>` in `generic-types.ts` ergänzen\n\n## Accessibility-Risiko\n\nBei fehlendem Prop-Wiring entsteht konkret eine WCAG-4.1.2-Verletzung (Name, Role, Value): Buttons erhalten keinen accessible name oder einen falschen Fallback-Text. `axe-core` würde dies in e2e-Tests fangen — aber nur wenn solche Tests existieren.\n",
2256
+ "code": "# TODO: Props-Pattern-Enforcement\n\n## Problem\n\nWenn Props über `PropsConfigShape` + `ApiFromConfig` in `api.tsx` definiert werden, erzwingt TypeScript nur einen Teil des erforderlichen Boilerplates in der Web-Component-Klasse.\n\nDas **Prop-Dreieck** besteht aus drei Teilen — nur einer davon ist type-erzwungen:\n\n| Teil | Type-erzwungen? | Was passiert bei Fehlen |\n| ----------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------ |\n| Felddeklaration `_name!: string` | **Ja** — via `ComponentProps<T>` in `WebComponentInterface` | compile error |\n| `@Prop()` Decorator | **Nein** | kein Attribut-Binding, silent runtime bug |\n| `@Watch('_name')` Decorator | **Nein** (`watchName()` Methode wird erzwungen, aber nicht der Decorator) | Stencil ruft Methode nie auf, silent runtime bug |\n| Forwarding in `componentWillLoad()` | **Nein** | Prop-Wert kommt nie in der WC an |\n\n## Aktueller Stand\n\n`implements WebComponentInterface<SkeletonApi>` ist korrekt und schon vorhanden — es deckt alles ab, was TypeScript abdecken _kann_. Die Lücke ist Stencil-spezifisch: Stencil-Decorators sind reine Metadaten und für das TypeScript-Typsystem unsichtbar.\n\n## Lösungsoptionen\n\n### Option A: Custom ESLint-Regel (empfohlen, kurzfristig)\n\nEine AST-basierte Regel mit `@typescript-eslint`, die prüft:\n\n> Jedes Feld einer Klasse, die `implements WebComponentInterface<...>` trägt und dem Muster `_${name}` entspricht, muss `@Prop()` und ein `@Watch('_${name}')` besitzen.\n\n- Machbar ohne Änderungen am Typsystem\n- Greift in CI/CD und im Editor\n- Schließt die Lücke für bestehende und neue Komponenten\n\n### Option B: Code-Generator für Prop-Dreieck-Boilerplate (empfohlen, langfristig)\n\nEin Script/Tool, das aus `propsConfig` automatisch den WebComponent-Boilerplate erzeugt:\n\n```ts\n// aus: skeletonPropsConfig.required = [nameProp]\n// wird generiert:\n\n@Prop() public _name!: string;\n\n@Watch('_name')\nwatchName(value?: string): void {\n nameProp.apply(value, (v) => this.setRenderProp('name', v));\n}\n\n// in componentWillLoad():\n// nameProp.apply(this._name, (v) => this.setRenderProp('name', v));\n```\n\n- Eliminiert die Fehlerquelle bei neuen Props vollständig\n- Kein Scaffolding-Tool existiert aktuell im Projekt\n\n### Option C: JSDoc-Warnung auf `WebComponentInterface<T>` (minimal, sofort)\n\n```ts\n/**\n * @remarks\n * TypeScript erzwingt Felddeklarationen und Watcher-Methodensignaturen.\n * NICHT erzwungen werden: @Prop() Decorator, @Watch() Decorator, componentWillLoad() Forwarding.\n * Alle drei Teile des Prop-Dreiecks müssen manuell korrekt implementiert werden.\n */\nexport type WebComponentInterface<T extends ComponentApi> = ...\n```\n\n## Offene Punkte (Needs Deeper Look)\n\n- [ ] **Custom ESLint-Regel implementieren** für `@Prop()` + `@Watch()` Enforcement\n- [ ] **Code-Generator** für Prop-Dreieck-Boilerplate aus `propsConfig`\n- [ ] **`label` State-Disconnect im Skeleton** beheben — `@State label = 'Label'` im WebComponent und der Default in `propsConfig` sind unverbunden\n- [ ] **`@Watch('_name')` Typo-Risiko** — `@Watch('_nane')` wäre kein TypeScript-Fehler; ESLint-Regel würde das mit abdecken\n- [ ] **Alle Komponenten auditen** (`avatar`, `click-button`, `icon`, `image`, `progress`, `quote`) auf Prop-Dreieck-Vollständigkeit\n- [ ] **A11y-Tests** für Skeleton hinzufügen — kein `*.e2e.ts` / `*.spec.ts` vorhanden\n- [ ] **`event.preventDefault()` in `ClickButtonFC`** prüfen — blockiert alle Keyboard-Events (NVDA/JAWS-Test nötig)\n- [ ] **JSDoc `@remarks`** auf `WebComponentInterface<T>` in `generic-types.ts` ergänzen\n\n## Accessibility-Risiko\n\nBei fehlendem Prop-Wiring entsteht konkret eine WCAG-4.1.2-Verletzung (Name, Role, Value): Buttons erhalten keinen accessible name oder einen falschen Fallback-Text. `axe-core` würde dies in e2e-Tests fangen — aber nur wenn solche Tests existieren.\n",
2265
2257
  "kind": "spec"
2266
2258
  },
2267
2259
  {
@@ -2341,7 +2333,7 @@
2341
2333
  "group": "spec",
2342
2334
  "name": "combobox",
2343
2335
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/combobox.md",
2344
- "code": "# kol-combobox\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this combobox. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2336
+ "code": "# kol-combobox\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this combobox. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2345
2337
  "kind": "spec"
2346
2338
  },
2347
2339
  {
@@ -2413,7 +2405,7 @@
2413
2405
  "group": "spec",
2414
2406
  "name": "input-checkbox",
2415
2407
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-checkbox.md",
2416
- "code": "# kol-input-checkbox\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_checked` | `_checked` | Defines whether the checkbox is checked or not. Can be read and written. | `boolean \\| undefined` | `false` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked. | `boolean \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_labelAlign` | `_label-align` | Defines which alignment should be used for presentation. | `\"left\" \\| \"right\" \\| undefined` | `'right'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `true` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2408
+ "code": "# kol-input-checkbox\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_checked` | `_checked` | Defines whether the checkbox is checked or not. Can be read and written. | `boolean \\| undefined` | `false` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked. | `boolean \\| undefined` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_labelAlign` | `_label-align` | Defines which alignment should be used for presentation. | `\"left\" \\| \"right\" \\| undefined` | `'right'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `true` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2417
2409
  "kind": "spec"
2418
2410
  },
2419
2411
  {
@@ -2421,7 +2413,7 @@
2421
2413
  "group": "spec",
2422
2414
  "name": "input-color",
2423
2415
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-color.md",
2424
- "code": "# kol-input-color\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2416
+ "code": "# kol-input-color\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2425
2417
  "kind": "spec"
2426
2418
  },
2427
2419
  {
@@ -2429,7 +2421,7 @@
2429
2421
  "group": "spec",
2430
2422
  "name": "input-date",
2431
2423
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-date.md",
2432
- "code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"` | `'date'` |\n| `_value` | `_value` | Defines the value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2424
+ "code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"` | `'date'` |\n| `_value` | `_value` | Defines the value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2433
2425
  "kind": "spec"
2434
2426
  },
2435
2427
  {
@@ -2437,7 +2429,7 @@
2437
2429
  "group": "spec",
2438
2430
  "name": "input-email",
2439
2431
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-email.md",
2440
- "code": "# kol-input-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2432
+ "code": "# kol-input-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2441
2433
  "kind": "spec"
2442
2434
  },
2443
2435
  {
@@ -2445,7 +2437,7 @@
2445
2437
  "group": "spec",
2446
2438
  "name": "input-file",
2447
2439
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-file.md",
2448
- "code": "# kol-input-file\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accept` | `_accept` | Defines which file formats are accepted. | `string \\| undefined` | `undefined` |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2440
+ "code": "# kol-input-file\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accept` | `_accept` | Defines which file formats are accepted. | `string \\| undefined` | `undefined` |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2449
2441
  "kind": "spec"
2450
2442
  },
2451
2443
  {
@@ -2453,7 +2445,7 @@
2453
2445
  "group": "spec",
2454
2446
  "name": "input-number",
2455
2447
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-number.md",
2456
- "code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2448
+ "code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2457
2449
  "kind": "spec"
2458
2450
  },
2459
2451
  {
@@ -2461,7 +2453,7 @@
2461
2453
  "group": "spec",
2462
2454
  "name": "input-password",
2463
2455
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-password.md",
2464
- "code": "# kol-input-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n| `_visibilityToggle` | `_visibility-toggle` | Activates the show password button | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2456
+ "code": "# kol-input-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n| `_visibilityToggle` | `_visibility-toggle` | Activates the show password button | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2465
2457
  "kind": "spec"
2466
2458
  },
2467
2459
  {
@@ -2469,7 +2461,7 @@
2469
2461
  "group": "spec",
2470
2462
  "name": "input-radio",
2471
2463
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-radio.md",
2472
- "code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` | `_options` | Options the user can choose from. | `RadioOption<StencilUnknown>[] \\| string \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2464
+ "code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` | `_options` | Options the user can choose from. | `RadioOption<StencilUnknown>[] \\| string \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2473
2465
  "kind": "spec"
2474
2466
  },
2475
2467
  {
@@ -2477,7 +2469,7 @@
2477
2469
  "group": "spec",
2478
2470
  "name": "input-range",
2479
2471
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-range.md",
2480
- "code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `100` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `0` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2472
+ "code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `100` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `0` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| | The label of the input field. |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2481
2473
  "kind": "spec"
2482
2474
  },
2483
2475
  {
@@ -2501,7 +2493,7 @@
2501
2493
  "group": "spec",
2502
2494
  "name": "link",
2503
2495
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link.md",
2504
- "code": "# kol-link\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Sets the target URI of the link or citation source. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames. | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2496
+ "code": "# kol-link\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Sets the target URI of the link or citation source. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames. | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2505
2497
  "kind": "spec"
2506
2498
  },
2507
2499
  {
@@ -2573,7 +2565,7 @@
2573
2565
  "group": "spec",
2574
2566
  "name": "select",
2575
2567
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/select.md",
2576
- "code": "# kol-select\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this select. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2568
+ "code": "# kol-select\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this select. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
2577
2569
  "kind": "spec"
2578
2570
  },
2579
2571
  {
@@ -2581,7 +2573,7 @@
2581
2573
  "group": "spec",
2582
2574
  "name": "single-select",
2583
2575
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/single-select.md",
2584
- "code": "# kol-single-select\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `Option<StencilUnknown>[] \\| string` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2576
+ "code": "# kol-single-select\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `Option<StencilUnknown>[] \\| string` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2585
2577
  "kind": "spec"
2586
2578
  },
2587
2579
  {
@@ -2621,7 +2613,7 @@
2621
2613
  "group": "spec",
2622
2614
  "name": "table-stateful",
2623
2615
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateful.md",
2624
- "code": "# kol-table-stateful\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_allowMultiSort` | `_allow-multi-sort` | Defines whether to allow multi sort. | `boolean \\| undefined` | `undefined` |\n| `_ariaLabelledby` | `_aria-labelledby` | References an external element by ID that serves as the accessible label for this table. Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) — use `_label` instead. | `string \\| undefined` | `undefined` |\n| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \\| string` | `undefined` |\n| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \\| string \\| undefined` | `undefined` |\n| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| undefined` | `undefined` |\n| `_hasSettingsMenu` | `_has-settings-menu` | Enables the settings menu if true (default: false). | `boolean \\| undefined` | `undefined` |\n| `_headers` _(required)_ | `_headers` | Defines the horizontal and vertical table headers. | `string \\| { horizontal?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Defines the callback functions for table events. | `undefined \\| { onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload> \\| undefined; }` | `undefined` |\n| `_pagination` | `_pagination` | Defines whether to show the data distributed over multiple pages. | `boolean \\| string \\| undefined \\| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \\| undefined; _page?: number \\| undefined; _max?: number \\| undefined; _boundaryCount?: number \\| undefined; _hasButtons?: boolean \\| Stringified<PaginationHasButton> \\| undefined; _pageSize?: number \\| undefined; _pageSizeOptions?: Stringified<number[]> \\| undefined; _siblingCount?: number \\| undefined; _customClass?: string \\| undefined; _label?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_paginationPosition` | `_pagination-position` | Controls the position of the pagination. | `\"both\" \\| \"bottom\" \\| \"top\" \\| undefined` | `'bottom'` |\n| `_selection` | `_selection` | Defines how rows can be selected and the current selection. | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `getSelection() => Promise<KoliBriTableDataType[] | null>`\n\nReturns the selected rows.\n\n#### Returns\n\nType: `Promise<KoliBriTableDataType[] | null>`\n\n\n\n### `resetSort() => Promise<void>`\n\nResets the sort state to the default values defined in the `_headers` prop.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2616
+ "code": "# kol-table-stateful\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_allowMultiSort` | `_allow-multi-sort` | Defines whether to allow multi sort. | `boolean \\| undefined` | `undefined` |\n| `_ariaLabelledby` | `_aria-labelledby` | References an external element by ID that serves as the accessible label for this table. Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) — use `_label` instead. | `string \\| undefined` | `undefined` |\n| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \\| string` | `undefined` |\n| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \\| string \\| undefined` | `undefined` |\n| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| undefined` | `undefined` |\n| `_hasSettingsMenu` | `_has-settings-menu` | Enables the settings menu if true (default: false). | `boolean \\| undefined` | `undefined` |\n| `_headers` _(required)_ | `_headers` | Defines the horizontal and vertical table headers. | `string \\| { horizontal?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_loading` | `_loading` | Wether the table shows a loading spinner (default: false). | `boolean \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for table events. | `undefined \\| { onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload> \\| undefined; }` | `undefined` |\n| `_pagination` | `_pagination` | Defines whether to show the data distributed over multiple pages. | `boolean \\| string \\| undefined \\| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \\| undefined; _page?: number \\| undefined; _max?: number \\| undefined; _boundaryCount?: number \\| undefined; _hasButtons?: boolean \\| Stringified<PaginationHasButton> \\| undefined; _pageSize?: number \\| undefined; _pageSizeOptions?: Stringified<number[]> \\| undefined; _siblingCount?: number \\| undefined; _customClass?: string \\| undefined; _label?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_paginationPosition` | `_pagination-position` | Controls the position of the pagination. | `\"both\" \\| \"bottom\" \\| \"top\" \\| undefined` | `'bottom'` |\n| `_selection` | `_selection` | Defines how rows can be selected and the current selection. | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `getSelection() => Promise<KoliBriTableDataType[] | null>`\n\nReturns the selected rows.\n\n#### Returns\n\nType: `Promise<KoliBriTableDataType[] | null>`\n\n\n\n### `resetSort() => Promise<void>`\n\nResets the sort state to the default values defined in the `_headers` prop.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2625
2617
  "kind": "spec"
2626
2618
  },
2627
2619
  {
@@ -2629,7 +2621,7 @@
2629
2621
  "group": "spec",
2630
2622
  "name": "table-stateless",
2631
2623
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateless.md",
2632
- "code": "# kol-table-stateless\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_ariaLabelledby` | `_aria-labelledby` | References an external element by ID that serves as the accessible label for this table. Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) — use `_label` instead. | `string \\| undefined` | `undefined` |\n| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \\| string` | `undefined` |\n| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \\| string \\| undefined` | `undefined` |\n| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| undefined` | `undefined` |\n| `_hasSettingsMenu` | `_has-settings-menu` | Enables the settings menu if true (default: false). | `boolean \\| undefined` | `undefined` |\n| `_headerCells` _(required)_ | `_header-cells` | Defines the horizontal and vertical table headers. | `string \\| { horizontal?: KoliBriTableHeaderCell[][] \\| undefined; vertical?: KoliBriTableHeaderCell[][] \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Defines the callback functions for table events. | `undefined \\| { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> \\| undefined; onSelectionChange?: EventValueOrEventCallback<Event, KoliBriTableSelectionKeys> \\| undefined; onChangeHeaderCells?: EventValueOrEventCallback<Event, TableHeaderCells> \\| undefined; }` | `undefined` |\n| `_selection` | `_selection` | Defines how rows can be selected and the current selection. | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
2624
+ "code": "# kol-table-stateless\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_ariaLabelledby` | `_aria-labelledby` | References an external element by ID that serves as the accessible label for this table. Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) — use `_label` instead. | `string \\| undefined` | `undefined` |\n| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \\| string` | `undefined` |\n| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \\| string \\| undefined` | `undefined` |\n| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| undefined` | `undefined` |\n| `_hasSettingsMenu` | `_has-settings-menu` | Enables the settings menu if true (default: false). | `boolean \\| undefined` | `undefined` |\n| `_headerCells` _(required)_ | `_header-cells` | Defines the horizontal and vertical table headers. | `string \\| { horizontal?: KoliBriTableHeaderCell[][] \\| undefined; vertical?: KoliBriTableHeaderCell[][] \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_loading` | `_loading` | Wether the table shows a loading spinner (default: false). | `boolean \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for table events. | `undefined \\| { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> \\| undefined; onSelectionChange?: EventValueOrEventCallback<Event, KoliBriTableSelectionKeys> \\| undefined; onChangeHeaderCells?: EventValueOrEventCallback<Event, TableHeaderCells> \\| undefined; }` | `undefined` |\n| `_selection` | `_selection` | Defines how rows can be selected and the current selection. | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
2633
2625
  "kind": "spec"
2634
2626
  },
2635
2627
  {
@@ -2645,7 +2637,7 @@
2645
2637
  "group": "spec",
2646
2638
  "name": "textarea",
2647
2639
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/textarea.md",
2648
- "code": "# kol-textarea\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content. | `boolean \\| undefined` | `false` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this textarea. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2640
+ "code": "# kol-textarea\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content. | `boolean \\| undefined` | `false` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this textarea. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames. | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_infoPopover` | `_info-popover` | Defines the informational popover after the label. | `any` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2649
2641
  "kind": "spec"
2650
2642
  },
2651
2643
  {