@public-ui/mcp 4.3.0-rc.5 β 4.3.0-rc.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.cjs +4 -1
- package/dist/cli.mjs +4 -1
- package/dist/mcp.cjs +503 -31
- package/dist/mcp.d.cts +1 -1
- package/dist/mcp.d.mts +1 -1
- package/dist/mcp.d.ts +1 -1
- package/dist/mcp.mjs +502 -31
- package/package.json +14 -11
- package/shared/sample-index.json +46 -22
package/shared/sample-index.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"generatedAt": "2026-07-
|
|
3
|
+
"generatedAt": "2026-07-31T10:00:51.176Z",
|
|
4
4
|
"buildMode": "ci",
|
|
5
5
|
"counts": {
|
|
6
|
-
"total":
|
|
7
|
-
"totalDocs":
|
|
6
|
+
"total": 331,
|
|
7
|
+
"totalDocs": 62,
|
|
8
8
|
"totalSpecs": 53,
|
|
9
|
-
"totalSamples":
|
|
9
|
+
"totalSamples": 197,
|
|
10
10
|
"totalScenarios": 19
|
|
11
11
|
},
|
|
12
12
|
"repo": {
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "0619d2cf155aa17b6a08abd044505e971e512c78",
|
|
14
14
|
"branch": "develop",
|
|
15
15
|
"repoUrl": "https://github.com/public-ui/kolibri"
|
|
16
16
|
}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"group": "docs",
|
|
22
22
|
"name": "AGENTS",
|
|
23
23
|
"path": "AGENTS.md",
|
|
24
|
-
"code": "# Agent Instructions\n\nThis repository is a monorepo managed with **pnpm** and **Nx**. It contains multiple packages under `packages/` such as web components, themes, adapters, samples and tooling.\n\n## Handling hints\n\nWe have a monorepo structure with multiple packages, each with its own `package.json`. The root `package.json` contains shared dependencies and scripts. Use `pnpm` commands to manage dependencies and run scripts across packages.\n\n- To install dependencies, use `pnpm i` at the root level. This will install all dependencies for all packages.\n- If you change a dependency in a package:\n - Use only exact version numbers in `package.json`. Other peers will not be able to use the package if you can use a range version.\n - You need to run `pnpm i` at the root level. This updates the lockfile and ensures all packages are using the correct versions.\n- Never add a `packageManager` field to any `package.json` file.\n- Avoid that branch name may contain hidden characters.\n- If something does not work, check in the event of an error whether all dependent submodules have been built.\n- To build a single package faster, run commands with downstream dependents using `pnpm --filter ...<package>` (e.g., `pnpm --filter ...@public-ui/sample-react build`).\n\n## π¨ Format-first rule\n\n> **Stop before you commit:** run the formatter so CI never rejects your patch for style drift.\n\n1. Run `pnpm format` from the repo root whenever you change code, docs or configs.\n2. If you only touched one package, you may instead run `pnpm --filter <package> format` for a quicker pass.\n3. Re-stage the affected files (`git add -u`) so the formatted result is what lands in the commit.\n\nNo package scripts in this repo need extra flags such as `-- --write`; the scripts already know when to write changes versus just check.\n\n## Semantic Versioning\n\nThis repository follows **Semantic Versioning** (SemVer) for all packages. Each package version is defined in its own `package.json` file. The versioning scheme is as follows:\n\n- **Major version**: Incremented for incompatible API changes.\n- **Minor version**: Incremented for adding functionality in a backwards-compatible manner.\n- **Patch version**: Incremented for backwards-compatible bug fixes.\n\nIf we deprecate a feature, we will mark it as deprecated in the code and documentation, but we will not remove it immediately. Instead, we will provide a migration guide (migration\\*.md) for users to transition to the new feature. Also we provide a migration tool in the `packages/tools/kolibri-cli` package to help with the migration process. You have to add a migration task from the previous version to the new version in the `packages/tools/kolibri-cli/src/migrations` folder. In the migration package, are a lot of migration tasks already implemented, so you can use them as a reference.\n\n## Project Structure\n\n- `packages/components` β Stencil based web components\n - `packages/components/src/component` β components\n - `packages/components/src/schema` β schema definitions for all components\n- `packages/samples` β sample applications demonstrating usage\n - `packages/samples/angular` β Angular sample app; do not edit\n - `packages/samples/react` β React sample app; all samples; write component samples here\n- `packages/adapters/*` β generated framework integration packages; do not edit\n- `packages/themes` β style themes and assets\n - `packages/themes/default` β primary maintained standard theme\n - All other themes are not actively maintained\n- `packages/tools/kolibri-cli` β helper CLI for migration\n- Documentation lives in `docs/`.\n- Do always ignore and do not edit all `assets` folders in all packages, as these are generated by the build process and should not be edited manually. If you need to change something in the assets, you have to change it in the source code and rebuild the package.\n\n## Theming\n\nThe theming is realized with adopted style sheets on web components and will be adopted at the mounted hook of the components. All following styling rules are only relevant for the `components` and `themes` packages.\n\n### The 5 styling layers\n\n1. **A11y Preset layer**: This layer comes out of the `adopted-style-sheets` package and contains the basic styles for accessibility. It is applied to all components.\n2. **Basis Global layer**: This layer contains the basis global styles for all components and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n3. **Basis Component layer**: This layer contains the basis styles for one component and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n4. **Theme Global layer**: This layer contains the global styles for all components of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n5. **Theme Component layer**: This layer contains the component specific styles for one component of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n\n### Global accessibility styles\n\n```css\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: #{rem(44)};\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of rem(44).\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\t.kol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n```\n\n### Styling rules\n\nThe basis global layer set the default font-size and box-sizing for all components.\n\n```css\n@layer kol-global {\n\t:host {\n\t\tfont-size: rem(16);\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n ...\n}\n```\n\n### Custom Theming rules\n\nThe custom theme layer is used to set the colors and other theme specific styles. The custom theme layer should not contain any layout styles, as these are already set in the basis global and component layers.\n\nFor example, generally the font-family is set in the theme global layer, on the `:host` element, so that all components inherit the font-family from the theme. The font-size is set in the basis global layer, so that all components inherit the font-size from the basis global layer. But it is possible to set a other base font-size in the theme global layer, if needed.\n\n```css\n@layer kol-theme-global {\n\t:host {\n\t\t--font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n\t\t--font-size: var(--kolibri-font-size, #{rem(16)});\n ...\n\t}\n\n\t:host {\n\t\tfont-size: var(--font-size);\n\n\t\t* {\n\t\t\tfont-family: var(--font-family);\n\t\t}\n\t}\n ...\n}\n```\n\nIn the theme component layer, you can set what ever you need to realize your own custom style guidelines. For example, you can set the colors, borders, shadows, etc. for the component.\n\n```css\n@layer kol-theme-component {\n ...\n}\n```\n\n### CSS Custom Properties and SASS Variables\n\nCSS custom properties remain part of the global cascade and are not isolated by the Shadow DOM.\nOverusing them in theme files can collide with variables defined on a host page.\nExpose only wellβprefixed design tokens as custom properties and rely on SASS variables for\ninternal calculations to keep components robust and avoid unintended style leaks.\n\n### SCSS Architecture Guidelines: BEM with Smart Nesting\n\nWhen writing component theme styles, follow these principles for clean, maintainable SCSS:\n\n#### 1. **Flat BEM Structure (Root Level)**\n\nAll BEM modifiers and independent elements belong at **root level** of the mixin. Never nest BEM class names:\n\n```scss\n@mixin kol-alert-theme {\n\t// β
All BEM selectors on root (flat)\n\t.kol-alert { ... }\n\t.kol-alert--variant-msg { ... }\n\t.kol-alert--variant-card { ... }\n\t.kol-alert--type-default { ... }\n\t.kol-alert__container { ... }\n\t.kol-alert__heading { ... }\n}\n```\n\n**Why?** BEM classnames are independent selectors. Each class should be predictable and flat.\n\n#### 2. **Contextual Nesting (When Variants Change Element Behavior)**\n\nNest **only when a modifier changes how a child element behaves**. Keep all rules for an element together:\n\n```scss\n.kol-alert__closer {\n\tplace-self: center;\n\n\t.kol-button {\n\t\tborder-radius: 50%;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t\tcursor: pointer;\n\n\t\t// β
Variant changes button styling - nest here\n\t\t.kol-alert--variant-msg & {\n\t\t\t--text-color: var(--alert-accent-color);\n\t\t}\n\n\t\t.kol-alert--variant-card & {\n\t\t\t--text-color: var(--color-light);\n\t\t}\n\t}\n}\n```\n\n**Rule of thumb**: All rules for `.kol-button` in `.kol-alert__closer` stay in one place. This keeps related styles together and makes maintenance easier.\n\n#### 3. **Never Use `$root` or `@at-root`**\n\nβ **Outdated pattern (removed):**\n\n```scss\n.kol-alert {\n\t$root: &;\n\t&__closer {\n\t\t@at-root #{$root}--variant-msg & { ... }\n\t}\n}\n```\n\nβ
**Modern pattern (direct nesting):**\n\n```scss\n.kol-alert__closer {\n\t.kol-button {\n\t\t.kol-alert--variant-msg & { ... }\n\t}\n}\n```\n\nThis is clearer and doesn't require Sass variable gymnastics.\n\n#### 4. **Structure Template**\n\n```scss\n@mixin kol-component-theme {\n\t// 1. Base component (no children)\n\t.kol-component {\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t}\n\n\t// 2. All BEM modifiers at root (flat)\n\t.kol-component--variant-a {\n\t\t...\n\t}\n\n\t.kol-component--type-default {\n\t\t...\n\t}\n\n\t// 3. Elements with contextual nesting for variants\n\t.kol-component__heading {\n\t\tfont-weight: bold;\n\n\t\t.kol-component--variant-a & {\n\t\t\tcolor: red;\n\t\t}\n\t}\n\n\t.kol-component__content {\n\t\tpadding: 1rem;\n\n\t\t.kol-component--variant-a & {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t// 4. Child components with variant context\n\t.kol-component__button {\n\t\t.kol-button {\n\t\t\tcursor: pointer;\n\n\t\t\t.kol-component--variant-a & {\n\t\t\t\t--text-color: var(--accent);\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\n### General rules for custom themes\n\n- Do not use `!important` in your styles, as this will override the styles of the basis global and component layers.\n- Do only overwrite styling definitions you will really customize. Do not set styling definitions that are already set (redundant) in the basis global and component layers, as this will override the styles of the basis global and component layers.\n- Do not `inherit` styles over the `:host` element, as this will override the styles of the basis global and component layers. This makes your component less robust from outside environment styles. Only the `kol-icon` inherits some specific styles, like `color`, `font-size`, `font-family` and `line-height`, as these are needed for the icon to be displayed correctly inline to this neighbored elements.\n- Do not set the default `font-family`, `font-size` or `box-sizing` in the basis or theme component layer (redundant), as these are already set in the basis global layers. If you need to set a different font-family or font-size, you can do this in the theme global layer.\n- Do not set `margin` or `padding` in the basis global and component layers. If you need to set a different margin or padding, you can do this in the theme global or component layers.\n- Do not use `overflow: hidden` in styling or theming, as it often causes issues for reuse and should be avoided.\n- **Do not use `@layer` declarations in utility files**: Helper files, mixin files, and partial files (starting with `_`) should not contain `@layer` declarations. These files are utilities and should be layer-agnostic. This is enforced by the custom Stylelint rule `kolibri/no-layer-in-utility-files`.\n- **Never use `$root` variables or `@at-root` in component mixins**: All selectors should be explicit. Use direct child/descendant nesting only when a modifier changes element behavior within a specific context.\n\n## Samples\n\nThe samples are located in `packages/samples/react` and demonstrate how to use the components in react. Each component has its own folder and the basic sample are in `basic.tsx`. Other stories can be added in the same folder. All samples of a component are registered in the `routes.ts` file.\n\n## Coding Conventions\n\n- Formatting is enforced via **Prettier** with settings defined in `prettier.config.js` (print width 160, single quotes, tabs).\n- `.editorconfig` sets `indent_style = tab` and `max_line_length = 160` for code files. Markdown and YAML files use spaces.\n- ESLint and Stylelint are run using `pnpm lint`. Lint rules should **not** be disabled via inline comments. Instead, describe the problem and work towards a clean solution.\n- Lists and enumerations in code should be kept in alphanumeric order. This also applies to import specifiers and union type literals.\n- Do not disable ESLint, Stylelint or TypeScript rules inline. Fix the code instead of turning such rules off.\n- ESLint and Stylelint are run using `pnpm lint`.\n- Lists and enumerations in code should be kept in alphabetical order (see `docs/tutorials/NEW_COMPONENT.md`).\n- Commit messages follow the **Conventional Commits** specification.\n- See also the [Contributing Guide](CONTRIBUTING.md) for more details on coding conventions and best practices.\n- Spell \"KoliBri\" with this casing in all documentation and code. The only exception is the component named KolKolibri.\n- Use ESM import syntax in browser code and scripts whenever supported, instead of `require` imports.\n- Do not create barrel files (e.g. `index.ts` that re-export modules). Import modules directly instead.\n- Do not place constant declarations before import statements; imports must always be at the very top of the file.\n- **Scripts must be platform-independent**: All scripts in the `scripts/` folder must work on Windows, macOS, and Linux without requiring external tools or platform-specific dependencies. Use Node.js built-in modules instead of external command-line tools like `rg`, `grep`, `find`, etc.\n\n## Linting and Formatting\n\n- Run `pnpm lint` to check for linting errors across all packages. This script runs ESLint, Stylelint and TypeScript checks.\n - β οΈ **Note**: TypeScript type checking in the lint script can require built artifacts. If you've made source code changes, lint will handle any necessary compilation. Explicit pre-build is typically unnecessary.\n - You can try to automatically fix linting issues with `pnpm lint:eslint --fix`, but this may not resolve all issues.\n- Run `pnpm format` to format all code files using Prettier. You can try to automatically fix linting issues with `pnpm format -w`, but this may not resolve all issues.\n- If your pull request only modifies Markdown files, skip `pnpm build`, `pnpm lint` and `pnpm test`. Just format the Markdown using `pnpm format` or Prettier.\n\n### Pre-commit checklist\n\n- **Always run `pnpm format` (or `pnpm --filter <package> format` for a single workspace) right before committing.** Formatting failures are one of the most common reasons for blocked quality gates, so make this the last step before `git commit` even for documentation-only changes.\n- **For SCSS changes**: Always run `pnpm lint:stylelint --fix` (or `pnpm --filter <package> lint:stylelint --fix`) to automatically correct formatting, property order, and selector structure rules before committing. This ensures compliance with BEM structure and style consistency.\n- After formatting, re-stage affected files with `git add -u` so the formatted content is what gets committed.\n\n## Testing\n\n- Run `pnpm test` from the repository root to execute all unit and integration tests.\n - β οΈ **Note**: Test runners (Vitest, Jest, Playwright, etc.) execute an implicit build automatically before running tests. **Do NOT run a separate `pnpm build` beforehand** β this wastes time. The test scripts handle compilation and type checking internally.\n- Visual and snapshot tests can be updated with `pnpm test:update` or via the `update-snapshots.yml` GitHub workflow (see `CONTRIBUTING.md`).\n- Individual packages provide their own test scripts (e.g. `pnpm --filter @public-ui/components test:unit`).\n - These also perform implicit builds, so explicit pre-build is unnecessary.\n\n## Pull Request Guidelines\n\n- PR titles should be meaningful as they appear in the release notes.\n- Every PR must link to its issue and contain only changes related to that issue.\n- Ensure automated tests pass and manual testing is completed when required.\n- Update documentation or migration guides if your changes affect them.\n",
|
|
24
|
+
"code": "# Agent Instructions\n\nThis repository is a monorepo managed with **pnpm** and **Nx**. It contains multiple packages under `packages/` such as web components, themes, adapters, samples and tooling.\n\n## Handling hints\n\nWe have a monorepo structure with multiple packages, each with its own `package.json`. The root `package.json` contains shared dependencies and scripts. Use `pnpm` commands to manage dependencies and run scripts across packages.\n\n- To install dependencies, use `pnpm i` at the root level. This will install all dependencies for all packages.\n- If you change a dependency in a package:\n - Use only exact version numbers in `package.json`. Other peers will not be able to use the package if you can use a range version.\n - You need to run `pnpm i` at the root level. This updates the lockfile and ensures all packages are using the correct versions.\n- Never add a `packageManager` field to any `package.json` file.\n- Avoid that branch name may contain hidden characters.\n- If something does not work, check in the event of an error whether all dependent submodules have been built.\n- To build a single package faster, run commands with downstream dependents using `pnpm --filter ...<package>` (e.g., `pnpm --filter ...@public-ui/sample-react build`).\n\n## π¨ Format-first rule\n\n> **Stop before you commit:** run the formatter so CI never rejects your patch for style drift.\n\n1. Run `pnpm format` from the repo root whenever you change code, docs or configs.\n2. If you only touched one package, you may instead run `pnpm --filter <package> format` for a quicker pass.\n3. Re-stage the affected files (`git add -u`) so the formatted result is what lands in the commit.\n\nNo package scripts in this repo need extra flags such as `-- --write`; the scripts already know when to write changes versus just check.\n\n## Semantic Versioning\n\nThis repository follows **Semantic Versioning** (SemVer) for all packages. Each package version is defined in its own `package.json` file. The versioning scheme is as follows:\n\n- **Major version**: Incremented for incompatible API changes.\n- **Minor version**: Incremented for adding functionality in a backwards-compatible manner.\n- **Patch version**: Incremented for backwards-compatible bug fixes.\n\nIf we deprecate a feature, we will mark it as deprecated in the code and documentation, but we will not remove it immediately. Instead, we will provide a migration guide (migration\\*.md) for users to transition to the new feature. Also we provide a migration tool in the `packages/tools/kolibri-cli` package to help with the migration process. You have to add a migration task from the previous version to the new version in the `packages/tools/kolibri-cli/src/migrations` folder. In the migration package, are a lot of migration tasks already implemented, so you can use them as a reference.\n\n## Project Structure\n\n- `packages/components` β Stencil based web components\n - `packages/components/src/component` β components\n - `packages/components/src/schema` β schema definitions for all components\n- `packages/samples` β sample applications demonstrating usage\n - `packages/samples/angular` β Angular sample app; do not edit\n - `packages/samples/react` β React sample app; all samples; write component samples here\n- `packages/adapters/*` β generated framework integration packages; do not edit\n- `packages/themes` β style themes and assets\n - `packages/themes/default` β primary maintained standard theme\n - All other themes are not actively maintained\n- `packages/tools/kolibri-cli` β helper CLI for migration\n- Documentation lives in `docs/`.\n- Do always ignore and do not edit all `assets` folders in all packages, as these are generated by the build process and should not be edited manually. If you need to change something in the assets, you have to change it in the source code and rebuild the package.\n\n## Theming\n\nThe theming is realized with adopted style sheets on web components and will be adopted at the mounted hook of the components. All following styling rules are only relevant for the `components` and `themes` packages.\n\n### The 5 styling layers\n\n1. **A11y Preset layer**: This layer comes out of the `adopted-style-sheets` package and contains the basic styles for accessibility. It is applied to all components.\n2. **Basis Global layer**: This layer contains the basis global styles for all components and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n3. **Basis Component layer**: This layer contains the basis styles for one component and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n4. **Theme Global layer**: This layer contains the global styles for all components of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n5. **Theme Component layer**: This layer contains the component specific styles for one component of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n\n### Global accessibility styles\n\n```css\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: #{rem(44)};\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of rem(44).\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\t.kol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n```\n\n### Styling rules\n\nThe basis global layer set the default font-size and box-sizing for all components.\n\n```css\n@layer kol-global {\n\t:host {\n\t\tfont-size: rem(16);\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n ...\n}\n```\n\n### Custom Theming rules\n\nThe custom theme layer is used to set the colors and other theme specific styles. The custom theme layer should not contain any layout styles, as these are already set in the basis global and component layers.\n\nFor example, generally the font-family is set in the theme global layer, on the `:host` element, so that all components inherit the font-family from the theme. The font-size is set in the basis global layer, so that all components inherit the font-size from the basis global layer. But it is possible to set a other base font-size in the theme global layer, if needed.\n\n```css\n@layer kol-theme-global {\n\t:host {\n\t\t--font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n\t\t--font-size: var(--kolibri-font-size, #{rem(16)});\n ...\n\t}\n\n\t:host {\n\t\tfont-size: var(--font-size);\n\n\t\t* {\n\t\t\tfont-family: var(--font-family);\n\t\t}\n\t}\n ...\n}\n```\n\nIn the theme component layer, you can set what ever you need to realize your own custom style guidelines. For example, you can set the colors, borders, shadows, etc. for the component.\n\n```css\n@layer kol-theme-component {\n ...\n}\n```\n\n### CSS Custom Properties and SASS Variables\n\nCSS custom properties remain part of the global cascade and are not isolated by the Shadow DOM.\nOverusing them (in theme files as well as in component styles) can collide with variables defined\non a host page, and every custom property you declare is implicitly overridable from outside,\nwhether you intended that or not.\n\n**Prefer plain CSS over a custom property.** Before adding a custom property, check whether the\nplatform already gives the consumer a way to control it β the standard box model (`width`,\n`height`), inherited properties (`color`, `font-size` via `em`), or relative units (`%`, container\nquery units). A component that simply fills its host (`width: 100%; height: 100%` inside, a sane\ndefault `width`/`height` on `:host`) can be resized with plain CSS, exactly like a native element β\nno bespoke API, no documentation burden, nothing to keep in sync. Only reach for a custom property\nwhen the value genuinely cannot be derived this way (e.g. a semantic color token that isn't just\n`currentColor`, or a value with no corresponding native CSS mechanism).\n\n**Rule:** only declare a CSS custom property when it is a deliberate, documented customization\npoint (a `--kol-<component>-<name>` design token). For anything else β internal aliases,\nintermediate values, ratios, or derived defaults β use a SASS `$variable` instead. SASS variables\nare resolved at build time, can't leak into the global cascade, and can't be overridden from a host\npage, so they can't accidentally become part of the public API.\n\nDo not introduce a second, internal custom property just to make the code more readable:\n\n```scss\n// β Bad: `--color-bar` is an unintended, additional public custom property.\n// It reacts to overrides from a host page exactly like `--kol-progress-color-bar`,\n// even though only the latter was meant to be part of the API.\n.kol-progress {\n\t--color-bar: var(--kol-progress-color-bar, #0075ff);\n\n\t&__bar-progress {\n\t\tfill: var(--color-bar);\n\t}\n}\n```\n\n```scss\n// β
Good: the SASS variable holds the default value; the only custom property\n// is `--kol-progress-color-bar`, referenced directly wherever needed.\n$kol-progress-default-color-bar: #0075ff;\n\n.kol-progress {\n\t&__bar-progress {\n\t\tfill: var(--kol-progress-color-bar, #{$kol-progress-default-color-bar});\n\t}\n}\n```\n\nAny further unit conversion or math that doesn't depend on a runtime custom property (e.g. `to-rem()`,\nratios, breakpoints) belongs in SASS, not in an extra layer of `calc()`/custom-property indirection.\n\n`kol-avatar` is an example of preferring plain CSS: instead of a `--kol-avatar-size` custom property,\n`:host` gets a default `width` and an `aspect-ratio: 1`, and the inner element derives its size from the\nhost via container query units (`cqw`/`cqh`) instead of a separate ratio calculation. Consumers resize it\nthe same way they'd resize any block-level element β with plain `width`/`height`.\n\nThe avatar must always stay square, even if `width` and `height` end up different (e.g. both are set\nexplicitly to different values), so the inner element uses `max(100cqw, 100cqh)` for both its own `width`\nand `height` β the larger of the two wins, and `:host` centers it (`align-items`/`justify-content`), so it\nmay visually extend beyond the host on the smaller axis. Since CSS can't distinguish \"our default\" from\n\"an explicit author value\" on two independent properties, only setting `width` reliably resizes the avatar\nbelow its 100px default; setting only `height` below 100px does not shrink it, because our own default\n`width` is still in effect and wins the `max()`. This is a deliberate, documented trade-off, not a bug β\nachieving full symmetry would require either a custom property or JavaScript, both of which cost more\nthan the trade-off is worth.\n\n### SCSS Architecture Guidelines: BEM with Smart Nesting\n\nWhen writing component theme styles, follow these principles for clean, maintainable SCSS:\n\n#### 1. **Flat BEM Structure (Root Level)**\n\nAll BEM modifiers and independent elements belong at **root level** of the mixin. Never nest BEM class names:\n\n```scss\n@mixin kol-alert-theme {\n\t// β
All BEM selectors on root (flat)\n\t.kol-alert { ... }\n\t.kol-alert--variant-msg { ... }\n\t.kol-alert--variant-card { ... }\n\t.kol-alert--type-default { ... }\n\t.kol-alert__container { ... }\n\t.kol-alert__heading { ... }\n}\n```\n\n**Why?** BEM classnames are independent selectors. Each class should be predictable and flat.\n\n#### 2. **Contextual Nesting (When Variants Change Element Behavior)**\n\nNest **only when a modifier changes how a child element behaves**. Keep all rules for an element together:\n\n```scss\n.kol-alert__closer {\n\tplace-self: center;\n\n\t.kol-button {\n\t\tborder-radius: 50%;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t\tcursor: pointer;\n\n\t\t// β
Variant changes button styling - nest here\n\t\t.kol-alert--variant-msg & {\n\t\t\t--text-color: var(--alert-accent-color);\n\t\t}\n\n\t\t.kol-alert--variant-card & {\n\t\t\t--text-color: var(--color-light);\n\t\t}\n\t}\n}\n```\n\n**Rule of thumb**: All rules for `.kol-button` in `.kol-alert__closer` stay in one place. This keeps related styles together and makes maintenance easier.\n\n#### 3. **Never Use `$root` or `@at-root`**\n\nβ **Outdated pattern (removed):**\n\n```scss\n.kol-alert {\n\t$root: &;\n\t&__closer {\n\t\t@at-root #{$root}--variant-msg & { ... }\n\t}\n}\n```\n\nβ
**Modern pattern (direct nesting):**\n\n```scss\n.kol-alert__closer {\n\t.kol-button {\n\t\t.kol-alert--variant-msg & { ... }\n\t}\n}\n```\n\nThis is clearer and doesn't require Sass variable gymnastics.\n\n#### 4. **Structure Template**\n\n```scss\n@mixin kol-component-theme {\n\t// 1. Base component (no children)\n\t.kol-component {\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t}\n\n\t// 2. All BEM modifiers at root (flat)\n\t.kol-component--variant-a {\n\t\t...\n\t}\n\n\t.kol-component--type-default {\n\t\t...\n\t}\n\n\t// 3. Elements with contextual nesting for variants\n\t.kol-component__heading {\n\t\tfont-weight: bold;\n\n\t\t.kol-component--variant-a & {\n\t\t\tcolor: red;\n\t\t}\n\t}\n\n\t.kol-component__content {\n\t\tpadding: 1rem;\n\n\t\t.kol-component--variant-a & {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t// 4. Child components with variant context\n\t.kol-component__button {\n\t\t.kol-button {\n\t\t\tcursor: pointer;\n\n\t\t\t.kol-component--variant-a & {\n\t\t\t\t--text-color: var(--accent);\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\n### General rules for custom themes\n\n- Do not use `!important` in your styles, as this will override the styles of the basis global and component layers.\n- Do only overwrite styling definitions you will really customize. Do not set styling definitions that are already set (redundant) in the basis global and component layers, as this will override the styles of the basis global and component layers.\n- Do not `inherit` styles over the `:host` element, as this will override the styles of the basis global and component layers. This makes your component less robust from outside environment styles. Only the `kol-icon` inherits some specific styles, like `color`, `font-size`, `font-family` and `line-height`, as these are needed for the icon to be displayed correctly inline to this neighbored elements.\n- Do not set the default `font-family`, `font-size` or `box-sizing` in the basis or theme component layer (redundant), as these are already set in the basis global layers. If you need to set a different font-family or font-size, you can do this in the theme global layer.\n- Do not set `margin` or `padding` in the basis global and component layers. If you need to set a different margin or padding, you can do this in the theme global or component layers.\n- Do not use `overflow: hidden` in styling or theming, as it often causes issues for reuse and should be avoided.\n- **Do not use `@layer` declarations in utility files**: Helper files, mixin files, and partial files (starting with `_`) should not contain `@layer` declarations. These files are utilities and should be layer-agnostic. This is enforced by the custom Stylelint rule `kolibri/no-layer-in-utility-files`.\n- **Never use `$root` variables or `@at-root` in component mixins**: All selectors should be explicit. Use direct child/descendant nesting only when a modifier changes element behavior within a specific context.\n\n## Samples\n\nThe samples are located in `packages/samples/react` and demonstrate how to use the components in react. Each component has its own folder and the basic sample are in `basic.tsx`. Other stories can be added in the same folder. All samples of a component are registered in the `routes.ts` file.\n\n## Coding Conventions\n\n- Formatting is enforced via **Prettier** with settings defined in `prettier.config.js` (print width 160, single quotes, tabs).\n- `.editorconfig` sets `indent_style = tab` and `max_line_length = 160` for code files. Markdown and YAML files use spaces.\n- ESLint and Stylelint are run using `pnpm lint`. Lint rules should **not** be disabled via inline comments. Instead, describe the problem and work towards a clean solution.\n- Lists and enumerations in code should be kept in alphanumeric order. This also applies to import specifiers and union type literals.\n- Do not disable ESLint, Stylelint or TypeScript rules inline. Fix the code instead of turning such rules off.\n- ESLint and Stylelint are run using `pnpm lint`.\n- Lists and enumerations in code should be kept in alphabetical order (see `docs/tutorials/NEW_COMPONENT.md`).\n- Commit messages follow the **Conventional Commits** specification.\n- See also the [Contributing Guide](CONTRIBUTING.md) for more details on coding conventions and best practices.\n- Spell \"KoliBri\" with this casing in all documentation and code. The only exception is the component named KolKolibri.\n- Use ESM import syntax in browser code and scripts whenever supported, instead of `require` imports.\n- Do not create barrel files (e.g. `index.ts` that re-export modules). Import modules directly instead.\n- Do not place constant declarations before import statements; imports must always be at the very top of the file.\n- **Scripts must be platform-independent**: All scripts in the `scripts/` folder must work on Windows, macOS, and Linux without requiring external tools or platform-specific dependencies. Use Node.js built-in modules instead of external command-line tools like `rg`, `grep`, `find`, etc.\n\n## Linting and Formatting\n\n- Run `pnpm lint` to check for linting errors across all packages. This script runs ESLint, Stylelint and TypeScript checks.\n - β οΈ **Note**: TypeScript type checking in the lint script can require built artifacts. If you've made source code changes, lint will handle any necessary compilation. Explicit pre-build is typically unnecessary.\n - You can try to automatically fix linting issues with `pnpm lint:eslint --fix`, but this may not resolve all issues.\n- Run `pnpm format` to format all code files using Prettier. You can try to automatically fix linting issues with `pnpm format -w`, but this may not resolve all issues.\n- If your pull request only modifies Markdown files, skip `pnpm build`, `pnpm lint` and `pnpm test`. Just format the Markdown using `pnpm format` or Prettier.\n\n### Pre-commit checklist\n\n- **Always run `pnpm format` (or `pnpm --filter <package> format` for a single workspace) right before committing.** Formatting failures are one of the most common reasons for blocked quality gates, so make this the last step before `git commit` even for documentation-only changes.\n- **For SCSS changes**: Always run `pnpm lint:stylelint --fix` (or `pnpm --filter <package> lint:stylelint --fix`) to automatically correct formatting, property order, and selector structure rules before committing. This ensures compliance with BEM structure and style consistency.\n- After formatting, re-stage affected files with `git add -u` so the formatted content is what gets committed.\n\n## Testing\n\n- Run `pnpm test` from the repository root to execute all unit and integration tests.\n - β οΈ **Note**: Test runners (Vitest, Jest, Playwright, etc.) execute an implicit build automatically before running tests. **Do NOT run a separate `pnpm build` beforehand** β this wastes time. The test scripts handle compilation and type checking internally.\n- Visual and snapshot tests can be updated with `pnpm test:update` or via the `update-snapshots.yml` GitHub workflow (see `CONTRIBUTING.md`).\n- Individual packages provide their own test scripts (e.g. `pnpm --filter @public-ui/components test:unit`).\n - These also perform implicit builds, so explicit pre-build is unnecessary.\n\n## Pull Request Guidelines\n\n- PR titles should be meaningful as they appear in the release notes.\n- Every PR must link to its issue and contain only changes related to that issue.\n- Ensure automated tests pass and manual testing is completed when required.\n- Update documentation or migration guides if your changes affect them.\n",
|
|
25
25
|
"kind": "doc"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
@@ -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 | 0 | 0 |\n| high | 0 | 0 | 0 | 4 |\n| moderate | 0 | 0 | 0 | 3 |\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| brace-expansion | moderate | CVE-2026-45149 | v1 | brace-expansion: Large numeric range defeats documented `max` DoS protection |\n| serialize-javascript | moderate | CVE-2026-34043 | v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| ws | moderate | CVE-2026-45736 | v1 | ws: Uninitialized memory disclosure |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 5 | 5 | 3 |\n| high | 3 | 35 | 53 | 30 |\n| moderate | 11 | 30 | 54 | 10 |\n| low | 2 | 5 | 11 | 1 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| ---------------------------------------- | -------- | ------------------- | ----------------- | ---------------------------------------------------------------------------------- |\n| basic-ftp | critical | CVE-2026-27699 | 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| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/compiler | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-27970 | v1 | Angular i18n vulnerable to Cross-Site Scripting |\n| @angular/core | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @babel/plugin-transform-modules-systemjs | high | CVE-2026-44728 | v4, v2, v1 | @babel/plugin-transform-modules-systemjs generates arbitrary code when compiling |\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, 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| 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| braces | high | CVE-2024-4068 | v3, v2, v1 | Uncontrolled resource consumption in braces |\n| devalue | high | CVE-2026-42570 | v4 | Svelte devalue: DoS via sparse array deserialization |\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-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| 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| 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| immutable | high | CVE-2026-29063 | v2 | Immutable is vulnerable to Prototype Pollution |\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| rollup | high | CVE-2026-27606 | v1 | Rollup 4 has Arbitrary File Write via Path Traversal |\n| semver | high | CVE-2022-25883 | v2 | semver vulnerable to Regular Expression Denial of Service |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v4, v3, v2, v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| socket.io-parser | high | CVE-2026-33151 | v3, v2 | socket.io allows an unbounded number of binary attachments |\n| svgo | high | CVE-2026-29074 | v3, v2, v1 | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs) |\n| tar | high | CVE-2026-24842 | v1 | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave |\n| tar | high | CVE-2026-23745 | v1 | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins |\n| tar | high | CVE-2026-26960 | 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| 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| vite | high | CVE-2026-39364 | v1 | Vite: `server.fs.deny` bypassed with queries |\n| vite | high | CVE-2026-39363 | v1 | Vite Vulnerable to Arbitrary File Read via Vite Dev Server WebSocket |\n| @hono/node-server | moderate | CVE-2026-39406 | v2 | @hono/node-server: Middleware bypass via repeated slashes in serveStatic |\n| ajv | moderate | CVE-2025-69873 | v3, v2 | ajv has ReDoS when using `$data` option |\n| axios | moderate | CVE-2025-62718 | v3, v2 | Axios has a NO_PROXY Hostname Normalization Bypass that Leads to SSRF |\n| axios | moderate | CVE-2026-40175 | v3, v2 | Axios has Unrestricted Cloud Metadata Exfiltration via Header Injection Chain |\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-42039 | v3, v2 | Axios: unbounded recursion in toFormData causes DoS via deeply nested request da |\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| 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 | GHSA-458j-xx4x-4375 | v2 | hono Improperly Handles JSX Attribute Names Allows HTML Injection in hono/jsx SS |\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| 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| 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| qs | moderate | CVE-2025-15284 | v2 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| serialize-javascript | moderate | CVE-2026-34043 | v4, v3, v2, v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| serialize-javascript | moderate | CVE-2024-11831 | v2 | Cross-site Scripting (XSS) in serialize-javascript |\n| smol-toml | moderate | GHSA-v3rj-xjv7-4jmq | v3, v2, v1 | smol-toml: Denial of Service via TOML documents containing thousands of consecut |\n| svelte | moderate | CVE-2026-42599 | v4 | Svelte SSR vulnerable to cross-site scripting via spread attributes |\n| svelte | moderate | GHSA-f3cj-j4f6-wq85 | v4 | Svelte: SSR XSS via Insecure Promise Serialization in hydratable |\n| svelte | moderate | CVE-2026-42573 | v4 | Svelte Vulnerable to XSS via DOM Clobbering of Internal Framework State |\n| svelte | moderate | CVE-2026-42567 | v4 | Svelte: ReDoS in `<svelte:element>` Tag Validation |\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| vite | moderate | CVE-2026-39365 | v1 | Vite Vulnerable to Path Traversal in Optimized Deps `.map` Handling |\n| webpack | moderate | CVE-2024-43788 | v2 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2026-6402 | v4, v3, v2 | webpack-dev-server vulnerable to cross-origin source code exposure on non-HTTPS |\n| ws | moderate | CVE-2026-45736 | v4, v3, v2, v1 | ws: Uninitialized memory disclosure |\n| yaml | moderate | CVE-2026-33532 | v4, v3, v2, v1 | yaml is vulnerable to Stack Overflow via deeply nested YAML collections |\n| @tootallnate/once | low | CVE-2026-3449 | v3, v2 | @tootallnate/once vulnerable to Incorrect Control Flow Scoping |\n| axios | low | CVE-2026-42040 | v3, v2 | Axios: Null Byte Injection via Reverse-Encoding in AxiosURLSearchParams |\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| tmp | low | CVE-2025-54798 | v4 | tmp allows arbitrary temporary file / directory write via symbolic link `dir` pa |\n| webpack | low | CVE-2025-68458 | v2 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v2 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects β SSRF + c |\n",
|
|
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",
|
|
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.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.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.1 | 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.1 | 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.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.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.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.0-rc.1 | 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.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.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.0-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.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.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.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | 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.1 | 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.22 | 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| @lhci/cli | Apache-2.0 | 0.15.1 | n/a |\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.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-hook-form-adapter | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-v19 | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/themes | EUPL-1.2 | 4.3.0-rc.1 | 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| @unocss/preset-mini | MIT | 66.7.2 | Anthony Fu |\n| @unocss/vite | MIT | 66.7.2 | Anthony Fu |\n| @vitejs/plugin-react-swc | MIT | 4.3.1 | Arnaud BarrΓ© (https://github.com/ArnaudBarre) |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| http-server | MIT | 14.1.1 | n/a |\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| vite | MIT | 7.3.5 | Evan You |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\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.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-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.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.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-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.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.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-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.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.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-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.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.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-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.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.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.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.1 | 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.1 | 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| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| @public-ui/sample-react | EUPL-1.2 | 4.3.0-rc.1 | n/a |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\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| 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| @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.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",
|
|
401
401
|
"kind": "doc"
|
|
402
402
|
},
|
|
403
403
|
{
|
|
@@ -445,7 +445,7 @@
|
|
|
445
445
|
"group": "docs",
|
|
446
446
|
"name": "README",
|
|
447
447
|
"path": "README.md",
|
|
448
|
-
"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\nKoliBri is **not a design system** in the traditional sense. Rather, we extend the HTML5 standard with self-contained, accessible Web Components β new HTML elements that work independently from any design or branding. These atomic components form a foundation that any design library, framework, or style guide can reuse and theme according to their needs.\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",
|
|
448
|
+
"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[](https://mcptoplist.com/server/glama%2Fpublic-ui%2Fkolibri)\n\n> \"The accessible HTML standard\"\n\nKoliBri is **not a design system** in the traditional sense. Rather, we extend the HTML5 standard with self-contained, accessible Web Components β new HTML elements that work independently from any design or branding. These atomic components form a foundation that any design library, framework, or style guide can reuse and theme according to their needs.\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",
|
|
449
449
|
"kind": "doc"
|
|
450
450
|
},
|
|
451
451
|
{
|
|
@@ -488,6 +488,14 @@
|
|
|
488
488
|
"code": "# Neue Komponente erstellen\n\n> Schritt-fΓΌr-Schritt-Anleitung basierend auf dem [Skeleton Blueprint](../../packages/components/src/components/_skeleton/ARC42.md).\n\n## Grundprinzipien\n\n- Auflistungen werden immer alphabetisch sortiert\n- Die [ARC42.md](../../packages/components/src/components/_skeleton/ARC42.md) ist die fΓΌhrende Architektur-Spezifikation β lies sie vollstΓ€ndig, bevor du eine neue Komponente erstellst\n- Alle Web Components verwenden `shadow: true` β Komponenten ohne Shadow DOM werden als Functional Components implementiert\n- Props leben in `src/internal/props/` mit eigenem `PropDefinition` pro Prop\n- Kein toter Code, keine Barrel-Files, keine `types.ts`\n\n## Checkliste\n\n| Schritt | Kurzbeschreibung |\n| :-----: | ---------------------------------------------------------------------------------------- |\n| 0 | Projekt starten |\n| 1 | Tag-Name in Stencil-Konfiguration registrieren |\n| 2 | Props erstellen oder vorhandene wiederverwenden (`src/internal/props/`) |\n| 3 | API-Definition erstellen (`api.tsx`) mit `PropsConfigShape` und `ApiFromConfig` |\n| 4 | Controller implementieren (`controller.ts`) β erweitert `BaseController<Api>` |\n| 5 | Functional Component erstellen (`component.tsx`) β stateless Renderer |\n| 6 | Web Component erstellen (`component.tsx`) β erweitert `BaseWebComponent<Api>` |\n| 7 | Tests co-lokalisiert neben `component.tsx` erstellen |\n| 8 | Beispiel in React-Sample-App anlegen |\n| 9 | Validierung: `pnpm format && pnpm lint && pnpm --filter @public-ui/components test:unit` |\n\n## Schritt 0 β Projekt starten\n\nProjekt starten, wie in [Contribution](../../CONTRIBUTING.md) beschrieben.\n\n## Schritt 1 β Tag-Name registrieren\n\nDen Tag-Namen der neuen Komponente in `packages/components/stencil.config.ts` registrieren.\n\n## Schritt 2 β Props erstellen (Props-First!)\n\n**Bevor die Komponente implementiert wird, mΓΌssen alle Props definiert sein.**\n\nPro Prop eine Datei unter `src/internal/props/`:\n\n```typescript\n// src/internal/props/name.ts\nimport type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>('name', '', normalizeString);\n```\n\n- `SimpleProp<K, T>` wenn externer und interner Typ identisch sind\n- `Prop<K, TExternal, TInternal>` wenn sich die Typen unterscheiden (z.B. `ColorProp`)\n- Export in `src/internal/props/index.ts` hinzufΓΌgen\n- Bestehende Props aus `index.ts` wiederverwenden, wenn mΓΆglich\n\nDetails: [ARC42 Β§4 β Schema Helper Layer](../../packages/components/src/components/_skeleton/ARC42.md#schema-helper-layer)\n\n## Schritt 3 β API-Definition\n\nDatei: `src/internal/functional-components/<component>/api.tsx`\n\n```typescript\nimport { nameProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const myComponentPropsConfig = {\n\trequired: [nameProp],\n\t// optional: [showProp],\n} as const satisfies PropsConfigShape;\n\nexport type MyComponentApi = ApiFromConfig<\n\ttypeof myComponentPropsConfig,\n\t{\n\t\t// Nur definieren, was die Komponente tatsΓ€chlich nutzt:\n\t\t// Callbacks: { click: () => void };\n\t\t// Emitters: { change: string };\n\t\t// Methods: { focus: () => void };\n\t\t// States: { count: number };\n\t\t// Refs: { button: HTMLButtonElement };\n\t\t// Listeners: { keydown: KeyboardEvent };\n\t}\n>;\n```\n\nDetails: [ARC42 Β§4 β API Definition with PropsConfigShape](../../packages/components/src/components/_skeleton/ARC42.md#api-definition-with-propsconfigshape-and-apifromconfig)\n\n## Schritt 4 β Controller\n\nDatei: `src/internal/functional-components/<component>/controller.ts`\n\n```typescript\nimport { nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { MyComponentApi } from './api';\nimport { myComponentPropsConfig } from './api';\n\nexport class MyComponentController extends BaseController<MyComponentApi> implements ControllerInterface<MyComponentApi> {\n\tpublic constructor(stateAccess: StateAccess<MyComponentApi>) {\n\t\tsuper(stateAccess, myComponentPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<MyComponentApi>): void {\n\t\tconst { name } = props;\n\t\tthis.watchName(name);\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('name', v);\n\t\t});\n\t}\n}\n```\n\n- Event-Handler und Ref-Setter als **Arrow-Properties** (`handleClick = () => { β¦ }`)\n- Lifecycle- und Watcher-Methoden als **Prototype-Methoden**\n- Details: [ARC42 Β§4 β Controller Layer](../../packages/components/src/components/_skeleton/ARC42.md#controller-layer)\n\n## Schritt 5 β Functional Component\n\nDatei: `src/internal/functional-components/<component>/component.tsx`\n\n```tsx\nimport type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { MyComponentApi } from './api';\n\nconst myBem = bem.forBlock('kol-my-component');\n\nexport const MyComponentFC: FC<FunctionalComponentProps<MyComponentApi>> = (props) => {\n\tconst { name } = props;\n\treturn (\n\t\t<div class={myBem()}>\n\t\t\t<span class={myBem('name')}>{name}</span>\n\t\t</div>\n\t);\n};\n```\n\n- Stateless, keine Seiteneffekte\n- Details: [ARC42 Β§4 β Functional Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#functional-component-layer)\n\n## Schritt 6 β Web Component\n\nDatei: `src/components/<component>/component.tsx`\n\n```tsx\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { MyComponentApi } from '../../../../internal/functional-components/my-component/api';\nimport { MyComponentFC } from '../../../../internal/functional-components/my-component/component';\nimport { MyComponentController } from '../../../../internal/functional-components/my-component/controller';\n\n@Component({\n\ttag: 'kol-my-component',\n\tshadow: true,\n})\nexport class KolMyComponent extends BaseWebComponent<MyComponentApi> implements WebComponentInterface<MyComponentApi> {\n\tprivate readonly ctrl = new MyComponentController(this.stateAccess);\n\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<MyComponentFC name={this.ctrl.getRenderProp('name')} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n```\n\n- Immer `shadow: true` und `<Host>` ohne Klassen-Attribut\n- `@Watch` nur auf unterstrichene Props\n- Details: [ARC42 Β§4 β Web Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#web-component-layer)\n\nWenn ein Controller garantiert kein `@State` benΓΆtigt, verwende den Sentinel:\n\n```typescript\nprivate readonly ctrl = new MyComponentController(BaseWebComponent.stateLess);\n```\n\n## Schritt 7 β Tests\n\nTests liegen **direkt neben** `component.tsx` β kein `test/`-Unterordner.\n\n**Snapshot-Test** (`snapshot.spec.tsx`):\n\n```tsx\nimport { executeSnapshotTests } from '../../../../utils/testing';\nimport { KolMyComponent } from './component';\n\nconst TAG = 'kol-my-component';\n\ntype Props = {\n\t_name: string;\n};\n\nexecuteSnapshotTests<Props>(TAG, [KolMyComponent], [{ _name: 'Test' }, { _name: '' }]);\n```\n\n**Interaction-Test** (`interaction.e2e.ts`):\n\n```typescript\nimport { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\n\ntest.describe('kol-my-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.setContent('<kol-my-component _name=\"Test\"></kol-my-component>');\n\t});\n\n\ttest('should render the name', async ({ page }) => {\n\t\tawait expect(page.locator('kol-my-component')).toBeVisible();\n\t});\n});\n```\n\nDetails: [ARC42 Β§9 β Design Decision 11](../../packages/components/src/components/_skeleton/ARC42.md#9-design-decisions)\n\n## Schritt 8 β Beispiel in React-Sample-App\n\nDatei: `packages/samples/react/src/scenarios/<component>.tsx`\n\nAnschlieΓend die Route in `packages/samples/react/src/scenarios/routes.ts` registrieren.\n\nZum Testen:\n\n```bash\ncd packages/samples/react\npnpm start\n# Navigiere zu http://localhost:9191\n```\n\n## Schritt 9 β Validierung\n\n```bash\npnpm format # ~10 Sekunden\npnpm lint # ~1 Minute, NICHT abbrechen\npnpm --filter @public-ui/components test:unit # ~2-3 Minuten, NICHT abbrechen\n```\n\nAlle drei Befehle mΓΌssen fehlerfrei durchlaufen.\n\n## Referenz\n\nDie vollstΓ€ndige Referenzimplementierung findet sich im Skeleton Blueprint:\n\n- **Architektur**: [`_skeleton/ARC42.md`](../../packages/components/src/components/_skeleton/ARC42.md)\n- **Agent-Instruktionen**: [`_skeleton/AGENTS.md`](../../packages/components/src/components/_skeleton/AGENTS.md)\n- **Performance-Analyse**: [`_skeleton/PERFORMANCE_ANALYSIS.md`](../../packages/components/src/components/_skeleton/PERFORMANCE_ANALYSIS.md)\n- **Refactoring-Leitfaden**: [`_skeleton/REFACTORING_PROMPT.md`](../../packages/components/src/components/_skeleton/REFACTORING_PROMPT.md)\n",
|
|
489
489
|
"kind": "doc"
|
|
490
490
|
},
|
|
491
|
+
{
|
|
492
|
+
"id": "doc/umsetzungskonzept-kolibri-mcp",
|
|
493
|
+
"group": "docs",
|
|
494
|
+
"name": "umsetzungskonzept-kolibri-mcp",
|
|
495
|
+
"path": "umsetzungskonzept-kolibri-mcp.md",
|
|
496
|
+
"code": "# π Umsetzungszyklus: Integration von kern-ux-mcp-Features in KoliBri MCP\n\n**Ziel:** KoliBri MCP um die StΓ€rken von kern-ux-mcp erweitern, insbesondere **A11Y-Validierung**, **dynamische HTML-Generierung** und **Composition-System**, wΓ€hrend die bestehenden Vorteile (Suche, HTTP-Transport, Resources) erhalten bleiben.\n\n**Priorisierung:** Features sind nach Aufwand und Impact fΓΌr Coding Agents sortiert.\n\n---\n\n## π Γbersicht der umzusetzenden Features\n\n| **Feature** | **Beschreibung** | **Aufwand** | **Impact fΓΌr Agents** | **AbhΓ€ngigkeiten** |\n| -------------------------------------------------------------------- | -------------------------------------------------------------- | ----------- | --------------------- | ------------------------- |\n| [1. A11Y-Validierung](#1-a11y-validierung) | Validierung von HTML gegen WCAG/EN 301 549-Regeln | βββ | βββββ | `node-html-parser` |\n| [2. Dynamische HTML-Generierung](#2-dynamische-html-generierung) | Dynamische Erzeugung von KoliBri-Komponenten aus Parametern | ββββ | ββββ | `zod` (bereits vorhanden) |\n| [3. Composition-System](#3-composition-system) | Rekursive Layout-Generierung (Grid + Card + Button etc.) | βββ | ββββ | `zod` |\n| [4. Template-Repo-Integration](#4-template-repo-integration) | Indexierung von Templates (markdown + src) aus public-ui Repos | βββ | ββββ | `simple-git`, `glob` |\n| [5. Argument-Normalisierung](#5-argument-normalisierung) | Robustere API durch Default-Werte und Aliase | ββ | βββ | β |\n| [6. Detaillierte Fehlerbehandlung](#6-detaillierte-fehlerbehandlung) | Tool-spezifische Cheat-Sheets in Fehlermeldungen | ββ | βββ | β |\n\n---\n\n## π― Phase 1: A11Y-Validierung (1β2 Tage)\n\n**Ziel:** Agents kΓΆnnen generiertes HTML auf **WCAG/EN 301 549-Compliance** prΓΌfen.\n\n### π Dateistruktur\n\n```\npackages/tools/mcp/\nβββ src/\nβ βββ a11y/\nβ β βββ types.ts # Typdefinitionen fΓΌr A11Y-Issues\nβ β βββ rules.ts # KoliBri-spezifische Validierungsregeln\nβ β βββ validate.ts # Kern-Validierungslogik\nβ βββ mcp.ts # + Tool-Registrierung\nβββ package.json # + AbhΓ€ngigkeit node-html-parser\n```\n\n---\n\n### π 1.1 `src/a11y/types.ts`\n\n```typescript\n/**\n * A11Y-Issue-Format (kompatibel mit kern-ux-mcp)\n */\nexport interface A11yIssue {\n\truleId: string; // z. B. \"button-missing-aria-label\"\n\tseverity: 'error' | 'warning';\n\tmessage: { en: string; de: string };\n\tselectorHint?: string; // CSS-Selektor fΓΌr Problemstelle\n\thelpUrl?: string; // Link zu Dokumentation\n}\n\n/**\n * KoliBri-spezifische Regel-IDs\n */\nexport type KolibriA11yRuleId =\n\t| 'button-missing-label'\n\t| 'input-missing-associated-label'\n\t| 'img-missing-alt'\n\t| 'kol-icon-missing-aria-hidden'\n\t| 'heading-hierarchy-violation'\n\t| 'focus-trap-missing';\n```\n\n---\n\n### π 1.2 `src/a11y/rules.ts`\n\n```typescript\nimport { parse } from 'node-html-parser';\nimport type { KolibriA11yRuleId, A11yIssue } from './types.js';\n\n/**\n * Validierungsregeln fΓΌr KoliBri-Komponenten.\n * Jede Regel prΓΌft HTML auf ein spezifisches A11Y-Problem.\n */\nconst RULES: Record<KolibriA11yRuleId, (root: HTMLElement) => A11yIssue[]> = {\n\t// β <button><kol-icon name=\"save\"></kol-icon></button> β Fehlender Text\n\t'button-missing-label': (root) => {\n\t\tconst issues: A11yIssue[] = [];\n\t\tfor (const button of root.querySelectorAll(\"button, [role='button']\")) {\n\t\t\tconst hasText = button.textContent.trim().length > 0;\n\t\t\tconst hasAriaLabel = button.getAttribute('aria-label');\n\t\t\tconst hasAriaLabelledby = button.getAttribute('aria-labelledby');\n\t\t\tif (!hasText && !hasAriaLabel && !hasAriaLabelledby) {\n\t\t\t\tissues.push({\n\t\t\t\t\truleId: 'button-missing-label',\n\t\t\t\t\tseverity: 'error',\n\t\t\t\t\tmessage: {\n\t\t\t\t\t\ten: 'Button is missing a text label or aria-label. Screen readers cannot announce its purpose.',\n\t\t\t\t\t\tde: 'Button hat keinen Text oder aria-label. Screenreader kΓΆnnen seinen Zweck nicht ansagen.',\n\t\t\t\t\t},\n\t\t\t\t\tselectorHint: `button[${button.getAttribute('id') ? `id=\"${button.getAttribute('id')}\"` : ''}]`,\n\t\t\t\t\thelpUrl: 'https://public-ui.github.io/docs/a11y/buttons',\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\treturn issues;\n\t},\n\n\t// β <input> ohne <label> oder aria-labelledby\n\t'input-missing-associated-label': (root) => {\n\t\tconst issues: A11yIssue[] = [];\n\t\tfor (const input of root.querySelectorAll(\"input:not([type='hidden']):not([type='submit']):not([type='button']):not([type='image']):not([type='reset'])\")) {\n\t\t\tconst id = input.getAttribute('id');\n\t\t\tconst hasAriaLabel = input.getAttribute('aria-label');\n\t\t\tconst hasAriaLabelledby = input.getAttribute('aria-labelledby');\n\t\t\tconst hasAssociatedLabel = id && root.querySelector(`label[for=\"${id}\"]`);\n\n\t\t\tif (!hasAriaLabel && !hasAriaLabelledby && !hasAssociatedLabel) {\n\t\t\t\tissues.push({\n\t\t\t\t\truleId: 'input-missing-associated-label',\n\t\t\t\t\tseverity: 'error',\n\t\t\t\t\tmessage: {\n\t\t\t\t\t\ten: \"Input field is missing a label association (via <label for='...'>, aria-label, or aria-labelledby).\",\n\t\t\t\t\t\tde: \"Eingabefeld hat keine Label-VerknΓΌpfung (via <label for='...'>, aria-label oder aria-labelledby).\",\n\t\t\t\t\t},\n\t\t\t\t\tselectorHint: `input[${id ? `id=\"${id}\"` : ''}]`,\n\t\t\t\t\thelpUrl: 'https://public-ui.github.io/docs/a11y/forms',\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\treturn issues;\n\t},\n\n\t// β <kol-icon> ohne aria-hidden (dekorativ) oder aria-label (semantisch)\n\t'kol-icon-missing-aria-hidden': (root) => {\n\t\tconst issues: A11yIssue[] = [];\n\t\tfor (const icon of root.querySelectorAll('kol-icon')) {\n\t\t\tconst hasAriaHidden = icon.getAttribute('aria-hidden') === 'true';\n\t\t\tconst hasAriaLabel = icon.getAttribute('aria-label');\n\t\t\tif (!hasAriaHidden && !hasAriaLabel) {\n\t\t\t\tissues.push({\n\t\t\t\t\truleId: 'kol-icon-missing-aria-hidden',\n\t\t\t\t\tseverity: 'warning',\n\t\t\t\t\tmessage: {\n\t\t\t\t\t\ten: \"kol-icon is missing aria-hidden='true' (if decorative) or aria-label (if semantic).\",\n\t\t\t\t\t\tde: \"kol-icon hat kein aria-hidden='true' (falls dekorativ) oder aria-label (falls semantisch).\",\n\t\t\t\t\t},\n\t\t\t\t\tselectorHint: `kol-icon`,\n\t\t\t\t\thelpUrl: 'https://public-ui.github.io/docs/components/icon#accessibility',\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\treturn issues;\n\t},\n};\n\nexport { RULES };\n```\n\n---\n\n### π 1.3 `src/a11y/validate.ts`\n\n```typescript\nimport { parse } from 'node-html-parser';\nimport { RULES } from './rules.js';\nimport type { A11yIssue, KolibriA11yRuleId } from './types.js';\n\n/**\n * Validiert HTML gegen alle KoliBri-A11Y-Regeln.\n * @param html - Der zu validierende HTML-String\n * @returns Array von A11Y-Issues (leer = valid)\n */\nexport function validateKolibriHtml(html: string): A11yIssue[] {\n\tconst root = parse(html);\n\tconst issues: A11yIssue[] = [];\n\n\t// FΓΌhre alle Regeln aus\n\tfor (const [ruleId, ruleFn] of Object.entries(RULES)) {\n\t\tconst ruleIssues = ruleFn(root);\n\t\tissues.push(...ruleIssues);\n\t}\n\n\t// Dedupliziere Issues (gleiche Regel + Selektor)\n\treturn issues.filter((issue, index, self) => index === self.findIndex((i) => i.ruleId === issue.ruleId && i.selectorHint === issue.selectorHint));\n}\n\n/**\n * Formatiert A11Y-Issues fΓΌr die Ausgabe.\n * @param issues - Array von A11Y-Issues\n * @param locale - Sprache fΓΌr Fehlermeldungen (\"en\" | \"de\")\n * @returns Formatierter Text\n */\nexport function formatA11yIssues(issues: A11yIssue[], locale: 'en' | 'de' = 'en'): string {\n\tif (issues.length === 0) {\n\t\treturn locale === 'de' ? 'β
Keine Barrierefreiheits-Probleme gefunden.' : 'β
No accessibility issues found.';\n\t}\n\n\tconst lines: string[] = [`β οΈ ${locale === 'de' ? 'Gefundene Barrierefreiheits-Probleme' : 'Found accessibility issues'}: ${issues.length}`];\n\n\tfor (const issue of issues) {\n\t\tconst severityIcon = issue.severity === 'error' ? 'π' : 'β οΈ';\n\t\tconst message = locale === 'de' ? issue.message.de : issue.message.en;\n\t\tlines.push(`${severityIcon} **${issue.ruleId}** (${issue.severity}): ${message}`);\n\t\tif (issue.selectorHint) {\n\t\t\tlines.push(` β Element: \\`${issue.selectorHint}\\``);\n\t\t}\n\t\tif (issue.helpUrl) {\n\t\t\tlines.push(` β Help: ${issue.helpUrl}`);\n\t\t}\n\t}\n\n\treturn lines.join('\\n');\n}\n```\n\n---\n\n### π 1.4 Anpassung von `src/mcp.ts`\n\n```typescript\n// Import am Anfang hinzufΓΌgen\nimport { z } from 'zod';\nimport { validateKolibriHtml, formatA11yIssues } from './a11y/validate.js';\n\n// In der configureServer-Funktion, nach den bestehenden Tools:\nserver.registerTool(\n\t'validate_html',\n\t{\n\t\ttitle: 'Validate KoliBri HTML for Accessibility',\n\t\tdescription:\n\t\t\t'Validates HTML against KoliBri accessibility rules (WCAG 2.1 / EN 301 549). ' +\n\t\t\t'Returns structured issues with severity, messages (EN/DE), and fix suggestions. ' +\n\t\t\t'Use this after generating HTML with `generate_*` tools or when using code from `fetch`.',\n\t\tinputSchema: {\n\t\t\thtml: z.string().describe('The HTML markup to validate. Pass the full markup string (not a file path).'),\n\t\t\tlocale: z.enum(['en', 'de']).optional().default('en'),\n\t\t\tstrict: z.boolean().optional().default(false).describe('If true, throws an error when any issues are found (useful for CI/CD).'),\n\t\t},\n\t},\n\tasync ({ html, locale, strict }) => {\n\t\tlog('tool', 'validate_html called', { htmlLength: html.length });\n\n\t\tconst issues = validateKolibriHtml(html);\n\t\tconst localeText = locale === 'de' ? issues.map((i) => i.message.de) : issues.map((i) => i.message.en);\n\n\t\tif (strict && issues.length > 0) {\n\t\t\tconst errorMessage = `${locale === 'de' ? 'Barrierefreiheits-Validierung fehlgeschlagen' : 'A11Y validation failed'}:\\n${formatA11yIssues(issues, locale)}`;\n\t\t\tlog('error', 'validate_html failed (strict mode)', { issueCount: issues.length });\n\t\t\tthrow new Error(errorMessage);\n\t\t}\n\n\t\tlog('tool', 'validate_html completed', { issueCount: issues.length });\n\n\t\treturn {\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext:\n\t\t\t\t\t\tissues.length === 0\n\t\t\t\t\t\t\t? locale === 'de'\n\t\t\t\t\t\t\t\t? 'β
**Keine Barrierefreiheits-Probleme gefunden.** Dein HTML ist KoliBri-konform!'\n\t\t\t\t\t\t\t\t: 'β
**No accessibility issues found.** Your HTML is KoliBri-compliant!'\n\t\t\t\t\t\t\t: `β οΈ **${issues.length} accessibility issue${issues.length !== 1 ? 's' : ''} found:**\\n\\n${formatA11yIssues(issues, locale)}`,\n\t\t\t\t},\n\t\t\t],\n\t\t\tstructuredContent: {\n\t\t\t\tok: issues.length === 0,\n\t\t\t\tissueCount: issues.length,\n\t\t\t\tissues: issues.map((issue) => ({\n\t\t\t\t\truleId: issue.ruleId,\n\t\t\t\t\tseverity: issue.severity,\n\t\t\t\t\tmessage: issue.message[locale],\n\t\t\t\t\tselectorHint: issue.selectorHint,\n\t\t\t\t\thelpUrl: issue.helpUrl,\n\t\t\t\t})),\n\t\t\t},\n\t\t};\n\t},\n);\n```\n\n---\n\n### π 1.5 Anpassung von `package.json`\n\n```json\n{\n\t\"dependencies\": {\n\t\t\"node-html-parser\": \"^7.1.0\"\n\t}\n}\n```\n\n---\n\n## π― Phase 2: Dynamische HTML-Generierung (2β3 Tage)\n\n**Ziel:** Agents kΓΆnnen KoliBri-Komponenten dynamisch aus Parametern generieren (nicht nur statische Snippets aus fetch).\n\n### π Dateistruktur\n\n```\npackages/tools/mcp/\nβββ src/\nβ βββ components/\nβ β βββ schemas/ # Zod-Schemas fΓΌr jede Komponente\nβ β β βββ button.ts\nβ β β βββ input.ts\nβ β β βββ index.ts # Re-Exports\nβ β βββ templates/ # HTML-Template-Generatoren\nβ β β βββ button.ts\nβ β β βββ index.ts\nβ β βββ index.ts # Generator-Fabrik + Tool-Registrierung\nβ βββ mcp.ts # + Dynamische Tool-Registrierung\nβββ scripts/\n βββ generate-component-schemas.mjs # Skript zur Schema-Generierung\n```\n\n---\n\n### π 2.1 `src/components/schemas/button.ts`\n\n```typescript\nimport { z } from 'zod';\n\n/**\n * Zod-Schema fΓΌr <kol-button>-Props.\n * Basierend auf der KoliBri-Dokumentation:\n * @see https://public-ui.github.io/components/button\n */\nexport const KolButtonSchema = z.object({\n\t// Pflicht\n\tlabel: z.string().min(1, { message: 'Button label is required for accessibility.' }).describe('Button text (required for accessibility).'),\n\n\t// Optional\n\tvariant: z.enum(['primary', 'secondary', 'tertiary', 'danger']).optional().default('primary').describe('Visual variant of the button.'),\n\n\tdisabled: z.boolean().optional().default(false).describe('Whether the button is disabled.'),\n\n\ticon: z\n\t\t.object({\n\t\t\tname: z.string().min(1).describe(\"Icon name (e.g., 'save', 'trash', 'arrow-forward').\"),\n\t\t\tposition: z.enum(['left', 'right']).optional().default('left').describe('Position of the icon relative to the label.'),\n\t\t})\n\t\t.optional()\n\t\t.describe('Icon to display inside the button.'),\n\n\ttype: z.enum(['button', 'submit', 'reset']).optional().default('button').describe('Button type attribute.'),\n\n\t// A11Y\n\tariaLabel: z.string().optional().describe('Overrides the default aria-label (use when icon-only).'),\n});\n\nexport type KolButtonInput = z.input<typeof KolButtonSchema>;\nexport type KolButtonOutput = {\n\thtml: string;\n\tvalidation: {\n\t\tok: boolean;\n\t\tissues: Array<{ ruleId: string; severity: string; message: string }>;\n\t};\n};\n```\n\n---\n\n### π 2.2 `src/components/schemas/index.ts`\n\n```typescript\nexport * from './button.js';\nexport * from './input.js';\n// Weitere Komponenten hier exportieren\n```\n\n---\n\n### π 2.3 `src/components/templates/button.ts`\n\n```typescript\nimport type { KolButtonInput } from '../schemas/button.js';\nimport { validateKolibriHtml } from '../../a11y/validate.js';\n\n/**\n * Generiert HTML fΓΌr <kol-button> mit KoliBri-Syntax.\n * @param input - Normalisierte Eingabedaten\n * @returns Generiertes HTML + Validierungsergebnis\n */\nexport function generateKolButton(input: KolButtonInput): {\n\thtml: string;\n\tvalidation: { ok: boolean; issues: any[] };\n} {\n\tconst { label, variant = 'primary', disabled = false, icon, type = 'button', ariaLabel } = input;\n\n\t// Icon-Handling\n\tconst iconHtml = icon ? `<kol-icon name=\"${icon.name}\" slot=\"${icon.position === 'right' ? 'after' : 'before'}\"></kol-icon>` : '';\n\n\t// A11Y: Falls Icon vorhanden, aber kein Label β aria-label erzwingen\n\tconst finalAriaLabel = !label && icon && !ariaLabel ? `Icon: ${icon.name}` : ariaLabel;\n\tconst ariaAttrs = finalAriaLabel ? ` aria-label=\"${finalAriaLabel}\"` : '';\n\n\t// Baue das HTML\n\tconst attrs = [variant !== 'primary' ? `variant=\"${variant}\"` : null, disabled ? 'disabled' : null, `type=\"${type}\"`, ariaAttrs].filter(Boolean).join(' ');\n\n\tconst content = icon?.position === 'right' ? `${label}${iconHtml}` : `${iconHtml}${label}`;\n\n\tconst html = `<kol-button${attrs ? ` ${attrs}` : ''}>${content}</kol-button>`;\n\n\t// Validiere das generierte HTML\n\tconst validation = validateKolibriHtml(html);\n\treturn {\n\t\thtml,\n\t\tvalidation: {\n\t\t\tok: validation.length === 0,\n\t\t\tissues: validation.map((i) => ({\n\t\t\t\truleId: i.ruleId,\n\t\t\t\tseverity: i.severity,\n\t\t\t\tmessage: i.message.en,\n\t\t\t})),\n\t\t},\n\t};\n}\n```\n\n---\n\n### π 2.4 `src/components/templates/index.ts`\n\n```typescript\nexport * from './button.js';\n// Weitere Templates hier exportieren\n```\n\n---\n\n### π 2.5 `src/components/index.ts`\n\n```typescript\nimport { z } from 'zod';\nimport * as ButtonSchemas from './schemas/button.js';\nimport * as ButtonTemplates from './templates/button.js';\nimport type { ToolDef } from '../mcp.js';\n\n// Typ fΓΌr Tool-Definition (an KoliBri anpassen)\nexport interface ToolDef {\n\tname: string;\n\ttitle?: string;\n\tdescription: string;\n\tinputSchema: z.ZodType;\n\toutputSchema?: z.ZodType;\n\thandler: (args: any) => Promise<any>;\n}\n\n// Mapping von Komponenten-ID zu Schema/Template\nconst COMPONENT_MAP: Record<\n\tstring,\n\t{\n\t\tinputSchema: z.ZodType;\n\t\ttemplate: (input: any) => { html: string; validation: any };\n\t}\n> = {\n\tbutton: {\n\t\tinputSchema: ButtonSchemas.KolButtonSchema,\n\t\ttemplate: ButtonTemplates.generateKolButton,\n\t},\n\t// Weitere Komponenten hier hinzufΓΌgen\n};\n\n/**\n * Erzeugt ein Tool fΓΌr eine KoliBri-Komponente.\n * @param componentId - ID der Komponente (z. B. \"button\")\n * @returns ToolDef\n */\nexport function createGenerateComponentTool(componentId: string): ToolDef {\n\tconst { inputSchema, template } = COMPONENT_MAP[componentId];\n\n\treturn {\n\t\tname: `generate_${componentId}`,\n\t\ttitle: `Generate KoliBri ${componentId}`,\n\t\tdescription: `Generiert HTML fΓΌr die KoliBri-Komponente \"${componentId}\".`,\n\t\tinputSchema,\n\t\toutputSchema: z.object({\n\t\t\thtml: z.string(),\n\t\t\tvalidation: z.object({\n\t\t\t\tok: z.boolean(),\n\t\t\t\tissues: z.array(\n\t\t\t\t\tz.object({\n\t\t\t\t\t\truleId: z.string(),\n\t\t\t\t\t\tseverity: z.string(),\n\t\t\t\t\t\tmessage: z.string(),\n\t\t\t\t\t}),\n\t\t\t\t),\n\t\t\t}),\n\t\t}),\n\t\thandler: async (args) => template(args),\n\t};\n}\n\n/**\n * LΓ€dt alle verfΓΌgbaren Komponenten-IDs.\n * @returns Promise<string[]> - Liste der Komponenten-IDs\n */\nexport async function getAvailableComponents(): Promise<string[]> {\n\t// In Zukunft: Dynamisch aus @public-ui/components laden\n\treturn Object.keys(COMPONENT_MAP);\n}\n```\n\n---\n\n### π 2.6 Anpassung von `src/mcp.ts`\n\n```typescript\n// Import am Anfang hinzufΓΌgen\nimport { getAvailableComponents, createGenerateComponentTool } from './components/index.js';\n\n// In der configureServer-Funktion, nach den bestehenden Tools:\nconst availableComponents = await getAvailableComponents();\nfor (const componentId of availableComponents) {\n\tconst tool = createGenerateComponentTool(componentId);\n\tserver.registerTool(\n\t\ttool.name,\n\t\t{\n\t\t\ttitle: tool.title,\n\t\t\tdescription: tool.description,\n\t\t\tinputSchema: tool.inputSchema,\n\t\t},\n\t\ttool.handler,\n\t);\n}\n```\n\n---\n\n### π 2.7 `scripts/generate-component-schemas.mjs`\n\n```javascript\n#!/usr/bin/env node\n/**\n * Generiert Zod-Schemas fΓΌr alle KoliBri-Komponenten aus @public-ui/components.\n * Wird vor dem Build ausgefΓΌhrt (siehe package.json).\n */\n\nimport { writeFileSync, mkdirSync, existsSync } from 'node:fs';\nimport { dirname, join } from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nconst __dirname = dirname(fileURLToPath(import.meta.url));\nconst SCHEMAS_DIR = join(__dirname, '../src/components/schemas');\n\n// Stelle sicher, dass das Verzeichnis existiert\nif (!existsSync(SCHEMAS_DIR)) {\n\tmkdirSync(SCHEMAS_DIR, { recursive: true });\n}\n\n// Komponenten-Metadaten (vereinfacht β in RealitΓ€t aus @public-ui/components laden)\nconst COMPONENTS = [\n\t{\n\t\tid: 'button',\n\t\tprops: [\n\t\t\t{ name: 'label', type: 'string', required: true, description: 'Button text' },\n\t\t\t{ name: 'variant', type: 'enum', values: ['primary', 'secondary', 'tertiary', 'danger'], description: 'Visual variant' },\n\t\t\t{ name: 'disabled', type: 'boolean', description: 'Disabled state' },\n\t\t\t{\n\t\t\t\tname: 'icon',\n\t\t\t\ttype: 'object',\n\t\t\t\tproperties: [\n\t\t\t\t\t{ name: 'name', type: 'string', required: true },\n\t\t\t\t\t{ name: 'position', type: 'enum', values: ['left', 'right'] },\n\t\t\t\t],\n\t\t\t\tdescription: 'Icon configuration',\n\t\t\t},\n\t\t\t{ name: 'type', type: 'enum', values: ['button', 'submit', 'reset'], description: 'Button type' },\n\t\t\t{ name: 'ariaLabel', type: 'string', description: 'ARIA label override' },\n\t\t],\n\t},\n\t// Weitere Komponenten hier hinzufΓΌgen\n];\n\n/**\n * Generiert ein Zod-Schema fΓΌr eine Komponente.\n */\nfunction generateComponentSchema(component) {\n\tconst imports = ['import { z } from \"zod\";'];\n\tconst schemaLines = [];\n\tconst exports = [];\n\n\t// Schema-Definition\n\tschemaLines.push(`export const ${pascalCase(component.id)}Schema = z.object({`);\n\tfor (const prop of component.props) {\n\t\tconst line = generatePropSchema(prop, 2);\n\t\tschemaLines.push(line);\n\t}\n\tschemaLines.push('});');\n\n\t// Typ-Exports\n\texports.push(`export type ${pascalCase(component.id)}Input = z.input<typeof ${pascalCase(component.id)}Schema>;`);\n\n\treturn [...imports, '', ...schemaLines, '', ...exports].join('\\n');\n}\n\n/**\n * Generiert eine Zod-Prop-Definition.\n */\nfunction generatePropSchema(prop, indent = 0) {\n\tconst prefix = ' '.repeat(indent);\n\tlet schema;\n\n\tif (prop.required) {\n\t\tschema = generateTypeSchema(prop.type, prop);\n\t} else {\n\t\tschema = `${generateTypeSchema(prop.type, prop)}.optional()`;\n\t\tif (prop.type !== 'boolean' && !prop.default) {\n\t\t\t// Kein Default fΓΌr nicht-required optionals\n\t\t} else if (prop.default !== undefined) {\n\t\t\tschema += `.default(${JSON.stringify(prop.default)})`;\n\t\t}\n\t}\n\n\tif (prop.description) {\n\t\tschema += `.describe(${JSON.stringify(prop.description)})`;\n\t}\n\n\treturn `${prefix}${prop.name}: ${schema},`;\n}\n\n/**\n * Generiert ein Zod-Typ-Schema.\n */\nfunction generateTypeSchema(type, prop) {\n\tswitch (type) {\n\t\tcase 'string':\n\t\t\treturn 'z.string()';\n\t\tcase 'boolean':\n\t\t\treturn 'z.boolean()';\n\t\tcase 'number':\n\t\t\treturn 'z.number()';\n\t\tcase 'enum':\n\t\t\treturn `z.enum([${prop.values.map((v) => `\"${v}\"`).join(', ')}])`;\n\t\tcase 'object':\n\t\t\tconst nestedLines = ['z.object({'];\n\t\t\tfor (const nestedProp of prop.properties) {\n\t\t\t\tnestedLines.push(generatePropSchema(nestedProp, 4));\n\t\t\t}\n\t\t\tnestedLines.push('})');\n\t\t\treturn nestedLines.join('\\n');\n\t\tdefault:\n\t\t\treturn 'z.any()';\n\t}\n}\n\n/**\n * Konvertiert zu PascalCase.\n */\nfunction pascalCase(str) {\n\treturn str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n// Hauptfunktion\nfunction main() {\n\tfor (const component of COMPONENTS) {\n\t\tconst schemaCode = generateComponentSchema(component);\n\t\tconst outputPath = join(SCHEMAS_DIR, `${component.id}.ts`);\n\t\twriteFileSync(outputPath, schemaCode + '\\n');\n\t\tconsole.log(`β
Generated schema for ${component.id}`);\n\t}\n}\n\nmain();\n```\n\n---\n\n## π― Phase 3: Composition-System (1β2 Tage)\n\n**Ziel:** Agents kΓΆnnen komplexe Layouts (z. B. Grid + Card + Button) in einem Aufruf generieren.\n\n### π Dateistruktur\n\n```\npackages/tools/mcp/\nβββ src/\nβ βββ composition/\nβ βββ types.ts # Block-Typdefinitionen\nβ βββ render.ts # Rendering-Logik\nβ βββ cheat-sheet.ts # Hilfetexte fΓΌr Agents\n```\n\n---\n\n### π 3.1 `src/composition/types.ts`\n\n```typescript\nimport { z } from 'zod';\nimport { KolButtonSchema } from '../components/schemas/button.js';\n\n// --- Basis-BlΓΆcke ---\nexport const TextBlockSchema = z.object({\n\tkind: z.literal('text'),\n\ttext: z.string().describe('Plain text content.'),\n});\n\nexport const HtmlBlockSchema = z.object({\n\tkind: z.literal('html'),\n\thtml: z.string().describe('Raw HTML content.'),\n});\n\n// --- KoliBri-Komponenten-BlΓΆcke ---\nexport const KolButtonBlockSchema = z.object({\n\tkind: z.literal('button'),\n\tbutton: KolButtonSchema.describe('KoliBri button configuration.'),\n});\n\n// --- Layout-BlΓΆcke ---\nexport const KolCardBlockSchema = z.object({\n\tkind: z.literal('card'),\n\tcard: z.object({\n\t\theading: z.string().optional().describe('Card heading.'),\n\t\tcontent: z\n\t\t\t.array(z.lazy(() => ContentBlockSchema))\n\t\t\t.optional()\n\t\t\t.describe('Card content blocks.'),\n\t\tfooter: z\n\t\t\t.array(z.lazy(() => ContentBlockSchema))\n\t\t\t.optional()\n\t\t\t.describe('Card footer blocks.'),\n\t}),\n});\n\nexport const KolGridBlockSchema = z.object({\n\tkind: z.literal('grid'),\n\tgrid: z.object({\n\t\tcolumns: z.number().int().min(1).max(12).default(3).describe('Number of columns (1-12).'),\n\t\tgap: z.enum(['none', 'small', 'medium', 'large']).optional().default('medium'),\n\t\titems: z.array(z.lazy(() => ContentBlockSchema)).describe('Grid items (one per cell).'),\n\t}),\n});\n\n// --- Rekursives Schema fΓΌr alle Content-BlΓΆcke ---\nexport const ContentBlockSchema: z.ZodType = z.lazy(() =>\n\tz.discriminatedUnion('kind', [\n\t\tTextBlockSchema,\n\t\tHtmlBlockSchema,\n\t\tKolButtonBlockSchema,\n\t\tKolCardBlockSchema,\n\t\tKolGridBlockSchema,\n\t\t// Weitere BlΓΆcke hier hinzufΓΌgen\n\t]),\n);\n\n// --- Root-Composition-Schema ---\nexport const CompositionInputSchema = z.object({\n\tblocks: z.array(ContentBlockSchema).min(1, 'At least one block is required.'),\n\tlocale: z.enum(['en', 'de']).optional().default('en'),\n});\n\nexport type ContentBlock = z.infer<typeof ContentBlockSchema>;\nexport type CompositionInput = z.infer<typeof CompositionInputSchema>;\n```\n\n---\n\n### π 3.2 `src/composition/render.ts`\n\n```typescript\nimport { parse } from 'node-html-parser';\nimport type { ContentBlock, CompositionInput } from './types.js';\nimport { generateKolButton } from '../components/templates/button.js';\nimport { validateKolibriHtml } from '../a11y/validate.js';\n\n/**\n * Kontext fΓΌr das rekursive Rendering.\n */\ninterface RenderContext {\n\tlocale: string;\n\tdepth: number;\n\tmaxDepth: number;\n}\n\n/**\n * Rendert einen einzelnen Content-Block rekursiv.\n */\nfunction renderBlock(block: ContentBlock, context: RenderContext): { html: string; warnings: string[] } {\n\t// Tiefenbegrenzung zur Vermeidung von Stack Overflow\n\tif (context.depth > context.maxDepth) {\n\t\treturn {\n\t\t\thtml: `<!-- MAX DEPTH (${context.maxDepth}) REACHED -->`,\n\t\t\twarnings: [`Block at depth ${context.depth} exceeded max depth of ${context.maxDepth}.`],\n\t\t};\n\t}\n\n\tconst nextContext: RenderContext = {\n\t\t...context,\n\t\tdepth: context.depth + 1,\n\t};\n\n\tswitch (block.kind) {\n\t\tcase 'text':\n\t\t\treturn { html: block.text, warnings: [] };\n\n\t\tcase 'html':\n\t\t\treturn { html: block.html, warnings: [] };\n\n\t\tcase 'button': {\n\t\t\tconst { html, validation } = generateKolButton(block.button);\n\t\t\treturn {\n\t\t\t\thtml,\n\t\t\t\twarnings: validation.issues.map((i: any) => `Button validation: ${i.message}`),\n\t\t\t};\n\t\t}\n\n\t\tcase 'card': {\n\t\t\tconst headingHtml = block.card.heading ? `<h2>${block.card.heading}</h2>` : '';\n\t\t\tconst contentResults = block.card.content?.map((b) => renderBlock(b, nextContext)) ?? [];\n\t\t\tconst contentHtml = contentResults.map((r) => r.html).join('');\n\t\t\tconst contentWarnings = contentResults.flatMap((r) => r.warnings);\n\n\t\t\tconst footerResults = block.card.footer?.map((b) => renderBlock(b, nextContext)) ?? [];\n\t\t\tconst footerHtml = footerResults.length > 0 ? `<div class=\"footer\">${footerResults.map((r) => r.html).join('')}</div>` : '';\n\t\t\tconst footerWarnings = footerResults.flatMap((r) => r.warnings);\n\n\t\t\treturn {\n\t\t\t\thtml: `\n<kol-card>\n ${headingHtml}\n <div class=\"content\">${contentHtml}</div>\n ${footerHtml}\n</kol-card>\n`.trim(),\n\t\t\t\twarnings: [...contentWarnings, ...footerWarnings],\n\t\t\t};\n\t\t}\n\n\t\tcase 'grid': {\n\t\t\tconst items = block.grid.items\n\t\t\t\t.map((item) => {\n\t\t\t\t\tconst result = renderBlock(item, nextContext);\n\t\t\t\t\treturn `<div class=\"cell\">${result.html}</div>`;\n\t\t\t\t})\n\t\t\t\t.join('');\n\t\t\treturn {\n\t\t\t\thtml: `\n<kol-grid columns=\"${block.grid.columns}\" gap=\"${block.grid.gap}\">\n ${items}\n</kol-grid>\n`.trim(),\n\t\t\t\twarnings: block.grid.items.flatMap((item) => renderBlock(item, nextContext).warnings),\n\t\t\t};\n\t\t}\n\n\t\tdefault:\n\t\t\treturn {\n\t\t\t\thtml: `<!-- Unknown block kind: ${(block as any).kind} -->`,\n\t\t\t\twarnings: [`Unknown block kind: ${(block as any).kind}`],\n\t\t\t};\n\t}\n}\n\n/**\n * Rendert eine Composition aus Content-BlΓΆcken.\n */\nexport function renderComposition(input: CompositionInput): { html: string; warnings: string[] } {\n\tconst context: RenderContext = {\n\t\tlocale: input.locale,\n\t\tdepth: 0,\n\t\tmaxDepth: 20, // Verhindert Stack Overflow\n\t};\n\n\tconst results = input.blocks.map((block) => renderBlock(block, context));\n\treturn {\n\t\thtml: results.map((r) => r.html).join('\\n\\n'),\n\t\twarnings: results.flatMap((r) => r.warnings),\n\t};\n}\n```\n\n---\n\n### π 3.3 `src/composition/cheat-sheet.ts`\n\n```typescript\n/**\n * Cheat-Sheet fΓΌr das Composition-System.\n * Wird in Fehlermeldungen und Tool-Beschreibungen verwendet.\n */\nexport const COMPOSITION_CHEAT_SHEET = `\n## π KoliBri Composition β Valid Block Kinds\n\n### π’ Basic Blocks\n| Kind | Description | Example |\n|------|-------------|---------|\n| **text** | Plain text content | \\`\\`\\`json { \"kind\": \"text\", \"text\": \"Hello World\" } \\`\\`\\` |\n| **html** | Raw HTML | \\`\\`\\`json { \"kind\": \"html\", \"html\": \"<p>Custom HTML</p>\" } \\`\\`\\` |\n\n### π£ Interactive Components\n| Kind | Description | Example |\n|------|-------------|---------|\n| **button** | KoliBri button | \\`\\`\\`json { \"kind\": \"button\", \"button\": { \"label\": \"Click\", \"variant\": \"primary\" } } \\`\\`\\` |\n\n### π¨ Layout Components\n| Kind | Description | Example |\n|------|-------------|---------|\n| **card** | KoliBri card with heading, content, footer | \\`\\`\\`json { \"kind\": \"card\", \"card\": { \"heading\": \"Title\", \"content\": [/* blocks */] } } \\`\\`\\` |\n| **grid** | Responsive grid (1-12 columns) | \\`\\`\\`json { \"kind\": \"grid\", \"grid\": { \"columns\": 3, \"items\": [/* blocks */] } } \\`\\`\\` |\n\n## π§© Nesting Rules\nβ
**All blocks can be nested!** For example:\n\\`\\`\\`json\n{\n \"blocks\": [\n {\n \"kind\": \"card\",\n \"card\": {\n \"heading\": \"User Actions\",\n \"content\": [\n { \"kind\": \"text\", \"text\": \"Choose an action:\" },\n { \"kind\": \"button\", \"button\": { \"label\": \"Save\" } }\n ],\n \"footer\": [\n { \"kind\": \"button\", \"button\": { \"label\": \"Cancel\", \"variant\": \"secondary\" } }\n ]\n }\n }\n ]\n}\n\\`\\`\\`\n\n## β οΈ Common Pitfalls\n- β **Missing kind**: Every block MUST have a \\`kind\\` property.\n- β **Empty blocks array**: At least one block is required.\n- β **Circular references**: Blocks cannot reference themselves (max depth: 20).\n- β **Invalid grid columns**: Must be between 1 and 12.\n`.trim();\n```\n\n---\n\n### π 3.4 Anpassung von `src/mcp.ts`\n\n```typescript\n// Import am Anfang hinzufΓΌgen\nimport { CompositionInputSchema, COMPOSITION_CHEAT_SHEET } from './composition/types.js';\nimport { renderComposition } from './composition/render.js';\nimport { validateKolibriHtml } from './a11y/validate.js';\n\n// Neues Tool in configureServer()\nserver.registerTool(\n\t'render_composition',\n\t{\n\t\ttitle: 'Render KoliBri Composition',\n\t\tdescription:\n\t\t\t'Renders a recursive composition of KoliBri blocks (text, html, button, card, grid, etc.). ' +\n\t\t\t'Use this for complex layouts (e.g., forms, dashboards, pages).\\n\\n' +\n\t\t\tCOMPOSITION_CHEAT_SHEET,\n\t\tinputSchema: CompositionInputSchema,\n\t},\n\tasync ({ blocks, locale }) => {\n\t\tlog('tool', 'render_composition called', { blockCount: blocks.length, locale });\n\n\t\tconst rendered = renderComposition({ blocks, locale });\n\t\tconst validation = validateKolibriHtml(rendered.html);\n\n\t\tlog('tool', 'render_composition completed', {\n\t\t\thtmlLength: rendered.html.length,\n\t\t\twarningCount: rendered.warnings.length,\n\t\t\tissueCount: validation.length,\n\t\t});\n\n\t\treturn {\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: rendered.html,\n\t\t\t\t},\n\t\t\t],\n\t\t\tstructuredContent: {\n\t\t\t\thtml: rendered.html,\n\t\t\t\twarnings: rendered.warnings,\n\t\t\t\tvalidation: {\n\t\t\t\t\tok: validation.length === 0,\n\t\t\t\t\tissues: validation.map((issue) => ({\n\t\t\t\t\t\truleId: issue.ruleId,\n\t\t\t\t\t\tseverity: issue.severity,\n\t\t\t\t\t\tmessage: issue.message[locale],\n\t\t\t\t\t\tselectorHint: issue.selectorHint,\n\t\t\t\t\t})),\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t},\n);\n```\n\n---\n\n## π― Phase 4: Template-Repo-Integration (2β3 Tage)\n\n**Ziel:** Indexierung der Markdown-Dateien und src-Ordner aus den ΓΆffentlichen Template-Repos, damit Agents auf Vorlagen fΓΌr React, Themen und generische Templates zugreifen kΓΆnnen.\n\n**Zu indexierende Repositories:**\n\n### π― Zu indexierende Repositories\n\n| Repository | Beschreibung | Zu indexierende Pfade |\n| ------------------------------------------------------------------------ | ---------------------------- | --------------------- |\n| [public-ui/templates](https://github.com/public-ui/templates/) | Generische KoliBri-Templates | `**/*.md`, `src/**/*` |\n| [public-ui/template-react](https://github.com/public-ui/template-react/) | React-spezifische Templates | `**/*.md`, `src/**/*` |\n| [public-ui/template-theme](https://github.com/public-ui/template-theme/) | Thema-Vorlagen | `**/*.md`, `src/**/*` |\n\n### π Dateistruktur\n\n```\npackages/tools/mcp/\nβββ src/\nβ βββ templates/\nβ β βββ indexer/\nβ β β βββ config.ts # Repo-Konfigurationen\nβ β β βββ fetcher.ts # Git-Repo-Fetcher\nβ β β βββ parser.ts # Markdown/Code-Parser\nβ β β βββ index-builder.ts # Index-Erstellung\nβ β βββ index.ts # Haupt-Index\nβ βββ mcp.ts # + Tool-Anpassungen\nβββ data/\nβ βββ templates/ # Gecachte Template-Daten\nβ βββ public-ui-templates/\nβ βββ public-ui-template-react/\nβ βββ public-ui-template-theme/\nβββ package.json # + Neue AbhΓ€ngigkeiten\n```\n\n---\n\n### π 4.1 `src/templates/indexer/config.ts`\n\n```typescript\n/**\n * Konfiguration der zu indexierenden Template-Repos\n */\nexport interface TemplateRepoConfig {\n\tid: string; // Eindeutige ID fΓΌr das Repo\n\tname: string; // Anzeigename\n\towner: string; // GitHub Owner (z.B. \"public-ui\")\n\trepo: string; // Repo-Name (z.B. \"templates\")\n\tbranch: string; // Standard-Branch\n\tdescription: string; // Beschreibung fΓΌr Agents\n\tincludePatterns: string[]; // Glob-Patterns fΓΌr zu indexierende Dateien\n\texcludePatterns: string[]; // Glob-Patterns fΓΌr auszuschlieΓende Dateien\n\ttype: 'generic' | 'react' | 'theme'; // Template-Typ fΓΌr Filterung\n\ttags: string[]; // Tags fΓΌr Kategorisierung\n}\n\n/**\n * Liste aller zu indexierenden Template-Repos\n */\nexport const TEMPLATE_REPOS: TemplateRepoConfig[] = [\n\t{\n\t\tid: 'public-ui-templates',\n\t\tname: 'KoliBri Generic Templates',\n\t\towner: 'public-ui',\n\t\trepo: 'templates',\n\t\tbranch: 'main',\n\t\tdescription: 'Generische KoliBri-Templates und Vorlagen fΓΌr verschiedene Use Cases',\n\t\tincludePatterns: ['**/*.md', 'src/**/*'],\n\t\texcludePatterns: ['**/node_modules/**', '**/dist/**', '**/.git/**', '*.lock'],\n\t\ttype: 'generic',\n\t\ttags: ['template', 'generic', 'kolibri', 'starter'],\n\t},\n\t{\n\t\tid: 'public-ui-template-react',\n\t\tname: 'KoliBri React Templates',\n\t\towner: 'public-ui',\n\t\trepo: 'template-react',\n\t\tbranch: 'main',\n\t\tdescription: 'React-spezifische Templates mit KoliBri-Integration',\n\t\tincludePatterns: ['**/*.md', 'src/**/*', '*.tsx', '*.ts'],\n\t\texcludePatterns: ['**/node_modules/**', '**/dist/**', '**/.git/**', '*.lock'],\n\t\ttype: 'react',\n\t\ttags: ['template', 'react', 'typescript', 'kolibri'],\n\t},\n\t{\n\t\tid: 'public-ui-template-theme',\n\t\tname: 'KoliBri Theme Templates',\n\t\towner: 'public-ui',\n\t\trepo: 'template-theme',\n\t\tbranch: 'main',\n\t\tdescription: 'Thema-Vorlagen und Design-System-Konfigurationen',\n\t\tincludePatterns: ['**/*.md', 'src/**/*', '*.css', '*.scss', '*.json'],\n\t\texcludePatterns: ['**/node_modules/**', '**/dist/**', '**/.git/**', '*.lock'],\n\t\ttype: 'theme',\n\t\ttags: ['template', 'theme', 'design', 'css', 'kolibri'],\n\t},\n];\n\n/**\n * Typ fΓΌr indexierte Template-Ressourcen\n */\nexport interface IndexedTemplateResource {\n\tid: string; // Eindeutige ID (z.B. \"public-ui-templates/src/button\")\n\trepoId: string; // ID des Ursprungs-Repos\n\tpath: string; // Relativer Pfad im Repo\n\ttype: 'markdown' | 'code' | 'config'; // Ressourcen-Typ\n\tcontent: string; // Roh-Inhalt\n\tmetadata: {\n\t\tname: string; // Name (aus Dateiname oder Frontmatter)\n\t\tdescription?: string; // Beschreibung (aus Frontmatter oder generiert)\n\t\ttags: string[]; // Tags (aus Repo + Frontmatter)\n\t\ttemplateType: string; // \"generic\" | \"react\" | \"theme\"\n\t\tlanguage?: string; // Sprache fΓΌr Code-Dateien\n\t\tdependencies?: string[]; // AbhΓ€ngigkeiten (aus package.json oder Frontmatter)\n\t\texample?: string; // Beispiel-Code (falls vorhanden)\n\t};\n\tstats: {\n\t\tsize: number; // DateigrΓΆΓe in Bytes\n\t\tlines: number; // Zeilenanzahl\n\t\tlastModified: string; // Letztes Γndern (ISO-Format)\n\t};\n}\n```\n\n---\n\n### π 4.2 `src/templates/indexer/fetcher.ts`\n\n```typescript\nimport simpleGit from 'simple-git';\nimport { promises as fs } from 'fs';\nimport { join, dirname } from 'path';\nimport { TEMPLATE_REPOS, type TemplateRepoConfig, type IndexedTemplateResource } from './config.js';\nimport { glob } from 'glob';\n\n/**\n * Cache-Verzeichnis fΓΌr geklonte Repos\n */\nconst CACHE_DIR = join(process.cwd(), 'data', 'templates');\n\n/**\n * Klont oder aktualisiert ein Git-Repository\n */\nasync function cloneOrUpdateRepo(repoConfig: TemplateRepoConfig): Promise<string> {\n\tconst repoPath = join(CACHE_DIR, repoConfig.id);\n\tconst git = simpleGit();\n\n\ttry {\n\t\t// PrΓΌfe, ob Repo bereits existiert\n\t\tif (await fs.access(repoPath).catch(() => false)) {\n\t\t\t// Repo existiert β Pull latest changes\n\t\t\tawait git.cwd(repoPath).pull();\n\t\t\tconsole.log(`β
Updated ${repoConfig.id}`);\n\t\t} else {\n\t\t\t// Repo klonen\n\t\t\tawait git.clone(`https://github.com/${repoConfig.owner}/${repoConfig.repo}.git`, repoPath, {\n\t\t\t\tbranch: repoConfig.branch,\n\t\t\t});\n\t\t\tconsole.log(`β
Cloned ${repoConfig.id}`);\n\t\t}\n\t\treturn repoPath;\n\t} catch (error) {\n\t\tconsole.error(`β Error cloning/updating ${repoConfig.id}:`, error);\n\t\tthrow error;\n\t}\n}\n\n/**\n * Findet alle Dateien in einem Repo, die den Include-Patterns entsprechen\n */\nasync function findFilesInRepo(repoPath: string, repoConfig: TemplateRepoConfig): Promise<string[]> {\n\tconst allFiles: string[] = [];\n\n\tfor (const pattern of repoConfig.includePatterns) {\n\t\tconst files = await glob(pattern, {\n\t\t\tcwd: repoPath,\n\t\t\tignore: repoConfig.excludePatterns,\n\t\t\tnodir: true,\n\t\t});\n\t\tallFiles.push(...files);\n\t}\n\n\treturn [...new Set(allFiles)]; // Deduplizieren\n}\n\n/**\n * Bestimmt den Ressourcen-Typ basierend auf der Dateiendung\n */\nfunction getResourceType(filePath: string): 'markdown' | 'code' | 'config' {\n\tif (filePath.endsWith('.md') || filePath.endsWith('.markdown')) {\n\t\treturn 'markdown';\n\t}\n\tif (filePath.endsWith('.json') || filePath.endsWith('.yaml') || filePath.endsWith('.yml')) {\n\t\treturn 'config';\n\t}\n\treturn 'code';\n}\n\n/**\n * Bestimmt die Sprache fΓΌr Code-Dateien\n */\nfunction getLanguage(filePath: string): string {\n\tconst extension = filePath.split('.').pop()?.toLowerCase();\n\tconst languageMap: Record<string, string> = {\n\t\tts: 'typescript',\n\t\ttsx: 'typescript',\n\t\tjs: 'javascript',\n\t\tjsx: 'javascript',\n\t\tcss: 'css',\n\t\tscss: 'scss',\n\t\thtml: 'html',\n\t\tjson: 'json',\n\t\tyaml: 'yaml',\n\t\tyml: 'yaml',\n\t};\n\treturn languageMap[extension || ''] || extension || 'unknown';\n}\n\n/**\n * Extrahiert Metadaten aus Frontmatter (fΓΌr Markdown-Dateien)\n */\nfunction extractFrontmatter(content: string): Record<string, any> {\n\tconst frontmatterRegex = /^---[\\s\\S]*?---/;\n\tconst match = content.match(frontmatterRegex);\n\n\tif (!match) return {};\n\n\ttry {\n\t\tconst frontmatter = match[0].replace(/^---|---$/g, '').trim();\n\t\t// Einfaches YAML-Parsing (fΓΌr komplexere FΓ€lle: js-yaml verwenden)\n\t\tconst metadata: Record<string, any> = {};\n\t\tfrontmatter.split('\\n').forEach((line) => {\n\t\t\tconst [key, value] = line.split(':').map((s) => s.trim());\n\t\t\tif (key && value) {\n\t\t\t\tmetadata[key] = value.replace(/^['\"\"]|['\"\"]$/g, '');\n\t\t\t}\n\t\t});\n\t\treturn metadata;\n\t} catch {\n\t\treturn {};\n\t}\n}\n\n/**\n * LΓ€dt und indexiert eine einzelne Datei\n */\nasync function indexFile(repoPath: string, filePath: string, repoConfig: TemplateRepoConfig): Promise<IndexedTemplateResource> {\n\tconst absolutePath = join(repoPath, filePath);\n\tconst content = await fs.readFile(absolutePath, 'utf-8');\n\tconst stats = await fs.stat(absolutePath);\n\n\t// Metadaten extrahieren\n\tconst frontmatter = getResourceType(filePath) === 'markdown' ? extractFrontmatter(content) : {};\n\n\t// Zeilenanzahl berechnen\n\tconst lines = content.split('\\n').length;\n\n\treturn {\n\t\tid: `${repoConfig.id}:${filePath.replace(/[/\\\\]/g, ':')}`,\n\t\trepoId: repoConfig.id,\n\t\tpath: filePath,\n\t\ttype: getResourceType(filePath),\n\t\tcontent,\n\t\tmetadata: {\n\t\t\tname: frontmatter.title || filePath.split('/').pop() || '',\n\t\t\tdescription: frontmatter.description,\n\t\t\ttags: [...(repoConfig.tags || []), ...(frontmatter.tags || [])].filter((t: string) => t),\n\t\t\ttemplateType: repoConfig.type,\n\t\t\tlanguage: getResourceType(filePath) === 'code' ? getLanguage(filePath) : undefined,\n\t\t},\n\t\tstats: {\n\t\t\tsize: stats.size,\n\t\t\tlines,\n\t\t\tlastModified: stats.mtime.toISOString(),\n\t\t},\n\t};\n}\n\n/**\n * Indexiert ein komplettes Template-Repo\n */\nexport async function indexTemplateRepo(repoConfig: TemplateRepoConfig): Promise<IndexedTemplateResource[]> {\n\tconsole.log(`π Indexing ${repoConfig.id}...`);\n\n\tconst repoPath = await cloneOrUpdateRepo(repoConfig);\n\tconst files = await findFilesInRepo(repoPath, repoConfig);\n\n\tconsole.log(` Found ${files.length} files to index`);\n\n\tconst resources: IndexedTemplateResource[] = [];\n\tfor (const file of files) {\n\t\ttry {\n\t\t\tconst resource = await indexFile(repoPath, file, repoConfig);\n\t\t\tresources.push(resource);\n\t\t} catch (error) {\n\t\t\tconsole.warn(` β οΈ Could not index ${file}:`, error);\n\t\t}\n\t}\n\n\tconsole.log(`β
Indexed ${resources.length} resources from ${repoConfig.id}`);\n\treturn resources;\n}\n\n/**\n * Indexiert alle konfigurierten Template-Repos\n */\nexport async function indexAllTemplateRepos(): Promise<IndexedTemplateResource[]> {\n\tconst allResources: IndexedTemplateResource[] = [];\n\n\tfor (const repoConfig of TEMPLATE_REPOS) {\n\t\ttry {\n\t\t\tconst resources = await indexTemplateRepo(repoConfig);\n\t\t\tallResources.push(...resources);\n\t\t} catch (error) {\n\t\t\tconsole.error(`β Failed to index ${repoConfig.id}:`, error);\n\t\t}\n\t}\n\n\treturn allResources;\n}\n\n/**\n * Aktualisiert den Template-Index (wird periodisch aufgerufen)\n */\nexport async function updateTemplateIndex(): Promise<void> {\n\tconsole.log('π Updating template index...');\n\tconst resources = await indexAllTemplateRepos();\n\n\t// Speichern in JSON-Datei fΓΌr schnellen Zugriff\n\tconst indexPath = join(CACHE_DIR, 'template-index.json');\n\tawait fs.writeFile(indexPath, JSON.stringify(resources, null, 2));\n\n\tconsole.log(`β
Template index updated with ${resources.length} resources`);\n}\n```\n\n---\n\n### π 4.3 `src/templates/indexer/parser.ts`\n\n````typescript\nimport type { IndexedTemplateResource } from './config.js';\n\n/**\n * Parsed und extrahiert nΓΌtzliche Informationen aus Template-Ressourcen\n */\n\n/**\n * Extrahiere Code-BlΓΆcke aus Markdown\n */\nexport function extractCodeBlocksFromMarkdown(markdown: string): Array<{\n\tlanguage: string;\n\tcode: string;\n\ttitle?: string;\n}> {\n\tconst codeBlockRegex = /```(\\w*)\\s*([\\s\\S]*?)```/g;\n\tconst blocks: Array<{ language: string; code: string; title?: string }> = [];\n\n\tlet match;\n\twhile ((match = codeBlockRegex.exec(markdown)) !== null) {\n\t\tconst language = match[1] || '';\n\t\tconst code = match[2].trim();\n\n\t\t// Titel extrahieren (z.B. // title: My Component)\n\t\tconst titleMatch = code.match(/^\\/\\/\\s*title:\\s*(.+)$/m);\n\t\tconst title = titleMatch ? titleMatch[1].trim() : undefined;\n\n\t\tblocks.push({ language, code, title });\n\t}\n\n\treturn blocks;\n}\n\n/**\n * Extrahiere AbhΓ€ngigkeiten aus package.json-Inhalten\n */\nexport function extractDependencies(content: string): string[] {\n\ttry {\n\t\tconst packageJson = JSON.parse(content);\n\t\tconst dependencies: string[] = [];\n\n\t\tif (packageJson.dependencies) {\n\t\t\tdependencies.push(...Object.keys(packageJson.dependencies));\n\t\t}\n\t\tif (packageJson.devDependencies) {\n\t\t\tdependencies.push(...Object.keys(packageJson.devDependencies));\n\t\t}\n\t\tif (packageJson.peerDependencies) {\n\t\t\tdependencies.push(...Object.keys(packageJson.peerDependencies));\n\t\t}\n\n\t\treturn [...new Set(dependencies)].sort();\n\t} catch {\n\t\treturn [];\n\t}\n}\n\n/**\n * Extrahiere KoliBri-spezifische Importe aus Code\n */\nexport function extractKolibriImports(code: string): string[] {\n\tconst importRegex = /from\\s+['\"](@public-ui\\/[^'\"]+|kolibri[^'\"]+)['\"]/g;\n\tconst imports: Set<string> = new Set();\n\n\tlet match;\n\twhile ((match = importRegex.exec(code)) !== null) {\n\t\timports.add(match[1]);\n\t}\n\n\treturn Array.from(imports);\n}\n\n/**\n * Erzeuge eine Vorschau fΓΌr eine Ressource\n */\nexport function generatePreview(resource: IndexedTemplateResource, maxLines: number = 10): string {\n\tconst lines = resource.content.split('\\n');\n\tconst previewLines = lines.slice(0, maxLines);\n\n\tif (lines.length > maxLines) {\n\t\tpreviewLines.push(`... (${lines.length - maxLines} more lines)`);\n\t}\n\n\treturn previewLines.join('\\n');\n}\n\n/**\n * Berechne einen Similarity-Score fΓΌr Suchanfragen\n */\nexport function calculateSimilarityScore(resource: IndexedTemplateResource, query: string): number {\n\tlet score = 0;\n\n\t// Titel-Γbereinstimmung\n\tif (resource.metadata.name.toLowerCase().includes(query.toLowerCase())) {\n\t\tscore += 100;\n\t}\n\n\t// Beschreibung-Γbereinstimmung\n\tif (resource.metadata.description?.toLowerCase().includes(query.toLowerCase())) {\n\t\tscore += 50;\n\t}\n\n\t// Tag-Γbereinstimmung\n\tconst queryLower = query.toLowerCase();\n\tfor (const tag of resource.metadata.tags) {\n\t\tif (tag.toLowerCase().includes(queryLower)) {\n\t\t\tscore += 30;\n\t\t}\n\t}\n\n\t// Inhalt-Γbereinstimmung (gewichtet nach Position)\n\tconst contentLower = resource.content.toLowerCase();\n\tconst firstMatchIndex = contentLower.indexOf(queryLower);\n\tif (firstMatchIndex !== -1) {\n\t\t// Je frΓΌher der Match, desto hΓΆher der Score\n\t\tconst positionScore = Math.max(0, 100 - firstMatchIndex / 100);\n\t\tscore += positionScore;\n\t}\n\n\treturn score;\n}\n````\n\n---\n\n### π 4.4 `src/templates/index.ts`\n\n```typescript\nimport { TEMPLATE_REPOS, type IndexedTemplateResource } from './indexer/config.js';\nimport { indexAllTemplateRepos, updateTemplateIndex } from './indexer/fetcher.js';\nimport { calculateSimilarityScore, extractCodeBlocksFromMarkdown } from './indexer/parser.js';\n\n/**\n * Geladener Template-Index (wird beim Start geladen)\n */\nlet templateIndex: IndexedTemplateResource[] = [];\n\n/**\n * LΓ€dt den Template-Index aus dem Cache\n */\nasync function loadTemplateIndex(): Promise<IndexedTemplateResource[]> {\n\t// TODO: Implementieren\n\treturn [];\n}\n\n/**\n * Initialisiert den Template-Index (wird beim Server-Start aufgerufen)\n */\nexport async function initializeTemplateIndex(): Promise<void> {\n\tconsole.log('π Initializing template index...');\n\n\ttry {\n\t\ttemplateIndex = await loadTemplateIndex();\n\n\t\t// Falls Index leer oder veraltet, neu erstellen\n\t\tif (templateIndex.length === 0) {\n\t\t\tawait updateTemplateIndex();\n\t\t\ttemplateIndex = await loadTemplateIndex();\n\t\t}\n\n\t\tconsole.log(`β
Template index loaded with ${templateIndex.length} resources`);\n\t} catch (error) {\n\t\tconsole.error('β Failed to initialize template index:', error);\n\t\t// Mit leerem Index weitermachen\n\t\ttemplateIndex = [];\n\t}\n}\n\n/**\n * Durchsucht den Template-Index\n */\nexport function searchTemplates(\n\tquery: string,\n\toptions: {\n\t\ttype?: string;\n\t\trepoId?: string;\n\t\ttags?: string[];\n\t\ttemplateType?: string;\n\t\tlimit?: number;\n\t} = {},\n): Array<IndexedTemplateResource & { score: number }> {\n\tconst { type, repoId, tags, templateType, limit = 20 } = options;\n\n\t// Filter anwenden\n\tlet results = templateIndex.filter((resource) => {\n\t\tif (repoId && resource.repoId !== repoId) return false;\n\t\tif (type && resource.type !== type) return false;\n\t\tif (templateType && resource.metadata.templateType !== templateType) return false;\n\t\tif (tags && tags.length > 0) {\n\t\t\tconst hasAllTags = tags.every((tag) => resource.metadata.tags.includes(tag));\n\t\t\tif (!hasAllTags) return false;\n\t\t}\n\t\treturn true;\n\t});\n\n\t// Nach Relevanz sortieren\n\tresults = results\n\t\t.map((resource) => ({\n\t\t\t...resource,\n\t\t\tscore: calculateSimilarityScore(resource, query),\n\t\t}))\n\t\t.sort((a, b) => b.score - a.score)\n\t\t.slice(0, limit);\n\n\treturn results as Array<IndexedTemplateResource & { score: number }>;\n}\n\n/**\n * Holt eine spezifische Template-Ressource\n */\nexport function getTemplateResource(id: string): IndexedTemplateResource | undefined {\n\treturn templateIndex.find((resource) => resource.id === id);\n}\n\n/**\n * Extrahiert Code-BlΓΆcke aus einer Markdown-Ressource\n */\nexport function getTemplateCodeBlocks(resource: IndexedTemplateResource): Array<{\n\tlanguage: string;\n\tcode: string;\n\ttitle?: string;\n}> {\n\tif (resource.type !== 'markdown') {\n\t\treturn [{ language: resource.metadata.language || 'unknown', code: resource.content }];\n\t}\n\n\treturn extractCodeBlocksFromMarkdown(resource.content);\n}\n\n/**\n * Liste aller verfΓΌgbaren Template-Typen\n */\nexport function getTemplateTypes(): string[] {\n\tconst types = new Set<string>();\n\tfor (const repo of TEMPLATE_REPOS) {\n\t\ttypes.add(repo.type);\n\t}\n\treturn Array.from(types);\n}\n\n/**\n * Liste aller verfΓΌgbaren Repo-IDs\n */\nexport function getTemplateRepoIds(): string[] {\n\treturn TEMPLATE_REPOS.map((repo) => repo.id);\n}\n\n/**\n * Liste aller verfΓΌgbaren Tags\n */\nexport function getAllTemplateTags(): string[] {\n\tconst tags = new Set<string>();\n\tfor (const resource of templateIndex) {\n\t\tfor (const tag of resource.metadata.tags) {\n\t\t\ttags.add(tag);\n\t\t}\n\t}\n\treturn Array.from(tags).sort();\n}\n\nexport { TEMPLATE_REPOS, templateIndex };\n```\n\n---\n\n### π 4.5 Anpassung von `src/mcp.ts`\n\n```typescript\n// Imports am Anfang hinzufΓΌgen\nimport {\n\tinitializeTemplateIndex,\n\tsearchTemplates,\n\tgetTemplateResource,\n\tgetTemplateCodeBlocks,\n\tgetTemplateTypes,\n\tgetTemplateRepoIds,\n\tgetAllTemplateTags,\n} from './templates/index.js';\n\n// In der configureServer-Funktion:\nasync function configureServer(server: Server) {\n\t// Template-Index initialisieren\n\tawait initializeTemplateIndex();\n\n\t// ... bestehende Tools ...\n\n\t// Neues Tool: Template-Suche\n\tserver.registerTool(\n\t\t'search_templates',\n\t\t{\n\t\t\ttitle: 'Search KoliBri Templates',\n\t\t\tdescription:\n\t\t\t\t'Searches through KoliBri template repositories (generic, react, theme) for code examples and documentation. ' +\n\t\t\t\t'Returns matching templates with metadata, previews, and code blocks.',\n\t\t\tinputSchema: {\n\t\t\t\tquery: z.string().describe(\"Search query (e.g., 'button', 'form', 'dark theme').\"),\n\t\t\t\ttype: z.enum(['all', 'markdown', 'code', 'config']).optional().default('all').describe('Filter by resource type.'),\n\t\t\t\ttemplateType: z.string().optional().describe('Filter by template type (generic, react, theme).'),\n\t\t\t\trepoId: z.string().optional().describe('Filter by repository ID.'),\n\t\t\t\ttags: z.array(z.string()).optional().describe('Filter by tags.'),\n\t\t\t\tlimit: z.number().int().min(1).max(50).optional().default(20).describe('Maximum number of results.'),\n\t\t\t},\n\t\t},\n\t\tasync ({ query, type, templateType, repoId, tags, limit }) => {\n\t\t\tlog('tool', 'search_templates called', { query, type, templateType, repoId, limit });\n\n\t\t\tconst results = searchTemplates(query, {\n\t\t\t\ttype: type === 'all' ? undefined : type,\n\t\t\t\ttemplateType,\n\t\t\t\trepoId,\n\t\t\t\ttags,\n\t\t\t\tlimit,\n\t\t\t});\n\n\t\t\tlog('tool', 'search_templates completed', { resultCount: results.length });\n\n\t\t\treturn {\n\t\t\t\tcontent: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\ttext:\n\t\t\t\t\t\t\tresults.length === 0\n\t\t\t\t\t\t\t\t? `No templates found for \"${query}\"`\n\t\t\t\t\t\t\t\t: `Found ${results.length} template(s) for \"${query}\":\\n\\n` +\n\t\t\t\t\t\t\t\t\tresults\n\t\t\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t\t\t(result, index) =>\n\t\t\t\t\t\t\t\t\t\t\t\t`${index + 1}. **${result.metadata.name}** (${result.repoId})\\n` +\n\t\t\t\t\t\t\t\t\t\t\t\t` Type: ${result.type} | Template: ${result.metadata.templateType}\\n` +\n\t\t\t\t\t\t\t\t\t\t\t\t` Tags: ${result.metadata.tags.join(', ')}\\n` +\n\t\t\t\t\t\t\t\t\t\t\t\t` Preview: ${result.content.substring(0, 100)}...\\n`,\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t.join('\\n\\n'),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tstructuredContent: {\n\t\t\t\t\tquery,\n\t\t\t\t\ttotal: results.length,\n\t\t\t\t\tresults: results.map((result) => ({\n\t\t\t\t\t\tid: result.id,\n\t\t\t\t\t\tname: result.metadata.name,\n\t\t\t\t\t\tdescription: result.metadata.description,\n\t\t\t\t\t\trepoId: result.repoId,\n\t\t\t\t\t\tpath: result.path,\n\t\t\t\t\t\ttype: result.type,\n\t\t\t\t\t\ttemplateType: result.metadata.templateType,\n\t\t\t\t\t\ttags: result.metadata.tags,\n\t\t\t\t\t\tscore: result.score,\n\t\t\t\t\t\tstats: result.stats,\n\t\t\t\t\t})),\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t);\n\n\t// Neues Tool: Template abrufen\n\tserver.registerTool(\n\t\t'fetch_template',\n\t\t{\n\t\t\ttitle: 'Fetch KoliBri Template',\n\t\t\tdescription: 'Fetches a specific template resource by ID. Returns the full content with metadata and extracted code blocks.',\n\t\t\tinputSchema: {\n\t\t\t\tid: z.string().describe(\"Template resource ID (e.g., 'public-ui-templates:src/button/button.stories.md').\"),\n\t\t\t\tincludeCodeBlocks: z.boolean().optional().default(true).describe('Whether to extract code blocks from markdown.'),\n\t\t\t},\n\t\t},\n\t\tasync ({ id, includeCodeBlocks }) => {\n\t\t\tlog('tool', 'fetch_template called', { id, includeCodeBlocks });\n\n\t\t\tconst resource = getTemplateResource(id);\n\n\t\t\tif (!resource) {\n\t\t\t\tthrow new Error(`Template not found: ${id}. Use search_templates to find valid IDs.`);\n\t\t\t}\n\n\t\t\tconst codeBlocks = includeCodeBlocks && resource.type === 'markdown' ? getTemplateCodeBlocks(resource) : [];\n\n\t\t\tlog('tool', 'fetch_template completed', { id, contentLength: resource.content.length });\n\n\t\t\treturn {\n\t\t\t\tcontent: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\ttext:\n\t\t\t\t\t\t\t`# ${resource.metadata.name}\\n\\n` +\n\t\t\t\t\t\t\t`**Repository:** ${resource.repoId}\\n\\n` +\n\t\t\t\t\t\t\t`**Path:** ${resource.path}\\n\\n` +\n\t\t\t\t\t\t\t`**Type:** ${resource.type}\\n\\n` +\n\t\t\t\t\t\t\t`**Template Type:** ${resource.metadata.templateType}\\n\\n` +\n\t\t\t\t\t\t\t`**Tags:** ${resource.metadata.tags.join(', ')}\\n\\n` +\n\t\t\t\t\t\t\t`---\\n\\n` +\n\t\t\t\t\t\t\tresource.content,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tstructuredContent: {\n\t\t\t\t\tid: resource.id,\n\t\t\t\t\tname: resource.metadata.name,\n\t\t\t\t\tdescription: resource.metadata.description,\n\t\t\t\t\trepoId: resource.repoId,\n\t\t\t\t\tpath: resource.path,\n\t\t\t\t\ttype: resource.type,\n\t\t\t\t\ttemplateType: resource.metadata.templateType,\n\t\t\t\t\ttags: resource.metadata.tags,\n\t\t\t\t\tlanguage: resource.metadata.language,\n\t\t\t\t\tstats: resource.stats,\n\t\t\t\t\tcodeBlocks: codeBlocks.map((block) => ({\n\t\t\t\t\t\tlanguage: block.language,\n\t\t\t\t\t\ttitle: block.title,\n\t\t\t\t\t\tcodeLength: block.code.length,\n\t\t\t\t\t})),\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t);\n\n\t// Neues Tool: Template-Tags auflisten\n\tserver.registerTool(\n\t\t'list_template_tags',\n\t\t{\n\t\t\ttitle: 'List Template Tags',\n\t\t\tdescription: 'Returns all available tags for filtering templates.',\n\t\t\tinputSchema: {},\n\t\t},\n\t\tasync () => {\n\t\t\tconst tags = getAllTemplateTags();\n\t\t\treturn {\n\t\t\t\tcontent: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\ttext: `Available template tags (${tags.length}):\\n\\n` + tags.map((tag) => `- ${tag}`).join('\\n'),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tstructuredContent: {\n\t\t\t\t\ttags,\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t);\n\n\t// Neues Tool: Template-Typen auflisten\n\tserver.registerTool(\n\t\t'list_template_types',\n\t\t{\n\t\t\ttitle: 'List Template Types',\n\t\t\tdescription: 'Returns all available template types (generic, react, theme).',\n\t\t\tinputSchema: {},\n\t\t},\n\t\tasync () => {\n\t\t\tconst types = getTemplateTypes();\n\t\t\treturn {\n\t\t\t\tcontent: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\ttext: `Available template types:\\n\\n` + types.map((type) => `- ${type}`).join('\\n'),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tstructuredContent: {\n\t\t\t\t\ttypes,\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t);\n}\n\n// Periodisches Update des Template-Index (z.B. alle 24 Stunden)\nsetInterval(\n\tasync () => {\n\t\ttry {\n\t\t\tconsole.log('π Periodic template index update...');\n\t\t\tawait updateTemplateIndex();\n\t\t} catch (error) {\n\t\t\tconsole.error('β Periodic template index update failed:', error);\n\t\t}\n\t},\n\t24 * 60 * 60 * 1000,\n);\n```\n\n---\n\n### π 4.6 Anpassung von `package.json`\n\n```json\n{\n\t\"dependencies\": {\n\t\t\"simple-git\": \"^3.24.0\",\n\t\t\"glob\": \"^10.3.10\"\n\t},\n\t\"scripts\": {\n\t\t\"update-templates\": \"node scripts/update-templates.mjs\",\n\t\t\"prebuild\": \"pnpm generate-index && pnpm generate-schemas && pnpm update-templates\"\n\t}\n}\n```\n\n---\n\n### π 4.7 `scripts/update-templates.mjs`\n\n```javascript\n#!/usr/bin/env node\n/**\n * Skript zum manuellen Aktualisieren des Template-Index\n */\n\nimport { updateTemplateIndex } from '../dist/templates/indexer/fetcher.js';\n\nasync function main() {\n\tconsole.log('π Updating template index...');\n\n\ttry {\n\t\tawait updateTemplateIndex();\n\t\tconsole.log('β
Template index updated successfully');\n\t\tprocess.exit(0);\n\t} catch (error) {\n\t\tconsole.error('β Failed to update template index:', error);\n\t\tprocess.exit(1);\n\t}\n}\n\nmain();\n```\n\n---\n\n## π― Phase 5: Argument-Normalisierung (1 Tag)\n\n### π Dateistruktur\n\n```\npackages/tools/mcp/\nβββ src/\nβ βββ utils/\nβ βββ normalize.ts # Argument-Normalisierung\nβ βββ errors.ts # Fehlerformatierung\n```\n\n---\n\n### π 5.1 `src/utils/normalize.ts`\n\n```typescript\nimport type { z } from 'zod';\n\n/**\n * Normalisiert Argument-Objekte fΓΌr KoliBri-Tools.\n * FΓΌllt Defaults, konvertiert Aliase, bereinigt Eingaben.\n * @param toolName - Name des Tools\n * @param rawArgs - Roh-Argumente\n * @returns Normalisierte Argumente\n */\nexport function normalizeKolibriArgs(toolName: string, rawArgs: unknown): unknown {\n\tif (!rawArgs || typeof rawArgs !== 'object' || Array.isArray(rawArgs)) {\n\t\treturn rawArgs;\n\t}\n\n\tconst args = { ...(rawArgs as Record<string, unknown>) };\n\n\t// --- Tool-spezifische Normalisierungen ---\n\tswitch (toolName) {\n\t\t// generate_button: Aliase fΓΌr label, Defaults fΓΌr variant/type\n\t\tcase 'generate_button':\n\t\t\tif (!args.label && args.text) {\n\t\t\t\targs.label = args.text; // Alias: text β label\n\t\t\t}\n\t\t\tif (!args.label && args.content) {\n\t\t\t\targs.label = args.content; // Alias: content β label\n\t\t\t}\n\t\t\tif (!args.variant) {\n\t\t\t\targs.variant = 'primary';\n\t\t\t}\n\t\t\tif (!args.type) {\n\t\t\t\targs.type = 'button';\n\t\t\t}\n\t\t\tif (args.icon && !args.icon.position) {\n\t\t\t\targs.icon.position = 'left';\n\t\t\t}\n\t\t\tbreak;\n\n\t\t// generate_card: Defaults fΓΌr heading\n\t\tcase 'generate_card':\n\t\t\tif (!args.heading && args.title) {\n\t\t\t\targs.heading = args.title;\n\t\t\t}\n\t\t\tif (!args.content) {\n\t\t\t\targs.content = [];\n\t\t\t}\n\t\t\tif (!args.footer) {\n\t\t\t\targs.footer = [];\n\t\t\t}\n\t\t\tbreak;\n\n\t\t// render_composition: Mindestens 1 Block erzwingen\n\t\tcase 'render_composition':\n\t\t\tif (Array.isArray(args.blocks) && args.blocks.length === 0) {\n\t\t\t\targs.blocks = [{ kind: 'text', text: 'Default content' }];\n\t\t\t}\n\t\t\tbreak;\n\n\t\t// search: Defaults fΓΌr limit/kind\n\t\tcase 'search':\n\t\t\tif (args.limit === undefined) {\n\t\t\t\targs.limit = 10;\n\t\t\t}\n\t\t\tif (args.kind && !['doc', 'sample', 'scenario', 'spec'].includes(args.kind)) {\n\t\t\t\tdelete args.kind; // UngΓΌltiges kind ignorieren\n\t\t\t}\n\t\t\tbreak;\n\t}\n\n\t// --- Allgemeine Normalisierungen ---\n\t// Booleans: \"true\"/\"false\" β true/false\n\tfor (const key in args) {\n\t\tif (args[key] === 'true') args[key] = true;\n\t\tif (args[key] === 'false') args[key] = false;\n\t}\n\n\t// Leere Strings β undefined\n\tfor (const key in args) {\n\t\tif (args[key] === '') {\n\t\t\targs[key] = undefined;\n\t\t}\n\t}\n\n\treturn args;\n}\n```\n\n---\n\n## π― Phase 6: Detaillierte Fehlerbehandlung (1 Tag)\n\n**Ziel:** Verbesserte Fehlerbehandlung mit tool-spezifischen Cheat-Sheets und hilfreichen Fehlermeldungen fΓΌr Agents.\n\n---\n\n### π 6.1 `src/utils/errors.ts`\n\n```typescript\nimport type { z } from 'zod';\nimport { COMPOSITION_CHEAT_SHEET } from '../composition/cheat-sheet.js';\n\n/**\n * Formatiert Validierungsfehler fΓΌr KoliBri-Tools.\n * @param toolName - Name des Tools\n * @param error - Zod-Validierungsfehler\n * @param locale - Sprache fΓΌr Fehlermeldungen\n * @returns Formatierte Fehlermeldung\n */\nexport function formatKolibriValidationError(toolName: string, error: z.ZodError, locale: 'en' | 'de' = 'en'): string {\n\tconst base = error.issues\n\t\t.map((issue) => {\n\t\t\tconst path = issue.path.length > 0 ? `${issue.path.join('.')}` : 'root';\n\t\t\treturn `- ${path}: ${issue.message}`;\n\t\t})\n\t\t.join('\\n');\n\n\t// Tool-spezifische Hilfestellungen\n\tswitch (toolName) {\n\t\tcase 'render_composition':\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\nπ‘ **Hilfestellung fΓΌr contentBlocks:**\\n${COMPOSITION_CHEAT_SHEET}`\n\t\t\t\t: `${base}\\n\\nπ‘ **Cheat Sheet for contentBlocks:**\\n${COMPOSITION_CHEAT_SHEET}`;\n\n\t\tcase 'generate_button':\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\nβ
**Beispiel fΓΌr gΓΌltige Parameter:**\\n\\`\\`\\`json\\n{\\n \"label\": \"Speichern\",\\n \"variant\": \"primary\",\\n \"icon\": { \"name\": \"save\", \"position\": \"left\" }\\n}\\n\\`\\`\\``\n\t\t\t\t: `${base}\\n\\nβ
**Example of valid payload:**\\n\\`\\`\\`json\\n{\\n \"label\": \"Save\",\\n \"variant\": \"primary\",\\n \"icon\": { \"name\": \"check\", \"position\": \"left\" }\\n}\\n\\`\\`\\``;\n\n\t\tcase 'generate_card':\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\nβ
**Beispiel:**\\n\\`\\`\\`json\\n{\\n \"heading\": \"Γberschrift\",\\n \"content\": [{ \"kind\": \"text\", \"text\": \"Inhalt\" }]\\n}\\n\\`\\`\\``\n\t\t\t\t: `${base}\\n\\nβ
**Example:**\\n\\`\\`\\`json\\n{\\n \"heading\": \"Title\",\\n \"content\": [{ \"kind\": \"text\", \"text\": \"Content\" }]\\n}\\n\\`\\`\\``;\n\n\t\tcase 'validate_html':\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\nπ **Tipp:** Nutze dieses Tool nach \\`generate_*\\` Tools oder mit HTML aus \\`fetch\\`.\\nSetze strict: true fΓΌr CI/CD-PrΓΌfungen.`\n\t\t\t\t: `${base}\\n\\nπ **Tip:** Use this after \\`generate_*\\` tools or with HTML from \\`fetch\\`.\\nSet strict: true for CI/CD enforcement.`;\n\n\t\tcase 'fetch':\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\nπ **Tipp:** Nutze \\`search\\`, um gΓΌltige IDs zu finden:\\n\\`\\`\\`json\\n{ \"query\": \"button\", \"kind\": \"sample\", \"limit\": 5 }\\n\\`\\`\\``\n\t\t\t\t: `${base}\\n\\nπ **Tip:** Use \\`search\\` to find valid IDs:\\n\\`\\`\\`json\\n{ \"query\": \"button\", \"kind\": \"sample\", \"limit\": 5 }\\n\\`\\`\\``;\n\n\t\tdefault:\n\t\t\treturn locale === 'de'\n\t\t\t\t? `${base}\\n\\nπ‘ Nutze \\`list_tools\\`, um verfΓΌgbare Tools und ihre Parameter zu sehen.`\n\t\t\t\t: `${base}\\n\\nπ‘ Use \\`list_tools\\` to see available tools and their parameters.`;\n\t}\n}\n```\n\n---\n\n### π 6.2 Anpassung von `src/mcp.ts`\n\n```typescript\n// Import am Anfang hinzufΓΌgen\nimport { normalizeKolibriArgs } from './utils/normalize.js';\nimport { formatKolibriValidationError } from './utils/errors.js';\n\n// Anpassung des globalen Request-Handlers\nserver.setRequestHandler(CallToolRequestSchema, async (request) => {\n\tconst { name, arguments: rawArgs } = request.params;\n\tconst tool = tools.get(name);\n\tif (!tool) {\n\t\tthrow new Error(`Unknown tool: ${name}. Use 'list_tools' to see available tools.`);\n\t}\n\n\t// 1. Normalisierung\n\tconst args = normalizeKolibriArgs(name, rawArgs);\n\n\t// 2. Schema-Validierung\n\tconst parsed = tool.inputSchema.safeParse(args);\n\tif (!parsed.success) {\n\t\tconst locale = (rawArgs as any)?.locale || 'en';\n\t\tthrow new Error(formatKolibriValidationError(name, parsed.error, locale));\n\t}\n\n\t// 3. Tool ausfΓΌhren\n\tconst result = await tool.handler(parsed.data);\n\n\t// 4. Ergebnis formatieren\n\treturn {\n\t\tcontent: [\n\t\t\t{\n\t\t\t\ttype: 'text',\n\t\t\t\ttext: typeof result === 'string' ? result : JSON.stringify(result, null, 2),\n\t\t\t},\n\t\t],\n\t\t...(result.structuredContent ? { structuredContent: result.structuredContent } : {}),\n\t};\n});\n```\n\n---\n\n## π¦ Package-Anpassungen\n\n### π `packages/tools/mcp/package.json`\n\n```json\n{\n\t\"name\": \"@public-ui/mcp\",\n\t\"version\": \"4.3.0-rc.7\",\n\t\"description\": \"Model Context Protocol server providing AI agents access to 136+ KoliBri component examples, code generation, and accessibility validation.\",\n\t\"dependencies\": {\n\t\t\"@modelcontextprotocol/sdk\": \"1.30.0\",\n\t\t\"@public-ui/components\": \"workspace:*\",\n\t\t\"express\": \"5.2.1\",\n\t\t\"fuse.js\": \"7.5.0\",\n\t\t\"node-html-parser\": \"^7.1.0\",\n\t\t\"zod\": \"4.4.3\"\n\t},\n\t\"scripts\": {\n\t\t\"prebuild\": \"pnpm generate-index && pnpm generate-schemas\",\n\t\t\"generate-schemas\": \"node scripts/generate-component-schemas.mjs\",\n\t\t\"build\": \"unbuild\",\n\t\t\"start\": \"node dist/mcp.cjs\",\n\t\t\"start:http\": \"node dist/mcp.cjs\",\n\t\t\"start:stdio\": \"node dist/cli.cjs\"\n\t}\n}\n```\n\n---\n\n## β
Testplan\n\n### π§ͺ Manuelle Tests (nach jeder Phase)\n\n| Test | Tool | Eingabe | Erwartetes Ergebnis |\n| -------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |\n| A11Y-Validierung | validate_html | `<button><kol-icon name=\"save\"></kol-icon></button>` | β οΈ button-missing-label-Fehler |\n| A11Y-Validierung | validate_html | `<button>Speichern</button>` | β
Keine Fehler |\n| A11Y-Validierung (strict) | validate_html | `<button><kol-icon name=\"save\"></kol-icon></button>`, strict: true | π Error: \"A11Y validation failed\" |\n| Button-Generierung | generate_button | `{ label: \"Klick\", variant: \"primary\" }` | β
`<kol-button variant=\"primary\">Klick</kol-button>` |\n| Button-Generierung (Alias) | generate_button | `{ text: \"Klick\" }` | β
`<kol-button>Klick</kol-button>` (text β label) |\n| Composition | render_composition | `{ blocks: [{ kind: \"text\", text: \"Hello\" }] }` | β
`<p>Hello</p>` |\n| Composition (nested) | render_composition | `{ blocks: [{ kind: \"card\", card: { heading: \"Title\", content: [{ kind: \"text\", text: \"Content\" }] } }]` | β
`<kol-card>...` |\n| Fehlerbehandlung | generate_button | `{ variant: \"invalid\" }` | β οΈ Fehler mit Cheat-Sheet |\n| Normalisierung | generate_button | `{ label: \" Klick \" }` | β
`<kol-button>Klick</kol-button>` (getrimmt) |\n\n---\n\n### π€ Agenten-Tests (Integrationstests)\n\n#### 1. Suche β Generierung β Validierung\n\n```mermaid\ngraph LR\n A[search: button] --> B[generate_button]\n B --> C[validate_html]\n C --> D[β
Valid]\n```\n\n#### 2. Composition mit Validierung\n\n```mermaid\ngraph LR\n A[render_composition] --> B[validate_html]\n B --> C[β
Valid]\n```\n\n#### 3. Fehlerbehandlung & Normalisierung\n\n```mermaid\ngraph LR\n A[generate_button: text=\"Klick\"] --> B[Normalisierung]\n B --> C[generate_button: label=\"Klick\"]\n C --> D[β
Valid]\n```\n\n---\n\n## π
Zeitplan & Meilensteine\n\n| Phase | Feature | Aufwand | Meilenstein | Verantwortlich |\n| ---------- | ----------------------------- | ------------- | ---------------------------------------- | -------------- |\n| 1 | A11Y-Validierung | 1β2 Tage | Agents kΓΆnnen HTML prΓΌfen | Backend-Team |\n| 2 | Dynamische Generierung | 2β3 Tage | Agents kΓΆnnen Komponenten generieren | Backend-Team |\n| 3 | Composition-System | 1β2 Tage | Agents kΓΆnnen Layouts bauen | Backend-Team |\n| 4 | Template-Repo-Integration | 2β3 Tage | Agents kΓΆnnen auf Templates zugreifen | Backend-Team |\n| 5 | Argument-Normalisierung | 1 Tag | Robustere API durch Defaults/Aliase | Backend-Team |\n| 6 | Detaillierte Fehlerbehandlung | 1 Tag | Bessere Fehlermeldungen mit Cheat-Sheets | Backend-Team |\n| **Gesamt** | **Alle Features** | **8β11 Tage** | **VollstΓ€ndige Integration** | **Team** |\n\n---\n\n## π Checkliste fΓΌr die Umsetzung\n\n### β
Phase 1: A11Y-Validierung\n\n- [ ] `src/a11y/types.ts` erstellen\n- [ ] `src/a11y/rules.ts` erstellen (mit 5β10 KoliBri-spezifischen Regeln)\n- [ ] `src/a11y/validate.ts` erstellen\n- [ ] `validate_html`-Tool in `src/mcp.ts` registrieren\n- [ ] `node-html-parser` in `package.json` hinzufΓΌgen\n- [ ] Manuelle Tests durchfΓΌhren\n- [ ] Unit-Tests fΓΌr `validateKolibriHtml` schreiben\n\n### β
Phase 2: Dynamische Generierung\n\n- [ ] `src/components/schemas/button.ts` erstellen\n- [ ] `src/components/templates/button.ts` erstellen\n- [ ] `src/components/index.ts` erstellen (Generator-Fabrik)\n- [ ] Dynamische Tool-Registrierung in `src/mcp.ts` hinzufΓΌgen\n- [ ] `scripts/generate-component-schemas.mjs` erstellen\n- [ ] `prebuild`-Skript in `package.json` anpassen\n- [ ] Manuelle Tests durchfΓΌhren\n- [ ] 2β3 weitere Komponenten (Input, Card) hinzufΓΌgen\n\n### β
Phase 3: Composition-System\n\n- [ ] `src/composition/types.ts` erstellen\n- [ ] `src/composition/render.ts` erstellen\n- [ ] `src/composition/cheat-sheet.ts` erstellen\n- [ ] `render_composition`-Tool in `src/mcp.ts` registrieren\n- [ ] Manuelle Tests durchfΓΌhren\n- [ ] Grid-Block hinzufΓΌgen\n\n### β
Phase 4: Template-Repo-Integration\n\n- [ ] `src/templates/indexer/config.ts` erstellen\n- [ ] `src/templates/indexer/fetcher.ts` erstellen\n- [ ] `src/templates/indexer/parser.ts` erstellen\n- [ ] `src/templates/index.ts` erstellen\n- [ ] Template-Tools in `src/mcp.ts` registrieren (`search_templates`, `fetch_template`, `list_template_tags`, `list_template_types`)\n- [ ] `simple-git` und `glob` in `package.json` hinzufΓΌgen\n- [ ] `scripts/update-templates.mjs` erstellen\n- [ ] Manuelle Tests durchfΓΌhren\n- [ ] Unit-Tests fΓΌr Template-Indexierung schreiben\n\n### β
Phase 5: Argument-Normalisierung\n\n- [ ] `src/utils/normalize.ts` erstellen\n- [ ] Request-Handler in `src/mcp.ts` anpassen\n- [ ] Manuelle Tests durchfΓΌhren\n- [ ] Unit-Tests fΓΌr Normalisierung schreiben\n\n### β
Phase 6: Detaillierte Fehlerbehandlung\n\n- [ ] `src/utils/errors.ts` erstellen\n- [ ] Request-Handler in `src/mcp.ts` anpassen\n- [ ] Manuelle Tests durchfΓΌhren\n- [ ] Unit-Tests fΓΌr Fehlerbehandlung schreiben\n\n### β
Abschluss\n\n- [ ] Alle AbhΓ€ngigkeiten in `package.json` prΓΌfen\n- [ ] `pnpm install` ausfΓΌhren\n- [ ] `pnpm build` ausfΓΌhren\n- [ ] `pnpm start:http` testen\n- [ ] Integrationstests mit Agents durchfΓΌhren\n- [ ] Dokumentation in README.md aktualisieren\n\n---\n\n## π Dokumentation-Updates\n\n### π README.md (ErgΓ€nzungen)\n\n````markdown\n## π Neue Features (v4.3.0-rc.7)\n\n### β
A11Y-Validierung\n\nValidiert HTML gegen **WCAG 2.1 / EN 301 549** (EU-Standard fΓΌr Barrierefreiheit).\n\n**Beispiel:**\n\n```json\n{\n\t\"name\": \"validate_html\",\n\t\"arguments\": {\n\t\t\"html\": \"<button>Speichern</button>\",\n\t\t\"strict\": true\n\t}\n}\n```\n````\n\n### β
Dynamische Komponenten-Generierung\n\nGeneriert KoliBri-Komponenten dynamisch aus Parametern.\n\n**Beispiel:**\n\n```json\n{\n\t\"name\": \"generate_button\",\n\t\"arguments\": {\n\t\t\"label\": \"Speichern\",\n\t\t\"variant\": \"primary\",\n\t\t\"icon\": { \"name\": \"save\" }\n\t}\n}\n```\n\n### β
Composition-System\n\nErstellt komplexe Layouts in einem Aufruf (Grid + Card + Button etc.).\n\n**Beispiel:**\n\n```json\n{\n\t\"name\": \"render_composition\",\n\t\"arguments\": {\n\t\t\"blocks\": [\n\t\t\t{\n\t\t\t\t\"kind\": \"card\",\n\t\t\t\t\"card\": {\n\t\t\t\t\t\"heading\": \"User Profile\",\n\t\t\t\t\t\"content\": [\n\t\t\t\t\t\t{ \"kind\": \"text\", \"text\": \"Welcome!\" },\n\t\t\t\t\t\t{ \"kind\": \"button\", \"button\": { \"label\": \"Edit\" } }\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t}\n\t\t]\n\t}\n}\n```\n\n```\n\n### π Tool-Γbersicht\n\n| Tool | Beschreibung | Beispiel |\n|------|--------------|----------|\n| `search` | Suche nach Samples/Docs/Specs | `{ query: \"button\", kind: \"sample\" }` |\n| `fetch` | Hole ein spezifisches Beispiel | `{ id: \"button/basic\" }` |\n| `validate_html` | β
**NEU** PrΓΌfe HTML auf A11Y | `{ html: \"<button>...\" }` |\n| `generate_<component>` | β
**NEU** Generiere Komponente | `{ label: \"Klick\" }` |\n| `render_composition` | β
**NEU** Generiere Layout | `{ blocks: [...] }` |\n| `search_templates` | β
**NEU** Suche in Template-Repos | `{ query: \"form\", templateType: \"react\" }` |\n| `fetch_template` | β
**NEU** Hole ein spezifisches Template | `{ id: \"public-ui-templates:src/button\" }` |\n| `list_template_tags` | β
**NEU** Liste alle Template-Tags | `{}` |\n| `list_template_types` | β
**NEU** Liste alle Template-Typen | `{}` |\n| `info` | Server-Metadaten | β |\n| `version` | Version abrufen | β |\n| `best-practices` | Guidelines | β |\n```\n\n---\n\n## π Deployment & Release\n\n### 1. Lokales Testen\n\n```bash\n# AbhΓ€ngigkeiten installieren\npnpm install\n\n# Schemas generieren\npnpm generate-schemas\n\n# Index generieren\npnpm generate-index\n\n# Build durchfΓΌhren\npnpm build\n\n# HTTP-Server starten\npnpm start:http\n\n# Testen mit curl\ncurl -X POST http://localhost:3000/mcp \\\n -H \"Content-Type: application/json\" \\\n -d '{\"method\": \"tools/call\", \"params\": {\"name\": \"validate_html\", \"arguments\": {\"html\": \"<button>Test</button>\"}}}'\n```\n\n### 2. Vercel-Deployment (bereits unterstΓΌtzt)\n\nDa KoliBri bereits HTTP-Transport unterstΓΌtzt, funktioniert das Deployment auf Vercel ohne Γnderungen:\n\n```bash\n# Environment-Variable fΓΌr Port setzen (Vercel setzt PORT automatisch)\nvercel\n```\n\n### 3. CI/CD-Pipeline (neu)\n\n```yaml\n# .github/workflows/test.yml\nname: Test MCP Server\n\non: [push, pull_request]\n\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n - run: pnpm install\n - run: pnpm generate-index\n - run: pnpm generate-schemas\n - run: pnpm build\n - run: pnpm test\n```\n\n### 4. Release-Checkliste\n\n- [ ] Alle Features implementiert\n- [ ] Unit-Tests geschrieben\n- [ ] Integrationstests mit Agents durchgefΓΌhrt\n- [ ] Dokumentation aktualisiert\n- [ ] Changelog aktualisiert (CHANGELOG.md)\n- [ ] Version in `package.json` hochgesetzt\n- [ ] PR erstellt & Review durchfΓΌhrt\n- [ ] Release auf npm verΓΆffentlicht (`pnpm publish`)\n\n---\n\n## π Success Metrics\n\n| Metrik | Zielwert | Aktueller Stand | Status |\n| ------------------------- | --------------- | --------------- | ----------- |\n| Anzahl Tools | 150+ | ~140 | β
Erreicht |\n| A11Y-Abdeckung | 10 Regeln | 0 | β Neu |\n| Dynamische Generierung | 10+ Komponenten | 0 | β Neu |\n| Composition-UnterstΓΌtzung | Ja | Nein | β Neu |\n| Agenten-Feedback | Positiv | β | β³ TBD |\n| Build-Zeit | < 5min | ~3min | β
OK |\n| Bundle-GrΓΆΓe | < 5MB | ~3MB | β
OK |\n\n---\n\n## π Support & Feedback\n\n**Ansprechpartner:**\n\n- Technische Fragen: KoliBri-Maintainer\n- A11Y-Regeln: ITZ Bund A11Y-Team\n- MCP-Integration: Model Context Protocol Discord\n\n**Feedback geben:**\n\n1. Issues im KoliBri-Repo erstellen\n2. PRs mit dem Label `mcp` und `enhancement` einreichen\n3. Diskussionen im KoliBri-Discussions starten\n\n---\n\n## π Changelog-Eintrag (Beispiel)\n\n```markdown\n## [4.3.0-rc.7](https://github.com/public-ui/kolibri/compare/v4.3.0-rc.6...v4.3.0-rc.7) (YYYY-MM-DD)\n\n### β¨ Features\n\n- **MCP: A11Y-Validierung hinzugefΓΌgt** (`validate_html`)\n - Validiert HTML gegen **WCAG 2.1 / EN 301 549**-Regeln\n - UnterstΓΌtzt **strict-Modus** fΓΌr CI/CD-Integration\n - Gibt **strukturierte Issues** mit `ruleId`, `severity`, `message` (EN/DE) zurΓΌck\n - EnthΓ€lt **Hilfs-URLs** fΓΌr jede Regel\n - [#1234](https://github.com/public-ui/kolibri/issues/1234)\n\n- **MCP: Dynamische Komponenten-Generierung** (`generate_<component>`)\n - Generiert KoliBri-Komponenten **dynamisch aus Parametern**\n - UnterstΓΌtzt **Button**, **Input**, **Card** und weitere Komponenten\n - **A11Y-konform** durch automatische Validierung\n - Aliase fΓΌr Parameter (z. B. `text` β `label`)\n - [#1235](https://github.com/public-ui/kolibri/issues/1235)\n\n- **MCP: Composition-System** (`render_composition`)\n - ErmΓΆglicht **rekursive Layout-Generierung** in einem Aufruf\n - UnterstΓΌtzt **Text**, **HTML**, **Button**, **Card**, **Grid**-BlΓΆcke\n - **Nesting** von BlΓΆcken (z. B. Card mit Button)\n - Tiefenbegrenzung zur Vermeidung von Stack Overflow\n - [#1236](https://github.com/public-ui/kolibri/issues/1236)\n\n- **MCP: Verbesserte Fehlerbehandlung**\n - **Tool-spezifische Cheat-Sheets** in Fehlermeldungen\n - **Normalisierung von Argumenten** (Defaults, Aliase)\n - **Bessere Fehlermeldungen** fΓΌr Agents\n - [#1237](https://github.com/public-ui/kolibri/issues/1237)\n\n### π§° Technische Γnderungen\n\n- **Neue AbhΓ€ngigkeit:** `node-html-parser@^7.1.0` fΓΌr HTML-Parsing\n- **Neues Skript:** `generate-schemas` zur automatischen Schema-Generierung\n- **Erweiterte Typdefinitionen** fΓΌr Composition-BlΓΆcke\n\n### π Dokumentation\n\n- **README.md** aktualisiert mit neuen Features und Beispielen\n- **Cheat-Sheet** fΓΌr Composition-System hinzugefΓΌgt\n```\n\n---\n\n## π Abschluss\n\nMit dieser Umsetzung wird KoliBri MCP zum vollstΓ€ndigsten MCP-Server fΓΌr Design-Systems:\n\n- π **Suche & Discovery** (bestehend)\n- π **Code-Snippets** (bestehend)\n- β
**A11Y-Validierung** (neu)\n- β‘ **Dynamische Generierung** (neu)\n- π§© **Composition-System** (neu)\n- π‘οΈ **Robuste API** (neu)\n\nβ **Ideal fΓΌr Coding Agents, die barrierefreie KoliBri-UIs generieren mΓΌssen!**\n",
|
|
497
|
+
"kind": "doc"
|
|
498
|
+
},
|
|
491
499
|
{
|
|
492
500
|
"id": "doc/UPGRADEABLE_DEPENDENCIES",
|
|
493
501
|
"group": "docs",
|
|
@@ -560,6 +568,14 @@
|
|
|
560
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's avatar with customizable colors. It can be used with or without an image. If no image is defined, the name'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",
|
|
561
569
|
"kind": "sample"
|
|
562
570
|
},
|
|
571
|
+
{
|
|
572
|
+
"id": "sample/avatar/size",
|
|
573
|
+
"group": "avatar",
|
|
574
|
+
"name": "size",
|
|
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' 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",
|
|
577
|
+
"kind": "sample"
|
|
578
|
+
},
|
|
563
579
|
{
|
|
564
580
|
"id": "sample/badge/basic",
|
|
565
581
|
"group": "badge",
|
|
@@ -1568,6 +1584,14 @@
|
|
|
1568
1584
|
"code": "import { KolSelect } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { InputEventValueDemo } from '../InputEventValueDemo';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SelectOnInputOnChange: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tShows the callback value from <code>onInput</code> while typing and from <code>onChange</code> after leaving the field.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<InputEventValueDemo\n\t\t\tlabel=\"KolSelect\"\n\t\t\trenderInput={(handlers) => (\n\t\t\t\t<KolSelect\n\t\t\t\t\t_label=\"Select option\"\n\t\t\t\t\t_options={[\n\t\t\t\t\t\t{ label: 'Please selectβ¦', value: '' },\n\t\t\t\t\t\t{ label: 'One', value: 'one' },\n\t\t\t\t\t\t{ label: 'Two', value: 'two' },\n\t\t\t\t\t]}\n\t\t\t\t\t_on={handlers}\n\t\t\t\t/>\n\t\t\t)}\n\t\t/>\n\t</>\n);\n",
|
|
1569
1585
|
"kind": "sample"
|
|
1570
1586
|
},
|
|
1587
|
+
{
|
|
1588
|
+
"id": "sample/select/multiple-dropdown",
|
|
1589
|
+
"group": "select",
|
|
1590
|
+
"name": "multiple-dropdown",
|
|
1591
|
+
"path": "packages/samples/react/src/components/select/multiple-dropdown.tsx",
|
|
1592
|
+
"code": "import { KolSelect } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { InputEventValueDemo } from '../InputEventValueDemo';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SelectMultipleDropdown: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>Shows KolSelect with multiple=true and rows=1 - a select with multiselection in a dropdown.</p>\n\t\t</SampleDescription>\n\n\t\t<InputEventValueDemo\n\t\t\tlabel=\"KolSelect\"\n\t\t\trenderInput={(handlers) => (\n\t\t\t\t<KolSelect\n\t\t\t\t\t_label=\"Select options\"\n\t\t\t\t\t_options={[\n\t\t\t\t\t\t{ label: 'One', value: 'one' },\n\t\t\t\t\t\t{ label: 'Two', value: 'two' },\n\t\t\t\t\t\t{ label: 'Three', value: 'three' },\n\t\t\t\t\t\t{ label: 'Four', value: 'four' },\n\t\t\t\t\t\t{ label: 'Five', value: 'five' },\n\t\t\t\t\t\t{ label: 'Six', value: 'six' },\n\t\t\t\t\t\t{ label: 'Seven', value: 'seven' },\n\t\t\t\t\t\t{ label: 'Eight', value: 'eight' },\n\t\t\t\t\t\t{ label: 'Nine', value: 'nine' },\n\t\t\t\t\t]}\n\t\t\t\t\t_multiple={true}\n\t\t\t\t\t_rows={1}\n\t\t\t\t\t_on={handlers}\n\t\t\t\t/>\n\t\t\t)}\n\t\t/>\n\t</>\n);\n",
|
|
1593
|
+
"kind": "sample"
|
|
1594
|
+
},
|
|
1571
1595
|
{
|
|
1572
1596
|
"id": "sample/single-select/basic",
|
|
1573
1597
|
"group": "single-select",
|
|
@@ -2261,7 +2285,7 @@
|
|
|
2261
2285
|
"group": "spec",
|
|
2262
2286
|
"name": "badge",
|
|
2263
2287
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/badge.md",
|
|
2264
|
-
"code": "# kol-badge\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Badge** component allows you to visually highlight specific information.\nIn addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_color` | `_color` | Defines the backgroundColor and foregroundColor. | `string \\| undefined \\| { backgroundColor: string; foregroundColor: string; }` | `'#000'` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
|
|
2288
|
+
"code": "# kol-badge\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Badge** component allows you to visually highlight specific information.\nIn addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_color` | `_color` | Defines the backgroundColor and foregroundColor. | `string \\| undefined \\| { backgroundColor: string; foregroundColor: string; }` | `'#000'` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2265
2289
|
"kind": "spec"
|
|
2266
2290
|
},
|
|
2267
2291
|
{
|
|
@@ -2277,7 +2301,7 @@
|
|
|
2277
2301
|
"group": "spec",
|
|
2278
2302
|
"name": "button",
|
|
2279
2303
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button.md",
|
|
2280
|
-
"code": "# kol-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
|
|
2304
|
+
"code": "# kol-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2281
2305
|
"kind": "spec"
|
|
2282
2306
|
},
|
|
2283
2307
|
{
|
|
@@ -2349,7 +2373,7 @@
|
|
|
2349
2373
|
"group": "spec",
|
|
2350
2374
|
"name": "heading",
|
|
2351
2375
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/heading.md",
|
|
2352
|
-
"code": "# kol-heading\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_secondaryHeadline` | `_secondary-headline` | Defines the text of the secondary headline. | `string \\| undefined` | `undefined` |\n\n\n## Slots\n\n| Slot
|
|
2376
|
+
"code": "# kol-heading\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_secondaryHeadline` | `_secondary-headline` | Defines the text of the secondary headline. | `string \\| undefined` | `undefined` |\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2353
2377
|
"kind": "spec"
|
|
2354
2378
|
},
|
|
2355
2379
|
{
|
|
@@ -2373,7 +2397,7 @@
|
|
|
2373
2397
|
"group": "spec",
|
|
2374
2398
|
"name": "input-checkbox",
|
|
2375
2399
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-checkbox.md",
|
|
2376
|
-
"code": "# kol-input-checkbox\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_checked` | `_checked` | Defines whether the checkbox is checked or not. Can be read and written. | `boolean \\| undefined` | `false` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked. | `boolean \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_labelAlign` | `_label-align` | Defines which alignment should be used for presentation. | `\"left\" \\| \"right\" \\| undefined` | `'right'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `true` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
|
|
2400
|
+
"code": "# kol-input-checkbox\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_checked` | `_checked` | Defines whether the checkbox is checked or not. Can be read and written. | `boolean \\| undefined` | `false` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked. | `boolean \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_labelAlign` | `_label-align` | Defines which alignment should be used for presentation. | `\"left\" \\| \"right\" \\| undefined` | `'right'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `true` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2377
2401
|
"kind": "spec"
|
|
2378
2402
|
},
|
|
2379
2403
|
{
|
|
@@ -2389,7 +2413,7 @@
|
|
|
2389
2413
|
"group": "spec",
|
|
2390
2414
|
"name": "input-date",
|
|
2391
2415
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-date.md",
|
|
2392
|
-
"code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"` | `'date'` |\n| `_value` | `_value` | Defines the value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
|
|
2416
|
+
"code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"` | `'date'` |\n| `_value` | `_value` | Defines the value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2393
2417
|
"kind": "spec"
|
|
2394
2418
|
},
|
|
2395
2419
|
{
|
|
@@ -2397,7 +2421,7 @@
|
|
|
2397
2421
|
"group": "spec",
|
|
2398
2422
|
"name": "input-email",
|
|
2399
2423
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-email.md",
|
|
2400
|
-
"code": "# kol-input-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
|
|
2424
|
+
"code": "# kol-input-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2401
2425
|
"kind": "spec"
|
|
2402
2426
|
},
|
|
2403
2427
|
{
|
|
@@ -2413,7 +2437,7 @@
|
|
|
2413
2437
|
"group": "spec",
|
|
2414
2438
|
"name": "input-number",
|
|
2415
2439
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-number.md",
|
|
2416
|
-
"code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
|
|
2440
|
+
"code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2417
2441
|
"kind": "spec"
|
|
2418
2442
|
},
|
|
2419
2443
|
{
|
|
@@ -2421,7 +2445,7 @@
|
|
|
2421
2445
|
"group": "spec",
|
|
2422
2446
|
"name": "input-password",
|
|
2423
2447
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-password.md",
|
|
2424
|
-
"code": "# kol-input-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n| `_visibilityToggle` | `_visibility-toggle` | Activates the show password button | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
|
|
2448
|
+
"code": "# kol-input-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n| `_visibilityToggle` | `_visibility-toggle` | Activates the show password button | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2425
2449
|
"kind": "spec"
|
|
2426
2450
|
},
|
|
2427
2451
|
{
|
|
@@ -2429,7 +2453,7 @@
|
|
|
2429
2453
|
"group": "spec",
|
|
2430
2454
|
"name": "input-radio",
|
|
2431
2455
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-radio.md",
|
|
2432
|
-
"code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` | `_options` | Options the user can choose from. | `RadioOption<StencilUnknown>[] \\| string \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------------------------- |\n| | The legend/heading of the radio buttons. |\n\n\n----------------------------------------------\n\n\n",
|
|
2456
|
+
"code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` | `_options` | Options the user can choose from. | `RadioOption<StencilUnknown>[] \\| string \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2433
2457
|
"kind": "spec"
|
|
2434
2458
|
},
|
|
2435
2459
|
{
|
|
@@ -2437,7 +2461,7 @@
|
|
|
2437
2461
|
"group": "spec",
|
|
2438
2462
|
"name": "input-range",
|
|
2439
2463
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-range.md",
|
|
2440
|
-
"code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `100` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `0` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
|
|
2464
|
+
"code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `100` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `0` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2441
2465
|
"kind": "spec"
|
|
2442
2466
|
},
|
|
2443
2467
|
{
|
|
@@ -2445,7 +2469,7 @@
|
|
|
2445
2469
|
"group": "spec",
|
|
2446
2470
|
"name": "input-text",
|
|
2447
2471
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-text.md",
|
|
2448
|
-
"code": "# kol-input-text\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined` | `'text'` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `selectionEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement` | `string` | |\n| `selectionStart` | `number \\| undefined` | |\n| `selectionEnd` | `number \\| undefined` | |\n| `selectMode` | `\"select\" \\| \"end\" \\| \"start\" \\| \"preserve\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name | Type | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart` | `number` | |\n| `selectionEnd` | `number` | |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
|
|
2472
|
+
"code": "# kol-input-text\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined` | `'text'` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `selectionEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement` | `string` | |\n| `selectionStart` | `number \\| undefined` | |\n| `selectionEnd` | `number \\| undefined` | |\n| `selectMode` | `\"select\" \\| \"end\" \\| \"start\" \\| \"preserve\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name | Type | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart` | `number` | |\n| `selectionEnd` | `number` | |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2449
2473
|
"kind": "spec"
|
|
2450
2474
|
},
|
|
2451
2475
|
{
|
|
@@ -2461,7 +2485,7 @@
|
|
|
2461
2485
|
"group": "spec",
|
|
2462
2486
|
"name": "link",
|
|
2463
2487
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link.md",
|
|
2464
|
-
"code": "# kol-link\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Sets the target URI of the link or citation source. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
|
|
2488
|
+
"code": "# kol-link\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Sets the target URI of the link or citation source. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2465
2489
|
"kind": "spec"
|
|
2466
2490
|
},
|
|
2467
2491
|
{
|
|
@@ -2533,7 +2557,7 @@
|
|
|
2533
2557
|
"group": "spec",
|
|
2534
2558
|
"name": "select",
|
|
2535
2559
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/select.md",
|
|
2536
|
-
"code": "# kol-select\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this select. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot
|
|
2560
|
+
"code": "# kol-select\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this select. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------------------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |\n\n\n----------------------------------------------\n\n\n",
|
|
2537
2561
|
"kind": "spec"
|
|
2538
2562
|
},
|
|
2539
2563
|
{
|