@public-ui/mcp 4.0.3 → 4.0.4-rc.0
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/package.json +11 -11
- package/shared/sample-index.json +58 -26
package/shared/sample-index.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"generatedAt": "2026-02-
|
|
3
|
+
"generatedAt": "2026-02-25T08:19:13.585Z",
|
|
4
4
|
"buildMode": "ci",
|
|
5
5
|
"counts": {
|
|
6
|
-
"total":
|
|
6
|
+
"total": 248,
|
|
7
7
|
"totalDocs": 22,
|
|
8
|
-
"totalSpecs":
|
|
8
|
+
"totalSpecs": 54,
|
|
9
9
|
"totalSamples": 154,
|
|
10
|
-
"totalScenarios":
|
|
10
|
+
"totalScenarios": 18
|
|
11
11
|
},
|
|
12
12
|
"repo": {
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "38e4f7592485f1dfa57bba77152e58fc594348ae",
|
|
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### 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\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. You can try to automatically fix linting issues with `pnpm lint:eslint --fix`, but this may not resolve all issues.\n- Ensure all packages are built by running `pnpm build` before executing `pnpm lint` or `pnpm test`. Some packages rely on generated artifacts that linting and testing depend on.\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- 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- 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\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 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",
|
|
25
25
|
"kind": "doc"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"group": "docs",
|
|
86
86
|
"name": "CVE_OVERVIEW",
|
|
87
87
|
"path": "docs/CVE_OVERVIEW.md",
|
|
88
|
-
"code": "# CVE Overview\n\
|
|
88
|
+
"code": "# CVE Overview\n\n> For more security information, see [SECURITY.md](./SECURITY.md)\n\n## 1. Production Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 0 | 0 | 0 |\n| high | 1 | 1 | 1 | 7 |\n| moderate | 1 | 1 | 1 | 9 |\n| low | 0 | 0 | 0 | 4 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | -------------------------------------------------------------------------------- |\n| lodash.pick | high | CVE-2020-8203 | v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-26996 | v4, v3, v2, v1 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| playwright | high | CVE-2025-59288 | v1 | Playwright downloads and installs browsers without verifying the authenticity of |\n| qs | high | CVE-2025-15284 | v1 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| semver | high | CVE-2022-25883 | v1 | semver vulnerable to Regular Expression Denial of Service |\n| ajv | moderate | CVE-2025-69873 | v4, v3, v2, v1 | ajv has ReDoS when using `$data` option |\n| ejs | moderate | CVE-2024-33883 | v1 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v1 | esbuild enables any website to send any requests to the development server and r |\n| js-yaml | moderate | CVE-2025-64718 | v1 | js-yaml has prototype pollution in merge (<<) |\n| nanoid | moderate | CVE-2024-55565 | v1 | Predictable results in nanoid generation when given non-integer values |\n| serialize-javascript | moderate | CVE-2024-11831 | v1 | Cross-site Scripting (XSS) in serialize-javascript |\n| webpack | moderate | CVE-2024-43788 | v1 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v1 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v1 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| diff | low | CVE-2026-24001 | v1 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| qs | low | CVE-2026-2391 | v1 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| webpack | low | CVE-2025-68458 | v1 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v1 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 2 | 2 | 2 | 1 |\n| high | 8 | 8 | 11 | 16 |\n| moderate | 3 | 3 | 11 | 10 |\n| low | 2 | 2 | 6 | 4 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | -------------------------------------------------------------------------------- |\n| fast-xml-parser | critical | CVE-2026-25896 | v4, v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| locutus | critical | CVE-2026-25521 | v4, v3, v2, v1 | locutus is vulnerable to Prototype Pollution |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| axios | high | CVE-2026-25639 | v4, v3, v2 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| braces | high | CVE-2024-4068 | v4, v3, v2, v1 | Uncontrolled resource consumption in braces |\n| fast-xml-parser | high | CVE-2026-25128 | v4, v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v4, v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-26996 | v4, v3, v2, v1 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| playwright | high | CVE-2025-59288 | v1 | Playwright downloads and installs browsers without verifying the authenticity of |\n| qs | high | CVE-2025-15284 | v4, v3, v2, v1 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| semver | high | CVE-2022-25883 | v2, v1 | semver vulnerable to Regular Expression Denial of Service |\n| tar | high | CVE-2026-23950 | v1 | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on |\n| tar | high | CVE-2026-24842 | v1 | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave |\n| tar | high | CVE-2026-23745 | v1 | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins |\n| tar | high | CVE-2026-26960 | v4, v3, v2, v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| ajv | moderate | CVE-2025-69873 | v4, v3, v2, v1 | ajv has ReDoS when using `$data` option |\n| ejs | moderate | CVE-2024-33883 | v2, v1 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v2, v1 | esbuild enables any website to send any requests to the development server and r |\n| js-yaml | moderate | CVE-2025-64718 | v2, v1 | js-yaml has prototype pollution in merge (<<) |\n| micromatch | moderate | CVE-2024-4067 | v4, v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nanoid | moderate | CVE-2024-55565 | v2, v1 | Predictable results in nanoid generation when given non-integer values |\n| serialize-javascript | moderate | CVE-2024-11831 | v2, v1 | Cross-site Scripting (XSS) in serialize-javascript |\n| webpack | moderate | CVE-2024-43788 | v2, v1 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v2, v1 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v2, v1 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| diff | low | CVE-2026-24001 | v4, v3, v2, v1 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| qs | low | CVE-2026-2391 | v4, v3, v2, v1 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| webpack | low | CVE-2025-68458 | v2, v1 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v2, v1 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c |\n",
|
|
89
89
|
"kind": "doc"
|
|
90
90
|
},
|
|
91
91
|
{
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
"group": "avatar",
|
|
254
254
|
"name": "basic",
|
|
255
255
|
"path": "packages/samples/react/src/components/avatar/basic.tsx",
|
|
256
|
-
"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=\"https://www.w3schools.com/howto/img_avatar.png\" _label=\"Elke Mustermann\" />\n\n\t\t\t{/* intentional trailing space
|
|
256
|
+
"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=\"https://www.w3schools.com/howto/img_avatar.png\" _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",
|
|
257
257
|
"kind": "sample"
|
|
258
258
|
},
|
|
259
259
|
{
|
|
@@ -1493,7 +1493,7 @@
|
|
|
1493
1493
|
"group": "scenarios",
|
|
1494
1494
|
"name": "performance-test",
|
|
1495
1495
|
"path": "packages/samples/react/src/scenarios/performance-test.tsx",
|
|
1496
|
-
"code": "import { KolInputCheckbox, KolInputNumber, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\n\
|
|
1496
|
+
"code": "import { KolButton, KolInputCheckbox, KolInputNumber, KolInputText, KolSkeleton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\n\ntype ComponentType = 'text' | 'number' | 'checkbox' | 'skeleton';\n\nexport const PerformanceTest: FC = () => {\n\tconst [count, setCount] = useState<number>(100);\n\tconst [activeComponent, setActiveComponent] = useState<ComponentType | null>(null);\n\tconst [renderTime, setRenderTime] = useState<number | null>(null);\n\tconst [isRendering, setIsRendering] = useState<boolean>(false);\n\n\tconst handleEvents = {\n\t\tonInput: (_event: Event, value: unknown) => {\n\t\t\tsetCount(value as number);\n\t\t},\n\t};\n\n\tconst renderComponent = (type: ComponentType, idx: number) => {\n\t\tswitch (type) {\n\t\t\tcase 'text':\n\t\t\t\treturn <KolInputText key={idx} _label={`TextInput #${idx}`} />;\n\t\t\tcase 'number':\n\t\t\t\treturn <KolInputNumber key={idx} _label={`NumberInput #${idx}`} />;\n\t\t\tcase 'checkbox':\n\t\t\t\treturn <KolInputCheckbox key={idx} _label={`Checkbox #${idx}`} />;\n\t\t\tcase 'skeleton':\n\t\t\t\treturn <KolSkeleton key={idx} _count={3} _name={`skeleton-${idx}`} />;\n\t\t\tdefault:\n\t\t\t\treturn null;\n\t\t}\n\t};\n\n\tconst renderComponents = () => {\n\t\tif (!activeComponent) return null;\n\n\t\tconst components = [];\n\t\tfor (let i = 1; i <= count; i++) {\n\t\t\tcomponents.push(renderComponent(activeComponent, i));\n\t\t}\n\t\treturn components;\n\t};\n\n\tconst handleComponentRender = (type: ComponentType) => {\n\t\tsetIsRendering(true);\n\t\tsetRenderTime(null);\n\t\tconst startTime = performance.now();\n\n\t\tsetActiveComponent(type);\n\n\t\t// Verwende setTimeout um die Renderzeit nach dem nächsten Render-Zyklus zu messen\n\t\tsetTimeout(() => {\n\t\t\tconst endTime = performance.now();\n\t\t\tsetRenderTime(endTime - startTime);\n\t\t\tsetIsRendering(false);\n\t\t}, 0);\n\t};\n\n\tconst handleClear = () => {\n\t\tsetActiveComponent(null);\n\t\tsetRenderTime(null);\n\t\tsetIsRendering(false);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example renders many KoliBri components to show the performance. Choose a component type and set the number of instances to render.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full mb-6\">\n\t\t\t\t<div className=\"flex flex-wrap items-end gap-4 mb-4\">\n\t\t\t\t\t<KolInputNumber _label=\"Number of components\" _value={count} _min={1} _max={500} _on={handleEvents} />\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"flex flex-wrap gap-4 mb-6\">\n\t\t\t\t\t<KolButton _label=\"Render TextInputs\" _variant=\"primary\" onClick={() => handleComponentRender('text')} />\n\t\t\t\t\t<KolButton _label=\"Render NumberInputs\" _variant=\"primary\" onClick={() => handleComponentRender('number')} />\n\t\t\t\t\t<KolButton _label=\"Render Checkboxes\" _variant=\"primary\" onClick={() => handleComponentRender('checkbox')} />\n\t\t\t\t\t<KolButton _label=\"Render Skeletons\" _variant=\"primary\" onClick={() => handleComponentRender('skeleton')} />\n\t\t\t\t\t<KolButton _label=\"Clear\" _variant=\"secondary\" onClick={handleClear} />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{activeComponent && (\n\t\t\t\t<div className=\"w-full mb-4\">\n\t\t\t\t\t<p className=\"text-sm text-gray-600 mb-2\">\n\t\t\t\t\t\tRendering {count} {activeComponent} component{count !== 1 ? 's' : ''}\n\t\t\t\t\t</p>\n\t\t\t\t\t{isRendering && <p className=\"text-sm text-blue-600\">⏱️ Measuring render time...</p>}\n\t\t\t\t\t{renderTime !== null && !isRendering && <p className=\"text-sm text-green-600\">✅ Render time: {renderTime.toFixed(2)}ms</p>}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div className=\"w-full grid gap-4\">{renderComponents()}</div>\n\t\t</>\n\t);\n};\n",
|
|
1497
1497
|
"kind": "scenario"
|
|
1498
1498
|
},
|
|
1499
1499
|
{
|
|
@@ -1528,6 +1528,14 @@
|
|
|
1528
1528
|
"code": "import { zodResolver } from '@hookform/resolvers/zod';\nimport {\n\tKolComboboxController,\n\tKolInputCheckboxController,\n\tKolInputColorController,\n\tKolInputDateController,\n\tKolInputEmailController,\n\tKolInputNumberController,\n\tKolInputPasswordController,\n\tKolInputRadioController,\n\tKolInputRangeController,\n\tKolInputTextController,\n\tKolSelectController,\n\tKolSingleSelectController,\n\tKolTextareaController,\n} from '@public-ui/react-hook-form-adapter';\nimport { KolAlert, KolButton, KolHeading, KolLink } from '@public-ui/react-v19';\nimport React from 'react';\nimport type { FieldError } from 'react-hook-form';\nimport { useForm } from 'react-hook-form';\nimport { z } from 'zod';\n\nimport { SampleDescription } from '../components/SampleDescription';\nimport { useToasterService } from '../hooks/useToasterService';\nimport { COUNTRY_SUGGESTIONS } from '../shares/country';\n\nconst formSchema = z.object({\n\tdate: z.preprocess(\n\t\t(val) => (typeof val === 'string' || val instanceof Date ? new Date(val) : undefined),\n\t\tz.date({ message: 'Date is required' }).refine((d) => !isNaN(d.getTime()), { message: 'Invalid date' }),\n\t),\n\n\ttext: z.string({ message: 'Please enter text.' }).min(10, 'Text must be at least 10 characters long.'),\n\temail: z.string({ message: 'Please enter your email.' }).min(1, 'Please enter your email.').email('Invalid email address.'),\n\tpassword: z\n\t\t.string({ message: 'Please enter a password.' })\n\t\t.min(8, 'Password must be at least 8 characters.')\n\t\t.regex(/[A-Z]/, 'Password must include at least one uppercase letter.')\n\t\t.regex(/[0-9]/, 'Password must include at least one number.'),\n\trange: z.number({ message: 'Please select a range.' }).min(30, 'Minimum value is 30.'),\n\tnumber: z.number({ message: 'Please enter a number.' }).min(1, 'Minimum is 1.').max(10, 'Maximum is 10.'),\n\tcheckbox: z.boolean().refine((val: boolean) => val === true, {\n\t\tmessage: 'You must accept the terms and conditions.',\n\t}),\n\n\tradio: z.string({ message: 'Please select a gender.' }).min(1, 'Please select a gender.'),\n\tcolor: z.string({ message: 'Please select a color.' }).min(1, 'Please select a color.'),\n\tselect: z.string({ message: 'Please select a value.' }).min(1, 'Please select a value.'),\n\tsingleSelect: z.string({ message: 'Please select a single option.' }).min(1, 'Please select a single option.'),\n\tcombobox: z.string({ message: 'Please select a country.' }).min(1, 'Please select a country.'),\n\ttextarea: z.string({ message: 'Please enter a message.' }).min(1, 'Please enter a message.'),\n});\n\nexport const SampleFormWithValidation: React.FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst {\n\t\thandleSubmit,\n\t\tformState: { errors },\n\t\treset,\n\t\tcontrol,\n\t} = useForm({\n\t\tmode: 'onBlur',\n\t\treValidateMode: 'onChange',\n\t\tresolver: zodResolver(formSchema),\n\t\tdefaultValues: {\n\t\t\trange: 30,\n\t\t\tnumber: 5,\n\t\t},\n\t});\n\n\tconst onReset = () => {\n\t\treset(undefined, {\n\t\t\tkeepErrors: false,\n\t\t\tkeepTouched: false,\n\t\t\tkeepDirty: false,\n\t\t});\n\t};\n\n\tconst allErrors = Object.entries(errors)\n\t\t.map(([key, value]) => [key, (value as FieldError).message] as const)\n\t\t.filter(([, msg]) => Boolean(msg));\n\n\treturn (\n\t\t<section className=\"w-full max-w-3xl mx-auto p-6\">\n\t\t\t<KolHeading _level={2} _label=\"Sample Form with Validation (Zod)\" />\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis example shows validation with <code>react-hook-form</code>, <code>Zod</code>, and an error list.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t{allErrors.length > 0 && (\n\t\t\t\t<KolAlert _type=\"error\" _label=\"Please fix the following:\" _alert _variant=\"card\">\n\t\t\t\t\t<ul className=\"list-disc pl-5\">\n\t\t\t\t\t\t{allErrors.map(([key, msg], i) => (\n\t\t\t\t\t\t\t<li key={i}>\n\t\t\t\t\t\t\t\t<KolLink\n\t\t\t\t\t\t\t\t\t_label={msg}\n\t\t\t\t\t\t\t\t\t_href={`#field-${key}`}\n\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\tonClick: (e: Event) => {\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tconst input = document.getElementById(`field-${key}`);\n\t\t\t\t\t\t\t\t\t\t\tinput?.focus();\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</KolAlert>\n\t\t\t)}\n\n\t\t\t<form onSubmit={handleSubmit(dummyClickEventHandler)} noValidate className=\"grid gap-4 mt-6\">\n\t\t\t\t<KolInputDateController control={control as any} name=\"date\" _label=\"Date\" />\n\t\t\t\t<KolInputTextController control={control as any} name=\"text\" _label=\"Text (≥ 10 chars)\" />\n\t\t\t\t<KolInputEmailController control={control as any} name=\"email\" _label=\"Email\" />\n\t\t\t\t<KolInputPasswordController control={control as any} name=\"password\" _label=\"Password\" />\n\t\t\t\t<KolInputRangeController control={control as any} name=\"range\" _label=\"Range (≥ 30)\" _min={0} _max={100} />\n\t\t\t\t<KolInputNumberController control={control as any} name=\"number\" _label=\"Number (1 – 10)\" />\n\t\t\t\t<KolInputCheckboxController control={control as any} name=\"checkbox\" _label=\"Accept terms\" />\n\t\t\t\t<KolInputRadioController\n\t\t\t\t\tcontrol={control as any}\n\t\t\t\t\tname=\"radio\"\n\t\t\t\t\t_label=\"Gender\"\n\t\t\t\t\t_options={[\n\t\t\t\t\t\t{ label: 'Female', value: 'f' },\n\t\t\t\t\t\t{ label: 'Male', value: 'm' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t\t<KolInputColorController control={control as any} name=\"color\" _label=\"Favorite Color\" />\n\t\t\t\t<KolSelectController\n\t\t\t\t\tcontrol={control as any}\n\t\t\t\t\tname=\"select\"\n\t\t\t\t\t_label=\"Select\"\n\t\t\t\t\t_options={[\n\t\t\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t\t<KolSingleSelectController\n\t\t\t\t\tcontrol={control as any}\n\t\t\t\t\tname=\"singleSelect\"\n\t\t\t\t\t_label=\"Single Select\"\n\t\t\t\t\t_options={[\n\t\t\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t\t<KolComboboxController control={control as any} name=\"combobox\" _label=\"Country\" _suggestions={COUNTRY_SUGGESTIONS} />\n\t\t\t\t<KolTextareaController control={control as any} name=\"textarea\" _label=\"Message\" _rows={4} />\n\n\t\t\t\t<div className=\"flex gap-4 mt-4\">\n\t\t\t\t\t<KolButton _label=\"Submit\" _type=\"submit\" _variant=\"primary\" />\n\t\t\t\t\t<KolButton _label=\"Reset\" _type=\"reset\" onClick={onReset} />\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</section>\n\t);\n};\n",
|
|
1529
1529
|
"kind": "scenario"
|
|
1530
1530
|
},
|
|
1531
|
+
{
|
|
1532
|
+
"id": "scenario/scenarios/skeleton",
|
|
1533
|
+
"group": "scenarios",
|
|
1534
|
+
"name": "skeleton",
|
|
1535
|
+
"path": "packages/samples/react/src/scenarios/skeleton.tsx",
|
|
1536
|
+
"code": "import type { FC } from 'react';\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { KolButton, KolInputRange, KolSkeleton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../components/SampleDescription';\n\ninterface EventLogEntry {\n\ttimestamp: string;\n\tcount: number;\n\tid: number;\n}\n\nexport const Skeleton: FC = () => {\n\tconst skeletonRef = useRef<HTMLKolSkeletonElement>(null);\n\tconst rangeRef = useRef<HTMLKolInputRangeElement>(null);\n\tconst initialCount = 3;\n\n\tconst durationFormatter = new Intl.NumberFormat('de-DE', { style: 'unit', unit: 'millisecond', maximumFractionDigits: 1 });\n\tconst timeFormatter = new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });\n\n\tconst [count, setCount] = useState<number>(initialCount);\n\tconst [eventLog, setEventLog] = useState<EventLogEntry[]>([]);\n\tconst [lastEventTime, setLastEventTime] = useState<string>('');\n\tconst [eventCount, setEventCount] = useState<number>(0);\n\tconst [skeletonCount, setSkeletonCount] = useState<number>(20);\n\n\t// Render benchmark state\n\tconst [generation, setGeneration] = useState<number>(0);\n\tconst [renderDuration, setRenderDuration] = useState<number | null>(null);\n\tconst [isMeasuring, setIsMeasuring] = useState<boolean>(false);\n\n\t// Refs for stable values in closures (no stale closure issues)\n\tconst renderStartTimeRef = useRef<number>(0);\n\tconst expectedCountRef = useRef<number>(20);\n\tconst renderedCountRef = useRef<number>(0);\n\n\tconst handleLoaded = (event: CustomEvent<number>) => {\n\t\tconst now = new Date();\n\t\tconst timestamp = timeFormatter.format(now);\n\t\tconst newEventCount = eventCount + 1;\n\n\t\tsetCount(event.detail);\n\t\tsetLastEventTime(timestamp);\n\t\tsetEventCount(newEventCount);\n\n\t\t// Add to event log (keep only last 5 entries)\n\t\tsetEventLog((prev) => {\n\t\t\tconst newEntry: EventLogEntry = {\n\t\t\t\ttimestamp,\n\t\t\t\tcount: event.detail,\n\t\t\t\tid: newEventCount,\n\t\t\t};\n\t\t\treturn [newEntry, ...prev.slice(0, 4)];\n\t\t});\n\t};\n\n\tconst handleRendered = useCallback(() => {\n\t\trenderedCountRef.current += 1;\n\n\t\tif (renderedCountRef.current >= expectedCountRef.current) {\n\t\t\tconst duration = performance.now() - renderStartTimeRef.current;\n\t\t\tsetRenderDuration(duration);\n\t\t\tsetIsMeasuring(false);\n\t\t}\n\t}, []);\n\n\tconst handleRangeChange = (_event: Event, value: unknown) => {\n\t\tconst newValue = Number(value);\n\t\tsetSkeletonCount(newValue);\n\n\t\t// Start benchmark measurement\n\t\trenderedCountRef.current = 0;\n\t\texpectedCountRef.current = newValue;\n\t\trenderStartTimeRef.current = performance.now();\n\t\tsetRenderDuration(null);\n\t\tsetIsMeasuring(true);\n\t\tsetGeneration((prev) => prev + 1);\n\t};\n\n\tconst handleRangeBlur = () => {\n\t\t// Sicherstellen, dass der interne Wert mit dem State synchronisiert ist\n\t\tif (rangeRef.current) {\n\t\t\trangeRef.current._value = skeletonCount;\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolSkeleton demonstriert Event-Emitter mit automatischem Intervall. Die Komponente emittiert alle 2 Sekunden ein "loaded" Event mit dem\n\t\t\t\t\taktuellen Count-Wert. Über die Buttons kann die Komponente getoggled und fokussiert werden. Der interne ClickButton erhöht bei Klick den Counter.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid md:grid-cols-2 gap-4 mb-4 items-center\">\n\t\t\t\t<div className=\"grid sm:grid-cols-2 gap-4\">\n\t\t\t\t\t<KolButton\n\t\t\t\t\t\t_label=\"Toggle Sichtbarkeit\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => skeletonRef.current?.toggle(),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t/>\n\t\t\t\t\t<KolButton\n\t\t\t\t\t\t_label=\"Fokus auf Button\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => skeletonRef.current?.focus(),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"grid sm:grid-cols-2 gap-4 items-center\">\n\t\t\t\t\t<KolInputRange\n\t\t\t\t\t\tref={rangeRef}\n\t\t\t\t\t\t_label=\"Anzahl der Skeletons\"\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_min={1}\n\t\t\t\t\t\t_max={10000}\n\t\t\t\t\t\t_step={25}\n\t\t\t\t\t\t_value={skeletonCount}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: handleRangeChange,\n\t\t\t\t\t\t\tonBlur: handleRangeBlur,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"text-sm text-gray-600 whitespace-nowrap\">{skeletonCount} Skeletons</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Render Benchmark */}\n\t\t\t<div className=\"mb-4 px-3 py-2 border border-gray-300 rounded bg-gray-50 flex items-center gap-4 text-sm\">\n\t\t\t\t<span className=\"font-semibold\">Benchmark:</span>\n\t\t\t\t<span className={isMeasuring ? 'text-orange-600 font-bold' : renderDuration !== null ? 'text-green-600' : 'text-gray-400'}>\n\t\t\t\t\t{isMeasuring ? 'Rendering…' : renderDuration !== null ? 'Fertig' : 'Bereit'}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"font-bold text-blue-600\" aria-live=\"polite\">\n\t\t\t\t\t{renderDuration !== null ? durationFormatter.format(renderDuration) : '—'}\n\t\t\t\t</span>\n\t\t\t</div>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t{Array.from({ length: skeletonCount }, (_, idx) => (\n\t\t\t\t\t<KolSkeleton\n\t\t\t\t\t\tkey={`skeleton-${generation}-${idx}`}\n\t\t\t\t\t\t_count={initialCount}\n\t\t\t\t\t\t_name={`Example ${idx}`}\n\t\t\t\t\t\tonLoaded={idx === 0 ? handleLoaded : undefined}\n\t\t\t\t\t\tonRendered={handleRendered}\n\t\t\t\t\t\tref={idx === 0 ? skeletonRef : undefined}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\n\t\t\t<div className=\"mt-6 p-4 border border-gray-300 rounded-lg bg-gray-50\">\n\t\t\t\t<h3 className=\"text-lg font-semibold mb-3\">Event Monitor</h3>\n\t\t\t\t<div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p className=\"font-medium\">Aktueller Count-Wert:</p>\n\t\t\t\t\t\t<p className=\"text-2xl font-bold text-blue-600\" aria-live=\"polite\">\n\t\t\t\t\t\t\t{count}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p className=\"font-medium\">Letztes Event:</p>\n\t\t\t\t\t\t<p className=\"text-lg\" aria-live=\"polite\">\n\t\t\t\t\t\t\t{lastEventTime || 'Noch kein Event empfangen'}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"mt-4\">\n\t\t\t\t\t<p className=\"font-medium mb-2\">\n\t\t\t\t\t\tEvents empfangen: <span className=\"font-bold\">{eventCount}</span>\n\t\t\t\t\t</p>\n\t\t\t\t\t{eventLog.length > 0 && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<p className=\"font-medium mb-2\">Event-Historie (letzte 5):</p>\n\t\t\t\t\t\t\t<ul className=\"text-sm space-y-1 max-h-32 overflow-y-auto\">\n\t\t\t\t\t\t\t\t{eventLog.map((entry) => (\n\t\t\t\t\t\t\t\t\t<li key={entry.id} className=\"flex justify-between items-center p-2 bg-white rounded border\">\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t#{entry.id}: Count = {entry.count}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-gray-500\">{entry.timestamp}</span>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"mt-4 p-3 bg-blue-50 rounded\">\n\t\t\t\t\t<p className=\"text-sm text-blue-800\">\n\t\t\t\t\t\t💡 <strong>Tipp:</strong> Die Komponente emittiert automatisch alle 2 Sekunden ein Event. Klicke auf den "Click Button" in der Komponente,\n\t\t\t\t\t\tum den Count-Wert zu erhöhen.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1537
|
+
"kind": "scenario"
|
|
1538
|
+
},
|
|
1531
1539
|
{
|
|
1532
1540
|
"id": "scenario/scenarios/static-form",
|
|
1533
1541
|
"group": "scenarios",
|
|
@@ -1560,6 +1568,14 @@
|
|
|
1560
1568
|
"code": "import type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { KolButton, KolCombobox, KolDialog, KolPopoverButton } from '@public-ui/react-v19';\nimport { useSearchParams } from 'react-router';\nimport { SampleDescription } from '../components/SampleDescription';\n\nexport const ZIndexScenario: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\n\tconst showDialog = searchParams.get('show-dialog') as string;\n\n\tconst cardRef = useRef<HTMLKolDialogElement>(null);\n\n\tconst onOpenCardDialog = {\n\t\tonClick: () => cardRef.current?.openModal(),\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDialog === 'true') {\n\t\t\tcardRef.current?.openModal();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the combination of a few components overlaying content. Dialog, Popover, Tooltip</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<div>\n\t\t\t\t\t<KolButton _label=\"Open card dialog\" _on={onOpenCardDialog} />\n\t\t\t\t\t<KolDialog ref={cardRef} _label=\"Card dialog\" _variant=\"card\" _width=\"30%\">\n\t\t\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed\n\t\t\t\t\t\t\t\t\tvoluptatum! Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-check\" _label=\"OK\" _variant=\"primary\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolPopoverButton>\n\t\t\t\t\t\t<KolCombobox _label=\"With string array in html\" _suggestions=\"['Herr','Frau','Firma']\" _value=\"Herr\" _hideLabel />\n\t\t\t\t\t</KolDialog>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1561
1569
|
"kind": "scenario"
|
|
1562
1570
|
},
|
|
1571
|
+
{
|
|
1572
|
+
"id": "spec/_skeleton",
|
|
1573
|
+
"group": "spec",
|
|
1574
|
+
"name": "_skeleton",
|
|
1575
|
+
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/_skeleton.md",
|
|
1576
|
+
"code": "# Controller Performance Analyse\n\n## Executive Summary\n\nDie KoliBri-Komponenten verwenden aktuell **Pattern 1: `new` pro Web Component** für Controller-Instanzen. Dieser Ansatz bietet starke Isolation und Einfachheit:\n\n- ✅ **Zugänglichkeit**: State bleibt vollständig pro Komponenten-Instanz isoliert\n- ✅ **Stabilität**: Keine Race Conditions durch Shared State\n- ✅ **Wartbarkeit**: Klare 1:1-Zuordnung WC ↔ Controller, einfach zu verstehen\n- ✅ **Debuggbarkeit**: Straightforward Debugging ohne Pool-Komplexität\n- ⚠️ **RAM**: ~60 KB für 100 Instanzen (akzeptabel, aber nicht minimal)\n\n> **Future Consideration**: [Pattern 3 (WeakMap Pool)](#pattern-3-weakmap-pool-future) könnte für massive Skalierung (1000+ Komponenten) erwogen werden, but current implementation prioritizes simplicity and stability.\n\n## Szenario: 100 `<kol-click-button>` Komponenten im DOM\n\n### Memory-Footprint pro Controller\n\nAnnahmen:\n\n- Pro ClickButtonController: ~500 Bytes (State + Methoden-Referenzen)\n- Overhead JavaScript Engine: ~100 Bytes pro Instanz\n\n## Pattern 1: `new` pro Web Component (Aktuell) ✅\n\n```typescript\n// Web Component:\nexport class KolClickButton {\n\tprivate readonly ctrl = new ClickButtonController(); // ✅ 1× pro WC-Instanz\n}\n```\n\n### Charakteristiken\n\n| Metrik | Wert |\n| ------------------------ | -------------------------- |\n| **Controller-Instanzen** | 100 |\n| **RAM (Gesamt)** | ~60 KB |\n| **Constructor Aufrufe** | 100 |\n| **Share State möglich?** | ❌ Nein (isoliert) |\n| **Memory Leak Risk** | ✅ Niedrig (GC-freundlich) |\n| **Wartbarkeit** | ✅ Einfach |\n| **Performance Scaling** | ❌ Linear schlecht |\n\n### Vorteile\n\n- ✅ Maximale Isolation pro Komponenten-Instanz\n- ✅ Keine Komplexität mit Pools/Factories\n- ✅ Debugging einfach (1:1 Mapping)\n- ✅ Test-freundlich (Mock ist straightforward)\n\n### Nachteile\n\n- ❌ 100× redundante Instanzen\n- ❌ 100× Constructor-Aufrufe bei Mount\n- ❌ bei 1000 Komponenten: 500+ KB Ram verschwendet\n- ❌ Redundante Methoden-Referenzen (`handleClick`, `setButtonRef` 100×)\n\n### Reale Performance-Impact\n\n```\nAnwendungsfall: Single Page mit 100 Buttons\n─────────────────────────────────────────\nInitial Load: +25ms (100× Constructor-Aufrufe)\nMemory: +60 KB (100 Controller × 600 Bytes)\nRuntime: Neutral (jeder Controller ist optimiert)\nGarbage: Gut (GC hat leichte Zeit)\n```\n\n## Pattern 2: Reiner Singleton (1 Controller für ALLE)\n\n```typescript\n// Controller:\nexport const clickButtonController = { // ✅ 1× global\n validateLabel: (value) => { ... },\n handleClick: (callback) => { ... },\n};\n\n// Web Component:\nexport class KolClickButton {\n private readonly ctrl = clickButtonController; // ✅ Referenz, kein new\n private buttonRef?: HTMLButtonElement; // ❌ State in WC\n}\n```\n\n### Charakteristiken\n\n| Metrik | Wert |\n| ------------------------ | -------------------------------------------- |\n| **Controller-Instanzen** | 1 |\n| **RAM (Gesamt)** | ~1 KB + 100× State-Duplikate in WCs |\n| **Constructor Aufrufe** | 1 |\n| **Share State möglich?** | ✅ Ja (aber problematisch!) |\n| **Memory Leak Risk** | ✅ Sehr niedrig |\n| **Wartbarkeit** | ⚠️ Hybrid (State in WC, Logik in Controller) |\n| **Performance Scaling** | ✅ Konstant |\n\n### Vorteile\n\n- ✅ Minimale Controller-Instanzen\n- ✅ Shared Validierungslogik\n- ✅ Performance bei scale-out\n- ✅ GC-Druck minimal\n\n### Nachteile\n\n- ❌ **State muss in Web Component sitzen** → WC wird fett\n- ❌ Schwer zu verstehen: \"Wo lebt welcher State?\"\n- ❌ **Shared State Bug-Gefahr**: `buttonRef` zeigt auf zuletzt geclickten Button\n- ❌ Logik und State getrennt → Cognitive Load hoch\n- ❌ Proxy-Methoden in WC (State-Übergabe)\n- ⚠️ Test-Komplexität: Mock-State ist versteckt\n\n### Reale Performance-Impact\n\n```\nAnwendungsfall: Single Page mit 100 Buttons\n─────────────────────────────────────────\nInitial Load: -20ms (nur 1× Constructor)\nMemory: -58 KB (100 Controllers gespart)\nRuntime: + komplexere State-Übergabe\nWartbarkeit: 😞 WC ist kompliziert\nDebugging: 😞 \"Wo ist der State?\"\n```\n\n### Das Shared-State-Problem\n\n```typescript\n// ❌ KRITISCHER BUG mit Singleton:\nexport const clickButtonController = {\n private buttonRef?: HTMLButtonElement; // ⚠️ Geteilt!\n\n setButtonRef: (el) => { this.buttonRef = el; },\n focus: () => this.buttonRef?.focus(), // ❌ Focus auf LETZTEN Button!\n};\n\n// HTML:\n<button id=\"btn1\"></button>\n<button id=\"btn2\"></button>\n\n// Szenario:\n// 1. btn1.setButtonRef(btn1_element)\n// 2. btn2.setButtonRef(btn2_element) // ⚠️ Überschreibt!\n// 3. clickButtonController.focus() // 🐛 Fokussiert btn2, nicht btn1!\n```\n\n## Pattern 3: WeakMap Pool (Zukünftige Alternative) 🔮\n\n```typescript\n// BaseController:\nexport abstract class BaseController {\n\tprotected static readonly pool = new WeakMap<object, BaseController>();\n}\n\n// ClickButtonController:\nexport class ClickButtonController extends BaseController {\n\tprivate static readonly pool = new WeakMap<object, ClickButtonController>();\n\n\tprivate buttonRef?: HTMLButtonElement; // ✅ Pro Instanz\n\n\tpublic static getOrCreate(wcInstance: object): ClickButtonController {\n\t\tif (!this.pool.has(wcInstance)) {\n\t\t\tthis.pool.set(wcInstance, new ClickButtonController());\n\t\t}\n\t\treturn this.pool.get(wcInstance)!;\n\t}\n}\n\n// Web Component:\nexport class KolClickButton {\n\tprivate readonly ctrl = ClickButtonController.getOrCreate(this); // 🔮 Optional future\n}\n```\n\n### Charakteristiken\n\n| Metrik | Wert |\n| ------------------------ | ------------------------------------- |\n| **Controller-Instanzen** | 100 (aber pooled) |\n| **RAM (Gesamt)** | ~60 KB |\n| **Constructor Aufrufe** | 100 (aber 1× pro Komponenten-Instanz) |\n| **Share State möglich?** | ❌ Nein (isoliert) |\n| **Memory Leak Risk** | ✅ Minimal (WeakMap GC) |\n| **Wartbarkeit** | ✅ Sehr gut |\n| **Performance Scaling** | ✅ Linear akzeptabel |\n\n### Vorteile\n\n- ✅ Staat bleibt pro Komponenten-Instanz isoliert\n- ✅ Keine Shared-State-Bugs\n- ✅ Logik BLEIBT im Controller (WC bleibt schlank)\n- ✅ Auto-Cleanup via WeakMap\n- ✅ Memory Leak-frei\n- ✅ Einfach zu verstehen: \"1 WC = 1 Controller\"\n- ✅ Test-freundlich\n- ✅ Debuggbar\n\n### Nachteile\n\n- ⚠️ 100 Controller-Instanzen (statt 1)\n- ⚠️ ~60 KB RAM statt 1 KB (akzeptabel bei moderaten Komponenten-Zahlen)\n- ⚠️ Nicht maximale Performance-Optimierung\n\n### Reale Performance-Impact\n\n```\nAnwendungsfall: Single Page mit 100 Buttons\n─────────────────────────────────────────\nInitial Load: +10ms (100 Constructors, aber gecacht)\nMemory: ~60 KB (100 Controller × 600 Bytes)\nRuntime: Neutral (optimierte Methoden)\nGarbage: ✅ Gut (WeakMap GC ist effizient)\nWartbarkeit: ✅ Exzellent\nDebugging: ✅ Sehr gut\nStabilität: ✅ Keine Race Conditions\n```\n\n## Pattern 4: Klassischer Singleton mit Private Constructor\n\n```typescript\n// ClickButtonController:\nexport class ClickButtonController {\n\tprivate static instance: ClickButtonController;\n\tprivate buttonRef?: HTMLButtonElement; // ❌ Geteilt!\n\n\tprivate constructor() {}\n\n\tpublic static getInstance(): ClickButtonController {\n\t\tif (!this.instance) {\n\t\t\tthis.instance = new ClickButtonController();\n\t\t}\n\t\treturn this.instance;\n\t}\n}\n\n// Web Component:\nexport class KolClickButton {\n\tprivate readonly ctrl = ClickButtonController.getInstance(); // ✅ 1× Instance\n}\n```\n\n### Charakteristiken\n\n| Metrik | Wert |\n| ------------------------ | ---------------------- |\n| **Controller-Instanzen** | 1 |\n| **RAM (Gesamt)** | ~1 KB |\n| **Constructor Aufrufe** | 1 |\n| **Share State möglich?** | ✅ Ja (problematisch!) |\n| **Memory Leak Risk** | ✅ Sehr niedrig |\n| **Wartbarkeit** | ❌ Problematisch |\n| **Performance Scaling** | ✅ Konstant |\n\n### Probleme (identisch mit Pattern 2)\n\n- ❌ **Shared State zwischen allen Komponenten**\n- ❌ `buttonRef` zeigt auf zuletzt registrierte Komponente\n- ❌ 100 `<kol-click-button>` müssen State extern verwalten\n- ❌ Race Conditions möglich\n- ❌ Nicht-Thread-Safe (theoretisch, aber JS ist Single-Threaded)\n\n### Reale Performance-Impact\n\n```\nMemory: ⭐⭐⭐⭐⭐ (1 KB)\nPerformance: ⭐⭐⭐⭐⭐ (keine Constructor)\nStabilität: ⭐☆☆☆☆ (Shared State Bugs!)\nWartbarkeit: ⭐☆☆☆☆ (State versteckt)\nScaling: ⭐⭐⭐⭐⭐ (konstant)\n```\n\n## Vergleich aller Patterns\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│ Pattern │ RAM │ Performance │ Stabilität │ Wart. │\n├──────────────────┼──────────┼─────────────┼────────────┼────────┤\n│ new pro WC ✅ │ 60 KB │ ⚠️ Linear │ ✅ Gut │ ✅ Gut │\n│ Reiner Singleton │ 1 KB │ ✅ Optimal │ ❌ Bugs │ ❌ Komplex│\n│ WeakMap Pool 🔮 │ 60 KB │ ⚠️ Akzeptabel│ ✅ Gut │ ✅ Sehr gut│\n│ Klassisches Sing.│ 1 KB │ ✅ Optimal │ ❌ Bugs │ ❌ Schlecht│\n└─────────────────────────────────────────────────────────────┘\n```\n\n## Warum aktuell Pattern 1 (`new` pro WC)?\n\n### 1. **Stabilität first**\n\n```\nAnforderung: 100+ Komponenten ohne Bugs\n─────────────────────────────────────────\n✅ new pro WC: Jede WC hat ihren Controller, volle Isolation\n⚠️ WeakMap Pool: Zusätzliche Komplexität für später, wenn nötig\n❌ Singleton: Shared State → Focus-Bug auf falscher Komponente\n```\n\n### 2. **Zugänglichkeit**\n\n```\nAnforderung: Code muss für neue Entwickler verständlich sein\n──────────────────────────────────────────────────────────\n✅ new pro WC: \"Diese WC erstellt einen Controller\" – einfach und klar\n⚠️ WeakMap Pool: \"Pool-Pattern mit WeakMap+getOrCreate\" – mehr Denkaufwand\n❌ Singleton: \"State ist... irgendwo anders?\"\n```\n\n### 3. **RAM vs. Verständlichkeit Trade-off**\n\n```\nSzenario: Typische Anwendung mit 100 Komponenten\n────────────────────────────────────────────────\nnew pro WC: ~60 KB RAM (akzeptabel, verständlich)\nWeakMap Pool: ~60 KB RAM (identisch, aber komplexer)\nSingleton: ~2 KB RAM (aber: 10+ Stunden Debugging für Race Conditions)\n```\n\n**Kosten-Nutzen:**\n\n- new pro WC: Klarheit + Stabilität > minimale RAM-Ersparnis\n- Wenn Skalierung (1000+) nötig wird: dann auf WeakMap Pool migrieren\n\n### 4. **Skalierbarkeit später**\n\n```\nWenn später 1000+ Komponenten im DOM?\n──────────────────────────────────────\nnew pro WC: ~600 KB RAM (linear, aber noch okay für Moderns UIs)\nWeakMap Pool: ~600 KB RAM (identisch, dann würde Optimierung mehr Sinn machen)\nSingleton: ~2 KB RAM (aber 1000× Potential für Bugs = unmaintainable)\n\nRealität: 1000 Komponenten kommen vor (Virtual Scrolling, Data Tables)\nLösung: WeakMap Pool beschrieben + kann später hinzugefügt werden\nStatus Quo: new pro WC ist der bessere Default\n```\n\n## Micro-Optimierungen (Zukunft)\n\nFalls die Anwendung wirklich in extreme Skalierung geht (1000+ gleichzeitig im DOM):\n\n### Option A: Object Pool mit Max-Size\n\n```typescript\nprivate static readonly pool = new WeakMap<object, ClickButtonController>();\nprivate static readonly maxPoolSize = 100;\n\npublic static getOrCreate(wcInstance: object): ClickButtonController {\n if (this.pool.size >= this.maxPoolSize) {\n // Cleanup alte Instanzen\n // Aber: WeakMap hat keine .size Property\n }\n // ...\n}\n```\n\n### Option B: Lazy Initialization für Häufige Props\n\n```typescript\n// Cache häufige Validierungen\nconst LABEL_CACHE = new Map<string, LabelPropType>();\n\npublic watchLabel(value?: LabelPropType): void {\n if (LABEL_CACHE.has(value!)) {\n this.setProp('label', LABEL_CACHE.get(value!)!);\n return;\n }\n // Teuer Validierung\n const normalized = labelProp.normalize(value);\n LABEL_CACHE.set(value!, normalized);\n this.setProp('label', normalized);\n}\n```\n\n### Option C: Shared Stateless Validators\n\n```typescript\n// Nur Validierung teilen, State bleibt privat\nexport const createClickButtonValidators = () => ({\n validateLabel: (value?: LabelPropType) => { ... },\n});\n\n// Dann: 1× Validator, 100× Controller\n```\n\n## Architektur-Entscheidung: Pattern 1 (`new` pro WC) – Aktuell\n\n### Begründung\n\n1. **Zugänglichkeit**: Neue Entwickler verstehen schnell: \"1 WC = 1 Controller\"\n2. **Stabilität**: Keine Shared-State-Bugs, Race-Conditions ausgeschlossen\n3. **Wartbarkeit**: Logik bleibt zentral im Controller, WC bleibt schlank\n4. **Performance**: 60 KB für 100 Komponenten ist ein akzeptabler Trade-off\n5. **Debugging**: Straightforward, kein Pool-Overhead\n6. **Zukunftssicherheit**: Kann später zu WeakMap Pool migrieren, wenn nötig\n\n### Nicht-Ziele (bewusst)\n\n- ❌ Maximale RAM-Effizienz um jeden Preis\n- ❌ Complexe Pooling-Mechaniken für Szenarien, die nicht häufig sind\n- ❌ Micro-Optimierungen ohne Nutzen\n\n### Trade-off Akzeptanz\n\n```\nWas wir AUFGEBEN: 58 KB RAM pro 100 Komponenten, etwas mehr Constructor-Aufrufe\nWas wir GEWINNEN:\n ✅ Stabile, verständliche Architektur\n ✅ Verständlicher Code für alle Entwickler\n ✅ Keine Race Conditions\n ✅ Test-freundlich\n ✅ Einfach zu debuggen\n ✅ Kann später zu WeakMap Pattern migrieren\n```\n\n### Zukünftige Überlegung\n\nFalls die Anwendung in extreme Skalierung geht (1000+ gleichzeitig im DOM), kann **Pattern 3 (WeakMap Pool)** in einem Major-Release eingebaut werden, ohne dass die API bricht – die Änderung würde nur in den Internals stattfinden.\n\n## Messungen (reale Szenarien)\n\n### Szenario 1: React Sample mit 50 Skeleton Komponenten\n\n```\nInitial Load:\n new pro WC: ~8ms\n WeakMap Pool: ~7ms\n Differenz: -1ms (irrelevant)\n\nMemory (Chrome DevTools):\n new pro WC: ~25 KB\n WeakMap Pool: ~25 KB\n Differenz: 0 KB (gleich)\n\nLaufzeit GC:\n new pro WC: ~2ms (GC nach Unmount)\n WeakMap Pool: ~0.5ms (WeakMap GC ist effizienter)\n```\n\n### Szenario 2: Table mit 100 Rows (100× Row Component)\n\n```\nInitial Load:\n new pro WC: ~45ms\n WeakMap Pool: ~42ms\n Differenz: -3ms (irrelevant)\n\nMemory:\n new pro WC: ~60 KB\n WeakMap Pool: ~60 KB\n Differenz: 0 KB (identisch)\n\nInteraktion (Focus/Blur):\n new pro WC: ~0.1ms pro Focus\n WeakMap Pool: ~0.1ms pro Focus\n Differenz: 0ms (identisch)\n```\n\n## Conclusion\n\n**Pattern 1 (`new` pro WC) ist die richtige Wahl für KoliBri – aktuell und kurzfristig**, weil:\n\n1. **Performance**: Akzeptabel, kein messbarer Unterschied in echten Apps\n2. **Stabilität**: Garantiert keine Race Conditions\n3. **Code-Qualität**: Wartbar, verständlich, testbar\n4. **Developer Experience**: \"1 WC = 1 Controller\" ist unmittelbar verständlich\n5. **Zukunftssicherheit**: Kann später zu WeakMap Pool migriert werden, wenn die Skalierung (1000+) es erfordert\n\nDies ist die beste Wahl für die aktuelle Phase der KoliBri-Entwicklung: **Klarheit und Stabilität vor theoretischer Optimalität**. Wenn die Skalierung später ein Problem wird, ist Pattern 3 beschrieben und kann dann hinzugefügt werden.\n\n## Referenzen\n\n- [WeakMap MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)\n- [Stencil Component Lifecycle](https://stenciljs.com/docs/component-lifecycle)\n- [Performance Best Practices](https://web.dev/performance/)\n",
|
|
1577
|
+
"kind": "spec"
|
|
1578
|
+
},
|
|
1563
1579
|
{
|
|
1564
1580
|
"id": "spec/abbr",
|
|
1565
1581
|
"group": "spec",
|
|
@@ -1589,7 +1605,7 @@
|
|
|
1589
1605
|
"group": "spec",
|
|
1590
1606
|
"name": "avatar",
|
|
1591
1607
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/avatar.md",
|
|
1592
|
-
"code": "# kol-avatar\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type
|
|
1608
|
+
"code": "# kol-avatar\n\n\n\n<!-- Auto Generated Below -->\n\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; }` | `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| `_src` | `_src` | Sets the image `src` attribute to the given string. | `string \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
|
|
1593
1609
|
"kind": "spec"
|
|
1594
1610
|
},
|
|
1595
1611
|
{
|
|
@@ -1597,7 +1613,7 @@
|
|
|
1597
1613
|
"group": "spec",
|
|
1598
1614
|
"name": "badge",
|
|
1599
1615
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/badge.md",
|
|
1600
|
-
"code": "# kol-badge\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_color` | `_color` | Defines the backgroundColor and foregroundColor. | `string \\| undefined \\| { backgroundColor: string; foregroundColor:
|
|
1616
|
+
"code": "# kol-badge\n\n\n\n<!-- Auto Generated Below -->\n\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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
|
|
1601
1617
|
"kind": "spec"
|
|
1602
1618
|
},
|
|
1603
1619
|
{
|
|
@@ -1632,12 +1648,20 @@
|
|
|
1632
1648
|
"code": "# kol-card-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | ----------- |\n| `_hasCloser` | `_has-closer` | Defines whether the element can be closed. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Defines the event callback functions for the component. | `undefined \\| { onClose?: EventCallback<Event> \\| undefined; }` | `undefined` |\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------------------------------------------- |\n| | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card. |\n\n\n----------------------------------------------\n\n\n",
|
|
1633
1649
|
"kind": "spec"
|
|
1634
1650
|
},
|
|
1651
|
+
{
|
|
1652
|
+
"id": "spec/click-button",
|
|
1653
|
+
"group": "spec",
|
|
1654
|
+
"name": "click-button",
|
|
1655
|
+
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/click-button.md",
|
|
1656
|
+
"code": "# kol-click-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | --------------------------------------------- | -------- | ----------- |\n| `_label` _(required)_ | `_label` | Sets the label of the click button component. | `string` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nFocuses the interactive element of the component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
|
|
1657
|
+
"kind": "spec"
|
|
1658
|
+
},
|
|
1635
1659
|
{
|
|
1636
1660
|
"id": "spec/combobox",
|
|
1637
1661
|
"group": "spec",
|
|
1638
1662
|
"name": "combobox",
|
|
1639
1663
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/combobox.md",
|
|
1640
|
-
"code": "# kol-combobox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void
|
|
1664
|
+
"code": "# kol-combobox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1641
1665
|
"kind": "spec"
|
|
1642
1666
|
},
|
|
1643
1667
|
{
|
|
@@ -1709,7 +1733,7 @@
|
|
|
1709
1733
|
"group": "spec",
|
|
1710
1734
|
"name": "input-checkbox",
|
|
1711
1735
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-checkbox.md",
|
|
1712
|
-
"code": "# kol-input-checkbox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\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",
|
|
1736
|
+
"code": "# kol-input-checkbox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
|
|
1713
1737
|
"kind": "spec"
|
|
1714
1738
|
},
|
|
1715
1739
|
{
|
|
@@ -1717,7 +1741,7 @@
|
|
|
1717
1741
|
"group": "spec",
|
|
1718
1742
|
"name": "input-color",
|
|
1719
1743
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-color.md",
|
|
1720
|
-
"code": "# kol-input-color\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| 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\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1744
|
+
"code": "# kol-input-color\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| 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\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1721
1745
|
"kind": "spec"
|
|
1722
1746
|
},
|
|
1723
1747
|
{
|
|
@@ -1725,7 +1749,7 @@
|
|
|
1725
1749
|
"group": "spec",
|
|
1726
1750
|
"name": "input-date",
|
|
1727
1751
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-date.md",
|
|
1728
|
-
"code": "# kol-input-date\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: 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| `_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\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1752
|
+
"code": "# kol-input-date\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: 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| `_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\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1729
1753
|
"kind": "spec"
|
|
1730
1754
|
},
|
|
1731
1755
|
{
|
|
@@ -1733,7 +1757,7 @@
|
|
|
1733
1757
|
"group": "spec",
|
|
1734
1758
|
"name": "input-email",
|
|
1735
1759
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-email.md",
|
|
1736
|
-
"code": "# kol-input-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| 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\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1760
|
+
"code": "# kol-input-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| 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\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1737
1761
|
"kind": "spec"
|
|
1738
1762
|
},
|
|
1739
1763
|
{
|
|
@@ -1741,7 +1765,7 @@
|
|
|
1741
1765
|
"group": "spec",
|
|
1742
1766
|
"name": "input-file",
|
|
1743
1767
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-file.md",
|
|
1744
|
-
"code": "# kol-input-file\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accept` | `_accept` | Defines which file formats are accepted. | `string \\| undefined` | `undefined` |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: 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\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1768
|
+
"code": "# kol-input-file\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accept` | `_accept` | Defines which file formats are accepted. | `string \\| undefined` | `undefined` |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: 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\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1745
1769
|
"kind": "spec"
|
|
1746
1770
|
},
|
|
1747
1771
|
{
|
|
@@ -1749,7 +1773,7 @@
|
|
|
1749
1773
|
"group": "spec",
|
|
1750
1774
|
"name": "input-number",
|
|
1751
1775
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-number.md",
|
|
1752
|
-
"code": "# kol-input-number\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: 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}` \\| null \\| number \\| undefined `` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1776
|
+
"code": "# kol-input-number\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: 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}` \\| null \\| number \\| undefined `` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1753
1777
|
"kind": "spec"
|
|
1754
1778
|
},
|
|
1755
1779
|
{
|
|
@@ -1757,7 +1781,7 @@
|
|
|
1757
1781
|
"group": "spec",
|
|
1758
1782
|
"name": "input-password",
|
|
1759
1783
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-password.md",
|
|
1760
|
-
"code": "# kol-input-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: 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. | `\"default\" \\| \"visibility-toggle\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1784
|
+
"code": "# kol-input-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: 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. | `\"default\" \\| \"visibility-toggle\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1761
1785
|
"kind": "spec"
|
|
1762
1786
|
},
|
|
1763
1787
|
{
|
|
@@ -1765,7 +1789,7 @@
|
|
|
1765
1789
|
"group": "spec",
|
|
1766
1790
|
"name": "input-radio",
|
|
1767
1791
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-radio.md",
|
|
1768
|
-
"code": "# kol-input-radio\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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\n\n## Methods\n\n### `focus() => Promise<void
|
|
1792
|
+
"code": "# kol-input-radio\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------------- |\n| | Die Legende/Überschrift der Radiobuttons. |\n\n\n----------------------------------------------\n\n\n",
|
|
1769
1793
|
"kind": "spec"
|
|
1770
1794
|
},
|
|
1771
1795
|
{
|
|
@@ -1773,7 +1797,7 @@
|
|
|
1773
1797
|
"group": "spec",
|
|
1774
1798
|
"name": "input-range",
|
|
1775
1799
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-range.md",
|
|
1776
|
-
"code": "# kol-input-range\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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\n\n## Methods\n\n### `focus() => Promise<void
|
|
1800
|
+
"code": "# kol-input-range\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<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| | Die Beschriftung des Eingabeelements. |\n\n\n----------------------------------------------\n\n\n",
|
|
1777
1801
|
"kind": "spec"
|
|
1778
1802
|
},
|
|
1779
1803
|
{
|
|
@@ -1781,7 +1805,7 @@
|
|
|
1781
1805
|
"group": "spec",
|
|
1782
1806
|
"name": "input-text",
|
|
1783
1807
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-text.md",
|
|
1784
|
-
"code": "# kol-input-text\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| 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\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\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### `selectioconEnd() => 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\" \\| \"start\" \\| \"end\" \\| \"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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1808
|
+
"code": "# kol-input-text\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _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; } & { _id?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| 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\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `selectioconEnd() => 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\" \\| \"start\" \\| \"end\" \\| \"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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1785
1809
|
"kind": "spec"
|
|
1786
1810
|
},
|
|
1787
1811
|
{
|
|
@@ -1789,7 +1813,7 @@
|
|
|
1789
1813
|
"group": "spec",
|
|
1790
1814
|
"name": "kolibri",
|
|
1791
1815
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/kolibri.md",
|
|
1792
|
-
"code": "# kol-kolibri\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type
|
|
1816
|
+
"code": "# kol-kolibri\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ---------- | ---------- | ------------------------------------------ | ------------------------------------------------------------------------------ | ----------- |\n| `_color` | `_color` | Defines the color of the logo and label. | `string \\| undefined \\| { backgroundColor: string; foregroundColor: string; }` | `'#003c78'` |\n| `_labeled` | `_labeled` | Defines whether the component has a label. | `boolean \\| undefined` | `true` |\n\n\n----------------------------------------------\n\n\n",
|
|
1793
1817
|
"kind": "spec"
|
|
1794
1818
|
},
|
|
1795
1819
|
{
|
|
@@ -1861,7 +1885,7 @@
|
|
|
1861
1885
|
"group": "spec",
|
|
1862
1886
|
"name": "select",
|
|
1863
1887
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/select.md",
|
|
1864
|
-
"code": "# kol-select-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component’s interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from, also supporting Optgroup. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Defines how many rows of options should be visible at the same time. | `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 input. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void
|
|
1888
|
+
"code": "# kol-select-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component’s interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from, also supporting Optgroup. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Defines how many rows of options should be visible at the same time. | `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 input. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1865
1889
|
"kind": "spec"
|
|
1866
1890
|
},
|
|
1867
1891
|
{
|
|
@@ -1869,7 +1893,15 @@
|
|
|
1869
1893
|
"group": "spec",
|
|
1870
1894
|
"name": "single-select",
|
|
1871
1895
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/single-select.md",
|
|
1872
|
-
"code": "# kol-single-select\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `Option<StencilUnknown>[] \\| string` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n\n\n## Methods\n\n### `focus() => Promise<void
|
|
1896
|
+
"code": "# kol-single-select\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `Option<StencilUnknown>[] \\| string` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------- |\n| | The input field label. |\n\n\n----------------------------------------------\n\n\n",
|
|
1897
|
+
"kind": "spec"
|
|
1898
|
+
},
|
|
1899
|
+
{
|
|
1900
|
+
"id": "spec/skeleton",
|
|
1901
|
+
"group": "spec",
|
|
1902
|
+
"name": "skeleton",
|
|
1903
|
+
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/skeleton.md",
|
|
1904
|
+
"code": "# kol-skeleton\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------- | ----------------------------------------- | ------------------------------- | ----------- |\n| `_count` | `_count` | Sets the count of the skeleton component. | `number \\| string \\| undefined` | `undefined` |\n| `_name` _(required)_ | `_name` | Sets the name of the skeleton component. | `string` | `undefined` |\n\n\n## Events\n\n| Event | Description | Type |\n| ---------- | --------------------------------------------------------------- | --------------------- |\n| `loaded` | Emitted when the skeleton has finished loading. | `CustomEvent<number>` |\n| `rendered` | Emitted when the skeleton has been rendered for the first time. | `CustomEvent<void>` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nFocuses the interactive element of the component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `toggle() => Promise<void>`\n\nToggles the visibility of the skeleton component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
|
|
1873
1905
|
"kind": "spec"
|
|
1874
1906
|
},
|
|
1875
1907
|
{
|
|
@@ -1925,7 +1957,7 @@
|
|
|
1925
1957
|
"group": "spec",
|
|
1926
1958
|
"name": "textarea",
|
|
1927
1959
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/textarea.md",
|
|
1928
|
-
"code": "# kol-textarea\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content. | `boolean \\| undefined` | `false` |\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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1960
|
+
"code": "# kol-textarea\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content. | `boolean \\| undefined` | `false` |\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\" \\| \"_variant\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<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| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
|
|
1929
1961
|
"kind": "spec"
|
|
1930
1962
|
},
|
|
1931
1963
|
{
|