@public-ui/mcp 4.1.0 → 4.1.1-rc.1
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.
- package/dist/mcp.cjs +21 -0
- package/dist/mcp.mjs +21 -0
- package/package.json +5 -5
- package/shared/sample-index.json +30 -22
package/dist/mcp.cjs
CHANGED
|
@@ -33,6 +33,7 @@ const {
|
|
|
33
33
|
name: PACKAGE_NAME = "@public-ui/mcp",
|
|
34
34
|
description: PACKAGE_DESCRIPTION
|
|
35
35
|
} = require$1("../package.json");
|
|
36
|
+
const VERSION_INFO_JSON = JSON.stringify({ name: PACKAGE_NAME, version: PACKAGE_VERSION }, null, 2);
|
|
36
37
|
const ENABLE_LOGGING = process.env.MCP_LOGGING === "true" || process.env.MCP_LOGGING === "1";
|
|
37
38
|
function log(type, message, data) {
|
|
38
39
|
if (!ENABLE_LOGGING) return;
|
|
@@ -219,6 +220,26 @@ ${PACKAGE_DESCRIPTION ?? ""}
|
|
|
219
220
|
};
|
|
220
221
|
}
|
|
221
222
|
);
|
|
223
|
+
server.registerResource(
|
|
224
|
+
"version",
|
|
225
|
+
new mcp_js.ResourceTemplate("kolibri://version", { list: void 0 }),
|
|
226
|
+
{
|
|
227
|
+
title: "KoliBri MCP Server Version",
|
|
228
|
+
description: "Get the current version of the KoliBri MCP Server"
|
|
229
|
+
},
|
|
230
|
+
(uri) => {
|
|
231
|
+
log("resource", "version accessed", { uri: uri.href });
|
|
232
|
+
return {
|
|
233
|
+
contents: [
|
|
234
|
+
{
|
|
235
|
+
uri: uri.href,
|
|
236
|
+
mimeType: "application/json",
|
|
237
|
+
text: VERSION_INFO_JSON
|
|
238
|
+
}
|
|
239
|
+
]
|
|
240
|
+
};
|
|
241
|
+
}
|
|
242
|
+
);
|
|
222
243
|
server.registerResource(
|
|
223
244
|
"best-practices",
|
|
224
245
|
new mcp_js.ResourceTemplate("kolibri://best-practices", { list: void 0 }),
|
package/dist/mcp.mjs
CHANGED
|
@@ -26,6 +26,7 @@ const {
|
|
|
26
26
|
name: PACKAGE_NAME = "@public-ui/mcp",
|
|
27
27
|
description: PACKAGE_DESCRIPTION
|
|
28
28
|
} = require$1("../package.json");
|
|
29
|
+
const VERSION_INFO_JSON = JSON.stringify({ name: PACKAGE_NAME, version: PACKAGE_VERSION }, null, 2);
|
|
29
30
|
const ENABLE_LOGGING = process.env.MCP_LOGGING === "true" || process.env.MCP_LOGGING === "1";
|
|
30
31
|
function log(type, message, data) {
|
|
31
32
|
if (!ENABLE_LOGGING) return;
|
|
@@ -212,6 +213,26 @@ ${PACKAGE_DESCRIPTION ?? ""}
|
|
|
212
213
|
};
|
|
213
214
|
}
|
|
214
215
|
);
|
|
216
|
+
server.registerResource(
|
|
217
|
+
"version",
|
|
218
|
+
new ResourceTemplate("kolibri://version", { list: void 0 }),
|
|
219
|
+
{
|
|
220
|
+
title: "KoliBri MCP Server Version",
|
|
221
|
+
description: "Get the current version of the KoliBri MCP Server"
|
|
222
|
+
},
|
|
223
|
+
(uri) => {
|
|
224
|
+
log("resource", "version accessed", { uri: uri.href });
|
|
225
|
+
return {
|
|
226
|
+
contents: [
|
|
227
|
+
{
|
|
228
|
+
uri: uri.href,
|
|
229
|
+
mimeType: "application/json",
|
|
230
|
+
text: VERSION_INFO_JSON
|
|
231
|
+
}
|
|
232
|
+
]
|
|
233
|
+
};
|
|
234
|
+
}
|
|
235
|
+
);
|
|
215
236
|
server.registerResource(
|
|
216
237
|
"best-practices",
|
|
217
238
|
new ResourceTemplate("kolibri://best-practices", { list: void 0 }),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/mcp",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.1-rc.1",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -46,18 +46,18 @@
|
|
|
46
46
|
"express": "5.2.1",
|
|
47
47
|
"fuse.js": "7.1.0",
|
|
48
48
|
"zod": "4.3.6",
|
|
49
|
-
"@public-ui/components": "4.1.
|
|
49
|
+
"@public-ui/components": "4.1.1-rc.1"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@eslint/js": "9.39.3",
|
|
53
|
-
"@modelcontextprotocol/inspector": "0.21.
|
|
53
|
+
"@modelcontextprotocol/inspector": "0.21.1",
|
|
54
54
|
"@types/express": "5.0.6",
|
|
55
|
-
"@types/node": "25.3.
|
|
55
|
+
"@types/node": "25.3.5",
|
|
56
56
|
"@typescript-eslint/eslint-plugin": "8.56.1",
|
|
57
57
|
"@typescript-eslint/parser": "8.56.1",
|
|
58
58
|
"eslint": "9.39.3",
|
|
59
59
|
"eslint-plugin-json": "4.0.1",
|
|
60
|
-
"globals": "17.
|
|
60
|
+
"globals": "17.4.0",
|
|
61
61
|
"knip": "5.85.0",
|
|
62
62
|
"nodemon": "3.1.14",
|
|
63
63
|
"prettier": "3.8.1",
|
package/shared/sample-index.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"generatedAt": "2026-
|
|
3
|
+
"generatedAt": "2026-03-06T06:18:01.612Z",
|
|
4
4
|
"buildMode": "ci",
|
|
5
5
|
"counts": {
|
|
6
|
-
"total":
|
|
6
|
+
"total": 249,
|
|
7
7
|
"totalDocs": 22,
|
|
8
8
|
"totalSpecs": 54,
|
|
9
|
-
"totalSamples":
|
|
9
|
+
"totalSamples": 155,
|
|
10
10
|
"totalScenarios": 18
|
|
11
11
|
},
|
|
12
12
|
"repo": {
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "d55009e9d7c43d98eb07f703ebef4e90a3af5d38",
|
|
14
14
|
"branch": "develop",
|
|
15
15
|
"repoUrl": "https://github.com/public-ui/kolibri"
|
|
16
16
|
}
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"group": "docs",
|
|
86
86
|
"name": "CVE_OVERVIEW",
|
|
87
87
|
"path": "docs/CVE_OVERVIEW.md",
|
|
88
|
-
"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 | 1 |\n| high | 1 | 1 | 2 | 8 |\n| moderate | 1 | 1 | 1 | 9 |\n| low | 0 | 0 | 0 | 4 |\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 | v1 | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method |\n| lodash.pick | high | CVE-2020-8203 | v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-26996 | v4, v3, v2, v1 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| playwright | high | CVE-2025-59288 | v1 | Playwright downloads and installs browsers without verifying the authenticity of |\n| qs | high | CVE-2025-15284 | v1 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| rollup | high | CVE-2026-27606 | v2, v1 | Rollup 4 has Arbitrary File Write via Path Traversal |\n| semver | high | CVE-2022-25883 | v1 | semver vulnerable to Regular Expression Denial of Service |\n| ajv | moderate | CVE-2025-69873 | v4, v3, v2, v1 | ajv has ReDoS when using `$data` option |\n| ejs | moderate | CVE-2024-33883 | v1 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v1 | esbuild enables any website to send any requests to the development server and r |\n| js-yaml | moderate | CVE-2025-64718 | v1 | js-yaml has prototype pollution in merge (<<) |\n| nanoid | moderate | CVE-2024-55565 | v1 | Predictable results in nanoid generation when given non-integer values |\n| serialize-javascript | moderate | CVE-2024-11831 | v1 | Cross-site Scripting (XSS) in serialize-javascript |\n| webpack | moderate | CVE-2024-43788 | v1 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v1 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v1 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| diff | low | CVE-2026-24001 | v1 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| qs | low | CVE-2026-2391 | v1 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| webpack | low | CVE-2025-68458 | v1 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v1 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 3 | 3 | 3 | 2 |\n| high | 8 | 8 | 12 | 18 |\n| moderate | 3 | 3 | 11 | 10 |\n| low | 1 | 1 | 6 | 4 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | -------------------------------------------------------------------------------- |\n| basic-ftp | critical | CVE-2026-27699 | v4, v3, v2, v1 | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method |\n| fast-xml-parser | critical | CVE-2026-25896 | v4, v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| locutus | critical | CVE-2026-25521 | v4, v3, v2, v1 | locutus is vulnerable to Prototype Pollution |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| axios | high | CVE-2026-25639 | v4, v3, v2 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| braces | high | CVE-2024-4068 | v4, v3, v2, v1 | Uncontrolled resource consumption in braces |\n| fast-xml-parser | high | CVE-2026-25128 | v4, v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v4, v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-26996 | v4, v3, v2, v1 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| playwright | high | CVE-2025-59288 | v1 | Playwright downloads and installs browsers without verifying the authenticity of |\n| qs | high | CVE-2025-15284 | v2, v1 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| rollup | high | CVE-2026-27606 | v4, v3, v2, v1 | Rollup 4 has Arbitrary File Write via Path Traversal |\n| semver | high | CVE-2022-25883 | v2, v1 | semver vulnerable to Regular Expression Denial of Service |\n| tar | high | CVE-2026-23950 | v1 | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on |\n| tar | high | CVE-2026-24842 | v1 | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave |\n| tar | high | CVE-2026-23745 | v1 | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins |\n| tar | high | CVE-2026-26960 | v4, v3, v2, v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| ajv | moderate | CVE-2025-69873 | v4, v3, v2, v1 | ajv has ReDoS when using `$data` option |\n| ejs | moderate | CVE-2024-33883 | v2, v1 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v2, v1 | esbuild enables any website to send any requests to the development server and r |\n| js-yaml | moderate | CVE-2025-64718 | v2, v1 | js-yaml has prototype pollution in merge (<<) |\n| micromatch | moderate | CVE-2024-4067 | v4, v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nanoid | moderate | CVE-2024-55565 | v2, v1 | Predictable results in nanoid generation when given non-integer values |\n| serialize-javascript | moderate | CVE-2024-11831 | v2, v1 | Cross-site Scripting (XSS) in serialize-javascript |\n| webpack | moderate | CVE-2024-43788 | v2, v1 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v2, v1 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v2, v1 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| diff | low | CVE-2026-24001 | v4, v3, v2, v1 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| qs | low | CVE-2026-2391 | v2, v1 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| webpack | low | CVE-2025-68458 | v2, v1 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v2, v1 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c |\n",
|
|
88
|
+
"code": "# CVE Overview\n\n> For more security information, see [SECURITY.md](./SECURITY.md)\n\n## 1. Production Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 0 | 0 | 0 |\n| high | 0 | 0 | 0 | 4 |\n| moderate | 0 | 0 | 0 | 0 |\n| low | 0 | 0 | 0 | 0 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| lodash.pick | high | CVE-2020-8203 | v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 3 | 3 | 3 | 1 |\n| high | 14 | 15 | 21 | 17 |\n| moderate | 3 | 2 | 11 | 1 |\n| low | 2 | 2 | 7 | 0 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| basic-ftp | critical | CVE-2026-27699 | v4, v3, v2 | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method |\n| fast-xml-parser | critical | CVE-2026-25896 | v4, v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| locutus | critical | CVE-2026-25521 | v4, v3, v2, v1 | locutus is vulnerable to Prototype Pollution |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-27970 | v1 | Angular i18n vulnerable to Cross-Site Scripting |\n| axios | high | CVE-2026-25639 | v3, v2 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| braces | high | CVE-2024-4068 | v4, v3, v2, v1 | Uncontrolled resource consumption in braces |\n| fast-xml-parser | high | CVE-2026-25128 | v4, v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v4, v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v4, v3, v2, v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v4, v3, v2, v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| minimatch | high | CVE-2026-26996 | v4, v3, v2 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| rollup | high | CVE-2026-27606 | v4, v3, 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| tar | high | CVE-2026-23950 | v1 | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on |\n| tar | high | CVE-2026-24842 | v1 | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave |\n| tar | high | CVE-2026-23745 | v1 | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins |\n| tar | high | CVE-2026-26960 | v4, v3, v2, v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| ajv | moderate | CVE-2025-69873 | v4, v3, v2 | ajv has ReDoS when using `$data` option |\n| ejs | moderate | CVE-2024-33883 | v2 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v2 | esbuild enables any website to send any requests to the development server and r |\n| js-yaml | moderate | CVE-2025-64718 | v2 | js-yaml has prototype pollution in merge (<<) |\n| micromatch | moderate | CVE-2024-4067 | v4, v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nanoid | moderate | CVE-2024-55565 | v2 | Predictable results in nanoid generation when given non-integer values |\n| qs | moderate | CVE-2025-15284 | v2 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| serialize-javascript | moderate | CVE-2024-11831 | v2 | Cross-site Scripting (XSS) in serialize-javascript |\n| 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| diff | low | CVE-2026-24001 | v4, v3, v2 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| fast-xml-parser | low | CVE-2026-27942 | v4, v3, v2 | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| qs | low | CVE-2026-2391 | v2 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| webpack | low | CVE-2025-68458 | v2 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v2 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c |\n",
|
|
89
89
|
"kind": "doc"
|
|
90
90
|
},
|
|
91
91
|
{
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
"group": "docs",
|
|
158
158
|
"name": "README",
|
|
159
159
|
"path": "README.md",
|
|
160
|
-
"code": "# Welcome to KoliBri\n\n[](https://www.npmjs.com/package/@public-ui/components)\n[](https://github.com/public-ui/kolibri/blob/main/LICENSE)\n[](https://www.npmjs.com/package/@public-ui/components)\n[](https://github.com/public-ui/kolibri/issues)\n[](https://github.com/public-ui/kolibri/pulls)\n[](https://bundlephobia.com/result?p=@public-ui/components)\n\n\n> \"The accessible HTML standard\"\n\n**KoliBri** stands for \"component library for accessibility\" and was released as\nopen source by the\n[Informationstechnikzentrum Bund (ITZBund)](https://itzbund.de) for reuse and\ncontinued development.\n\n## Vision\n\nTogether we make **HTML** accessible using **reusable web components** to ensure **usability** and **accessibility**.\n\n## Mission\n\nThe [HTML web standard](https://html.spec.whatwg.org) is itself very “openly” specified in order to be as long-lasting and robust as possible. It therefore often happens that HTML compositions are not easily accessible, semantic and valid.\n\nKoliBri is based directly on the [Web standards](https://www.w3.org/standards/webdesign/) of the [W3C](https://www.w3.org) (framework-agnostic), and is generic Reference implementation of the [WCAG standard](https://www.w3.org/WAI/standards-guidelines/wcag/) and the [BITV](https://www.bitvtest.de/bitv_test.html) for accessibility and implemented as a multi-theming capable presentation layer. There is no technical reference and no data transfer functionality. This means that KoliBri is equally reusable for the realization of static websites as well as dynamic web applications with different corporate designs and style guides and is therefore very interesting for open source.\n\n## Roadmap\n\nKoliBri is always actively working on improvements, new features and future-oriented innovations for the latest major release. In parallel, a selected LTS release is maintained with regard to bug fixes.\n\n| Version | Release type | Release | Period | End-of-Support |\n| ------: | :----------: | :------: | :----: | :------------: |\n| 0.x | Initial | Jul 2020 | - | Dec 2021 |\n| 1.x | LTS | Dec 2021 | 3y | Dec 2024 |\n| 2.x | LTS | Dec 2023 | 3y | Dec 2026 |\n| 3.x | STS | Dec 2024 | 15m |
|
|
160
|
+
"code": "# Welcome to KoliBri\n\n[](https://www.npmjs.com/package/@public-ui/components)\n[](https://github.com/public-ui/kolibri/blob/main/LICENSE)\n[](https://www.npmjs.com/package/@public-ui/components)\n[](https://github.com/public-ui/kolibri/issues)\n[](https://github.com/public-ui/kolibri/pulls)\n[](https://bundlephobia.com/result?p=@public-ui/components)\n\n\n> \"The accessible HTML standard\"\n\n**KoliBri** stands for \"component library for accessibility\" and was released as\nopen source by the\n[Informationstechnikzentrum Bund (ITZBund)](https://itzbund.de) for reuse and\ncontinued development.\n\n## Vision\n\nTogether we make **HTML** accessible using **reusable web components** to ensure **usability** and **accessibility**.\n\n## Mission\n\nThe [HTML web standard](https://html.spec.whatwg.org) is itself very “openly” specified in order to be as long-lasting and robust as possible. It therefore often happens that HTML compositions are not easily accessible, semantic and valid.\n\nKoliBri is based directly on the [Web standards](https://www.w3.org/standards/webdesign/) of the [W3C](https://www.w3.org) (framework-agnostic), and is generic Reference implementation of the [WCAG standard](https://www.w3.org/WAI/standards-guidelines/wcag/) and the [BITV](https://www.bitvtest.de/bitv_test.html) for accessibility and implemented as a multi-theming capable presentation layer. There is no technical reference and no data transfer functionality. This means that KoliBri is equally reusable for the realization of static websites as well as dynamic web applications with different corporate designs and style guides and is therefore very interesting for open source.\n\n## Roadmap\n\nKoliBri is always actively working on improvements, new features and future-oriented innovations for the latest major release. In parallel, a selected LTS release is maintained with regard to bug fixes.\n\n| Version | Release type | Release | Period | End-of-Support |\n| ------: | :----------: | :------: | :----: | :------------: |\n| 0.x | Initial | Jul 2020 | - | Dec 2021 |\n| 1.x | LTS | Dec 2021 | 3y | Dec 2024 |\n| 2.x | LTS | Dec 2023 | 3y | Dec 2026 |\n| 3.x | STS | Dec 2024 | 15m | Mar 2026 |\n| 4.x | LTS | Dec 2025 | 3y | Dec 2028 |\n| 5.x | STS | Dec 2026 | 15m | Mar 2028 |\n\n```mermaid\ngantt\n title LTS & STS\n dateFormat YYYY-MM-DD\n\n 0.x Initial implementation :, 2020-07-01, 17M\n 1.x (LTS) :, 2021-12-01, 3y\n 2.x (LTS) :, 2023-12-01, 3y\n 3.x (STS) :crit , 2024-12-01, 15M\n 4.x (LTS) :, 2025-12-01, 3y\n 5.x (STS) :crit , 2026-12-01, 15M\n 6.x (LTS) :, 2027-12-01, 3y\n\n```\n\n## Installation\n\nInstall the packages with [pnpm](https://pnpm.io):\n\n```bash\npnpm install\n```\n\nRun the build once to generate the components:\n\n```bash\npnpm -r build\n```\n\n### Quick start\n\nInstall the default theme and register the components:\n\n```ts\npnpm add @public-ui/components @public-ui/theme-default\n\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nregister(DEFAULT, defineCustomElements);\n```\n\n### Avoid CSS Custom Property Collisions\n\nKoliBri themes expose a few CSS custom properties so consumers can adapt the look and feel.\nBecause these properties remain global—even inside a Shadow DOM—using too many of them can\nclash with variables defined on the host page.\n\nUse namespaced custom properties only for values that must be overridden from the outside.\nFor internal calculations rely on SASS variables instead of additional CSS properties.\nThis keeps components robust and prevents unexpected style leaks.\n\n## Collaboration and cooperation\n\nThe **focus** of KoliBri is on **small** (atomic), very **flexible** and highly **reusable** HTML compositions (e.g. buttons). We offer an accessible, semantic and valid standard implementation of such components that can be reused for any higher-level HTML structure or component (molecule, organism or template).\nThese atomic components are where we should **collaborate** and **cooperate** to combine our skills and knowledge. The synergy effects on the basic components allow you to focus more on subject-specific content.\n\nLet's make KoliBri **better** and **more colorful** together!\n\n> Continue [to **Documentation**](https://public-ui.github.io/en/)…\n\n## Contributing\n\nBug reports and pull requests are welcome. Please read our [contribution guide](./CONTRIBUTING.md) before getting started.\n\n## SLSA/Provenance\n\nWe aim for **SLSA Build Level 3** for the npm packages published from this repository. Releases are built in GitHub Actions with OIDC-based identity and published with npm provenance (`--provenance`), producing verifiable attestations for the published artifacts. See the [publish workflow](./.github/workflows/publish.yml) for the release steps and npm provenance configuration.\n\n**Verification example**\n\n```bash\n# Inspect provenance metadata for a published package\npnpm view @public-ui/components dist.provenance\n\n# (Optional) Verify signatures/provenance if your npm client supports it\npnpm audit signatures --package=@public-ui/components@<version>\n```\n\n## Resources\n\n- [Get Started](https://public-ui.github.io/en/docs/get-started/first-steps)\n- [Contributing](./CONTRIBUTING.md)\n- [Code of Conduct](./CODE_OF_CONDUCT.md)\n- [Known Issues](http://public-ui.github.io/en/docs/known-issues)\n- [Security](./docs/SECURITY.md)\n",
|
|
161
161
|
"kind": "doc"
|
|
162
162
|
},
|
|
163
163
|
{
|
|
@@ -240,14 +240,6 @@
|
|
|
240
240
|
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { AlertVariants } from './basic';\n\nexport const AlertCardMsg: FC = () => (\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>card</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<section className=\"w-full\">\n\t\t\t<AlertVariants variant=\"card\" />\n\t\t</section>\n\t</>\n);\n",
|
|
241
241
|
"kind": "sample"
|
|
242
242
|
},
|
|
243
|
-
{
|
|
244
|
-
"id": "sample/alert/html",
|
|
245
|
-
"group": "alert",
|
|
246
|
-
"name": "html",
|
|
247
|
-
"path": "packages/samples/react/src/components/alert/html.tsx",
|
|
248
|
-
"code": "import React from 'react';\n\nimport { KolAlert, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AlertHtml: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolAlert can be used with arbitrary HTML as slot content.</p>\n\t\t</SampleDescription>\n\n\t\t<div>\n\t\t\t<KolAlert _label=\"Output of HTML code in the alert\" _type=\"info\">\n\t\t\t\t<div className=\"mt-2 mb-3\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"An H2 heading is output here\" />\n\t\t\t\t</div>\n\t\t\t\t<div className=\"grid gap-4 sm:grid-cols-2\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3>Text in a left-hand column</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem sed fugiat dolorum ratione et, ullam officia nobis nihil debitis, consectetur\n\t\t\t\t\t\t\tdicta accusantium. Vitae debitis, quibusdam vel recusandae deleniti placeat dolorem?\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3>Text in einer rechten Spalte</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem, ipsum dolor sit amet consectetur adipisicing elit. Quod beatae officiis, velit nam dicta quae repellat perspiciatis explicabo illo.\n\t\t\t\t\t\t\tPossimus, molestiae deleniti! Exercitationem blanditiis ducimus similique tempora ratione consequuntur eaque!\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</KolAlert>\n\t\t</div>\n\t</>\n);\n",
|
|
249
|
-
"kind": "sample"
|
|
250
|
-
},
|
|
251
243
|
{
|
|
252
244
|
"id": "sample/avatar/basic",
|
|
253
245
|
"group": "avatar",
|
|
@@ -317,7 +309,7 @@
|
|
|
317
309
|
"group": "button-link",
|
|
318
310
|
"name": "image",
|
|
319
311
|
"path": "packages/samples/react/src/components/button-link/image.tsx",
|
|
320
|
-
"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 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<
|
|
312
|
+
"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",
|
|
321
313
|
"kind": "sample"
|
|
322
314
|
},
|
|
323
315
|
{
|
|
@@ -589,7 +581,7 @@
|
|
|
589
581
|
"group": "image",
|
|
590
582
|
"name": "basic",
|
|
591
583
|
"path": "packages/samples/react/src/components/image/basic.tsx",
|
|
592
|
-
"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
|
|
584
|
+
"code": "import { KolImage } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ImageBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolImage renders an image. The sample shows an image with alternative text.</p>\n\t\t</SampleDescription>\n\n\t\t<KolImage\n\t\t\t_alt=\"KoliBri design system illustration showing three people working on laptops surrounded by UI components, charts, and the KoliBri hummingbird logo\"\n\t\t\t_src=\"sample-image.png\"\n\t\t\tclassName=\"w-image\"\n\t\t/>\n\t</>\n);\n",
|
|
593
585
|
"kind": "sample"
|
|
594
586
|
},
|
|
595
587
|
{
|
|
@@ -917,7 +909,7 @@
|
|
|
917
909
|
"group": "link",
|
|
918
910
|
"name": "image",
|
|
919
911
|
"path": "packages/samples/react/src/components/link/image.tsx",
|
|
920
|
-
"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 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<
|
|
912
|
+
"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",
|
|
921
913
|
"kind": "sample"
|
|
922
914
|
},
|
|
923
915
|
{
|
|
@@ -989,7 +981,7 @@
|
|
|
989
981
|
"group": "popover-button",
|
|
990
982
|
"name": "basic",
|
|
991
983
|
"path": "packages/samples/react/src/components/popover-button/basic.tsx",
|
|
992
|
-
"code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst buttonRef = React.useRef<HTMLKolPopoverButtonElement | null>(null);\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Show',\n\t\t\t_icons: 'kolicon-eye',\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\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Add',\n\t\t\t_icons: 'kolicon-plus',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\tuseEffect(() => {\n\t\t// Ensure the popover is closed on initial render\n\t\tif (buttonRef.current) {\n\t\t\tbuttonRef.current.showPopover();\n\t\t\tbuttonRef.current.focus();\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 PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,\n\t\t\t\t\tright, bottom, left) using the <code>_popoverAlign</code> prop.\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<KolPopoverButton _label={'Actions'} _variant=\"primary\" _icons={{ right: 'kolicon-chevron-down' }} ref={buttonRef}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolPopoverButton>\n\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t<p>\n\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\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
984
|
+
"code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst buttonRef = React.useRef<HTMLKolPopoverButtonElement | null>(null);\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Show',\n\t\t\t_icons: 'kolicon-eye',\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\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Add',\n\t\t\t_icons: 'kolicon-plus',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\tuseEffect(() => {\n\t\t// Ensure the popover is closed on initial render\n\t\tif (buttonRef.current) {\n\t\t\tbuttonRef.current.showPopover();\n\t\t\tbuttonRef.current.focus();\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 PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,\n\t\t\t\t\tright, bottom, left) using the <code>_popoverAlign</code> prop.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"flex flex-col gap-4 items-center\">\n\t\t\t\t<KolPopoverButton _label={'Actions'} _variant=\"primary\" _icons={{ right: 'kolicon-chevron-down' }} ref={buttonRef}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolPopoverButton>\n\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t<p>\n\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\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
993
985
|
"kind": "sample"
|
|
994
986
|
},
|
|
995
987
|
{
|
|
@@ -1005,7 +997,15 @@
|
|
|
1005
997
|
"group": "progress",
|
|
1006
998
|
"name": "basic",
|
|
1007
999
|
"path": "packages/samples/react/src/components/progress/basic.tsx",
|
|
1008
|
-
"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 "bar" and "cycle" 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</div>\n\t</>\n);\n",
|
|
1000
|
+
"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 "bar" and "cycle" 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",
|
|
1001
|
+
"kind": "sample"
|
|
1002
|
+
},
|
|
1003
|
+
{
|
|
1004
|
+
"id": "sample/progress/changing",
|
|
1005
|
+
"group": "progress",
|
|
1006
|
+
"name": "changing",
|
|
1007
|
+
"path": "packages/samples/react/src/components/progress/changing.tsx",
|
|
1008
|
+
"code": "import React, { useState } from 'react';\n\nimport { KolProgress } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ProgressChanging: FC = () => {\n\tconst [val, setVal] = useState<number>(5);\n\tconst [max, setMax] = useState<number>(10);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This shows that values can be changed and that they are clamped at max value (here at 10).</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<fieldset title=\"changing\" className=\"flex flex-col gap-4\">\n\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t<button onClick={() => setVal(-2)}>set -2</button>\n\t\t\t\t\t<button onClick={() => setVal(5)}>set 5</button>\n\t\t\t\t\t<button onClick={() => setVal(13)}>set 13</button>\n\n\t\t\t\t\t<button onClick={() => setMax(-1)}>change max to -1</button>\n\t\t\t\t\t<button onClick={() => setMax(5)}>change max to 5</button>\n\t\t\t\t\t<button onClick={() => setMax(10)}>change max to 10</button>\n\t\t\t\t</div>\n\n\t\t\t\t<KolProgress _label={`Showing ${val} of ${max}`} _variant=\"bar\" _max={max} _value={val}></KolProgress>\n\t\t\t\t<KolProgress _variant=\"cycle\" _max={max} _value={val}></KolProgress>\n\t\t\t</fieldset>\n\t\t</>\n\t);\n};\n",
|
|
1009
1009
|
"kind": "sample"
|
|
1010
1010
|
},
|
|
1011
1011
|
{
|
|
@@ -1136,6 +1136,14 @@
|
|
|
1136
1136
|
"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 °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",
|
|
1137
1137
|
"kind": "sample"
|
|
1138
1138
|
},
|
|
1139
|
+
{
|
|
1140
|
+
"id": "sample/table/highlight-row",
|
|
1141
|
+
"group": "table",
|
|
1142
|
+
"name": "highlight-row",
|
|
1143
|
+
"path": "packages/samples/react/src/components/table/highlight-row.tsx",
|
|
1144
|
+
"code": "import type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolInputNumber, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst ROWS_COUNT = 10;\n\ntype DataRow = {\n\tid: number;\n\tname: string;\n\temail: string;\n\tstatus: string;\n};\n\nconst FIRST_NAMES = [\n\t'Max',\n\t'Erika',\n\t'John',\n\t'Jane',\n\t'Peter',\n\t'Anna',\n\t'Michael',\n\t'Sarah',\n\t'Thomas',\n\t'Lisa',\n\t'Daniel',\n\t'Maria',\n\t'Christian',\n\t'Laura',\n\t'Stefan',\n\t'Julia',\n\t'Andreas',\n\t'Sophie',\n\t'Markus',\n\t'Emma',\n];\nconst LAST_NAMES = [\n\t'Mustermann',\n\t'Musterfrau',\n\t'Doe',\n\t'Smith',\n\t'Schmidt',\n\t'Müller',\n\t'Weber',\n\t'Meyer',\n\t'Wagner',\n\t'Becker',\n\t'Fischer',\n\t'Schneider',\n\t'Hoffmann',\n\t'Koch',\n\t'Bauer',\n\t'Richter',\n\t'Klein',\n\t'Wolf',\n\t'Schröder',\n\t'Neumann',\n];\nconst STATUSES = ['active', 'inactive', 'pending'];\n\nconst generateData = (count: number): DataRow[] => {\n\treturn Array.from({ length: count }, (_, i) => {\n\t\tconst firstName = FIRST_NAMES[i % FIRST_NAMES.length];\n\t\tconst lastName = LAST_NAMES[Math.floor(i / FIRST_NAMES.length) % LAST_NAMES.length];\n\t\tconst status = STATUSES[i % STATUSES.length];\n\t\tconst id = i + 1;\n\n\t\treturn {\n\t\t\tid,\n\t\t\tname: `${firstName} ${lastName}`,\n\t\t\temail: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${id > 20 ? id : ''}@example.com`,\n\t\t\tstatus,\n\t\t};\n\t});\n};\n\nconst DATA: DataRow[] = generateData(ROWS_COUNT);\n\nexport const TableHighlightRow: FC = () => {\n\tconst [highlightIndex, setHighlightIndex] = React.useState(2); // Index of the row to highlight (0-based)\n\tconst headers = React.useMemo<KoliBriTableHeaders>(() => {\n\t\tconst createRenderFn = (dataKey: keyof DataRow) => (el: HTMLElement, data: KoliBriTableDataType) => {\n\t\t\tconst rowData = data.data as DataRow;\n\t\t\tif (rowData.id === highlightIndex + 1) {\n\t\t\t\tel.textContent = '';\n\t\t\t\tconst strong = document.createElement('strong');\n\t\t\t\tstrong.textContent = String(rowData[dataKey]);\n\t\t\t\tel.appendChild(strong);\n\t\t\t} else {\n\t\t\t\tel.textContent = String(rowData[dataKey]);\n\t\t\t}\n\t\t};\n\n\t\tconst createCompareFn = (key: keyof DataRow) => (data0: unknown, data1: unknown) => {\n\t\t\tconst val0 = (data0 as DataRow)[key];\n\t\t\tconst val1 = (data1 as DataRow)[key];\n\t\t\tif (typeof val0 === 'number' && typeof val1 === 'number') {\n\t\t\t\treturn val0 - val1;\n\t\t\t}\n\t\t\tif (typeof val0 === 'string' && typeof val1 === 'string') {\n\t\t\t\treturn val0.localeCompare(val1, 'de');\n\t\t\t}\n\t\t\treturn 0;\n\t\t};\n\n\t\treturn {\n\t\t\thorizontal: [\n\t\t\t\t[\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: 'id',\n\t\t\t\t\t\tlabel: 'ID',\n\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\twidth: 60,\n\t\t\t\t\t\tcompareFn: createCompareFn('id'),\n\t\t\t\t\t\trender: createRenderFn('id'),\n\t\t\t\t\t\tsortDirection: 'ASC',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: 'name',\n\t\t\t\t\t\tlabel: 'Name',\n\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\tcompareFn: createCompareFn('name'),\n\t\t\t\t\t\trender: createRenderFn('name'),\n\t\t\t\t\t\tsortDirection: 'ASC',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: 'email',\n\t\t\t\t\t\tlabel: 'E-Mail',\n\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\tcompareFn: createCompareFn('email'),\n\t\t\t\t\t\trender: createRenderFn('email'),\n\t\t\t\t\t\tsortDirection: 'ASC',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: 'status',\n\t\t\t\t\t\tlabel: 'Status',\n\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\twidth: 100,\n\t\t\t\t\t\tcompareFn: createCompareFn('status'),\n\t\t\t\t\t\trender: createRenderFn('status'),\n\t\t\t\t\t\tsortDirection: 'ASC',\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t],\n\t\t} satisfies KoliBriTableHeaders;\n\t}, [highlightIndex]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates how to programmatically highlight a specific row in a table. You can change the highlighted row by using the input field\n\t\t\t\t\tabove the table.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tThe highlighting is achieved by using a custom <code>render</code> function for each column, which checks if the current row's ID matches the selected\n\t\t\t\t\thighlight index and applies bold styling.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"flex flex-col gap-4\">\n\t\t\t\t<KolInputNumber\n\t\t\t\t\tclassName=\"self-start\"\n\t\t\t\t\t_label=\"Highlight Row Index\"\n\t\t\t\t\t_value={highlightIndex}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonInput: (_, value) => setHighlightIndex(Number(value)),\n\t\t\t\t\t}}\n\t\t\t\t\t_min={0}\n\t\t\t\t\t_max={ROWS_COUNT - 1}\n\t\t\t\t/>\n\t\t\t\t<KolTableStateful _label=\"Benutzerverwaltung mit Hervorhebung\" _headers={headers} _data={DATA} className=\"block\" />\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
|
|
1145
|
+
"kind": "sample"
|
|
1146
|
+
},
|
|
1139
1147
|
{
|
|
1140
1148
|
"id": "sample/table/horizontal-scrollbar",
|
|
1141
1149
|
"group": "table",
|
|
@@ -1173,7 +1181,7 @@
|
|
|
1173
1181
|
"group": "table",
|
|
1174
1182
|
"name": "pagination-position",
|
|
1175
1183
|
"path": "packages/samples/react/src/components/table/pagination-position.tsx",
|
|
1176
|
-
"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
|
|
1184
|
+
"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></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",
|
|
1177
1185
|
"kind": "sample"
|
|
1178
1186
|
},
|
|
1179
1187
|
{
|
|
@@ -1725,7 +1733,7 @@
|
|
|
1725
1733
|
"group": "spec",
|
|
1726
1734
|
"name": "image",
|
|
1727
1735
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/image.md",
|
|
1728
|
-
"code": "# kol-image\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ------------------- | ---------- | ----------------------------------------------------------------------------- | -------------------------------- | ----------- |\n| `_alt` _(required)_ | `_alt` |
|
|
1736
|
+
"code": "# kol-image\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ------------------- | ---------- | ----------------------------------------------------------------------------- | -------------------------------- | ----------- |\n| `_alt` _(required)_ | `_alt` | Sets the alternative text of the image. | `string` | `undefined` |\n| `_loading` | `_loading` | Defines the loading mode for the image. | `\"eager\" \\| \"lazy\" \\| undefined` | `undefined` |\n| `_sizes` | `_sizes` | Defines the image sizes for different screen resolutions, supporting _srcset. | `string \\| undefined` | `undefined` |\n| `_src` _(required)_ | `_src` | Sets the image `src` attribute to the given string. | `string` | `undefined` |\n| `_srcset` | `_srcset` | Sets a list of source URLs with widths of the images. | `string \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
|
|
1729
1737
|
"kind": "spec"
|
|
1730
1738
|
},
|
|
1731
1739
|
{
|
|
@@ -1869,7 +1877,7 @@
|
|
|
1869
1877
|
"group": "spec",
|
|
1870
1878
|
"name": "progress",
|
|
1871
1879
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/progress.md",
|
|
1872
|
-
"code": "# kol-progress\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------- | ----------- |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string \\| undefined` | `undefined` |\n| `_max` _(required)_ | `_max` | Defines the maximum value of the element. | `number` | `undefined` |\n| `_unit` | `_unit` | Defines the unit of the step values (not shown). | `string \\| undefined` | `
|
|
1880
|
+
"code": "# kol-progress\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------- | ----------- |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string \\| undefined` | `undefined` |\n| `_max` _(required)_ | `_max` | Defines the maximum value of the element. | `number` | `undefined` |\n| `_unit` | `_unit` | Defines the unit of the step values (not shown). | `string \\| undefined` | `undefined` |\n| `_value` _(required)_ | `_value` | Defines the value of the element. | `number` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"bar\" \\| \"cycle\" \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
|
|
1873
1881
|
"kind": "spec"
|
|
1874
1882
|
},
|
|
1875
1883
|
{
|