@public-ui/mcp 4.0.0-alpha.2 → 4.0.0-alpha.9

package/dist/samples.json

@@ -1,1428 +0,0 @@
-{
-  "entries": [
-    {
-      "id": "doc/AGENTS",
-      "group": "docs",
-      "name": "AGENTS",
-      "path": "AGENTS.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/AGENTS.md",
-      "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- 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## 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`. Pre‑commit hooks run `lint-staged` which formats and lints changed files. 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- 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## 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",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/BREAKING_CHANGES.v2",
-      "group": "docs",
-      "name": "BREAKING_CHANGES.v2",
-      "path": "docs/BREAKING_CHANGES.v2.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/BREAKING_CHANGES.v2.md",
-      "code": "# Breaking Changes for version 2\n\n## Introduction\n\nNew major versions of KoliBri are developed with the goal of simplifying maintenance and support and promoting further development.\n\nFor more information, see the [KoliBri Maintenance and Support Strategy](https://github.com/public-ui/kolibri/blob/develop/MIGRATION.md).\n\n## Removed Modules\n\nWe have simplified the modularization of KoliBri in version 1 and for version 2. The module `@public-ui/core` has been removed and the functionalities moved to the module `@public-ui/components`.\n\n```diff\n  - import { register } from '@public-ui/core';\n  + import { register } from '@public-ui/components';\n  import { defineCustomElements } from '@public-ui/components/dist/loader';\n  import { MyTheme } from '...';\n  await register(MyTheme, defineCustomElements);\n```\n\n## Removed Components\n\nThe following components have been removed entirely:\n\n- kol-icon-font-awesome\n- kol-icon-icofont\n- kol-input-adapter-leanup\n- kol-input-radio-group\n\n## Removed Slots\n\nThe following slots have been removed entirely:\n\n- `header`-Slot\n- `content`-Slot\n- `footer`-Slot\n\nWe only support the `default`-Slot or the `expert`-Slot in the future. This decision was made to simplify the API and to reduce the complexity of the components.\n\nFor example, the `kol-card` component now only supports the `default`-Slot. The `header`-Slot and `footer`-Slot have been removed. The `content`-Slot has been renamed to `default`. If you want to use the `footer`-Slot, you can use the `kol-card` component and add your footer section in the `default`-Slot.\n\n## Data Structures\n\n1. `Link` objects now longer support the `_icon` property, only `_icons`. The object shape remains the same.\n\nAffected components:\n\n- kol-breadcrumb\n- kol-button-link-text-switch\n- kol-link-group\n- kol-nav\n- kol-skip-nav\n\n2. `ColorPair` objects no longer support the `color` property, only the more explicit `foregroundColor`.\n\nAffected components:\n\n- kol-badge\n- kol-kolibri\n\n## Component Properties And Slots\n\nkol-abbr:\n\n- prop `_label` now required\n- prop `_title` removed (use `_label` instead)\n\nkol-accordion:\n\n- prop `_heading` removed (use `_label` instead)\n- prop `_label` now required\n- slot `content` removed (use `default` instead)\n- slot `header` removed\n\nkol-alert:\n\n- prop `_heading` removed (use `_label` instead)\n\nkol-badge:\n\n- prop `_hideLabel` removed\n- prop `_icon` removed (use `_icons` instead)\n- prop `_iconOnly` removed\n\nkol-breadcrumb:\n\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_label` now required\n\nkol-button:\n\n- prop `_accessKey` removed\n- prop `_ariaCurrent` removed\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_icon` removed (use `_icons` instead)\n- prop `_iconAlign` removed (use `_icons` instead)\n- prop `_iconOnly` removed (use `_hideLabel` instead)\n\nkol-button-link:\n\n- prop `_accessKey` removed\n- prop `_ariaCurrent` removed\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_icon` removed (use `_icons` instead)\n- prop `_iconOnly` removed (use `_hideLabel` instead)\n\nkol-card:\n\n- prop `_hasFooter` removed\n- prop `_heading` removed (use `_label` instead)\n- prop `_headline` removed (use `_label` instead)\n- prop `_label` now required\n- slot `content` removed (use `default` instead)\n- slot `footer` removed\n- slot `header` removed\n\nkol-details:\n\n- prop `_label` now required\n- prop `_summary` removed (use `_label` instead)\n\nkol-icon:\n\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_icon` removed (use `_icons` instead)\n- prop `_icons` now required\n- prop `_label` now required\n- prop `_part` removed\n\nkol-input:\n\n- prop `_icon` removed (use `_icons` instead)\n\nkol-input-checkbox:\n\n- prop `_icon` removed (use `_icons` instead)\n- prop `_type` removed (use `_variant` instead)\n- prop `_variant` option: `'checkbox'` removed, `'default'` is the default value\n- slot `default` renamed to `expert`\n\nkol-input-color:\n\n- prop `_icon` removed (use `_icons` instead)\n- prop `_list` removed (use `_suggestions` instead)\n- slot `default` renamed to `expert`\n\nkol-input-date:\n\n- prop `_icon` removed (use `_icons` instead)\n- prop `_list` removed (use `_suggestions` instead)\n- slot `default` renamed to `expert`\n\nkol-input-email:\n\n- prop `_icon` removed (use `_icons` instead)\n- prop `_list` removed (use `_suggestions` instead)\n- prop `_size` removed\n- slot `default` renamed to `expert`\n\nkol-input-file:\n\n- prop `_icon` removed (use `_icons` instead)\n- slot `default` renamed to `expert`\n\nkol-input-number:\n\n- prop `_icon` removed (use `_icons` instead)\n- prop `_list` removed (use `_suggestions` instead)\n- prop `_type` removed (defaults to `'number'` now)\n- slot `default` renamed to `expert`\n\nkol-input-password:\n\n- prop `_icon` removed (use `_icons` instead)\n- prop `_size` removed\n- slot `default` renamed to `expert`\n\nkol-input-radio:\n\n- prop `_list` removed (use `_options` instead)\n- slot `default` renamed to `expert`\n\nkol-input-range:\n\n- prop `_icon` removed (use `_icons` instead)\n- prop `_list` removed (use `_suggestions` instead)\n- slot `default` renamed to `expert`\n\nkol-input-text:\n\n- prop `_icon` removed (use `_icons` instead)\n- prop `_list` removed (use `_suggestions` instead)\n- prop `_size` removed\n- slot `default` renamed to `expert`\n\nkol-link:\n\n- prop `_ariaControls` removed\n- prop `_ariaCurrent` removed (Use ariaCurrentService instead)\n- prop `_ariaExpanded` removed\n- prop `_ariaLabel` removed\n- prop `_ariaSelected` removed\n- prop `_disabled` removed\n- prop `_icon` removed (use `_icons` instead)\n- prop `_iconAlign` removed (use `_icons` instead)\n- prop `_iconOnly` removed (use `_hideLabel` instead)\n- prop `_selector` removed\n- prop `_stealth` removed\n- prop `_useCase` removed\n- slot `default` removed (use `expert` instead)\n\nkol-link-button:\n\n- prop `_ariaControls` removed\n- prop `_ariaCurrent` removed (use `_listenAriaCurrent` instead)\n- prop `_ariaExpanded` removed\n- prop `_ariaLabel` removed\n- prop `_ariaSelected` removed\n- prop `_disabled` removed\n- prop `_icon` renamed to `_icons`\n- prop `_iconOnly` removed\n\nkol-link-group:\n\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_heading` removed\n- prop `_label` now required\n- prop `_level` removed\n- prop `_ordered` removed\n\nkol-logo:\n\n- prop `_abbr` removed (use `_org` instead)\n\nkol-modal:\n\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_label` now required\n\nkol-nav:\n\n- prop `_ariaCurrentValue` removed\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_compact` removed (use `_hideLabel` instead)\n- prop `_hasCompactButton` removed\n- prop `_label` now required\n- prop `_variant` removed\n\nkol-pagination:\n\n- prop `_max` now required\n- prop `_total` removed (use `_max` instead)\n\nkol-progress:\n\n- prop `_type` removed (use `_variant` instead)\n\nkol-quote:\n\n- prop `_caption` removed (use `_label` instead)\n\nkol-select:\n\n- prop `_height` removed (use `_rows` instead)\n- prop `_icon` removed (use `_icons` instead)\n- prop `_list` removed (use `_options` instead)\n- prop `_size` removed (use `_rows` instead)\n- slot `default` renamed to `expert`\n\nkol-skip-nav:\n\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_label` now required\n\nkol-span:\n\n- prop `_icon` removed (use `_icons` instead)\n- prop `_iconOnly` removed (use `_hideLabel` instead)\n\nkol-split-button:\n\n- prop `_accessKey` removed\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_icon` removed (use `_icons` instead)\n- prop `_show` removed\n- prop `_showDropdown` removed\n\nkol-symbol:\n\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_label` now required\n\nkol-table:\n\n- prop `_caption` removed (use `_label` instead)\n- prop `_label` now required\n\nkol-tabs:\n\n- prop `_ariaLabel` removed (use `_label` instead)\n- prop `_icon` removed (use `_icons` instead)\n- prop `_iconOnly` removed (use `_hideLabel` instead)\n- prop `_label` now required\n- prop `_tabsAlign` removed (use `_align` instead)\n\nkol-textarea:\n\n- slot `default` renamed to `expert`\n\nversion:\n\n- prop `_label` now required\n- prop `_version` removed (use `_label` instead)\n\nkol-heading:\n\n- slot `default` renamed to `expert`\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/BREAKING_CHANGES.v3",
-      "group": "docs",
-      "name": "BREAKING_CHANGES.v3",
-      "path": "docs/BREAKING_CHANGES.v3.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/BREAKING_CHANGES.v3.md",
-      "code": "# Breaking Changes for version 3\n\n## Introduction\n\nNew major versions of KoliBri are developed with the goal of simplifying maintenance and support and promoting further development.\n\nFor more information, see the [KoliBri Maintenance and Support Strategy](https://github.com/public-ui/kolibri/blob/develop/MIGRATION.md).\n\n## Removed Components\n\nThe following components have been removed:\n\n- kol-button-group\n- kol-indented-text\n- kol-link-group\n- kol-logo\n- kol-symbol\n- kol-table\n\n## Changed Components\n\n### kol-abbr\n\n- The property `_tooltipAlign` has been removed.\n\n### kol-alert\n\n- The default value for the property `_level` changed to `0` which results in rendering a `strong` tag instead of `h1` when no level is provided.\n\n### kol-card\n\n- The default value for the property `_level` changed to `0` which results in rendering a `strong` tag instead of `h1` when no level is provided.\n\n### kol-heading\n\n- The default value for the property `_level` changed to `0` which results in rendering a `strong` tag instead of `h1` when no level is provided.\n\n### kol-input-file\n\n- The property `_value` has been removed as it never served a purpose. Use the `getValue()` method instead to access the FileList.\n\n### kol-modal\n\n- The property `_activeElement` has been removed. Use the methods `openModal` and `closeModal` instead.\n\n### kol-table-stateful\n\n- The table header property `sort` has been removed. Use `compareFn` instead.\n- The property `_minWidth` becomes required. This is to ensure that the inner width of the table and columns are wide enough to display the content. If the table gets too narrow, then the table becomes\n  automatically horizontally scrollbar.\n- The DOM event `kol-selection-change` has been renamed to `kolSelectionChange`.\n- Header cells with `compareFn` must include a `key` property to enable sorting.\n\n### kol-table-stateless\n\n- The DOM event `kol-selection-change` has been renamed to `kolSelectionChange`.\n\n## `focus`-methods\n\nThe public `focus`-methods have been removed from all components. Use `kolFocus` instead.\n\n## All Input Components\n\n- Input value reflection (\"associated form fields\") is now toggled using the 'reflectInputValues' option set in the bootstrap function, no longer using the experimental mode.\n- The property `_alert` has been removed. It's now being handled automatically based on `_msg` and the touched state. See #6138.\n- The property `_error` has been removed. Use `_msg` instead.\n- The property `_hideError` has bee renamed to `_hideMsg`.\n\n## Toaster\n\n- The toast property `alertVariant` has been removed. Use `variant` instead. The options property `defaultAlertType` has been renamed to `defaultVariant`.\n\n## Themes\n\n### BMF-Theme (Bundesministerium der Finanzen)\n\n- The theme has been removed.\n- It will be maintained as a separate repository.\n- The maintenance is done by the [DESYBRI](https://www.itzbund.de/desybri)-Team.\n- We moved our last code revision to the following repository: https://github.com/public-ui/kolibri-theme-bmf-starter\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/BREAKING_CHANGES.v4",
-      "group": "docs",
-      "name": "BREAKING_CHANGES.v4",
-      "path": "docs/BREAKING_CHANGES.v4.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/BREAKING_CHANGES.v4.md",
-      "code": "# Breaking Changes for version 4\n\n## Introduction\n\nNew major versions of KoliBri are developed with the goal of simplifying maintenance and support and promoting further development.\n\nFor more information, see the [KoliBri Maintenance and Support Strategy](https://github.com/public-ui/kolibri/blob/develop/MIGRATION.md).\n\n## Changed Components\n\n### All components\n\n- The `_id` prop has been removed from components that use Shadow DOM. IDs within a shadow tree are not visible outside, so each component now generates its own stable ID internally and manages all references. For tests or external lookups, set an `id` on the host element instead.\n- The `_msg` prop no longer supports the `_label` and `_variant` options. Messages always render with the `msg` variant and without a label.\n\n### Toast System\n\n- The `variant` property has been removed from Toast objects. All toasts now use the `card` variant by default.\n- The `defaultVariant` option has been removed from `ToasterService.getInstance()`. The service no longer accepts variant configuration.\n\n**Before:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document, {\n\tdefaultVariant: 'card', // ← removed\n});\n\n// Toast with variant\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n\tvariant: 'card', // ← removed\n});\n```\n\n**After:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document);\n\n// Toast without variant (uses card variant automatically)\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n});\n```\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/CLA",
-      "group": "docs",
-      "name": "CLA",
-      "path": "docs/CLA.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/CLA.md",
-      "code": "# Kollaborationsvereinbarung (CLA, v1.0)\n\nVielen Dank für Ihr Interesse an der Mitarbeit an unseren Open-Source-Softwareprojekt (\"Projekt\"). Diese Kollaborationsvereinbarung (\"Vereinbarung\") regelt die Bedingungen für alle Quellcodes, Objektcodes, Fehlerkorrekturen, Konfigurationsänderungen, Werkzeuge, Spezifikationen, Dokumentationen, Daten, Materialien, Rückmeldungen, Informationen oder andere Autorenwerke, die Sie in beliebiger Form und auf beliebige Weise im Zusammenhang mit unserem Projekt übermitteln oder übermitteln lassen.\n\nSie erklären sich damit einverstanden, dass die folgenden Bestimmungen für alle Ihre vergangenen, gegenwärtigen und zukünftigen Beiträge gelten. Mit Ausnahme der in diesem Vertrag gewährten Lizenzen behalten Sie alle Rechte, Titel und Interessen an Ihren Beiträgen.\n\n## Urheberrechtslizenz\n\nSie gewähren dem Projekt hiermit eine nicht-exklusive, unbefristete, unwiderrufliche, weltweite, vollständig bezahlte, gebührenfreie, übertragbare Urheberrechtslizenz zur Vervielfältigung, Erstellung abgeleiteter Werke, öffentlichen Darstellung, öffentlichen Aufführung und Verbreitung Ihrer Beiträge und solcher abgeleiteter Werke, mit dem Recht, die vorgenannten Rechte über mehrere Ebenen von Unterlizenznehmern unterzulizenzieren.\n\n## Patentlizenz\n\nSie gewähren dem Projekt hiermit eine nicht-exklusive, unbefristete, unwiderrufliche, weltweite, vollständig bezahlte, gebührenfreie und übertragbare Patentlizenz, um Ihre Beiträge zu erstellen, erstellen zu lassen, zu verwenden, zum Verkauf anzubieten, zu verkaufen, zu importieren und anderweitig zu übertragen, wobei sich diese Lizenz nur auf die von Ihnen lizenzierbaren Patentansprüche bezieht, die notwendigerweise durch Ihre Beiträge allein oder durch die Kombination Ihrer Beiträge mit dem Projekt, für das diese Beiträge eingereicht wurden, verletzt werden, mit dem Recht, die vorgenannten Rechte über mehrere Ebenen von Unterlizenznehmern weiterzulizenzieren.\n\n## Moralische Rechte\n\nSoweit nach geltendem Recht zulässig, verzichten Sie hiermit zugunsten des Projekts, seinen Rechtsnachfolgern und deren jeweiligen direkten und indirekten Unterlizenznehmern auf die Geltendmachung Ihrer \"moralischen Rechte\" an oder in Bezug auf Ihre Beiträge und stimmen zu, diese nicht geltend zu machen.\n\n## Inhalte/Rechte Dritter\n\nWenn Ihr Beitrag Quellcode, Objektcode, Fehlerkorrekturen, Konfigurationsänderungen, Tools, Spezifikationen, Dokumentationen, Daten, Materialien, Feedback, Informationen oder andere Werke enthält oder darauf basiert, die nicht von Ihnen verfasst wurden (\"Inhalte Dritter\"), oder wenn Sie Kenntnis von geistigem Eigentum oder Eigentumsrechten Dritter haben, die mit Ihrem Beitrag verbunden sind (\"Rechte Dritter\"), dann erklären Sie sich damit einverstanden, bei der Einreichung Ihres Beitrags vollständige Angaben zu diesen Inhalten Dritter und zu den Rechten Dritter zu machen, einschließlich, aber nicht beschränkt auf die Identifizierung der Aspekte Ihres Beitrags, die Inhalte Dritter enthalten oder mit Rechten Dritter verbunden sind, des Eigentümers/Autors der Inhalte Dritter und der Rechte Dritter, woher Sie die Inhalte Dritter erhalten haben, und aller anwendbaren Lizenzbedingungen oder Einschränkungen Dritter in Bezug auf die Inhalte Dritter und die Rechte Dritter. Aus Gründen der Sicherheit gelten die vorstehenden Verpflichtungen in Bezug auf die Identifizierung von Inhalten Dritter und von Rechten Dritter nicht für Teile eines Projekts, die in Ihren Beitrag zu demselben Projekt integriert sind.\n\n## Zusicherungen\n\nSie versichern, dass Sie, abgesehen von den Inhalten Dritter und den Rechten Dritter, die Sie in Übereinstimmung mit dieser Vereinbarung identifiziert haben, der alleinige Urheber Ihrer Beiträge sind und rechtlich befugt sind, die vorstehenden Lizenzen und Verzichtserklärungen in Bezug auf Ihre Beiträge zu gewähren. Wenn Ihre Beiträge im Rahmen Ihres Arbeitsverhältnisses mit Ihrem früheren oder jetzigen Arbeitgeber entstanden sind, versichern Sie, dass dieser Arbeitgeber Sie ermächtigt hat, Ihre Beiträge im Namen dieses Arbeitgebers zu erstellen, oder dass dieser Arbeitgeber auf alle Rechte, Titel oder Interessen an Ihren Beiträgen verzichtet hat.\n\n## Haftungsausschluss\n\nSoweit dies nach geltendem Recht zulässig ist, werden Ihre Beiträge ohne Mängelgewähr und ohne ausdrückliche oder stillschweigende Garantien oder Bedingungen zur Verfügung gestellt, einschließlich, aber nicht beschränkt auf stillschweigende Garantien oder Bedingungen der Nichtverletzung von Rechten, der Marktgängigkeit oder der Eignung für einen bestimmten Zweck. Sie sind nicht verpflichtet, Support für Ihre Beiträge zu leisten, es sei denn, Sie wünschen, Support zu leisten.\n\n## Keine Verpflichtung\n\nSie erkennen an, dass das Projekt in keiner Weise verpflichtet ist, Ihre Beiträge zu verwenden oder in eines der Projekte einzubinden. Die Entscheidung, Ihre Beiträge in einem der Projekte zu verwenden oder einzubinden, liegt im alleinigen Ermessen des Projekts oder seinen autorisierten Vertretern.\n\n## Abtretung\n\nSie erklären sich damit einverstanden, dass das Projekt diese Vereinbarung und alle ihre Rechte, Pflichten und Lizenzen hieraus abtreten kann.\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/CODE_OF_CONDUCT",
-      "group": "docs",
-      "name": "CODE_OF_CONDUCT",
-      "path": "CODE_OF_CONDUCT.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/CODE_OF_CONDUCT.md",
-      "code": "```markdown\n# Code of Conduct Agreement for Contributors\n\n## Our Commitment\n\nWe, as members, participants, and leaders of our community, are committed to providing a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender characteristics, identity, and expression, level of experience, education, socioeconomic status, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our community include:\n\n- Demonstrating empathy and kindness toward others\n- Respecting differing opinions, viewpoints, and experiences\n- Giving and gracefully accepting constructive feedback\n- Taking responsibility and apologizing to those affected by our mistakes, and learning from the experience\n- Focusing on what is best not just for us as individuals, but for the overall community\n\nExamples of unacceptable behavior include:\n\n- The use of sexualized language, imagery, or symbolism, and unwelcome sexual attention or advances\n- Trolling, insulting or derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as physical or electronic addresses, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior they deem inappropriate, threatening, or offensive.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, support tickets, and other contributions that are not aligned to this Code of Conduct and will communicate reasons for moderation decisions when appropriate.\n\n## **Scope**\n\nThis Code of Conduct applies within all community spaces and also applies when an individual is officially representing the community in public spaces. Examples include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leadership responsible for enforcement at [kolibri@itzbund.de](mailto:kolibri@itzbund.de). All complaints will be reviewed and investigated promptly and fairly.\n\nAll community leadership is obligated to respect the privacy and security of the reporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leadership, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series of actions.\n\n**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period. This includes avoiding interactions in community spaces and external channels like social media. Violating these terms may lead to a temporary or permanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any form of interaction or public communication with the community. During this time, no public or private interaction with the people involved is allowed, including unsolicited interaction with those enforcing the Code of Conduct. Violating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violating community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of groups of people.\n\n**Consequence**: A permanent ban from any sort of public interaction within the community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at <https://www.contributor-covenant.org/version/2/0/code_of_conduct>.\n\nCommunity Impact Guidelines were inspired by [Mozilla's Code of Conduct Enforcement Ladder][mozilla].\n\nFor answers to common questions about this Code of Conduct, see the FAQ at <https://www.contributor-covenant.org/faq> (in English). Translations are available at <https://www.contributor-covenant.org/translations>.\n\n[homepage]: https://www.contributor-covenant.org\n[mozilla]: https://github.com/mozilla/inclusion\n```\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/CODE_OF_CONDUCT.de",
-      "group": "docs",
-      "name": "CODE_OF_CONDUCT.de",
-      "path": "CODE_OF_CONDUCT.de.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/CODE_OF_CONDUCT.de.md",
-      "code": "```markdown\n# Code of Conduct Agreement for Contributors\n\n## Our Commitment\n\nWe, as members, participants, and leaders of our community, are committed to providing a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender characteristics, identity, and expression, level of experience, education, socioeconomic status, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our community include:\n\n- Demonstrating empathy and kindness toward others\n- Respecting differing opinions, viewpoints, and experiences\n- Giving and gracefully accepting constructive feedback\n- Taking responsibility and apologizing to those affected by our mistakes, and learning from the experience\n- Focusing on what is best not just for us as individuals, but for the overall community\n\nExamples of unacceptable behavior include:\n\n- The use of sexualized language, imagery, or symbolism, and unwelcome sexual attention or advances\n- Trolling, insulting or derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as physical or electronic addresses, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior they deem inappropriate, threatening, or offensive.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, support tickets, and other contributions that are not aligned to this Code of Conduct and will communicate reasons for moderation decisions when appropriate.\n\n## **Scope**\n\nThis Code of Conduct applies within all community spaces and also applies when an individual is officially representing the community in public spaces. Examples include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leadership responsible for enforcement at [kolibri@itzbund.de](mailto:kolibri@itzbund.de). All complaints will be reviewed and investigated promptly and fairly.\n\nAll community leadership is obligated to respect the privacy and security of the reporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leadership, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series of actions.\n\n**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period. This includes avoiding interactions in community spaces and external channels like social media. Violating these terms may lead to a temporary or permanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any form of interaction or public communication with the community. During this time, no public or private interaction with the people involved is allowed, including unsolicited interaction with those enforcing the Code of Conduct. Violating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violating community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of groups of people.\n\n**Consequence**: A permanent ban from any sort of public interaction within the community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at <https://www.contributor-covenant.org/version/2/0/code_of_conduct>.\n\nCommunity Impact Guidelines were inspired by [Mozilla's Code of Conduct Enforcement Ladder][mozilla].\n\nFor answers to common questions about this Code of Conduct, see the FAQ at <https://www.contributor-covenant.org/faq> (in English). Translations are available at <https://www.contributor-covenant.org/translations>.\n\n[homepage]: https://www.contributor-covenant.org\n[mozilla]: https://github.com/mozilla/inclusion\n```\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/CONTRIBUTING",
-      "group": "docs",
-      "name": "CONTRIBUTING",
-      "path": "CONTRIBUTING.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/CONTRIBUTING.md",
-      "code": "# Contributing\n\nWe would love for you to contribute to **KoliBri**and help make it even better than it is today! As a contributor, we ask that you follow the following guidelines:\n\n- [Contributing](#contributing)\n  - [Code of Conduct](#code-of-conduct)\n  - [Questions and problems](#questions-and-problems)\n  - [Report an error](#report-an-error)\n  - [Further development](#further-development)\n    - [Git flow](#git-flow)\n    - [Developing](#developing)\n    - [Develop new component](#develop-new-component)\n    - [Switching between branches](#switching-between-branches)\n    - [Back porting to older Major-Versions](#back-porting-to-older-major-versions)\n    - [Snapshot Testing for Visual Changes](#snapshot-testing-for-visual-changes)\n      - [How to Update Snapshots](#how-to-update-snapshots)\n\n## Code of Conduct\n\nHelp us keep **KoliBri** open and inclusive. Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).\n\n## Questions and problems\n\nPlease do not create issue tickets for general support questions. We want to use the ticket system for tracking bug reports and feature requests.\n\nInstead, we recommend first checking [Stack Overflow](https://stackoverflow.com/questions/tagged/kolibri) to see whether someone else has already solved the question or problem. You can also create new questions with the tag “hummingbird”.\nTo save your time and ours, we will close all general questions in the ticket system and redirect those asking to Stack Overflow.\n\nIf you would like to contact us, please send us an email to [kolibri@itzbund.de](kolibri@itzbund.de).\n\n## Report an error\n\nIf you find an error in the source code, you can report it to our ticket system.\n\nIt would be even better if you suggested a solution to us as a pull request.\n\n## Further development\n\nYou can request new features by submitting an issue to our ticket system. If you would like to implement a new function, please note the following steps for further action:\n\n- It is helpful to read the KoliBri [architecture concept](https://public-ui.github.io/docs/concepts/architecture) before implementing.\n- For major innovations, please create a ticket with the description of the new function.\n- For small innovations, you can offer and justify the implementation directly as a pull request.\n\n### Git flow\n\nWe work according to the Git flow: https://medium.com/android-news/gitflow-with-github-c675aa4f606a\n\n### Developing\n\n1. For contributing, you need a [GitHub account](https://github.com/login)\n2. Fork [our repository](https://github.com/public-ui/kolibri) on GitHub\n3. Open your preferred command line interface\n4. Clone the forked repository via HTTPS to your local machine. The VS Code GitHub extension can handle authentication.\n5. Navigate the project root directory\n6. Create a new branch for your changes\n7. Install Node.js version 22\n8. [Install PNPM](https://pnpm.io/installation) on you local machine\n9. Install all packages with `pnpm i`\n10. Build all packages within the mono repository `pnpm -r build`\n11. Navigate to the desired package in our monorepo\n12. When you want to start the project navigate to `packages/components/` and run `pnpm dev`\n13. To watch for changes navigate to `packages/samples/react/` and execute `pnpm start`. `http://localhost:8080/` will open automatically\n\n### VS Code Setup\n\nWe recommend using [Visual Studio Code](https://code.visualstudio.com/):\n\n- Install the Prettier and ESLint extensions.\n- Enable \"Format on Save\" in your settings.\n\n### Tests\n\nAll tests run via GitHub Actions when you open a pull request. Monitor them under the **Actions** tab.\n\n### Develop new component\n\nRefer to [new component](docs/tutorials/NEW_COMPONENT.md) tutorial.\n\n### Switching between branches\n\nWhen changing the current working branch, it is important to reinstall all dependencies, as these may have changed. It is very important that all packages are built when working on dependents. This is because the packages always use the built state of the referenced packages in the mono repo.\nTo avoid unexpected problems, it is therefore always advisable to build all packages once. This can be done with these steps:\n\n- Reinstall all dependencies: `pnpm i`\n- Build all packages: `pnpm -r build`\n- You can then switch to the package to be processed and start it with `pnpm start`.\n\nIf it is also necessary to edit dependent packages such as `@public-ui/components`, these must be rebuilt for each change. Such packages offer the `dev` script for this purpose. This automatically rebuilds the package after each change.\n\n### Back porting to older Major-Versions\n\nBy default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.x.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status.\nThe simplest procedure is therefore to create a new branch from the release branch (e.g. `release/1`) and transfer the individual commits of the feature branch from the `develop` to the new branch using cherry-picking. This branch can then be merged into the release branch as normal with a new pull request.\n\n### Snapshot Testing for Visual Changes\n\nThe Continuous Integration (CI) pipeline incorporates automated visual regression testing using the React sample app across all available themes.\n\nWhen introducing visual modifications to components, themes, or the React sample app, initial test failures are expected. To address this, the\n`update-snapshots.yml` action on GitHub should be executed, followed by a **careful review** of the changes.\n\n#### How to Update Snapshots\n\nThe following methods can be used to update the snapshots.\n\n1. **GitHub website:** Update the snapshots directly on the GitHub website by following these steps.\n\n- Navigate to the `Actions` tab in the `kolibri` repository.\n- Execute the `03 - Update Snapshots` action.\n- Select the desired branch in which you want to update the snapshots.\n- The workflow checks out the branch, updates all snapshot files, and commits the changes to that branch.\n\n2. **Terminal Command:** Use the [GitHub CLI (gh)](https://cli.github.com/) to run the `update-snapshots.yml` action from the local terminal. This method is recommended for updating snapshots on the current branch without navigating to the GitHub website. For terminal convenience, the [GitHub CLI (gh)](https://cli.github.com/) needs to be installed.\n\n- Run the following command within the project directory to update the snapshots in your checked-out branch:\n  ```bash\n  gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD`\n  ```\n- If your want to delete all snapshots before regenerating them add `-f purge_snapshots=true` to the command:\n  ```bash\n  gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` -f purge_snapshots=true\n  ```\n- You can also run the action on a different branch by specifying the another target branch with the `-r <branch_name>` flag. For example, to update snapshots on the `main` branch:\n  ```bash\n  gh workflow run update-snapshots.yml -r main\n  ```\n\nThese steps ensure that visual snapshots are updated systematically, maintaining the integrity of the testing process.\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/DoD",
-      "group": "docs",
-      "name": "DoD",
-      "path": "docs/DoD.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/DoD.md",
-      "code": "# Definition of Done (DoD)\n\nBei der Erstellung von Pull Requests (PR) wurde bisher eine DoD-Liste erzeugt. Folgende Einträge waren in der Liste:\n\n- Meaningful title for the release notes\n- Pull request is linked to a problem\n- All changes relate to the problem\n- A11y tests performed successfully or not relevant\n- Manual test performed successfully (by reviewer) or not relevant\n\nDie Checkbox-Liste wurde in einem Gateway geprüft. Wenn nicht alle Punkte abgehakt waren, befand sich der PR im Fehlerstatus. Dadurch konnte man in der Übersicht der PRs nicht erkennen, welche PRs bereit zum Review sind, da von außen betrachtet nicht alle Quality-Gateways erfolgreich waren. Dies erschwerte das Bearbeiten der PRs erheblich.\n\nWeiterhin soll aber darauf geachtet werden, dass jeder Pull-Request\n\n- einen ausdrucksstarken Titel hat, da er in die Release-Notes übernommen wird\n- immer einem Issue zugeordnet ist und\n- alle Änderungen auch nur genau mit diesem Ticket zu haben.\n\nSollte das Ticket einen A11y-Test benötigen, ist ein neues Ticket anzulegen, in dem der Test beschrieben wird. Dieser kann dann vom Barrierefreiheitsteam bearbeitet werden.\n\nDer manuelle Test ist vom Reviewer durchzuführen. Dieser gibt den PR nur frei, wenn auch der manuelle Test erfolgreich war.\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/HOWTO_KOLIBRI_WEB_COMPONENTS.de",
-      "group": "docs",
-      "name": "HOWTO_KOLIBRI_WEB_COMPONENTS.de",
-      "path": "docs/HOWTO_KOLIBRI_WEB_COMPONENTS.de.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/HOWTO_KOLIBRI_WEB_COMPONENTS.de.md",
-      "code": "# Einsteiger-How-To: KoliBri und Web Components\n\nKoliBri ist eine Sammlung barrierefreier Web Components, die Design und Funktionalität in wiederverwendbare Bausteine kapseln. Dieses How-To richtet sich an Einsteiger und erklärt die grundlegenden Konzepte rund um KoliBri und die Nutzung von Web Components.\n\n## Warum Web Components?\n\n- **Standardisiert**: Web Components sind Teil der Web-Plattform und funktionieren ohne zusätzliche Frameworks.\n- **Wiederverwendbar**: Einmal erstellt, können Komponenten in verschiedenen Projekten eingesetzt werden.\n- **Framework-unabhängig**: Sie lassen sich in jede moderne Frontend-Technologie integrieren.\n- **Langlebig**: Standards ändern sich selten, was langfristige Wartbarkeit erleichtert.\n\n## Warum Shadow Root?\n\nDer Shadow Root kapselt Markup und Styles einer Komponente und verhindert Konflikte mit globalen CSS-Regeln.\n\n- **Style-Isolation**: Styles wirken nur innerhalb der Komponente.\n- **Stabilität**: Externe Styles beeinflussen das Verhalten der Komponente nicht.\n- **Kapselung**: DOM-Struktur und Logik bleiben unabhängig vom restlichen Dokument.\n\n## Starkes Theming\n\nKoliBri setzt auf ein mehrschichtiges Theming mit klaren Verantwortlichkeiten:\n\n1. A11y-Preset-Layer für grundlegende Barrierefreiheit.\n2. Basis-Global-Layer für gemeinsame Layout-Regeln.\n3. Basis-Komponenten-Layer für spezifische Komponenten-Stile.\n4. Theme-Global-Layer für globale Farbschemata.\n5. Theme-Komponenten-Layer für individuelle Anpassungen.\n\nDieses System ermöglicht es, ein Corporate Design konsistent umzusetzen und dennoch flexibel zu bleiben.\n\n> **Hinweis:** CSS-Custom-Properties sind global und durchdringen auch den Shadow DOM.\n> Verwende sie nur für öffentliche Design-Tokens und statte sie mit einem eindeutigen Prefix aus.\n> Für interne Berechnungen und Zwischenergebnisse setze stattdessen auf SASS-Variablen,\n> um Kollisionen mit Variablen auf der Host-Seite zu vermeiden.\n\n## Mindset für KoliBri-Nutzer:innen\n\n- **Accessibility first**: Barrierefreiheit ist kein Add-on, sondern Kernbestandteil jeder Komponente.\n- **Komponenten denken**: Funktionalität und Darstellung werden in klar abgegrenzte Bausteine aufgeteilt.\n- **Theming bewusst nutzen**: Anpassungen erfolgen über die vorgesehenen Layer statt durch Überschreiben globaler Styles.\n- **Standard-APIs verwenden**: KoliBri nutzt moderne Browser-Schnittstellen; zusätzliche Abhängigkeiten bleiben gering.\n\n## Nächste Schritte\n\n- Installiere die Bibliothek über npm oder pnpm.\n- Schaue dir die Beispielanwendungen im `packages/samples` Verzeichnis an.\n- Experimentiere mit eigenen Themes, um KoliBri in dein Design-System zu integrieren.\n\nViel Erfolg beim Einstieg in die Welt von KoliBri!\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/HOWTO_REGISTER_COMPONENTS_AND_THEMES",
-      "group": "docs",
-      "name": "HOWTO_REGISTER_COMPONENTS_AND_THEMES",
-      "path": "docs/HOWTO_REGISTER_COMPONENTS_AND_THEMES.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/HOWTO_REGISTER_COMPONENTS_AND_THEMES.md",
-      "code": "# Registering KoliBri Components and Themes\n\nKoliBri Web Components ship without side effects so that you can decide _when_ and _how_ to load them.\nEvery runtime—vanilla JavaScript, React, Angular, Vue, etc.—must explicitly register the component set **and** at least one theme before rendering any `<kol-*>` tag. The Model Context Protocol (MCP) server exposes this guide under the concept identifier `docs/HOWTO_REGISTER_COMPONENTS_AND_THEMES` so KI agents can retrieve the exact steps.\n\n## 1. Install the packages you need\n\nInstall the component bundle plus the theme (or themes) you want to offer to your users:\n\n```bash\npnpm add @public-ui/components @public-ui/theme-default\n```\n\n> ℹ️ Replace `@public-ui/theme-default` with another theme package (e.g. `@public-ui/theme-ecl`) if you prefer a different look.\n\n## 2. Call `register` during application bootstrap\n\n```ts\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n```\n\n- `register` wires up the custom elements and installs the provided theme(s).\n- `defineCustomElements` is generated by Stencil and registers the underlying HTML custom elements. Pass an empty array (`[]`) if your framework adapter handles element definition for you.\n- Awaiting the promise ensures the registry is ready before you render components.\n\n## 3. Register multiple themes (optional)\n\nYou can pass an array when you want to ship several themes at once:\n\n```ts\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\nimport { ECL } from '@public-ui/theme-ecl';\n\nawait register([DEFAULT, ECL], defineCustomElements);\n```\n\nSwitching themes at runtime works through the `kol-theme` attribute—no additional registration call is required.\n\n## 4. Framework-specific notes\n\n- **React / Solid / Vue**: Use the official adapters (`@public-ui/react`, `@public-ui/solid`, `@public-ui/vue`). They wrap `register` for you, but you still need to call it once in your app entry point before rendering.\n- **Angular**: Install `@public-ui/angular` and follow the schematic. It invokes `register` during the Angular bootstrapping phase.\n- **Static HTML / plain JS**: Load the ESM bundles from a CDN and call `register` with `defineCustomElements` inside a `<script type=\"module\">` block.\n\n## 5. Troubleshooting\n\n- **`<kol-button>` renders as plain text** \\\n  Components were not registered. Call `register(...)` before rendering or ensure the promise resolved.\n- **Components use fallback styling** \\\n  No theme was registered. Pass a theme object (e.g. `DEFAULT`) to `register`.\n- **Duplicate custom element definition error** \\\n  `defineCustomElements` executed twice. Call `register` only once per page load or pass `[]` when an adapter already defines the elements.\n\n## 6. Quick reference for KI agents\n\n1. Install `@public-ui/components` + at least one theme package.\n2. Import `register` from `@public-ui/components`.\n3. Import `defineCustomElements` unless your integration takes care of it.\n4. Pass a theme (or an array of themes) and the element loader to `register`.\n5. Await the promise before rendering `<kol-*>` components.\n\nKeep this checklist handy; the MCP endpoint will always return the latest version of this guide.\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/KNOWN_ISSUES",
-      "group": "docs",
-      "name": "KNOWN_ISSUES",
-      "path": "KNOWN_ISSUES.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/KNOWN_ISSUES.md",
-      "code": "# Known Issues\n\n## General\n\n### Limited support for `aria-description` (WAI-ARIA 1.2)\n\n- `aria-description` was introduced with [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#aria-description), but many assistive technologies have not yet adopted it and continue to rely solely on `aria-describedby` when presenting supplementary text. Components that accept `_ariaDescription` therefore keep rendering hidden fallback markup and set both attributes so older screen readers still expose the description.\n\n## select\n\n### All text inputs\n\nIn Chrome on Windows, clicking outside an HTML input but inside a Web Component does not give focus to the input when it is empty. This issue sometimes does not occur if the input already contains a value. We suspect a focus propagation problem related to Web Component behavior.\n\n[🐞 GitHub issue #7713](https://github.com/public-ui/kolibri/issues/7713)\n\n### NVDA spells out certain words instead of reading them\n\nIt has been observed that on a system with German locale, NVDA spells out certain English words such as \"selection\", instead of reading them properly.\n\n[🐞 GitHub issue #6898](https://github.com/public-ui/kolibri/issues/6898),\n[Stack Overflow](https://stackoverflow.com/questions/69091167/nvda-spells-words-where-it-shouldnt)\n\n### Text selection in Firefox\n\nIn Firefox, text selection when using Web Components does not work as expected. Highlighting and selecting text behaves inconsistently or fails.\n\n[🐞 GitHub issue #7761](https://github.com/public-ui/kolibri/issues/7761),\n[Mozilla Bug #1587724](https://bugzilla.mozilla.org/show_bug.cgi?id=1587724),\n[Mozilla Bug #1233594](https://bugzilla.mozilla.org/show_bug.cgi?id=1233594),\n[Mozilla Bug #1590379](https://bugzilla.mozilla.org/show_bug.cgi?id=1590379)\n\n## Components\n\n### kol-select\n\n- Disabled options in KolSelect affect the total count in some screen readers. When an option is set to `disabled: true`, it may still be included in the overall option count announced by assistive technology. Using `aria-hidden=\"true\"` on `<option>` is not conforming with WAI-ARIA and causes browser warnings, therefore it has been removed. As a result, screen readers might announce a higher number of available options than can actually be selected.\n\n[🐞 GitHub issue #7453](https://github.com/public-ui/kolibri/pull/7453)\n[🐞 GitHub issue #7920](https://github.com/public-ui/kolibri/pull/7920)\n\n### kol-input-color\n\nThe component InputColor is a wrapper for the native HTML element `<input type=\"color\">` which has accessibility problems:\n\n- With NVDA, the element is announced as \"clickable\" and not as an input element.\n- It's not possible to select a color using a screen reader.\n- **9.1.3.1h Labeling of form elements programmatically detectable:**\n  The label is not announced by the screen reader. Since it reads linearly, no label is perceivable when `hideLabel` is used.\n- **9.1.3.2 Meaningful sequence:**\n  When opening the color selection for \"Color with error,\" there is no output. It is not accessible via the Tab key, only with the arrow keys, making it very confusing for screen reader users.\n- **9.2.4.3 Logical keyboard navigation order:**\n  The focus order for \"Color with error\" is very unusual. Users do not realize that they have to use arrow keys to enter. This is especially problematic since it is not visible on black.\n- **9.2.4.7 Clearly visible focus position:**\n  The focus is not visible on the black color icon in \"Color with error.\"\n\nFor full accessibility, consider using predefined colors lists, e.g. using KolSelect or KolCheckbox.\n\n[🐞 GitHub issue #5549](https://github.com/public-ui/kolibri/issues/5549),\n[🐞 GitHub issue #7455](https://github.com/public-ui/kolibri/pull/7455)\n\n### kol-table-stateful and kol-table-stateless\n\n#### `aria-sort` changes sometimes not announced in NVDA\n\nWhen a table column changes its sort order (i.e. when its `aria-sort` attribute changes), screen readers announce this change automatically. For unknown reasons, this sometimes does not happen in NVDA.\n\n[🐞 GitHub issue (PR) #5780](https://github.com/public-ui/kolibri/pull/5780),\n[🐞 NVDA issue #10890](https://github.com/nvaccess/nvda/issues/10890),\n[🐞 NVDA issue #8132](https://github.com/nvaccess/nvda/issues/8132)\n\n#### Sticky headers\n\nSticky headers in tables are not supported at the moment, because `position: sticky` doesn't work together with `overflow: auto` on the table container, without introducing other drawbacks.\n\n[🐞 GitHub issue #7490](https://github.com/public-ui/kolibri/issues/7490),\n[CSSWG Drafts issue](https://github.com/w3c/csswg-drafts/issues/865),\n[Code sample (StackBlitz)](https://stackblitz.com/edit/stackblitz-starters-umfg2y7m)\n\n### kol-input-number and kol-input-date\n\n#### `readonly` not announced in NVDA\n\nThe components InputNumber and InputDate render their respective native HTML elements `<input type=\"number\">` and `<input type=\"date\">` which both support the attribute `readonly`. When focusing the element, it's expected that the `readonly` attribute is announced as part of the element description. This isn't the case for NVDA.\n\n[🐞 GitHub issue #5554](https://github.com/public-ui/kolibri/issues/5554) (For number),\n[🐞 GitHub issue #5749](https://github.com/public-ui/kolibri/issues/5749) (For date),\n[🐞 NVDA issue #13672](https://github.com/nvaccess/nvda/issues/13672)\n\n### kol-input-date\n\n#### VoiceOver reads date inputs with percentage in Google Chrome\n\nIn Google Chrome, when using VoiceOver with empty `date` input fields (no initial value), an unexpected percentage value is read aloud alongside the usual prompt.\n\nNotably, this issue does not occur with Windows Narrator, which handles empty date inputs correctly.\n\nThere is a bug report for this issue:\n\n[VoiceOver reads negative percent values for month, day, and year steppers in `<input type=\"date\">`](https://issuetracker.google.com/issues/361250561?pli=1)\n\n### kol-input-text\n\nThe `search` of this component is highly browser-dependent. For example, the close button is either shown or hidden depending on the browser. Accessibility is therefore not achieved.\n\n[🐞 GitHub issue #6307](https://github.com/public-ui/kolibri/issues/6307)\n\n### kol-select\n\n#### Screen reader only reads last selected option\n\nKolSelect is using native HTML `<select>`.\n\nWhen using KolSelect with the `multiple` property, the native HTML `<select>` may cause problems with screen readers. Often the entire selection is not read out, but only the last one. Therefore, the KolSelect has no full accessibility.\n\n#### Limited styling capabilities for `<select>` and `<option>` elements\n\n[Stackblitz example](https://stackblitz.com/edit/vitejs-vite-nthnce?file=src%2Fstyle.css)\n\nThe `<select>` element and its `<option>` tags offer limited styling options. Specifically, states such as \"selected\", \"focus\" or \"active\" cannot be reliably customized using CSS. This leads to challenges in meeting accessibility standards, especially in ensuring sufficient contrast ratios.\n\n**Impact**:\n\n- **Limited customization**: The visual state of dropdown options (e.g., on focus or selection) cannot be consistently customized across all browsers. This makes it difficult to create an accessible visual experience for all users.\n- **Browser-dependent rendering**: The appearance of the `<select>` element varies across browsers and operating systems, resulting in inconsistent user experiences.\n- **Contrast issues**: Since the contrast of the default dropdown rendering is controlled by the browser, it's not always possible to ensure WCAG-compliant contrast ratios, which may hinder readability for users with visual impairments.\n\n### kol-icon\n\n#### Firefox accessibility issue with `aria-label`\n\nThe use of `aria-label` or `aria-labelledby` on `<kol-icon>` or its nested elements does not work reliably in Firefox. Even applying these attributes directly to `<kol-icon>` has no effect, which points to a browser-specific issue with ARIA support in custom elements or shadow DOM contexts.\n\n##### Key points\n\n- The issue lies in Firefox's handling of ARIA attributes on custom web components or deeply nested elements.\n- This is not related to dynamic announcements (`aria-live`) but specifically to the inability of Firefox to process `aria-label` or `aria-labelledby` correctly in these cases.\n- The issue is browser-specific and does not consistently occur in Chrome, Edge, or Safari.\n\n##### Conclusion\n\nThis is a limitation in Firefox’s ARIA implementation. Until it is resolved, alternative strategies like visually hidden text near the element or redundant error messages should be used to ensure accessibility.\n\n[🐞 GitHub issue #7076](https://github.com/public-ui/kolibri/issues/7076),\n[🐞 GitHub issue #7119](https://github.com/public-ui/kolibri/issues/7119)\n\n### Toaster\n\nToasts are rendered in a container that's appended as first element of `<body>` and elevated using a high `z-index`.\n\nWhen using [modal dialogs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) these are rendered above toasts on the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer). Hence, toast messages are always blocked by modal dialogs. We recommend completely avoiding toasts in modals and giving feedback within the modal directly.\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/MIGRATION",
-      "group": "docs",
-      "name": "MIGRATION",
-      "path": "MIGRATION.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/MIGRATION.md",
-      "code": "# Migration\n\n## Introduction\n\nNew major versions of KoliBri are developed with the aim of simplifying maintenance and support and promoting further development.\n\nThis means that components, features or functionalities may be removed and technological prerequisites created to promote future innovative change.\n\n- **Maintenance and care strategy:**<br/>\n  We will always maintain the latest and previous major version of KoliBri. This means that we will fix bugs and close security gaps for these versions. For all other versions, we will no longer provide bug fixes or security updates without further notice.\n- **Further development:**<br/>\n  We will always continue to develop the latest major version of KoliBri. This means that we will provide new features and functionalities for these versions. For all other versions, we will no longer provide any new features or functionalities without further ado.\n- **Save an executable version before migration:**<br/>\n  Before the migration takes place, we recommend checking in an executable version so that there are no uncommitted changes to the source code to be migrated. This means that all changes can be easily tracked and checked during and after the migration.\n- **Migrationstool:**<br/>\n  We provide a migration tool that generally supports the migration of source code with KoliBri. This tool is able to migrate most breaking changes automatically. Further information can be found in the [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n- **Help and feedback:**<br/>\n  If there are any problems with the migration, we are happy to help. Please open an [Issue on GitHub](https://github.com/public-ui/kolibri/issues/new/choose).\n\n## Migration from version 1 to version 2\n\n### Notes on upgrading to version 2\n\n1. **New features in version 2 already available from version 1.7:**<br/>\n   Most of the new features introduced in version 2 are already available from version 1.7 and higher. This means that applications based on version 1.7 or higher may already have the necessary functions to enable a smooth migration.\n\n2. **Removed properties, components and functionalities were already marked as obsolete in version 1.7 and higher:**<br/>\n   All features, components and functionalities that were removed in version 2 were already marked as deprecated in version 1.7 and higher. So if you have regularly updated your code base, you should already be prepared to replace these elements.\n\n3. **Migration from version 1.7 minimizes potential changes:**<br/>\n   A migration from version 1.7 and higher to version 2 will probably require the least adjustments. The likelihood of incompatibilities is low, as most changes and removals have already been marked as obsolete in previous versions.\n\n4. **Migration from version 1.4 is possible:**<br/>\n   Although a migration from version 1.7 is recommended, it is also possible to migrate from version 1.4 to version 2. Please note, however, that this may require additional adjustments, as some of the necessary functions may only be available from version 1.7.\n\n5. **Note simplified registration:**<br/>\n   We have simplified the modularization of KoliBri in version 1 and for version 2. The module `@public-ui/core` has been removed and the functionalities moved to the module `@public-ui/components`.\n\n```diff\n  - import { register } from '@public-ui/core';\n  + import { register } from '@public-ui/components';\n  import { defineCustomElements } from '@public-ui/components/dist/loader';\n  import { MyTheme } from '...';\n  await register(MyTheme, defineCustomElements);\n```\n\n### Breaking changes for version 2\n\nYou can find more information about Breaking Changes in the documentation [BREAKING_CHANGES.v2.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v2.md).\n\n### Breaking changes for version 3\n\nYou can find more information about Breaking Changes in the documentation [BREAKING_CHANGES.v3.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v3.md).\n\n### Breaking changes for version 4\n\nYou can find more information about Breaking Changes in the documentation [BREAKING_CHANGES.v4.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v4.md).\n\n## Perform migration\n\n> [!TIP]\n> We recommend carrying out the migration with the migration tool. This tool is able to migrate most breaking changes automatically. Further information can be found in the [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n\n### Migration with migration tool\n\n1. **Preparation:**<br/>\n   The project is on an earlier version, all dependencies are installed, the project is executable and all changes are checked in and safely pushed.\n2. **Execute migration:**<br/>\n   Execute the following command to perform the migration: `npx @public-ui/kolibri-cli migrate src`\n3. **Check migration:**<br/>\n   Check the changes and run the application to make sure everything works as expected.\n\n### Perform migration manually\n\n1. **Preparation:**<br/>\n   The project is on an earlier version, all dependencies are installed, the project is executable and all changes are checked in and safely pushed.\n2. **Perform migration:**<br/>\n   Carry out the migration by making the breaking changes in the respective documentation.\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/MIGRATION.de",
-      "group": "docs",
-      "name": "MIGRATION.de",
-      "path": "MIGRATION.de.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/MIGRATION.de.md",
-      "code": "# Migration\n\n## Einleitung\n\nNeue Major-Versionen von KoliBri werden mit dem Ziel entwickelt, die Wartung und Pflege zu vereinfachen und Weiterentwicklung zu fördern.\n\nDies bedeutet, dass ggf. Komponenten, Eigenschaften oder Funktionalitäten entfernt werden und technologische Voraussetzungen geschaffen werden, um einen zukünftigen innovativen Wandel zu begünstigt.\n\n- **Wartungs- und Pflegestrategie:**<br/>\n  Wir werden immer die neuste und die vorherige Major-Version von KoliBri pflegen. Dies bedeutet, dass wir für diese Versionen Fehler beheben und Sicherheitslücken schließen. Für alle anderen Versionen werden wir ohne Weiteres keine Fehlerbehebungen oder Sicherheitsupdates mehr bereitstellen.\n- **Weiterentwicklung:**<br/>\n  Wir werden immer die neuste Major-Version von KoliBri weiterentwickeln. Dies bedeutet, dass wir für diese Versionen neue Features und Funktionalitäten bereitstellen. Für alle anderen Versionen werden wir ohne Weiteres keine neuen Features oder Funktionalitäten mehr bereitstellen.\n- **Vor der Migration einen lauffähigen Stand sichern:**<br/>\n  Bevor die Migration erfolgt, empfehlen wir einen lauffähigen Stand einzuchecken und somit keine uncommiteten Änderungen auf dem zu migrierenden Quellcode zu haben. Während und nach der Migration können so alle Änderungen gut nachvollzogen und geprüft werden.\n- **Migrationstool:**<br/>\n  Wir stellen ein Migrationstool bereit, welches generell die Migration von Quellcode mit KoliBri unterstützt. Dieses Tool ist in der Lage, die meisten Breaking Changes automatisch zu migrieren. Weitere Informationen finden Sie in der [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n- **Hilfe und Feedback:**<br/>\n  Sollte es Probleme bei der Migration geben, stehen wir gerne zur Verfügung. Bitte eröffnen Sie ein [Issue auf GitHub](https://github.com/public-ui/kolibri/issues/new/choose).\n\n## Migration von Version 1 auf Version 2\n\n### Hinweise zum Upgrade auf Version 2\n\n1. **Neue Eigenschaften in Version 2 bereits ab Version 1.7 verfügbar:**<br/>\n   Die meisten neuen Eigenschaften, die in Version 2 eingeführt werden, sind bereits ab der Version 1.7 und höher verfügbar. Dies bedeutet, dass Anwendungen, die auf Version 1.7 oder höher basieren, möglicherweise bereits über die erforderlichen Funktionen verfügen, um eine reibungslose Migration zu ermöglichen.\n\n2. **Entfernte Eigenschaften, Komponenten und Funktionalitäten waren in Version 1.7 und höher bereits als veraltet markiert:**<br/>\n   Alle Eigenschaften, Komponenten und Funktionalitäten, die in Version 2 entfernt wurden, waren in Version 1.7 und höher bereits als veraltet (`deprecated`) gekennzeichnet. Wenn Sie also regelmäßig Ihre Codebasis aktualisiert haben, sollten Sie bereits darauf vorbereitet sein, diese Elemente zu ersetzen.\n\n3. **Migration ab Version 1.7 minimiert potenzielle Änderungen:**<br/>\n   Eine Migration von Version 1.7 und höher auf Version 2 wird voraussichtlich die geringsten Anpassungen erfordern. Die Wahrscheinlichkeit von Inkompatibilitäten ist niedrig, da die meisten Änderungen und Entfernungen bereits in den vorherigen Versionen als veraltet markiert wurden.\n\n4. **Migration ab Version 1.4 ist möglich:**<br/>\n   Obwohl eine Migration ab Version 1.7 empfohlen wird, ist es auch möglich, von Version 1.4 auf Version 2 zu migrieren. Beachten Sie jedoch, dass dies möglicherweise zusätzliche Anpassungen erfordert, da einige der notwendigen Funktionen möglicherweise erst ab Version 1.7 verfügbar sind.\n\n5. **Vereinfachte Registrierung beachten:**<br/>\n   Wir haben in Version 1 und für Version 2 die Modularisierung von KoliBri vereinfacht. Das Modul `@public-ui/core` wurde entfernt und die Funktionalitäten in das Modul `@public-ui/components` verschoben.\n\n```diff\n  - import { register } from '@public-ui/core';\n  + import { register } from '@public-ui/components';\n  import { defineCustomElements } from '@public-ui/components/dist/loader';\n  import { MyTheme } from '...';\n  await register(MyTheme, defineCustomElements);\n```\n\n### Breaking Changes für Version 2\n\nMehr Informationen zu Breaking Changes finden Sie in der Dokumentation [BREAKING_CHANGES.v2.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v2.md).\n\n### Breaking Changes für Version 3\n\nMehr Informationen zu Breaking Changes finden Sie in der Dokumentation [BREAKING_CHANGES.v3.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v3.md).\n\n### Breaking Changes für Version 4\n\nMehr Informationen zu Breaking Changes finden Sie in der Dokumentation [BREAKING_CHANGES.v4.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v4.md).\n\n## Migration durchführen\n\n> [!TIP]\n> Wir empfehlen, die Migration mit dem Migrationstool durchzuführen. Dieses Tool ist in der Lage, die meisten Breaking Changes automatisch zu migrieren. Weitere Informationen finden Sie in der [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n\n### Migration mit Migrationstool\n\n1. **Vorbereitung:**<br/>\n   Das Projekt ist auf einer früheren Version, alle Abhängigkeiten sind installiert, das Projekt ist lauffähig und alle Änderungen sind eingecheckt und sicher gepusht.\n2. **Migration ausführen:**<br/>\n   Führen Sie den folgenden Befehl aus, um das Migration auszuführen: `npx @public-ui/kolibri-cli migrate src`\n3. **Migration prüfen:**<br/>\n   Prüfen Sie die Änderungen und führen Sie die Anwendung aus, um sicherzustellen, dass alles wie erwartet funktioniert.\n\n### Migration manuell durchführen\n\n1. **Vorbereitung:**<br/>\n   Das Projekt ist auf einer früheren Version, alle Abhängigkeiten sind installiert, das Projekt ist lauffähig und alle Änderungen sind eingecheckt und sicher gepusht.\n2. **Migration durchführen:**<br/>\n   Führen Sie die Migration durch, indem Sie die Breaking Changes in der jeweiligen Dokumentation.\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/OPEN_SOURCE",
-      "group": "docs",
-      "name": "OPEN_SOURCE",
-      "path": "docs/OPEN_SOURCE.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/OPEN_SOURCE.md",
-      "code": "# Open Source Prozess\n\nIn diesem Dokument wird der Prozess und dessen Teilprozesse zum Aufbau des Open Source Projekts dargestellt.\n\nIm folgenden Diagramm wird der Gesamtprozess kompakt dargestellt:\n\n```mermaid\nflowchart\n  idStart((Start))\n  idStartNode((\"•\"))\n  idStart --> idStartNode\n  idStartNode --> idNPM[[NPM einrichten]]\n  idStartNode --> idGitHub[[GitHub einrichten]]\n  idStartNode --> idRepository[[Repository aufbereiten]]\n  idStartNode --> idTeam[[Team organisieren]]\n  idStartNode --> idTrademark[[Marke schützen]]\n  idStartNode --> idLicense[[Lizenz prüfen]]\n  idNPM --> idEndNode\n  idGitHub --> idEndNode\n  idRepository --> idEndNode\n  idTeam --> idEndNode\n  idTrademark --> idEndNode\n  idLicense --> idEndNode\n  idEndNode((\"•\"))\n  idEndNode --> idLeitung{Leitungsfreigabe}\n  idLeitung -- ja --> idHistory[Historie bereinigen]\n  idLeitung -- nein --> idStartNode\n  idHistory --> idPublicCode[Quellcode veröffentlichen]\n  idNPM --> idFreigabe{Freigabe}\n  idFreigabe -- ja --> idPublicPkg[Artefakte bereitstellen]\n  idFreigabe -- nein --> idStartNode\n  idPublicPkg --> idEnd\n  idPublicCode --> idEnd\n  idEnd(((Ende)))\n```\n\n## Teilprozesse\n\n### NPM einrichten\n\n```mermaid\nflowchart\n  idStart((Start))\n  idStart --> idOrg[Organisation anlegen]\n  idOrg --> idOwner[Vertreter hinzufügen]\n  idOwner --> idStartNode((\"•\"))\n  idStartNode --> idMeta[Meta-Daten hinterlegen]\n  idStartNode --> id2FA[2FA aktivieren]\n  idMeta --> idEndNode((\"•\"))\n  id2FA --> idEndNode\n  idEndNode --> idEnd\n  idEnd(((Ende)))\n```\n\n### GitHub einrichten\n\n```mermaid\nflowchart\n  idStart((Start))\n  idStart --> idOrg[Organisation anlegen]\n  idOrg --> idOwner[Vertreter hinzufügen]\n  idOwner --> idStartNode((\"•\"))\n  idStartNode --> idMeta[Meta-Daten hinterlegen]\n  idStartNode --> idRoles[Rollen anlegen]\n  idStartNode --> id2Sec[Sicherheit einrichten]\n  idStartNode --> idPage[Website einrichten]\n  idStartNode --> idForum[Forum einrichten]\n  idStartNode --> idRepo[Repository einrichten]\n  idRepo --> idSelectCont[Contributor auswählen]\n  idSelectCont --> idCodePush[Code hochladen]\n  idCodePush --> idPipeline[Pipelines einrichten]\n  idPipeline --> idSecret[Secrets einstellen]\n  id2Sec --> idSecNode((\"•\"))\n  idSecNode --> id2FA[2FA aktivieren]\n  idSecNode --> idAnaly[Security Analyse aktivieren]\n  idSecNode --> idDomain[Domain verifizieren]\n  idPage --> idLanding[Landing Page einrichten]\n  idLanding --> idPageStyle[CD einrichten]\n  id2FA --> idEndSecNode((\"•\"))\n  idAnaly --> idEndSecNode((\"•\"))\n  idDomain --> idEndSecNode((\"•\"))\n  idRoles --> idUser[Contributor hinzufügen]\n  idUser --> idRole[Rolle zuweisen]\n  idEndNode((\"•\"))\n  idSecret --> idEndNode\n  idMeta --> idEndNode\n  idForum --> idEndNode\n  idEndSecNode --> idEndNode\n  idPageStyle --> idEndNode\n  idRole --> idEndNode\n  idEndNode --> idEnd\n  idEnd(((Ende)))\n```\n\n### Repository aufbereiten\n\n```mermaid\nflowchart\n  idStart((Start)) --> idStartNode((\"•\"))\n  idStartNode --> idCoC[Code of Conduct anlegen]\n  idStartNode --> idCont[Contributing schreiben]\n  idStartNode --> idCla[CLA schreiben]\n  idStartNode --> idChange[Changelog schreiben]\n  idStartNode --> idCleanup[Interna bereinigen]\n  idEndNode((\"•\"))\n  idCoC --> idEndNode\n  idCont --> idEndNode\n  idCla --> idEndNode\n  idChange --> idEndNode\n  idCleanup --> idEndNode\n  idEndNode --> idHistory[History bereinigen]\n  idHistory -->  idEnd(((Ende)))\n```\n\n### Team organisieren\n\n```mermaid\nflowchart\n  idStart((Start)) --> idOwner[Service-Owner festlegen]\n  idOwner --> idStartNode((\"•\"))\n  idStartNode --> idWeekly[Austausch einrichten]\n  idStartNode --> idManifest[Manifest verfassen]\n  idStartNode --> idStandard[Standard beschließen]\n  idStartNode --> idMoney[Finanzierung klären]\n  idEndNode((\"•\"))\n  idWeekly --> idEndNode\n  idManifest --> idEndNode\n  idStandard --> idEndNode\n  idMoney --> idEndNode\n  idEndNode -->  idEnd(((Ende)))\n```\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/README",
-      "group": "docs",
-      "name": "README",
-      "path": "README.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/README.md",
-      "code": "# Welcome to KoliBri\n\n[![npm](https://img.shields.io/npm/v/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)\n[![license](https://img.shields.io/npm/l/@public-ui/components)](https://github.com/public-ui/kolibri/blob/main/LICENSE)\n[![downloads](https://img.shields.io/npm/dt/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)\n[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)\n[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)\n[![size](https://img.shields.io/bundlephobia/min/@public-ui/components)](https://bundlephobia.com/result?p=@public-ui/components)\n![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)\n\n> \"The accessible HTML standard\"\n\n**KoliBri** stands for \"component library for accessibility\" and was released as\nopen source by the\n[Informationstechnikzentrum Bund (ITZBund)](https://itzbund.de) for reuse and\ncontinued development.\n\n## Vision\n\nTogether we make **HTML** accessible using **reusable web components** to ensure **usability** and **accessibility**.\n\n## Mission\n\nThe [HTML web standard](https://html.spec.whatwg.org) is itself very “openly” specified in order to be as long-lasting and robust as possible. It therefore often happens that HTML compositions are not easily accessible, semantic and valid.\n\nKoliBri is based directly on the [Web standards](https://www.w3.org/standards/webdesign/) of the [W3C](https://www.w3.org) (framework-agnostic), and is generic Reference implementation of the [WCAG standard](https://www.w3.org/WAI/standards-guidelines/wcag/) and the [BITV](https://www.bitvtest.de/bitv_test.html) for accessibility and implemented as a multi-theming capable presentation layer. There is no technical reference and no data transfer functionality. This means that KoliBri is equally reusable for the realization of static websites as well as dynamic web applications with different corporate designs and style guides and is therefore very interesting for open source.\n\n## Roadmap\n\nKoliBri is always actively working on improvements, new features and future-oriented innovations for the latest major release. In parallel, a selected LTS release is maintained with regard to bug fixes.\n\n| Version | Release type | Release  | Period | End-of-Support |\n| ------: | :----------: | :------: | :----: | :------------: |\n|     0.x |    Initial   | Jul 2020 |   -    |    Dec 2021    |\n|     1.x |     LTS      | Dec 2021 |   3y   |    Dec 2024    |\n|     2.x |     LTS      | Dec 2023 |   3y   |    Dec 2026    |\n|     3.x |     STS      | Dec 2024 |  15m   |    Dec 2025    |\n|     4.x |     LTS      | Dec 2025 |   3y   |    Dec 2028    |\n|     5.x |     STS      | Dec 2026 |  15m   |    Dec 2027    |\n\n```mermaid\ngantt\n    title LTS & STS\n    dateFormat YYYY-MM-DD\n\n    0.x Initial implementation :, 2020-07-01, 17M\n    1.x (LTS)                  :, 2021-12-01, 3y\n    2.x (LTS)                  :,  2023-12-01, 3y\n    3.x (STS)                  :crit , 2024-12-01, 15M\n    4.x (LTS)                  :, 2025-12-01, 3y\n    5.x (STS)                  :crit , 2026-12-01, 15M\n    6.x (LTS)                  :, 2027-12-01, 3y\n\n```\n\n## Installation\n\nInstall the packages with [pnpm](https://pnpm.io):\n\n```bash\npnpm install\n```\n\nRun the build once to generate the components:\n\n```bash\npnpm -r build\n```\n\n### Quick start\n\nInstall the default theme and register the components:\n\n```ts\npnpm add @public-ui/components @public-ui/theme-default\n\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nregister(DEFAULT, defineCustomElements);\n```\n\n### Avoid CSS Custom Property Collisions\n\nKoliBri themes expose a few CSS custom properties so consumers can adapt the look and feel.\nBecause these properties remain global—even inside a Shadow DOM—using too many of them can\nclash with variables defined on the host page.\n\nUse namespaced custom properties only for values that must be overridden from the outside.\nFor internal calculations rely on SASS variables instead of additional CSS properties.\nThis keeps components robust and prevents unexpected style leaks.\n\n## Collaboration and cooperation\n\nThe **focus** of KoliBri is on **small** (atomic), very **flexible** and highly **reusable** HTML compositions (e.g. buttons). We offer an accessible, semantic and valid standard implementation of such components that can be reused for any higher-level HTML structure or component (molecule, organism or template).\nThese atomic components are where we should **collaborate** and **cooperate** to combine our skills and knowledge. The synergy effects on the basic components allow you to focus more on subject-specific content.\n\nLet's make KoliBri **better** and **more colorful** together!\n\n> Continue [to **Documentation**](https://public-ui.github.io/en/)…\n\n## Contributing\n\nBug reports and pull requests are welcome. Please read our [contribution guide](./CONTRIBUTING.md) before getting started.\n\n## Resources\n\n- [Get Started](https://public-ui.github.io/en/docs/get-started/first-steps)\n- [Contributing](./CONTRIBUTING.md)\n- [Code of Conduct](./CODE_OF_CONDUCT.md)\n- [Known Issues](http://public-ui.github.io/en/docs/known-issues)\n- [Security](./docs/SECURITY.md)\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/SECURITY",
-      "group": "docs",
-      "name": "SECURITY",
-      "path": "docs/SECURITY.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/SECURITY.md",
-      "code": "# Security/Sicherheit\n\n## Report security issues (EN)\n\nIf you believe you have found a security vulnerability in our project, we encourage you to let us know immediately. We will investigate all legitimate reports and do our best to fix the problem quickly.\n\nContact: [kolibri@itzbund.de](mailto:kolibri@itzbund.de)\n\n## Melden von Sicherheitsproblemen (DE)\n\nWenn Sie glauben, dass Sie eine Sicherheitslücke in unserm Projekt gefunden haben, empfehlen wir Ihnen, uns dies umgehend mitzuteilen. Wir werden alle legitimen Meldungen untersuchen und unser Bestes tun, um das Problem schnell zu beheben.\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/STYLELINT",
-      "group": "docs",
-      "name": "STYLELINT",
-      "path": "docs/STYLELINT.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/STYLELINT.md",
-      "code": "# Stylelint Configuration\n\n## Overview\n\nThe Stylelint configuration has been centralized to reduce maintenance overhead and ensure consistent code quality across all packages.\n\n## Structure\n\n```text\nlib/\n├── .stylelintrc.json         # Central Stylelint configuration\n├── .stylelintignore          # Central ignore rules\n└── packages/\n    ├── components/\n    │   └── .stylelintrc.json # Extends the central configuration\n    ├── themes/\n    │   ├── default/\n    │   │   └── .stylelintrc.json\n    │   └── ecl/\n    │       └── .stylelintrc.json\n    └── samples/\n        └── react/\n            └── .stylelintrc.json\n```\n\n## Central Configuration\n\nThe central configuration (`.stylelintrc.json` in the root) contains:\n\n- **Extends**: `stylelint-config-standard`, `stylelint-config-recommended-scss`\n- **Plugins**: `stylelint-scss`, `stylelint-order`\n- **Supported file types**: CSS (`.css`), SCSS (`.scss`)\n- **Rules**:\n  - BEM CSS naming conventions\n  - SCSS-specific rules\n  - CSS property ordering by groups:\n    - Custom Properties (`--*`)\n    - Composite (Transform, Opacity, etc.)\n    - Paint (Color, Background, Border, etc.)\n    - Layout/Geometry (Display, Position, Sizing, etc.)\n    - Everything (Font, Text, etc.)\n\n## Package-specific Configurations\n\nEach package extends the central configuration:\n\n```json\n{\n\t\"extends\": [\"../../.stylelintrc.json\"]\n}\n```\n\nThis enables:\n\n- Uniform rules for all packages\n- Possibility for package-specific customizations\n- Easy maintenance of the central configuration\n\n## Dependencies\n\nThe required Stylelint packages are installed as devDependencies in the root `package.json`:\n\n- `stylelint@16.20.0`\n- `stylelint-config-recommended-scss@15.0.1`\n- `stylelint-config-standard@38.0.0`\n- `stylelint-order@7.0.0`\n- `stylelint-scss@6.12.1`\n\n## Usage\n\n### Running linting\n\n```bash\n# In a specific package\ncd packages/components\npnpm lint:stylelint\n\n# Or across all packages\npnpm -r lint:stylelint\n```\n\n### Using auto-fix\n\n```bash\n# Automatically fix CSS property ordering for all supported file types\nnpx stylelint \"src/**/*.{css,scss}\" --fix\n\n# Or for specific file types\nnpx stylelint \"src/**/*.css\" --fix\nnpx stylelint \"src/**/*.scss\" --fix\n```\n\n## Benefits of Centralization\n\n1. **Reduced maintenance overhead**: Changes only need to be made in one place\n2. **Consistency**: All packages use the same rules\n3. **Easy updates**: Stylelint versions and rules can be managed centrally\n4. **Better maintainability**: Less duplication of configuration files\n\n## CSS Property Ordering\n\nThe configuration enforces a specific order of CSS properties:\n\n1. **Custom Properties** (`--variable`)\n2. **Composite Properties** (Transform, Opacity, etc.)\n3. **Paint Properties** (Colors, Backgrounds, Borders)\n4. **Layout/Geometry** (Display, Position, Sizing)\n5. **Everything Else** (Typography, Content)\n\nThis improves readability and consistency of CSS code.\n\n## CSS Custom Properties and SASS Variables\n\nCustom properties (`--*`) remain in the global CSS cascade, even inside a Shadow DOM.\nUse them sparingly and prefix them clearly for values that external themes should override.\nFor internal calculations prefer SASS variables so that unused properties do not leak and collide\nwith variables from host applications.\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/tutorials/NEW_COMPONENT",
-      "group": "docs/tutorials",
-      "name": "NEW_COMPONENT",
-      "path": "docs/tutorials/NEW_COMPONENT.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/tutorials/NEW_COMPONENT.md",
-      "code": "# Neue Komponente erstellen\n\n> Schritt-für-Schritt-Anleitung, wie man eine neue Komponente im Teilmodul `components` erstellt.\n\n## Grundprinzipien\n\nFolgende Grundprinzipien gelten für das Schreiben von Quellcode:\n\n- Auflistungen werden immer alphabetisch sortiert\n- Wiederverwendete Algorithmen (z.B. Property-Validatoren) werden in statische Funktionen ausgelagert (z.B. `packages/schema/src/validators/<prop-name>.ts`)\n- ...\n\n## Checkliste\n\n| Schritt | Kurzbeschreibung                                                                                                                         |\n| :-----: | ---------------------------------------------------------------------------------------------------------------------------------------- |\n|    0    | Projekt starten                                                                                                                          |\n|    1    | Name im Schema hinterlegen                                                                                                               |\n|    2    | Verzeichnis anlegen<br>- component.tsx(optional)<br>- readme.md<br>- shadow.tsx: Komponente mit Shadow DOM<br>- styles.css<br>- types.ts |\n|    3    | API spezifizieren                                                                                                                        |\n|    4    | Klasse zur API implementieren<br>- Props<br>- State<br>- Watcher<br>- Initialer Hook<br>- Render-Methode                                 |\n|    5    | Styling anlegen                                                                                                                          |\n|    6    | Beispiele in `index.html` aufnehmen                                                                                                      |\n|    7    | readme.md vervollständigen                                                                                                               |\n|   ...   | ...                                                                                                                                      |\n|   ...   | Klasse in Komponenten-Liste für Tests aufnehmen (packages/components/src/components/component-list.ts)                                   |\n|   ...   | Alle autogeneierten Daten zur Komponente mit einchecken                                                                                  |\n\n## Schritt 0\n\nProjekt starten, wie in [Contribution](../../CONTRIBUTING.md) beschrieben.\n\n## Schritt 1\n\nAls erstes wird der **Name** der neuen Komponenten in der **Schema**-Datei (`packages/schema/tag-names.ts`) hinterlegt.\n\n## Schritt 2 - Verzeichnis anlegen\n\nEine Vorlage ist unter `/docs/tutorials/new-component` zu finden. Ziel: `/packages/components/src/components/[component-name]`.\nSofern eine Variante ohne Shadow DOM für andere Komponenten benötigt wird, ist die Komponente selbst, mit `shadow: false` anzulegen und diese Komponente in `shadow.tsx` einzubinden.\nAndernfalls ist die Komponente direkt mit `shadow: true` in `shadow.tsx` zu implementieren.\nZiel: shadow.tsx existiert immer und liefert die Komponente mit Shadow DOM.\nDie `readme.md` wird automatisch bei `pnpm build` erzeugt, sollte sie bereits existieren wird der automatisch generierte Inhalt angehängt.\n\n## Schritt 3 - API spezifizieren\n\nDatei: `types.ts`;\nInhalt: `RequiredProps`, `OptionalProps`, `RequiredStates`, `OptionalStates`, `States` und `ComponentApi`\n\n## Schritt 4 - Klasse Implementieren\n\nDatei: `shadow.tsx` oder/und `component.tsx`;\nInhalt:\n\n- `@Component` (außerhalb der Klasse),\n- `@Prop`: alphabetisch sortiert,\n- `@State`: Standardwerte werden hier gesetzt,\n- `@Watch`: werden bei Änderungen des Wertes aufgerufen, Validierung und Übernahme des Wertes in den State,\n- `public componentWillLoad()`: Initialer Hook, alle Validierungsmethoden hier aufrufen\n- `public render()`: Render-Methode, erstellt das HTML, das gerendert werden soll\n\n## Schritt 5 - Styling anlegen\n\nDatei: `styles.css`;\nWichtig: `packages/components/src/components/README.md` beachten.\nSofern Styling für mehrere Komponenten verwendet werden soll, Datei passend benennen und direkt unter `/packages/components/src/components/` erstellen und in styles.css importieren.\n\n## Schritt 6 - Beispiel in index.html erstellen\n\nDatei: `/packages/components/src/index.html`;\nUnter body > main > ol ein li mit dem Beispielcode erstellen.\nAus dem Verzeichnis `/packages/components` kann mit `pnpm start` der dev-server gestartet werden.\nAndere li können vorrübergehend entfernt werden, dafür ist die `index.bak.html` da.\nNach Beendigung der Entwicklung ist die `index.html` zurückzusetzen, abgesehen des neuen Beispiels, welches in die `index.bak.html` ebenfalls einzufügen ist.\n\n## Schritt 7 - readme.md vervollständigen\n\nDatei: `readme.md`;\nDie von `pnpm build` (in `/packages/components` ausgeführt) erzeugte `readme.md` mit sinnvollen Informationen vervollständigen.\n\n... bitte fortsetzen.\n",
-      "kind": "doc"
-    },
-    {
-      "id": "doc/tutorials/new-component/readme",
-      "group": "docs/tutorials/new-component",
-      "name": "readme",
-      "path": "docs/tutorials/new-component/readme.md",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/docs/tutorials/new-component/readme.md",
-      "code": "# New-Component\n\n> kurze Beschreibung der gerenderten Komponente (nicht technisch)\n\n> wann diese Komponente einzusetzen ist\n\n## Konstruktion\n\n### Code\n\n> Beispielcode, wird als Code in der Dokumentation angezeigt\n\n```html\n<kol-new-component _heading=\"Element 1\">\n\t<div slot=\"content\">\n\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n\t\tAt vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum\n\t\tdolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos\n\t\tet accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t</div>\n\t<div slot=\"header\">Inhalt eines Header</div>\n</kol-new-component>\n```\n\n### Beispiel\n\n> Beispiel, wird gerendert; Empfehlung: selber code wie oben, eventuell mit Wrapper\n\n<div class=\"grid gap-2\">\n  <kol-new-component _heading=\"Element 1\">\n    <div slot=\"content\">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>\n    <div slot=\"header\">Inhalt eines Header</div>\n  </kol-new-component>\n</div>\n\n## Verwendung\n\n> Erläuterungen der Attribute und Slots\n\n### Best practices\n\n- so soll man das verwenden\n- das sollte man beachten\n- das sollte man vermeiden\n\n### Anwendungsfälle\n\n- für welchen Fall die Komponente gedacht ist\n\n## Barrierefreiheit\n\n### Tastatursteuerung\n\n| Taste   | Funktion                           |\n| ------- | ---------------------------------- |\n| `Tab`   | Springt die einzelnen Elemente an. |\n| `Enter` | Tut Dinge.                         |\n\n## Links und Referenzen\n\n- Liste von hilfreichen Links\n\n> Der folgende Teil wird automatisch beim build generiert. Die Überschriften sind als Hilfe, was man nicht manuell einfügen muss.\n\n<!-- Auto Generated Below -->\n\n## Properties\n\n| Property                | Attribute  | Description                                               | Type                                                                                 | Default     |\n| ----------------------- | ---------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- |\n| `_heading` _(required)_ | `_heading` | Gibt die Überschrift des NewComponents an.                | `string`                                                                             | `undefined` |\n| `_level`                | `_level`   | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined`                                       | `1`         |\n| `_on`                   | --         | Gibt die EventCallback-Funktionen an.                     | `undefined \\| { onClick?: EventValueOrEventCallback<Event, boolean> \\| undefined; }` | `undefined` |\n| `_open`                 | `_open`    | Gibt an, ob das NewComponent geöffnet ist.                | `boolean \\| undefined`                                                               | `false`     |\n\n## Slots\n\n| Slot        | Description                                                                                                                                             |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `\"content\"` | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des NewComponents. (wenn nur ein slot verwendet wird, kann der Name weggelassen werden) |\n\n## Dependencies\n\n### Depends on\n\n- [kol-button](../button)\n- [kol-heading-wc](../heading)\n\n### Graph\n\n```mermaid\ngraph TD;\n  kol-new-component --> kol-button\n  kol-new-component --> kol-heading-wc\n  kol-button --> kol-button-wc\n  kol-button-wc --> kol-span-wc\n  kol-button-wc --> kol-tooltip-wc\n  kol-span-wc --> kol-icon\n  kol-tooltip-wc --> kol-span-wc\n  style kol-new-component stroke:#333,stroke-width:4px\n```\n\n---\n",
-      "kind": "doc"
-    },
-    {
-      "id": "sample/abbr/basic",
-      "group": "abbr",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/abbr/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/abbr/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolAbbr } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\nexport const AbbrBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolAbbr shows an abbreviation and uses kol-tooltip-wc to display the long form, if provided.</p>\n\t\t</SampleDescription>\n\n\t\t<p>\n\t\t\tI am <KolAbbr _label=\"as an example\">e.g.</KolAbbr> an abbreviation.\n\t\t</p>\n\n\t\t<p>\n\t\t\tI am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.\n\t\t</p>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/accordion/basic",
-      "group": "accordion",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/accordion/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/accordion/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const AccordionBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAccordion hides its content until opened. The open state can be toggled by clicking the headline or by setting the <code>_open</code>-prop\n\t\t\t\tprogrammatically. Additionally, the sample shows the disabled state for a closed and an open accordion.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 1\">Contents Accordion Tab 1</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 2\">Contents Accordion Tab 2</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 2 (deactivated)\" _disabled></KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 2 (disabled and open)\" _disabled _open>\n\t\t\t\tContents Accordion Tab 2\n\t\t\t</KolAccordion>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/accordion/headlines",
-      "group": "accordion",
-      "name": "headlines",
-      "path": "packages/samples/react/src/components/accordion/headlines.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/accordion/headlines.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AccordionHeadlines: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolAccordion with the different heading levels from 1-6.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolAccordion _label=\"Heading Level 1\" _level={1}>\n\t\t\t\tContents Accordion Tab 1\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 2\" _level={2}>\n\t\t\t\tContents Accordion Tab 2\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 3\" _level={3}>\n\t\t\t\tContents Accordion Tab 3\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 4\" _level={4}>\n\t\t\t\tContents Accordion Tab 4\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 5\" _level={5}>\n\t\t\t\tContents Accordion Tab 5\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 6\" _level={6}>\n\t\t\t\tContents Accordion Tab 6\n\t\t\t</KolAccordion>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/alert/basic",
-      "group": "alert",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/alert/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/alert/basic.tsx",
-      "code": "import React from 'react';\nimport { KolAlert } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport type { AlertTypePropType, AlertVariantPropType, HeadingLevel } from '@public-ui/components';\nimport { SampleDescription } from '../SampleDescription';\n\ntype PropsByType = {\n\tlevel: HeadingLevel;\n\ttype: AlertTypePropType;\n\tvariant: AlertVariantPropType;\n};\ntype PropsBasic = {\n\tvariant?: AlertVariantPropType;\n};\n\nconst AlertByType: FC<PropsByType> = ({ level, type, variant }) => (\n\t<>\n\t\t<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant}>\n\t\t\tThis is the text of the alert.\n\t\t</KolAlert>\n\t\t<KolAlert _type={type} _variant={variant}>\n\t\t\tIn this alert, only the text without the heading is used.\n\t\t</KolAlert>\n\t\t<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant} _hasCloser>\n\t\t\tThis is the text of the alert. With close button.\n\t\t</KolAlert>\n\t\t<KolAlert _type={type} _variant={variant} _hasCloser>\n\t\t\tIn this alert, only the text without the heading is used. With close button.\n\t\t</KolAlert>\n\t</>\n);\n\nexport const AlertVariants: FC<PropsBasic> = ({ variant = 'msg' }) => (\n\t<div className=\"grid gap-4\">\n\t\t<AlertByType level={1} type=\"default\" variant={variant} />\n\t\t<AlertByType level={2} type=\"error\" variant={variant} />\n\t\t<AlertByType level={3} type=\"info\" variant={variant} />\n\t\t<AlertByType level={4} type=\"success\" variant={variant} />\n\t\t<AlertByType level={5} type=\"warning\" variant={variant} />\n\t</div>\n);\n\nexport const AlertBasic: FC<PropsBasic> = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAlert shows messages of different types. This sample illustrates the variant <code>msg</code>, showing all possible types with and without headlines\n\t\t\t\tand close buttons.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<AlertVariants variant=\"msg\" />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/alert/card-msg",
-      "group": "alert",
-      "name": "card-msg",
-      "path": "packages/samples/react/src/components/alert/card-msg.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/alert/card-msg.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { AlertVariants } from './basic';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AlertCardMsg: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAlert shows messages of different types. This sample illustrates the variant <code>card</code>, showing all possible types with and without headlines\n\t\t\t\tand close buttons.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<AlertVariants variant=\"card\" />\n\t\t</section>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/alert/html",
-      "group": "alert",
-      "name": "html",
-      "path": "packages/samples/react/src/components/alert/html.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/alert/html.tsx",
-      "code": "import React from 'react';\n\nimport { KolAlert, KolHeading } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport type { FC } from 'react';\n\nexport const AlertHtml: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolAlert can be used with arbitrary HTML as slot content.</p>\n\t\t</SampleDescription>\n\n\t\t<div>\n\t\t\t<KolAlert _label=\"Output of HTML code in the alert\" _type=\"info\">\n\t\t\t\t<div className=\"mt-2 mb-3\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"An H2 heading is output here\" />\n\t\t\t\t</div>\n\t\t\t\t<div className=\"grid gap-4 sm:grid-cols-2\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3>Text in a left-hand column</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem sed fugiat dolorum ratione et, ullam officia nobis nihil debitis, consectetur\n\t\t\t\t\t\t\tdicta accusantium. Vitae debitis, quibusdam vel recusandae deleniti placeat dolorem?\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3>Text in einer rechten Spalte</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem, ipsum dolor sit amet consectetur adipisicing elit. Quod beatae officiis, velit nam dicta quae repellat perspiciatis explicabo illo.\n\t\t\t\t\t\t\tPossimus, molestiae deleniti! Exercitationem blanditiis ducimus similique tempora ratione consequuntur eaque!\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</KolAlert>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/avatar/basic",
-      "group": "avatar",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/avatar/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/avatar/basic.tsx",
-      "code": "import { KolAvatar } from '@public-ui/react-v19';\nimport React from 'react';\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AvatarBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolAlert shows a user&apos;s avatar. It can be used with or without an image. If no image is defined, the name&apos;s initials are shown instead.</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</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/badge/basic",
-      "group": "badge",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/badge/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/badge/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BadgeBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBadge shows badges with a label, background color and optional icon.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge _label=\"black\"></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" _label=\"teal\"></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" _label=\"blue\"></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _label=\"red with icon\" _icons=\"codicon codicon-smiley\"></KolBadge>\n\t\t\t<KolBadge _color=\"#8b008b\" _label=\"purple with icon\" _icons=\"codicon codicon-squirrel\"></KolBadge>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/badge/button",
-      "group": "badge",
-      "name": "button",
-      "path": "packages/samples/react/src/components/badge/button.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/badge/button.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst createBadgeProps = (label: string) => ({\n\t_label: label,\n\t_smartButton: {\n\t\t_icons: 'codicon codicon-close',\n\t\t_label: `Remove ${label}`,\n\t\t_on: {\n\t\t\tonClick: () => alert('clicked'),\n\t\t},\n\t},\n});\n\nexport const BadgeButton: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolBadge with an optional <code>smartButton</code>. The sample defines a &quot;close&quot; button with X-icon a click event listener.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge {...createBadgeProps('black')}></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" {...createBadgeProps('teal')}></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" {...createBadgeProps('blue')}></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _icons=\"codicon codicon-smiley\" {...createBadgeProps('red with icon')}></KolBadge>\n\t\t\t<KolBadge _color=\"#8b008b\" _icons=\"codicon codicon-squirrel\" {...createBadgeProps('purple with icon')}></KolBadge>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/badge/formatted-label",
-      "group": "badge",
-      "name": "formatted-label",
-      "path": "packages/samples/react/src/components/badge/formatted-label.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/badge/formatted-label.tsx",
-      "code": "import * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { KolBadge } from '@public-ui/react-v19';\n\nexport const FormattedLabel = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample demonstrates the possibility of formatted text in badges via markdown syntax.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolBadge _color=\"#7db4ebff\" _label=\"**Bold** and _italic_ Markdown label\" />\n\t\t\t\t<KolBadge _color=\"#8feb7dff\" _label=\"This is ~~strikethrough~~ text\" />\n\t\t\t\t<KolBadge _color=\"#e6ee8eff\" _label=\"Source code like `y = mx + n` is possible\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/breadcrumb/basic",
-      "group": "breadcrumb",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/breadcrumb/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/breadcrumb/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolBreadcrumb } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BreadcrumbBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBreadcrumb shows a breadcrumb navigation. The sample illustrates a variation of link, text and icon elements.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons or text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the start page with very long link test',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons and text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _icons: 'codicon codicon-home', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the main page and I_am_a_really_long_compound_word_trying_to_break_the_layout',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button-link/aria-description",
-      "group": "button-link",
-      "name": "aria-description",
-      "path": "packages/samples/react/src/components/button-link/aria-description.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button-link/aria-description.tsx",
-      "code": "import { KolButtonLink } from '@public-ui/react-v19';\nimport React from 'react';\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkAriaDescription: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with aria-description</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t<KolButtonLink _label=\"Button Text without area description\"></KolButtonLink>\n\t\t\t<KolButtonLink _label=\"Button Text\" _ariaDescription=\"Button Area Description\"></KolButtonLink>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button-link/basic",
-      "group": "button-link",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/button-link/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button-link/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolButtonLink, KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nexport const ButtonLinkBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolButtonLink shows an element, that behaves like a button but looks like a link. The sample illustrates KolButtonLink with different\n\t\t\t\t\tdisplay-properties such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"text-base\">\n\t\t\t\t<KolHeading _level={2} _label=\"Button-Link with variant 'inline'\" />\n\n\t\t\t\t<p>\n\t\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label=\"Simple Link\" /> It is rendered by default as an{' '}\n\t\t\t\t\t<strong>inline element</strong>.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.\n\t\t\t\t\t<KolButtonLink className=\"m-4\" style={{ display: 'inline-block', border: '1px dotted' }} _label=\"Simple Link\" />. This allows you to assign width,\n\t\t\t\t\theight, and other properties to it using CSS styles.\n\t\t\t\t\t<br />\n\t\t\t\t\t<br />\n\t\t\t\t\tAfter that, there is a link that is rendered as a block element.\n\t\t\t\t\t<KolButtonLink style={{ display: 'block' }} _label=\"Simple Link\" />\n\t\t\t\t\tTherefore, I go over the entire width of the parent element to create a line break.\n\t\t\t\t</p>\n\n\t\t\t\t<KolHeading _level={2} _label=\"Button-Link with variant 'standalone'\" />\n\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"Disabled ButtonLink\" _disabled _variant=\"standalone\" />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"With access key\" _accessKey=\"c\" _on={dummyEventHandler} _variant=\"standalone\" />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"Disabled ButtonLink\" _shortKey=\"s\" _variant=\"standalone\" />\n\t\t\t\t</p>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button-link/icons",
-      "group": "button-link",
-      "name": "icons",
-      "path": "packages/samples/react/src/components/button-link/icons.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button-link/icons.tsx",
-      "code": "import React from 'react';\n\nimport { KolButtonLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with icons in different locations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolButtonLink _icons=\"codicon codicon-home\" _label=\"I am a link with an icon on the left\" />\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t\tleft: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t/>\n\t\t\t<KolButtonLink _icons=\"codicon codicon-home\" _hideLabel _label=\"I am a link with icon only\" />\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button-link/image",
-      "group": "button-link",
-      "name": "image",
-      "path": "packages/samples/react/src/components/button-link/image.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button-link/image.tsx",
-      "code": "import React from 'react';\n\nimport { KolButtonLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkImage: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with slot-content instead of a label. The sample uses an image as content.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolButtonLink _label=\"I am a link that is rendered as text\" />\n\t\t\t<KolButtonLink _label=\"\">\n\t\t\t\t<img alt=\"Presentation of the KoliBri theming\" slot=\"expert\" src=\"abgrenzung.jpg\" width=\"300\" />\n\t\t\t</KolButtonLink>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button/access-key",
-      "group": "button",
-      "name": "access-key",
-      "path": "packages/samples/react/src/components/button/access-key.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button/access-key.tsx",
-      "code": "import { KolButton, KolLink } from '@public-ui/react-v19';\nimport React from 'react';\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nexport const ButtonAccessKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows KolButton with{' '}\n\t\t\t\t\t<KolLink _label=\"access keys\" _href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey\" _target=\"blank\" />. The access\n\t\t\t\t\tkeys can be used to trigger the buttons using the keyboard.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolButton _label=\"With S access key\" _accessKey=\"S\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Very small b\" _accessKey=\"b\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Access key does not appear in label\" _accessKey=\"x\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"access key without label\" _hideLabel _accessKey=\"a\" _icons=\"codicon codicon-dashboard\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton\n\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: 'codicon codicon-dashboard',\n\t\t\t\t\t\tright: 'codicon codicon-dashboard',\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey=\"n\"\n\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button/aria-description",
-      "group": "button",
-      "name": "aria-description",
-      "path": "packages/samples/react/src/components/button/aria-description.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button/aria-description.tsx",
-      "code": "import { KolButton } from '@public-ui/react-v19';\nimport React from 'react';\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nexport const ButtonAriaDescription: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolButton with aria-description</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolButton _label=\"Button Text without area description\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Button Text\" _ariaDescription=\"Button Area Description\" _on={dummyEventHandler}></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button/baselined",
-      "group": "button",
-      "name": "baselined",
-      "path": "packages/samples/react/src/components/button/baselined.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button/baselined.tsx",
-      "code": "import React from 'react';\n\nimport { KolButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nexport const ButtonBaselined: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _icons=\"codicon codicon-reactions\" _label=\"Label-Text with Icon\" _on={dummyEventHandler}></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button/basic",
-      "group": "button",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/button/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { ButtonVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolButton shows a button-element. This sample demonstrates the basic usage with its different styling variants, icons, disabled state and hidden labels.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<ButtonVariants />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button/expert-slot",
-      "group": "button",
-      "name": "expert-slot",
-      "path": "packages/samples/react/src/components/button/expert-slot.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button/expert-slot.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { ButtonVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonExpertSlot: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolButton show a button-element with expert slot.</p>\n\t\t</SampleDescription>\n\n\t\t<ButtonVariants _label=\"\">\n\t\t\t<span slot=\"expert\">I am more than just a button</span>\n\t\t</ButtonVariants>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button/icons",
-      "group": "button",
-      "name": "icons",
-      "path": "packages/samples/react/src/components/button/icons.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button/icons.tsx",
-      "code": "import React from 'react';\n\nimport { KolButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nexport const ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolButton with icons in all alignments.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div>\n\t\t\t\t<KolButton\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tbottom: 'codicon codicon-arrow-down',\n\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\ticon: 'codicon codicon-arrow-left',\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t'font-size': '200%',\n\t\t\t\t\t\t\t\ttransform: 'rotate(45deg)',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ticon: 'codicon codicon-arrow-up',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tright: 'codicon codicon-arrow-right',\n\t\t\t\t\t}}\n\t\t\t\t\t_label=\"Label\"\n\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button/row-reverse-tooltip",
-      "group": "button",
-      "name": "row-reverse-tooltip",
-      "path": "packages/samples/react/src/components/button/row-reverse-tooltip.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button/row-reverse-tooltip.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { KolButton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonRowReverseTooltip: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates how the tooltip adapts its width when containing long text inside a row-reverse flex container. The effect becomes visible\n\t\t\t\t\twhen inspecting the layout with DevTools and reducing the available width (e.g. by narrowing the screen).\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-row-reverse\">\n\t\t\t\t<KolButton\n\t\t\t\t\t_icons=\"codicon codicon-home\"\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_label=\"This is a very, very long tooltip text that exceeds the width.\"\n\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button/short-key",
-      "group": "button",
-      "name": "short-key",
-      "path": "packages/samples/react/src/components/button/short-key.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button/short-key.tsx",
-      "code": "import { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport { useRef } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.kolFocus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.kolFocus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tgap: 'calc(10rem / var(--kolibri-root-font-size, 16))',\n\t\t\t}}\n\t\t\tonKeyUp={handleKeyUp}\n\t\t>\n\t\t\t<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />\n\t\t\t<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />\n\t\t</div>\n\t);\n};\n\nexport const ButtonShortKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\ttype Data = {\n\t\tlabel: string;\n\t};\n\tconst DATA: Data[] = [\n\t\t{\n\t\t\tlabel: 'Row 1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 2',\n\t\t},\n\t];\n\n\tconst HEADERS: KoliBriTableHeaders = {\n\t\thorizontal: [\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Label',\n\t\t\t\t\tkey: 'label',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Actions',\n\t\t\t\t\tkey: 'actions',\n\t\t\t\t\ttextAlign: 'left',\n\n\t\t\t\t\trender: (el, cell) => {\n\t\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe first sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed\n\t\t\t\t\tseparately.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tThe second sample showcases a table where each row contains two KolButtons, each with its own shortcut key. To trigger an action, move the focus to\n\t\t\t\t\tany of the &quot;Actions&quot; cells and press &quot;e&quot; or &quot;d.&quot; Doing so will activate the corresponding action and display a Toast\n\t\t\t\t\tnotification for demonstration purposes.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolButton _label=\"With S short key\" _shortKey=\"S\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Very small b\" _shortKey=\"b\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Short key does not appear in label\" _shortKey=\"x\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"short key without label\" _hideLabel _shortKey=\"k\" _icons=\"codicon codicon-dashboard\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton\n\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: 'codicon codicon-dashboard',\n\t\t\t\t\t\tright: 'codicon codicon-dashboard',\n\t\t\t\t\t}}\n\t\t\t\t\t_shortKey=\"n\"\n\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t<KolHeading _level={2} _label=\"Interactive sample\" className=\"mt\" />\n\n\t\t\t<KolTableStateful\n\t\t\t\t_label={`Move focus within one of the \"Actions\" cells and press \"e\" or \"d\" to trigger an action.`}\n\t\t\t\t_data={DATA}\n\t\t\t\t_headers={HEADERS}\n\t\t\t\t_minWidth=\"400px\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/button/width",
-      "group": "button",
-      "name": "width",
-      "path": "packages/samples/react/src/components/button/width.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/button/width.tsx",
-      "code": "import React from 'react';\n\nimport { KolButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nexport const ButtonWidth: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst ARGS = {\n\t\tclassName: 'w-8rem',\n\t\t_on: {\n\t\t\tonClick: dummyClickEventHandler,\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolButton with adjusted widths.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-14\">\n\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t<KolButton _label=\"Primary\" _variant=\"primary\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Secondary\" _variant=\"secondary\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Normal\" _variant=\"normal\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Danger\" _variant=\"danger\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Ghost\" _variant=\"ghost\" {...ARGS}></KolButton>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t<KolButton _disabled _label=\"Primary\" _variant=\"primary\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _disabled _label=\"Secondary\" _variant=\"secondary\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _disabled _label=\"Normal\" _variant=\"normal\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _disabled _label=\"Danger\" _variant=\"danger\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _disabled _label=\"Ghost\" _variant=\"ghost\" {...ARGS}></KolButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/card/basic",
-      "group": "card",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/card/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/card/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolCard shows a card with title and slot content. The second sample features a close button.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"w-full grid grid-cols-2 gap-4\">\n\t\t\t<KolCard _label=\"Card with title and content\">\n\t\t\t\t<div>Card contents.</div>\n\t\t\t</KolCard>\n\n\t\t\t<KolCard _label=\"Card with closer\" _hasCloser>\n\t\t\t\t<p>This card has a close button.</p>\n\t\t\t</KolCard>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/combobox/basic",
-      "group": "combobox",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/combobox/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/combobox/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { FormWrap } from '../FormWrap';\nimport { ComboboxVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\nexport const ComboboxBasic: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolCombobox combines a text input with a suggestion list, enabling users to either type in a value or to select on of the suggestions.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<FormWrap RefComponent={ComboboxVariants} showButtons={false} />\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/details/basic",
-      "group": "details",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/details/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/details/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolDetails } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const DetailsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolDetails hides its content until opened. The open state can be toggled either by clicking the label or by setting the <code>_open</code>-prop\n\t\t\t\tprogrammatically. The sample includes an initially open state and a disabled but open Details component.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"grid gap-4\">\n\t\t\t<KolDetails _label=\"Closed initially\">\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t</KolDetails>\n\t\t\t<KolDetails _disabled _label=\"Open initially (disabled)\" _open>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t</KolDetails>\n\t\t\t<KolDetails _label=\"Open initially\" _open>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t</KolDetails>\n\t\t</section>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/drawer/basic",
-      "group": "drawer",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/drawer/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/drawer/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useRef, useState, useEffect } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolDrawer, KolButton, KolInputCheckbox } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport { DrawerRadioAlign } from './partials/align';\nexport const DrawerBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultAlign = searchParams.get('align') as AlignPropType;\n\tconst defaultCloser = searchParams.get('closer') === 'true';\n\tconst drawerElement = useRef<HTMLKolDrawerElement>(null);\n\n\tconst [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');\n\tconst [hasCloser, setHasCloser] = useState<boolean>(defaultCloser);\n\n\tuseEffect(() => {\n\t\tif (defaultAlign) {\n\t\t\tdrawerElement.current?.open();\n\t\t}\n\t}, [defaultAlign]);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />\n\n\t\t\t<KolInputCheckbox\n\t\t\t\t_label=\"Drawer has closer\"\n\t\t\t\tclassName=\"mb-4\"\n\t\t\t\t_checked={hasCloser}\n\t\t\t\t_on={{\n\t\t\t\t\tonInput: (_, value) => {\n\t\t\t\t\t\tsetHasCloser((value as null | boolean) === true);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolDrawer\n\t\t\t\t\tref={drawerElement}\n\t\t\t\t\t_label=\"I am a drawer\"\n\t\t\t\t\t_align={align}\n\t\t\t\t\t_hasCloser={hasCloser}\n\t\t\t\t\t_on={{ onClose: () => console.log('Drawer onClose triggered!') }}\n\t\t\t\t>\n\t\t\t\t\t<div className={align === 'left' || align === 'right' ? 'drawer-content-vertical' : ''}>\n\t\t\t\t\t\t<p className=\"mt-0\">\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<KolButton _label=\"Close drawer\" _on={{ onClick: () => drawerElement.current?.close() }} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolDrawer>\n\t\t\t\t<KolButton _label=\"Open drawer\" _on={{ onClick: () => drawerElement.current?.open() }} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/drawer/controlled",
-      "group": "drawer",
-      "name": "controlled",
-      "path": "packages/samples/react/src/components/drawer/controlled.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/drawer/controlled.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolDrawer, KolButton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport { DrawerRadioAlign } from './partials/align';\n\nexport const DrawerControlled: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultAlign = searchParams.get('align') as AlignPropType;\n\tconst [open, setOpen] = useState(false);\n\tconst [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');\n\treturn (\n\t\t<div>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows the KolDrawer controlled by the property <code>_open</code> instead of methods.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolDrawer _open={open} _align={align} _label=\"I'm a controlled drawer\" _on={{ onClose: () => setOpen(false) }}>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet,</p>\n\t\t\t\t\t\t<KolButton _label=\"Close drawer\" _on={{ onClick: () => setOpen(false) }} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolDrawer>\n\t\t\t\t<KolButton _label=\"Open drawer\" _on={{ onClick: () => setOpen(true) }} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/drawer/scrolled",
-      "group": "drawer",
-      "name": "scrolled",
-      "path": "packages/samples/react/src/components/drawer/scrolled.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/drawer/scrolled.tsx",
-      "code": "// DrawerScrolled Class\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef, useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { DrawerRadioAlign } from './partials/align';\n\nexport const DrawerScrolled: FC = () => {\n\tconst drawerElement = useRef<HTMLKolDrawerElement>(null);\n\tconst [align, setAlign] = useState<AlignPropType>('bottom');\n\tconst [useOverflowHandling, setUseOverflowHandling] = useState(true);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates how KolDrawer handles content that exceeds the drawer dimensions and shows the correct way to handle overflow. Use the\n\t\t\t\t\t&#34;Enable Overflow Handling&#34; toggle to see the difference between problematic behavior (content exceeding drawer bounds) and the proper solution\n\t\t\t\t\t(overflow handling within the slot content).\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4 mb-4\">\n\t\t\t\t<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />\n\t\t\t\t<KolInputCheckbox\n\t\t\t\t\t_label=\"Enable Overflow Handling (Recommended)\"\n\t\t\t\t\t_checked={useOverflowHandling}\n\t\t\t\t\t_on={{ onChange: (_, value) => setUseOverflowHandling(!!value) }}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolDrawer ref={drawerElement} _label=\"Scrollable Drawer\" _align={align}>\n\t\t\t\t\t{useOverflowHandling ? (\n\t\t\t\t\t\t// ✅ Correct approach: Outer container with fixed dimensions and overflow handling\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: align === 'left' || align === 'right' ? '90vw' : undefined,\n\t\t\t\t\t\t\t\theight: align === 'top' || align === 'bottom' ? '90vh' : undefined,\n\t\t\t\t\t\t\t\toverflow: 'auto',\n\t\t\t\t\t\t\t\tpadding: '0',\n\t\t\t\t\t\t\t\tborder: '1px solid #999',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\twidth: align === 'left' || align === 'right' ? '150vw' : undefined,\n\t\t\t\t\t\t\t\t\theight: align === 'top' || align === 'bottom' ? '150vh' : undefined,\n\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\t'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',\n\t\t\t\t\t\t\t\t\tbackgroundSize: '20px 20px',\n\t\t\t\t\t\t\t\t\tbackgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',\n\t\t\t\t\t\t\t\t\tborder: '2px dashed #ccc',\n\t\t\t\t\t\t\t\t\tpadding: '20px',\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\t\tgap: '20px',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<p>✅ Content with proper overflow handling - scrollable within drawer bounds</p>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<h3>Large Content Area (Scrollable)</h3>\n\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\tContainer: {align === 'left' || align === 'right' ? '400px wide' : '90vw wide'} ×{' '}\n\t\t\t\t\t\t\t\t\t\t{align === 'top' || align === 'bottom' ? '90vh high' : '400px high'}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\tContent: {align === 'left' || align === 'right' ? '150vw wide' : '400px wide'} ×{' '}\n\t\t\t\t\t\t\t\t\t\t{align === 'top' || align === 'bottom' ? '150vh high' : '400px high'}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t<strong>Overflow Handling:</strong> Enabled - Container has fixed size with overflow: auto\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed\n\t\t\t\t\t\t\t\t\t\tdiam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum\n\t\t\t\t\t\t\t\t\t\tdolor sit amet.\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\tWith overflow handling enabled, this content scrolls properly within the drawer container. You can scroll horizontally/vertically to see all\n\t\t\t\t\t\t\t\t\t\tcontent.\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<div style={{ marginTop: 'auto', paddingTop: '40px' }}>\n\t\t\t\t\t\t\t\t\t\t<KolButton _label=\"Close drawer\" _on={{ onClick: () => drawerElement.current?.close() }} />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t// ❌ Problematic approach: Content directly exceeds drawer bounds\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: align === 'left' || align === 'right' ? '150vw' : '400px',\n\t\t\t\t\t\t\t\theight: align === 'top' || align === 'bottom' ? '150vh' : '400px',\n\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',\n\t\t\t\t\t\t\t\tbackgroundSize: '20px 20px',\n\t\t\t\t\t\t\t\tbackgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',\n\t\t\t\t\t\t\t\tborder: '2px dashed #ccc',\n\t\t\t\t\t\t\t\tpadding: '20px',\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\tgap: '20px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p>❌ Content exceeding drawer bounds - problematic behavior</p>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<h3>Large Content Area</h3>\n\t\t\t\t\t\t\t\t<p>Width: {align === 'left' || align === 'right' ? '150vw (exceeds drawer width)' : '400px'}</p>\n\t\t\t\t\t\t\t\t<p>Height: {align === 'top' || align === 'bottom' ? '150vh (exceeds drawer height)' : '400px'}</p>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t<strong>Overflow Handling:</strong> Disabled - Content extends beyond drawer boundaries\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed\n\t\t\t\t\t\t\t\t\tdiam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum\n\t\t\t\t\t\t\t\t\tdolor sit amet.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<p>Without overflow handling, this content may extend beyond the drawer boundaries, causing layout issues.</p>\n\t\t\t\t\t\t\t\t<div style={{ marginTop: 'auto', paddingTop: '40px' }}>\n\t\t\t\t\t\t\t\t\t<KolButton _label=\"Close drawer\" _on={{ onClick: () => drawerElement.current?.close() }} />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</KolDrawer>\n\n\t\t\t\t<KolButton _label=\"Open scrollable drawer\" _on={{ onClick: () => drawerElement.current?.open() }} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/form/basic",
-      "group": "form",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/form/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/form/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { KolForm, KolInputText } from '@public-ui/react-v19';\n\nexport const FormBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolForm renders a form around the input components provided in a slot. This sample shows a basic form with three input fields.</p>\n\t\t</SampleDescription>\n\n\t\t<KolForm className=\"w-full\">\n\t\t\t<div className=\"grid gap-2\">\n\t\t\t\t<KolInputText id=\"input1\" _label=\"Input 1\" />\n\t\t\t\t<KolInputText id=\"input2\" _label=\"Input 2\" />\n\t\t\t\t<KolInputText id=\"input3\" _label=\"Input 3\" />\n\t\t\t</div>\n\t\t</KolForm>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/form/error-list",
-      "group": "form",
-      "name": "error-list",
-      "path": "packages/samples/react/src/components/form/error-list.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/form/error-list.tsx",
-      "code": "import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const FormErrorList: FC = () => {\n\tconst formRef = useRef<HTMLKolFormElement | null>(null);\n\n\tconst scrollTo = () => {\n\t\tformRef.current?.focusErrorList();\n\t};\n\n\t/**\n\t * Simulate the form submission\n\t */\n\tuseEffect(() => {\n\t\tformRef.current?.focusErrorList();\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows a form with error messages.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolForm\n\t\t\t\tclassName=\"w-full\"\n\t\t\t\tref={formRef}\n\t\t\t\t_on={{\n\t\t\t\t\tonSubmit: scrollTo,\n\t\t\t\t}}\n\t\t\t\t_errorList={[\n\t\t\t\t\t{\n\t\t\t\t\t\tmessage: 'Error in Input 2',\n\t\t\t\t\t\tselector: '#input2',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tmessage: 'Error in Input 3',\n\t\t\t\t\t\tselector: () => alert('Error in Input 3'),\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t>\n\t\t\t\t<div className=\"grid gap-2\">\n\t\t\t\t\t<KolInputText id=\"input1\" _label=\"Input 1\" />\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\tid=\"input2\"\n\t\t\t\t\t\t_label=\"Input 2\"\n\t\t\t\t\t\t_touched\n\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\tid=\"input3\"\n\t\t\t\t\t\t_label=\"Input 3\"\n\t\t\t\t\t\t_touched\n\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<KolButton _label=\"ScrollTo\" _type=\"submit\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</KolForm>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/handout/basic",
-      "group": "handout",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/handout/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/handout/basic.tsx",
-      "code": "import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';\nimport type { FC } from 'react';\nimport React from 'react';\nimport {\n\tKolAbbr,\n\tKolAccordion,\n\tKolAlert,\n\tKolBadge,\n\tKolBreadcrumb,\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolDetails,\n\tKolForm,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolKolibri,\n\tKolLink,\n\tKolLinkButton,\n\tKolNav,\n\tKolProgress,\n\tKolSelect,\n\tKolTableStateful,\n\tKolTabs,\n\tKolTextarea,\n\tKolVersion,\n} from '@public-ui/react-v19';\n\nimport { getTheme, getThemeName } from '../../shares/store';\nimport { getRoot } from '../../shares/react-roots';\nimport { TABLE_DATA, type TableDataType } from './table-data';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nfunction KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<string, unknown> }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton {...other} _on={dummyEventHandler} />;\n}\n\nconst TABLE_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'Workdays',\n\t\t\t\tcolSpan: 5,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Weekend',\n\t\t\t\tcolSpan: 2,\n\t\t\t},\n\t\t],\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'monday',\n\t\t\t\tlabel: 'Monday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} />);\n\t\t\t\t},\n\t\t\t\tcompareFn: (first, second) => {\n\t\t\t\t\tif ((first as TableDataType).monday < (second as TableDataType).monday) {\n\t\t\t\t\t\treturn -1;\n\t\t\t\t\t}\n\t\t\t\t\tif ((first as TableDataType).monday > (second as TableDataType).monday) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn 0;\n\t\t\t\t},\n\t\t\t\tsortDirection: 'ASC',\n\t\t\t\ttextAlign: 'right',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'tuesday',\n\t\t\t\tlabel: 'Tuesday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#060\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\tcompareFn: (first, second) => {\n\t\t\t\t\tif ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {\n\t\t\t\t\t\treturn -1;\n\t\t\t\t\t}\n\t\t\t\t\tif ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn 0;\n\t\t\t\t},\n\t\t\t\tsortDirection: 'DESC',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'wednesday',\n\t\t\t\tlabel: 'Wednesday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#006\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'thursday',\n\t\t\t\tlabel: 'Thursday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#600\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'friday',\n\t\t\t\tlabel: 'Friday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#303\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'saturday',\n\t\t\t\tlabel: 'Saturday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#330\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'sunday',\n\t\t\t\tlabel: 'Sunday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#033\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'Early',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Noon',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Evening',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Night',\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const HandoutBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<div className=\"grid gap-4 md:grid-cols-[auto_1fr_1fr] items-center\">\n\t\t\t\t<KolKolibri className=\"block w-75px\" _labeled={false}></KolKolibri>\n\t\t\t\t<KolHeading _label=\"\" _level={1}>\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\tKolibri-Handout <small>for {getThemeName(getTheme())}</small>\n\t\t\t\t\t</span>\n\t\t\t\t</KolHeading>\n\t\t\t\t<KolDetails _label=\"Abstract\" _open>\n\t\t\t\t\tThe handout shows a selection of KoliBri components in the style of <strong>{getThemeName(getTheme())}</strong>. Since KoliBri offers self-contained,\n\t\t\t\t\taccessible web components that can be customized to your own corporate design using theming, you don&#39;t have to develop these components yourself.\n\t\t\t\t\tFor more information read our documentation and follow us (\n\t\t\t\t\t<KolLink _label=\"https://github.com/public-ui/kolibri\" _href=\"https://github.com/public-ui/kolibri\" _target=\"_blank\" />\n\t\t\t\t\t).\n\t\t\t\t</KolDetails>\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-4 sm:grid-cols-6 md:grid-cols-6  xl:grid-cols-12\">\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2\" _label=\"Heading\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 1\" _level={1}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 2\" _level={2}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 3\" _level={3}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 4\" _level={4}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 5\" _level={5}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 6\" _level={6}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 6\" _secondaryHeadline=\"Lessons\" _level={6}></KolHeading>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t{/* <KolCard className=\"col-span-3\" _label=\"Accordion\" _level={2}>\n\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 1\" _level={1} _open>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 1</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 2\" _level={2}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 2</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 3\" _level={3}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 3</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 4\" _level={4}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 4</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 5\" _level={5}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 5</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 6\" _level={6}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 6</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t</div>\n\t\t\t</KolCard> */}\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2\" _label=\"Abbreviation and Progress\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tI am <KolAbbr _label=\"as an example\">e.g.</KolAbbr> an abbreviation.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tI am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<KolProgress _variant=\"bar\" _max={100} _value={33} _label=\"Progress\" />\n\t\t\t\t\t\t<KolProgress _variant=\"cycle\" _max={100} _value={66} _label=\"Progress\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3\" _label=\"Button, LinkButton and Tab\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolTabs _label=\"\" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>\n\t\t\t\t\t\t\t<div className=\"grid gap-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ left: 'codicon codicon-arrow-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-arrow-left\" _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ right: 'codicon codicon-arrow-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t\t\t\t_disabled\n\t\t\t\t\t\t\t\t\t\t_icons={{ right: 'codicon codicon-arrow-right' }}\n\t\t\t\t\t\t\t\t\t\t_label=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t\t\t\t></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-arrow-right\" _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ top: 'codicon codicon-arrow-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-arrow-up\" _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ bottom: 'codicon codicon-arrow-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-arrow-down\" _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _label=\"ghost\" _variant=\"ghost\"></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _label=\"ghost\" _variant=\"ghost\"></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _icons=\"codicon codicon-home\" _hideLabel _label=\"ghost\" _variant=\"ghost\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid gap-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'codicon codicon-arrow-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'codicon codicon-arrow-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"codicon codicon-arrow-left\" _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'codicon codicon-arrow-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'codicon codicon-arrow-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"codicon codicon-arrow-right\" _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'codicon codicon-arrow-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'codicon codicon-arrow-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"codicon codicon-arrow-up\" _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"codicon codicon-arrow-down\" _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons=\"codicon codicon-home\" _hideLabel _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolTabs>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2\" _label=\"Accordion, Link and ButtonLink\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolAccordion _label=\"Links\" _level={3} _open>\n\t\t\t\t\t\t\t<div className=\"grid gap-2\" slot=\"\">\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link text\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"codicon codicon-home\" _label=\"Link text with icon\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"codicon codicon-home\" _hideLabel _label=\"Link text with icon only\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"/\" _label=\"Visited link\"></KolLink>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tI am a <KolLink _href=\"#/back-page\" _label=\"externer Link\" _target=\"w3c\"></KolLink> in the running text.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _label=\"ButtonLinks\" _level={3}>\n\t\t\t\t\t\t\t<div className=\"grid gap-2\" slot=\"\">\n\t\t\t\t\t\t\t\t<KolButtonLink _label=\"Link text\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"codicon codicon-home\" _label=\"Link text with icon\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"codicon codicon-home\" _hideLabel _label=\"Link text with icon only\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tI am a <KolButtonLink _label=\"Link\"></KolButtonLink> in the running text.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<KolButtonLink\n\t\t\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\t\t\tleft: 'codicon codicon-arrow-left',\n\t\t\t\t\t\t\t\t\t\tright: 'codicon codicon-arrow-right',\n\t\t\t\t\t\t\t\t\t\ttop: 'codicon codicon-arrow-up',\n\t\t\t\t\t\t\t\t\t\tbottom: 'codicon codicon-arrow-down',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t_label=\"Icons\"\n\t\t\t\t\t\t\t\t></KolButtonLink>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-3\" _label=\"Alert\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolAlert _label=\"Default message\" _type=\"default\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _type=\"success\">Success message text</KolAlert>\n\t\t\t\t\t\t<KolAlert _type=\"error\" _hasCloser>\n\t\t\t\t\t\t\tThis is a error message text.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _label=\"Info card\" _type=\"info\" _variant=\"card\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _label=\"Warning card\" _type=\"warning\" _hasCloser _variant=\"card\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2\" _label=\"Nav and Breadcrumb\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolNav\n\t\t\t\t\t\t\t\t_label=\"Main navigation\"\n\t\t\t\t\t\t\t\t_links={[\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\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\t\t_label: '2 Navigation point',\n\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\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\t\t_active: true,\n\t\t\t\t\t\t\t\t\t\t_label: '3 Navigation point',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t_children: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.1 Navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.2 External navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.3 Navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t\t\t_children: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_active: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.3.1 Navigation point (active)',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{ _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{/* <KolSkipNav></KolSkipNav> */}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolBreadcrumb\n\t\t\t\t\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t\t\t\t\t_links={[\n\t\t\t\t\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\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></KolBreadcrumb>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5\" _label=\"Input\" _level={2}>\n\t\t\t\t\t<KolForm slot=\"\">\n\t\t\t\t\t\t<div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-3 p-2\">\n\t\t\t\t\t\t\t<KolInputColor _label={`Color`} />\n\t\t\t\t\t\t\t<KolInputFile _label={`Upload file`} />\n\t\t\t\t\t\t\t<KolInputNumber _label={`Number input`} />\n\t\t\t\t\t\t\t<KolInputDate _type=\"date\" _label={`Date`} />\n\t\t\t\t\t\t\t<KolInputEmail\n\t\t\t\t\t\t\t\t_icons=\"{'left': 'codicon codicon-home'}\"\n\t\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: 'Test of an error message' }}\n\t\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t\t_label={`E-mail address`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<KolInputText _hint=\"I am a hint.\" _label={`First name`} />\n\t\t\t\t\t\t\t<KolInputPassword _label={`password`} />\n\t\t\t\t\t\t\t<KolSelect _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _label={`Stimmung`} />\n\t\t\t\t\t\t\t<KolInputRange _min={0} _max={50} _value={25} _label={`Slider`} />\n\t\t\t\t\t\t\t<KolInputRadio className=\"herr-frau\" _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _value=\"1\" _label={`Salutation`} />\n\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _value=\"0\" _label={`Salutation`} />\n\t\t\t\t\t\t\t\t<KolInputCheckbox _label=\"\">\n\t\t\t\t\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t\t\t\t\tI accept the <KolAbbr _label=\"General Terms and Conditions\">AGB</KolAbbr>.\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</KolInputCheckbox>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<KolTextarea _rows={4} _label={`Textarea`} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolForm>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5\" _label=\"Table with Pagination\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolTableStateful _label=\"Table\" _minWidth=\"auto\" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t\t<KolVersion _label=\"5.0.2-test.2\"></KolVersion>\n\t\t\t{/* <KolImage _src=\"abgrenzung.jpg\" _alt=\"KoliBri Darstellung\"></KolImage> */}\n\t\t\t{/* <KolIndentedText></KolIndentedText> */}\n\t\t\t{/* <KolQuote></KolQuote> */}\n\t\t</div>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/heading/badge",
-      "group": "heading",
-      "name": "badge",
-      "path": "packages/samples/react/src/components/heading/badged.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/heading/badged.tsx",
-      "code": "import React from 'react';\n\nimport { KolBadge, KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingBadged: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolHeading with its different levels and content provided using the export slot instead of the <code>_label</code>-property.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolHeading _label=\"\" _level={1}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={2}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#86ffc6\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={3}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#06539e\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={4}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#ae0000\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={5}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#8b008b\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t\t<KolHeading _label=\"\" _level={6}>\n\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\tA heading with a <KolBadge _color=\"#ffc0cb\" _label=\"Label\"></KolBadge>\n\t\t\t\t</span>\n\t\t\t</KolHeading>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/heading/basic",
-      "group": "heading",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/heading/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/heading/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolHeading renders a heading with the given level.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolHeading _label=\"I'm a H1-heading\" _level={1} />\n\t\t\t<KolHeading _label=\"I'm a H2-heading\" _level={2} />\n\t\t\t<KolHeading _label=\"I'm a H3-heading\" _level={3} />\n\t\t\t<KolHeading _label=\"I'm a H4-heading\" _level={4} />\n\t\t\t<KolHeading _label=\"I'm a H5-heading\" _level={5} />\n\t\t\t<KolHeading _label=\"I'm a H6-heading\" _level={6} />\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/heading/paragraph",
-      "group": "heading",
-      "name": "paragraph",
-      "path": "packages/samples/react/src/components/heading/paragraph.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/heading/paragraph.tsx",
-      "code": "import React from 'react';\n\nimport { KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingParagraph: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolHeading with its different levels combined with some text content each.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolHeading _label=\"Ich bin eine H1-Überschrift\" _level={1} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H2-Überschrift\" _level={2} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H3-Überschrift\" _level={3} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H4-Überschrift\" _level={4} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H5-Überschrift\" _level={5} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t\t<KolHeading _label=\"Ich bin eine H6-Überschrift\" _level={6} />\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t\t</p>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/heading/secondary",
-      "group": "heading",
-      "name": "secondary",
-      "path": "packages/samples/react/src/components/heading/secondary.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/heading/secondary.tsx",
-      "code": "import React from 'react';\n\nimport { KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingSecondary: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolHeading with the prop <code>_secondaryHeadline</code> in use.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolHeading _label=\"This is a H1 headline\" _secondaryHeadline=\"This is a secondary headline\" _level={1} />\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/icon/basic",
-      "group": "icon",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/icon/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/icon/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolIcon } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolIcon renders an icon. This sample shows one regular icon and one with a custom style-property, changing the icon color.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolIcon className=\"block w-[1em] h-[1em]\" _label=\"\" _icons=\"codicon codicon-home\" />\n\t\t\t<KolIcon\n\t\t\t\tclassName=\"block w-[1em] h-[1em]\"\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: 'red',\n\t\t\t\t}}\n\t\t\t\t_label=\"\"\n\t\t\t\t_icons=\"codicon codicon-home\"\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/image/basic",
-      "group": "image",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/image/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/image/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { KolImage } from '@public-ui/react-v19';\n\nexport const ImageBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolImage renders an image. The sample shows an image with alternative text.</p>\n\t\t</SampleDescription>\n\n\t\t<KolImage className=\"w-image\" _src=\"abgrenzung.jpg\" _alt=\"Darstellung des KoliBri-Theming\" />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-checkbox/basic",
-      "group": "input-checkbox",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/input-checkbox/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-checkbox/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { InputCheckboxVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputCheckboxBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputCheckbox renders a checkbox. The sample shows KolInputCheckbox in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputCheckboxVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-checkbox/button",
-      "group": "input-checkbox",
-      "name": "button",
-      "path": "packages/samples/react/src/components/input-checkbox/button.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-checkbox/button.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { SampleDescription } from '../SampleDescription';\nimport type { Components } from '@public-ui/components';\nimport { InputCheckboxVariants } from './partials/variants';\n\nexport const InputCheckboxButton: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolInputCheckbox in the variant &quot;button&quot;.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap<Components.KolInputCheckbox> RefComponent={InputCheckboxVariants} _variant=\"button\" showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-checkbox/switch",
-      "group": "input-checkbox",
-      "name": "switch",
-      "path": "packages/samples/react/src/components/input-checkbox/switch.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-checkbox/switch.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { InputCheckboxVariants } from './partials/variants';\nimport { FormWrap } from '../FormWrap';\n\nexport const InputCheckboxSwitch: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolInputCheckbox in the variant &quot;switch&quot;.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputCheckboxVariants} _variant=\"switch\" showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-color/basic",
-      "group": "input-color",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/input-color/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-color/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { InputColorVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputColorBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputColor renders a color input. The sample shows KolInputColor in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputColorVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-date/basic",
-      "group": "input-date",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/input-date/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-date/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { InputDateVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputDateBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputDate renders all types of fields for date and time input. The sample shows KolInputDate in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputDateVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-date/copy-paste",
-      "group": "input-date",
-      "name": "copy-paste",
-      "path": "packages/samples/react/src/components/input-date/copy-paste.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-date/copy-paste.tsx",
-      "code": "import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { KolButton, KolInputDate, KolInputText } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\n/** -----------------------------\n * Types & helpers\n * ----------------------------- */\nconst pad2 = (n: number): string => String(n).padStart(2, '0');\n\ntype Year = `${number}`;\ntype Month = `${number}`;\ntype Day = `${number}`;\ntype IsoDate = `${Year}-${Month}-${Day}`;\n\nconst isValidYmd = (y: number, m: number, d: number): boolean => {\n\tconst dt = new Date(y, m - 1, d);\n\treturn dt.getFullYear() === y && dt.getMonth() === m - 1 && dt.getDate() === d;\n};\n\n/** Parse ONLY German format DD.MM.YYYY to ISO (internal use) */\nfunction parseDeToIso(input: string): IsoDate | null {\n\tconst m = /^\\s*(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})\\s*$/.exec(input);\n\tif (!m) return null;\n\tconst d = +m[1];\n\tconst mo = +m[2];\n\tconst y = +m[3];\n\tif (!isValidYmd(y, mo, d)) return null;\n\treturn `${y}-${pad2(mo)}-${pad2(d)}` as IsoDate;\n}\n\n/** -----------------------------\n * Typed Web Component bridge\n * ----------------------------- */\ntype SetIsoValueMethod = (iso: IsoDate | null) => Promise<void>;\n\ntype KolInputDateHost = HTMLKolInputDateElement & {\n\tsetIsoValue?: SetIsoValueMethod;\n\tvalue?: string;\n\t_value?: IsoDate | Date | null;\n};\n\nfunction isKolHost(n: EventTarget): n is KolInputDateHost {\n\treturn n instanceof HTMLElement && n.tagName === 'KOL-INPUT-DATE';\n}\n\nasync function setKolInputDateValue(host: KolInputDateHost, iso: IsoDate): Promise<void> {\n\tif (typeof host.setIsoValue === 'function') {\n\t\tawait host.setIsoValue(iso);\n\t} else if (typeof host.value !== 'undefined') {\n\t\thost.value = iso;\n\t} else if (typeof host._value !== 'undefined') {\n\t\thost._value = iso;\n\t} else {\n\t\thost.setAttribute('_value', iso);\n\t}\n\n\thost.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n\thost.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n}\n\n/** -----------------------------\n * React component\n * ----------------------------- */\nexport const InputDateCopyPaste: React.FC = () => {\n\tconst [deValue, setDeValue] = useState<string>('31.12.2025');\n\tconst [status, setStatus] = useState<string>('');\n\tconst activeKolHostRef = useRef<KolInputDateHost | null>(null);\n\n\tconst isoFromDe = useMemo(() => parseDeToIso(deValue), [deValue]);\n\n\t// Track focus target inside shadow DOM\n\tuseEffect(() => {\n\t\tconst ac = new AbortController();\n\t\tconst onFocusIn = (e: Event): void => {\n\t\t\tconst path = (e.composedPath?.() ?? []) as EventTarget[];\n\t\t\tactiveKolHostRef.current = path.find(isKolHost) ?? null;\n\t\t};\n\t\tdocument.addEventListener('focusin', onFocusIn, { capture: true, signal: ac.signal });\n\t\treturn () => ac.abort();\n\t}, []);\n\n\t// Global paste handler: read German date from clipboard, convert to ISO internally, inject into KolInputDate\n\tuseEffect(() => {\n\t\tconst ac = new AbortController();\n\n\t\tconst onPaste = (e: ClipboardEvent): void => {\n\t\t\tconst host = activeKolHostRef.current;\n\t\t\tif (!host) return;\n\n\t\t\tconst raw = e.clipboardData?.getData('text') ?? '';\n\t\t\tconst iso = parseDeToIso(raw);\n\n\t\t\tif (!iso) {\n\t\t\t\tsetStatus('Clipboard: unrecognized date. Use DD.MM.YYYY.');\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\te.preventDefault();\n\t\t\tvoid setKolInputDateValue(host, iso);\n\t\t\tsetStatus('Pasted.');\n\t\t};\n\n\t\tdocument.addEventListener('paste', onPaste, { capture: true, signal: ac.signal });\n\t\treturn () => ac.abort();\n\t}, []);\n\n\tconst copyToClipboard = useCallback(async (text: string): Promise<void> => {\n\t\tsetStatus('');\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(text);\n\t\t\tsetStatus('Copied.');\n\t\t} catch {\n\t\t\tsetStatus('Copy failed. Your browser may block clipboard access.');\n\t\t}\n\t}, []);\n\n\t/** -----------------------------\n\t * KolInputText handlers (match signature: (event, value: unknown) => void)\n\t * ----------------------------- */\n\tconst handleDeInput = useCallback((event: Event, value: unknown) => {\n\t\tif (event?.target) {\n\t\t\tconst next = typeof value === 'string' ? value : String(value ?? '');\n\t\t\tsetDeValue(next);\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\tType a date in German format (<code>DD.MM.YYYY</code>), click <em>Copy to Clipboard</em>, then paste it into the date field below with <kbd>Ctrl</kbd>\n\t\t\t\t\t+<kbd>V</kbd>. The ISO conversion happens internally.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\" lang=\"en\">\n\t\t\t\t<section aria-labelledby=\"de-title\">\n\t\t\t\t\t<h3 id=\"de-title\" className=\"text-lg font-semibold mb-2\">\n\t\t\t\t\t\tGerman date (DD.MM.YYYY)\n\t\t\t\t\t</h3>\n\n\t\t\t\t\t<div className=\"grid gap-3\">\n\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\tclassName=\"w-full\"\n\t\t\t\t\t\t\t_label=\"German date (DD.MM.YYYY)\"\n\t\t\t\t\t\t\t_placeholder=\"e.g., 31.12.2025\"\n\t\t\t\t\t\t\t_value={deValue}\n\t\t\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonInput: handleDeInput,\n\t\t\t\t\t\t\t\tonChange: handleDeInput,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<small className=\"opacity-80\">Click the button to copy the exact German date, then paste it into the date field below.</small>\n\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t<KolButton _label=\"Copy to Clipboard\" _on={{ onClick: () => copyToClipboard(deValue) }} />\n\t\t\t\t\t\t\t{!isoFromDe && <span className=\"text-red-600\">Invalid date</span>}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<KolInputDate _type=\"date\" _label=\"Date (paste here with Ctrl+V)\" className=\"w-full\" />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<p aria-live=\"polite\" role=\"status\" className=\"mt-2 opacity-80\">\n\t\t\t\t\t{status}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-date/reset",
-      "group": "input-date",
-      "name": "reset",
-      "path": "packages/samples/react/src/components/input-date/reset.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-date/reset.tsx",
-      "code": "import React, { useRef } from 'react';\nimport { KolButton, KolInputDate } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputDateReset = () => {\n\tconst dateRef = useRef<HTMLKolInputDateElement>(null);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates the KolInputDate <code>reset</code>-Method, which can be used to clear the field, even when it holds incomplete or invalid\n\t\t\t\t\tvalues.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolInputDate className=\"w-full\" ref={dateRef} _label=\"Resettable Input Date\" _value=\"2024-02-10\" />\n\t\t\t<KolButton className=\"mt\" _label={'Reset'} _on={{ onClick: () => dateRef.current?.reset() }} />\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-date/show-hide-msg",
-      "group": "input-date",
-      "name": "show-hide-msg",
-      "path": "packages/samples/react/src/components/input-date/show-hide-msg.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-date/show-hide-msg.tsx",
-      "code": "import { KolInputCheckbox, KolInputDate } from '@public-ui/react-v19';\nimport React, { useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst msgTypes = ['default', 'error', 'info', 'success', 'warning'] as const;\n\nfunction onGenerator(setter: (cb: (b: boolean) => boolean) => void) {\n\treturn {\n\t\tonChange: () => setter((b) => !b),\n\t};\n}\n\nexport const InputDateShowHideMsg = () => {\n\tconst [showMsg, setShowMsg] = useState(true);\n\tconst [isTouched, setIsTouched] = useState(true);\n\tconst [hideMsg, setHideMsg] = useState(false);\n\n\tconst onMsg = onGenerator(setShowMsg);\n\tconst onTouched = onGenerator(setIsTouched);\n\tconst onHideMsg = onGenerator(setHideMsg);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example shows how messages work in input fields.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex gap-4 flex-col\">\n\t\t\t\t<div className=\"flex gap-4 items-center\">\n\t\t\t\t\t<KolInputCheckbox _label=\"Toggle Msg\" _on={onMsg} _checked={showMsg} _variant=\"button\" />\n\t\t\t\t\t<KolInputCheckbox _label=\"Toggle Touched\" _on={onTouched} _checked={isTouched} _variant=\"button\" />\n\t\t\t\t\t<KolInputCheckbox _label=\"Toggle Hide Msg\" _on={onHideMsg} _checked={hideMsg} _variant=\"button\" />\n\t\t\t\t</div>\n\t\t\t\t<pre>\n\t\t\t\t\tMessage exists: {showMsg ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'})<br />\n\t\t\t\t\tNon-Error-Message visible: {showMsg && !hideMsg ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'}, hideMsg: {hideMsg ? 'Yes' : 'No'})<br />\n\t\t\t\t\tError-Message visible: {showMsg && isTouched && !hideMsg ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'}, isTouched: {isTouched ? 'Yes' : 'No'},\n\t\t\t\t\thideMsg: {hideMsg ? 'Yes' : 'No'})\n\t\t\t\t</pre>\n\t\t\t\t{msgTypes.map((type) => (\n\t\t\t\t\t<KolInputDate\n\t\t\t\t\t\tkey={type}\n\t\t\t\t\t\t_hideMsg={hideMsg}\n\t\t\t\t\t\t_label={`Date (_msg, ${type})`}\n\t\t\t\t\t\t_msg={\n\t\t\t\t\t\t\tshowMsg\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t_description: `${type} message`,\n\t\t\t\t\t\t\t\t\t\t_type: type,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t_touched={isTouched}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-email/basic",
-      "group": "input-email",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/input-email/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-email/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { InputEmailVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputEmailBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputEmail renders an email input field. The sample shows KolInputEmail in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputEmailVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-file/basic",
-      "group": "input-file",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/input-file/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-file/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { InputFileVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputFileBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputFile renders a file input field. The sample shows KolInputFile in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputFileVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-number/basic",
-      "group": "input-number",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/input-number/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-number/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { SampleDescription } from '../SampleDescription';\nimport { InputNumberVariants } from './partials/variants';\n\nexport const InputNumberBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolInputNumber encompasses basic functionalities, utilizing the min, max, and step attributes to restrict the range of input values. Despite these\n\t\t\t\tconstraints, it allows free input that can ignore the defined minimum and maximum values, as well as step sizes. The component intentionally does not\n\t\t\t\temphasize validation rules, supporting examples without form validation, and refrains from additional validation through native HTML element validation.\n\t\t\t</p>\n\t\t</SampleDescription>\n\t\t<FormWrap RefComponent={InputNumberVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-password/basic",
-      "group": "input-password",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/input-password/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-password/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { InputPasswordVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputPasswordBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputPassword renders a password input field. The sample shows KolInputPassword in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputPasswordVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-password/show-password",
-      "group": "input-password",
-      "name": "show-password",
-      "path": "packages/samples/react/src/components/input-password/show-password.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-password/show-password.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useRef } from 'react';\n\nimport { KolForm, KolInputPassword } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputPasswordShowPassword: FC = () => {\n\tconst passwordRef = useRef<HTMLKolInputPasswordElement>(null);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows KolInputPassword in the variant &quot;visibility-toggle&quot;. It features a button to toggle between a visible and hidden password\n\t\t\t\t\tinput.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolForm className=\"w-full\">\n\t\t\t\t<KolInputPassword _placeholder=\"With 'Show password' button\" _label=\"Password\" ref={passwordRef} className=\"block\" _variant=\"visibility-toggle\" />\n\t\t\t\t<KolInputPassword\n\t\t\t\t\t_placeholder=\"With 'Show password' button\"\n\t\t\t\t\t_label=\"Password\"\n\t\t\t\t\tref={passwordRef}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_variant=\"visibility-toggle\"\n\t\t\t\t\t_value=\"Password\"\n\t\t\t\t/>\n\t\t\t\t<KolInputPassword\n\t\t\t\t\t_placeholder=\"With 'Show password' button and disabled\"\n\t\t\t\t\t_label=\"Password\"\n\t\t\t\t\tref={passwordRef}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_disabled\n\t\t\t\t\t_variant=\"visibility-toggle\"\n\t\t\t\t/>\n\t\t\t</KolForm>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-radio/basic",
-      "group": "input-radio",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/input-radio/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-radio/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { InputRadioVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputRadioBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputRadio renders a set of radio buttons. The sample shows KolInputRadio in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputRadioVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-radio/horizontal",
-      "group": "input-radio",
-      "name": "horizontal",
-      "path": "packages/samples/react/src/components/input-radio/horizontal.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-radio/horizontal.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { OrientationPropType } from '@public-ui/components';\nexport const InputRadioHorizontal: FC = () => {\n\tconst [show, setShow] = useState(true);\n\tconst [orientation, setOrientation] = useState<OrientationPropType>('horizontal');\n\n\tconst options = [\n\t\t{ label: 'Field 1', value: 1 },\n\t\t{ label: 'Field 2', value: 2 },\n\t];\n\n\tconst showClick = () => {\n\t\tsetShow((s) => !s);\n\t};\n\n\tconst toggleOrientation = () => {\n\t\tsetOrientation((o) => (o === 'horizontal' ? 'vertical' : 'horizontal'));\n\t};\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows the <code>horizontal</code> and <code>vertical</code> orientation of KolInoutRadio. It also features a button to test re-rendering.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t<KolButton _label=\"Click me a few times\" _on={{ onClick: showClick }} />\n\t\t\t\t<KolInputCheckbox _label=\"Switch orientation (horizontal/vertical)\" _on={{ onChange: toggleOrientation }} _variant=\"switch\" />\n\t\t\t</div>\n\t\t\t{show && (\n\t\t\t\t<KolForm>\n\t\t\t\t\t<div className=\"container my-4 d-grid gap-4\">\n\t\t\t\t\t\t<KolInputRadio _label={`Test (${orientation})`} _options={options} _orientation={orientation} _required />\n\t\t\t\t\t\t<KolInputRadio _hideLabel _label={`Test (${orientation})`} _options={options} _orientation={orientation} _required />\n\t\t\t\t\t</div>\n\t\t\t\t</KolForm>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-radio/object",
-      "group": "input-radio",
-      "name": "object",
-      "path": "packages/samples/react/src/components/input-radio/objectValue.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-radio/objectValue.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolForm, KolInputRadio } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputRadioObjectValue: FC = () => {\n\tconst options = [\n\t\t{ label: 'Field 1', value: { id: 1, name: 'Option 1' } },\n\t\t{ label: 'Field 2', value: { id: 2, name: 'Option 2' } },\n\t];\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleDescription>\n\t\t\t\tThis sample shows KolInputRadio with <code>object</code> and <code>undefined</code> values.\n\t\t\t</SampleDescription>\n\n\t\t\t<KolForm>\n\t\t\t\t<p>\n\t\t\t\t\tIn this example for <code>KolInputRadio</code>, the values of the options are defined as objects.\n\t\t\t\t</p>\n\t\t\t\t<div className=\"container my-4 d-grid gap-4\">\n\t\t\t\t\t<KolInputRadio _value={options[1].value} _options={options} _label=\"Test (with object value)\" />\n\t\t\t\t</div>\n\n\t\t\t\t<p>\n\t\t\t\t\tIn this example for <code>KolInputRadio</code>, no value is set.\n\t\t\t\t</p>\n\t\t\t\t<div className=\"container my-4 d-grid gap-4\">\n\t\t\t\t\t<KolInputRadio _options={options} _label=\"Test (without value)\" />\n\t\t\t\t</div>\n\t\t\t</KolForm>\n\t\t</div>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-range/basic",
-      "group": "input-range",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/input-range/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-range/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { InputRangeVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputRangeBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolInputRange renders a pair of range- and number fields wich are synchronized with each other. The sample shows KolInputRange in a form context with\n\t\t\t\tall variations and states.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputRangeVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-text/basic",
-      "group": "input-text",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/input-text/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-text/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { InputTextVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputText renders a text input field. The sample shows KolInputText in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputTextVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-text/expert-slot",
-      "group": "input-text",
-      "name": "expert-slot",
-      "path": "packages/samples/react/src/components/input-text/expert-slot.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-text/expert-slot.tsx",
-      "code": "import * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { KolInputText } from '@public-ui/react-v19';\n\nexport const InputTextExpertSlot = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample show KolInputText with expert slot.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolInputText _label=\"\" _type=\"text\">\n\t\t\t\t<span slot=\"expert\">I am more than just a input field</span>\n\t\t\t</KolInputText>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-text/hide-msg",
-      "group": "input-text",
-      "name": "hide-msg",
-      "path": "packages/samples/react/src/components/input-text/hide-msg.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-text/hide-msg.tsx",
-      "code": "import { KolAlert, KolCard, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextHideMsg: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows the <code>_hideMsg</code> feature for KolInputText. It allows to hide the message from an input field and can be used, when the\n\t\t\t\tmessage (e.g. error) is already shown somewhere else, e.g. for a group of inputs.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolCard _label=\"Normal input field with error\" _level={0}>\n\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label=\"Input with error\" _touched />\n\t\t</KolCard>\n\t\t<KolCard _label=\"Input fields with hidden error\" _level={0}>\n\t\t\t<fieldset className=\"grid md:grid-cols-2 gap-4\">\n\t\t\t\t<legend>Combined input field</legend>\n\t\t\t\t<KolAlert className=\"col-span-2\" _level={0} _type=\"error\">\n\t\t\t\t\tThis is a combined error message\n\t\t\t\t</KolAlert>\n\t\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label=\"First input\" _touched />\n\t\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label=\"Second input with error\" _touched />\n\t\t\t</fieldset>\n\t\t</KolCard>\n\t</div>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-text/smart-button",
-      "group": "input-text",
-      "name": "smart-button",
-      "path": "packages/samples/react/src/components/input-text/smart-button.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-text/smart-button.tsx",
-      "code": "import * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { ToasterService } from '@public-ui/components';\nimport { KolInputText } from '@public-ui/react-v19';\n\nconst smartButtonProps = {\n\t_icons: 'codicon codicon-info',\n\t_hideLabel: true,\n};\n\nconst icons = {\n\tleft: {\n\t\ticon: 'codicon codicon-arrow-left',\n\t},\n\tright: {\n\t\ticon: 'codicon codicon-arrow-right',\n\t},\n};\n\nexport const InputTextSmartButton = () => {\n\tconst toaster = ToasterService.getInstance(document);\n\n\tconst handleClick = {\n\t\tonClick: () => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Smart-Button clicked',\n\t\t\t\tlabel: `Toaster`,\n\t\t\t\ttype: 'default',\n\t\t\t});\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the smart button feature for KolInputText. It allows the usage of a button inside the bnput.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Input with button and icons\"\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Open Toast',\n\t\t\t\t\t\t_on: handleClick,\n\t\t\t\t\t}}\n\t\t\t\t\t_icons={icons}\n\t\t\t\t></KolInputText>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Disabled input with button and without icons\"\n\t\t\t\t\t_disabled\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Disabled Button',\n\t\t\t\t\t}}\n\t\t\t\t></KolInputText>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/input-text/text-formatter",
-      "group": "input-text",
-      "name": "text-formatter",
-      "path": "packages/samples/react/src/components/input-text/text-formatter.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/input-text/text-formatter.tsx",
-      "code": "import * as React from 'react';\nimport { Formik, Field, type FieldProps } from 'formik';\nimport { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport { NumericFormat, type NumberFormatValues } from 'react-number-format';\n\nconst NON_ALPHANUM = /[^a-zA-Z0-9]/g;\nconst EVERY_FOUR_CHARS = /(.{4})(?!$)/g;\n\nclass IbanFormatter {\n\tprivate electronicFormat(iban: string): string {\n\t\treturn iban.replace(NON_ALPHANUM, '').toUpperCase();\n\t}\n\n\tprivate printFormat(iban: string, separator?: string) {\n\t\treturn this.electronicFormat(iban).replace(EVERY_FOUR_CHARS, '$1' + (separator || ' '));\n\t}\n\n\tpublic parse(value: string): string {\n\t\treturn this.electronicFormat(value);\n\t}\n\tpublic format(value: string): string {\n\t\treturn this.printFormat(value);\n\t}\n}\n\ntype IbanExampleFormValues = {\n\tiban: string;\n};\n\ntype CurrencyExampleFormValues = {\n\tcurrency: number;\n};\n\nexport function InputTextFormatterDemo() {\n\tconst handleSubmit = async () => {};\n\tconst formatter = new IbanFormatter();\n\n\tconst initialIbanExampleValues: IbanExampleFormValues = {\n\t\tiban: 'DE89370400440532013000',\n\t};\n\n\tconst initialCurrencyExampleValues: CurrencyExampleFormValues = {\n\t\tcurrency: 1000000,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis example demonstrates formatting a data value in an input field (example IBAN). The data value is formatted to the input field (print format) and\n\t\t\t\t\tvice versa the formatting is removed again (machine format)\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"w-full flex flex-col\">\n\t\t\t\t<Formik<IbanExampleFormValues> initialValues={initialIbanExampleValues} onSubmit={handleSubmit}>\n\t\t\t\t\t{(form) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t\t\t\t<KolHeading _label=\"Formatted Form Field\" _level={2} />\n\t\t\t\t\t\t\t\t<KolForm>\n\t\t\t\t\t\t\t\t\t<Field name=\"iban\">\n\t\t\t\t\t\t\t\t\t\t{({ field }: FieldProps<IbanExampleFormValues['iban']>) => (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block mt-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t\t\t\t\t\t\t\tonBlur={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvoid form.setFieldTouched('iban', true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tid=\"field-iban\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t_label=\"IBAN\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t_value={formatter.format(field.value ?? '')}\n\t\t\t\t\t\t\t\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_description: form.errors.iban || '',\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t_touched={form.touched.iban}\n\t\t\t\t\t\t\t\t\t\t\t\t\t_required\n\t\t\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonInput: (event, value: unknown) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (event.target) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst parsed_value = formatter.parse((value as string) ?? '');\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvoid form.setFieldValue('iban', parsed_value, true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t</KolForm>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t\t\t\t<KolHeading _label=\"Model\" _level={2} />\n\t\t\t\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(form.values, null, 2)}</pre>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Formik>\n\t\t\t</section>\n\n\t\t\t<section className=\"w-full flex flex-col\">\n\t\t\t\t<Formik<CurrencyExampleFormValues> initialValues={initialCurrencyExampleValues} onSubmit={handleSubmit}>\n\t\t\t\t\t{(form) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t\t\t\t<KolHeading _label=\"Formatted Form Field (with react-number-format)\" _level={2} />\n\t\t\t\t\t\t\t\t<KolForm>\n\t\t\t\t\t\t\t\t\t<Field name=\"currency\">\n\t\t\t\t\t\t\t\t\t\t{({ field }: FieldProps<CurrencyExampleFormValues['currency']>) => (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block mt-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t<NumericFormat\n\t\t\t\t\t\t\t\t\t\t\t\t\tcustomInput={({ type, value, onBlur, onChange, onFocus }: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn <KolInputText _label=\"Currency\" _type={type} _value={value} _on={{ onBlur, onChange, onFocus }} />;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisplayType=\"input\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={typeof field.value === 'number' ? field.value.toFixed(2) : undefined}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonBlur={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvoid form.setFieldTouched('currency', true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={(value: NumberFormatValues) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvoid form.setFieldValue('currency', value.floatValue, true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tsuffix={'€'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tthousandSeparator={true}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t</KolForm>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"p-2\">\n\t\t\t\t\t\t\t\t<KolHeading _label=\"Model\" _level={2} />\n\t\t\t\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(form.values, null, 2)}</pre>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Formik>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/kolibri/basic",
-      "group": "kolibri",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/kolibri/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/kolibri/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolKolibri } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nexport const KolibriBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolKolibri renders the KoliBri logo. The sample show the logo with and without label and with a custom color.</p>\n\t\t</SampleDescription>\n\n\t\t<KolHeading class=\"block\" _level={3} _label=\"Regular\" />\n\t\t<KolKolibri class=\"block\" style={{ width: 300 }} />\n\t\t<KolHeading class=\"block\" _level={3} _label=\"Without Label\" />\n\t\t<KolKolibri class=\"block\" style={{ width: 300 }} _labeled={false} />\n\t\t<KolHeading class=\"block\" _level={3} _label=\"Customized color\" />\n\t\t<KolKolibri class=\"block\" style={{ width: 300 }} _color=\"#cc006e\" />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/link-button/aria-description",
-      "group": "link-button",
-      "name": "aria-description",
-      "path": "packages/samples/react/src/components/link-button/aria-description.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/link-button/aria-description.tsx",
-      "code": "import { KolLinkButton } from '@public-ui/react-v19';\nimport React from 'react';\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkButtonAriaDescription: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLinkButton with aria-description</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"Link Button Text without area description\"></KolLinkButton>\n\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"Link Button Text\" _ariaDescription=\"Link Button Area Description\"></KolLinkButton>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/link-button/basic",
-      "group": "link-button",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/link-button/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/link-button/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolLinkButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst ARGS = {\n\t_href: '#/back-page',\n};\n\nexport const LinkButtonBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolLinkButton renders a link that looks like a button. The sample shows the different styling variants.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolLinkButton _label=\"Primary\" _variant=\"primary\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Secondary\" _variant=\"secondary\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Normal\" _variant=\"normal\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Danger\" _variant=\"danger\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Ghost\" _variant=\"ghost\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Access Key\" _variant=\"primary\" _accessKey=\"c\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Short Key\" _variant=\"primary\" _shortKey=\"s\" {...ARGS}></KolLinkButton>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/link/access-key",
-      "group": "link",
-      "name": "access-key",
-      "path": "packages/samples/react/src/components/link/access-key.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/link/access-key.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkAccessKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"With S access key\" _accessKey=\"S\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Very small s\" _accessKey=\"s\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Access key does not appear in label\" _accessKey=\"s\" />\n\t\t\t<KolLink _hideLabel _icons=\"codicon codicon-home\" _href=\"#/back-page\" _label=\"access key without label\" _accessKey=\"s\" />\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/link/aria-description",
-      "group": "link",
-      "name": "aria-description",
-      "path": "packages/samples/react/src/components/link/aria-description.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/link/aria-description.tsx",
-      "code": "import { KolLink } from '@public-ui/react-v19';\nimport React from 'react';\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkAriaDescription: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with aria-description</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link Text without aria description\"></KolLink>\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link Text\" _ariaDescription=\"Link Area Description\"></KolLink>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/link/basic",
-      "group": "link",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/link/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/link/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolLink renders a link. This sample shows disabled links, links with hidden label and links with different CSS <code>display</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Simple Link\" _variant=\"standalone\" />\n\t\t\t<KolLink _disabled _href=\"#/back-page\" _label=\"Simple Link (disabled)\" _variant=\"standalone\" />\n\t\t\t<KolLink _hideLabel _icons=\"codicon codicon-home\" _href=\"#/back-page\" _label=\"Icon Link\" _variant=\"standalone\" />\n\t\t\t<KolLink _disabled _hideLabel _icons=\"codicon codicon-home\" _href=\"#/back-page\" _label=\"Icon Link (disabled)\" _variant=\"standalone\" />\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolLink _href=\"#/back-page\" _label=\"Simple Link\" /> It is rendered by\n\t\t\t\tdefault as a <strong>inline element</strong>.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.{' '}\n\t\t\t\t<KolLink class=\"d-inline-block\" _accessKey=\"S\" _href=\"#/back-page\" _label=\"Simple Link\" />. This allows you to assign width, height, and other\n\t\t\t\tproperties to it using CSS styles.\n\t\t\t\t<br />\n\t\t\t\t<br />\n\t\t\t\tAfter that, there is a link that is rendered as a block element. <KolLink class=\"d-block\" _href=\"#/back-page\" _label=\"Simple Link\" />, therefore, I span\n\t\t\t\tthe entire width of the parent element, causing a line break.\n\t\t\t</p>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/link/icons",
-      "group": "link",
-      "name": "icons",
-      "path": "packages/samples/react/src/components/link/icons.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/link/icons.tsx",
-      "code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with icons in different alignments and combinations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _icons=\"codicon codicon-home\" _label=\"I am a link with an icon on the left\" _href=\"#/back-page\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t\tleft: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\n\t\t\t<KolLink _icons=\"codicon codicon-home\" _href=\"https://public-ui.github.io/\" _label=\"I am a external link with an icon on the left\" _target=\"_blank\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external linkwith an icon on the right\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with an icon at the top\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with icon below\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with all icons\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t\tleft: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/link/image",
-      "group": "link",
-      "name": "image",
-      "path": "packages/samples/react/src/components/link/image.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/link/image.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkImage: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolLink can be used with slot-content instead of a label as well. This sample demonstrates the slot content used to display an image.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"I am a link that is rendered as text\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"\">\n\t\t\t\t<img alt=\"Presentation of the KoliBri theming\" slot=\"expert\" src=\"abgrenzung.jpg\" width=\"300\" />\n\t\t\t</KolLink>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/link/react-router",
-      "group": "link",
-      "name": "react-router",
-      "path": "packages/samples/react/src/components/link/link-react-router.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/link/link-react-router.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkReactRouter: FC = () => {\n\tconst navigate = useNavigate();\n\n\tconst on = {\n\t\tonClick: (event: Event) => {\n\t\t\tevent.preventDefault();\n\t\t\tnavigate('/back-page');\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows how KolLink works with react-router. Primary click uses preventDefault() and navigate(...), while right click open in new tab still\n\t\t\t\t\tfollows _href. Make sure _href and navigate(...) point to the same path.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolLink _href=\"/back-page\" _label=\"Go to overview\" _variant=\"standalone\" _on={on} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/link/short-key",
-      "group": "link",
-      "name": "short-key",
-      "path": "packages/samples/react/src/components/link/short-key.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/link/short-key.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkShortKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"With S short key\" _shortKey=\"S\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Very small s\" _shortKey=\"s\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Short key does not appear in label\" _shortKey=\"s\" />\n\t\t\t<KolLink _hideLabel _icons=\"codicon codicon-home\" _href=\"#/back-page\" _label=\"short key without label\" _shortKey=\"s\" />\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/link/target",
-      "group": "link",
-      "name": "target",
-      "path": "packages/samples/react/src/components/link/target.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/link/target.tsx",
-      "code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkTarget: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolLink with different <code>_target</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"text-base d-flex gap-4\">\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"codicon codicon-home\" _hideLabel _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"codicon codicon-home\" _hideLabel _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"codicon codicon-home\" _hideLabel _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/modal/basic",
-      "group": "modal",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/modal/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/modal/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { KolButton, KolModal } from '@public-ui/react-v19';\nimport { useSearchParams } from 'react-router';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ModalBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\n\tconst showModal = searchParams.get('show-modal') as string;\n\n\tconst blankRef = useRef<HTMLKolModalElement>(null);\n\tconst cardRef = useRef<HTMLKolModalElement>(null);\n\n\tconst onOpenBlankModal = {\n\t\tonClick: () => blankRef.current?.openModal(),\n\t};\n\tconst onOpenCardModal = {\n\t\tonClick: () => cardRef.current?.openModal(),\n\t};\n\tconst onCloseBlankModal = {\n\t\tonClick: () => blankRef.current?.closeModal(),\n\t};\n\n\tuseEffect(() => {\n\t\tif (showModal === 'true') {\n\t\t\tblankRef.current?.openModal();\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>\n\t\t\t\t\tKolModal supports the variants <code>blank</code> and <code>card</code>. The card variant includes a <code>KolCard</code> container and a closer\n\t\t\t\t\tbutton.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<div>\n\t\t\t\t\t<KolButton _label=\"Open blank modal\" _on={onOpenBlankModal} />\n\t\t\t\t\t<KolModal ref={blankRef} _label=\"Blank modal\" _variant=\"blank\" _width=\"40%\">\n\t\t\t\t\t\t<div className=\"bg-white p-4 rounded shadow\">\n\t\t\t\t\t\t\t<p className=\"mt-0\">You must add styling and a close button yourself.</p>\n\t\t\t\t\t\t\t<KolButton _label=\"Open card modal\" className=\"mr\" _on={onOpenCardModal} />\n\t\t\t\t\t\t\t<KolButton _label=\"Close\" _on={onCloseBlankModal} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolModal>\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<KolButton _label=\"Open card modal\" _on={onOpenCardModal} />\n\t\t\t\t\t<KolModal ref={cardRef} _label=\"Card modal\" _variant=\"card\" _width=\"30%\">\n\t\t\t\t\t\t<p className=\"mt-0\">This variant wraps content inside a KolCard.</p>\n\t\t\t\t\t</KolModal>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/nav/aria-current",
-      "group": "nav",
-      "name": "aria-current",
-      "path": "packages/samples/react/src/components/nav/aria-current.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/nav/aria-current.tsx",
-      "code": "import React from 'react';\n\nimport { KolNav } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\nexport const NavAriaCurrent: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolNav with a link to the current page. This makes the component automatically assign <code>aria-current=&quot;page&quot;</code>\n\t\t\t\tto it.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolNav\n\t\t\tclass=\"block w-sm\"\n\t\t\t_label=\"Main navigation\"\n\t\t\t_links={[\n\t\t\t\t{\n\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t_label: 'Nav - aria-current (Current page)',\n\t\t\t\t\t_href: '#/nav/aria-current', // Please don't change this link. It's necessary to be the \"current page\" for the sample.\n\t\t\t\t\t_active: true,\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/nav/basic",
-      "group": "nav",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/nav/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/nav/basic.tsx",
-      "code": "import React, { useState } from 'react';\n\nimport { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport { LINKS, LINKS_WITHOUT_SUBMENU, LINKS_SUB_ACTIVE } from './links';\n\nimport type { FC } from 'react';\nexport const NavBasic: FC = () => {\n\tconst [hasIconsWhenExpanded, setHasIconsWhenExpanded] = useState(false);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolNav renders a navigation. In this sample, icons for the navigation elements can be shown or hidden using a checkbox and the navigation can be\n\t\t\t\t\tcollapsed, showing only icons and no text labels.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"grid gap-8\">\n\t\t\t\t<section>\n\t\t\t\t\t<KolInputCheckbox\n\t\t\t\t\t\t_label=\"Show icons when expanded\"\n\t\t\t\t\t\t_checked={hasIconsWhenExpanded}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: (_event, value: unknown) => {\n\t\t\t\t\t\t\t\tsetHasIconsWhenExpanded(value as boolean);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolInputCheckbox>\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Navigation without submenu\" />\n\t\t\t\t\t<KolNav\n\t\t\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t\t\t_label=\"Navigation without submenu\"\n\t\t\t\t\t\t_links={LINKS_WITHOUT_SUBMENU}\n\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t_hasIconsWhenExpanded={hasIconsWhenExpanded}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Navigation with submenu\" />\n\t\t\t\t\t<KolNav class=\"block w-fit\" _label=\"Navigation with submenu\" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Navigation with submenu active\" />\n\t\t\t\t\t<KolNav\n\t\t\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t\t\t_label=\"Navigation with submenu active\"\n\t\t\t\t\t\t_links={LINKS_SUB_ACTIVE}\n\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t_hasIconsWhenExpanded={hasIconsWhenExpanded}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/pagination/basic",
-      "group": "pagination",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/pagination/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/pagination/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolPagination } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PaginationBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolPagination renders a pagination for datasets. The sample shows the different states and variations of a pagination and the option to change the page\n\t\t\t\tsize.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolPagination _max={316514} _page={15475} _siblingCount={3} _label=\"Test pagination 1\" _on={{}} />\n\t\t\t<KolPagination _max={14} _page={14} _siblingCount={1} _boundaryCount={2} _label=\"Test pagination 2\" _on={{}} />\n\t\t\t<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label=\"Test pagination 3\" _on={{}} />\n\t\t\t<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label=\"Test pagination 4\" _on={{}} />\n\t\t\t<KolPagination\n\t\t\t\t_max={4}\n\t\t\t\t_page={6}\n\t\t\t\t_siblingCount={0}\n\t\t\t\t_boundaryCount={2}\n\t\t\t\t_hasButtons={false}\n\t\t\t\t_label=\"Test pagination 5\"\n\t\t\t\t_on={{}}\n\t\t\t\t_pageSizeOptions={[10, 100]}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/popover-button/basic",
-      "group": "popover-button",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/popover-button/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/popover-button/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { KolPopoverButton, KolToolbar, KolHeading } from '@public-ui/react-v19';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nexport const PopoverButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\tconst TOOLBAR_ITEMS = [\n\t\t{\n\t\t\t_label: 'Edit',\n\t\t\t_icons: 'codicon codicon-edit',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'codicon codicon-trash',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\t_label: 'Duplicate',\n\t\t\t_icons: 'codicon codicon-copy',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,\n\t\t\t\t\tright, bottom, left) using the <code>_popoverAlign</code> prop.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolHeading _label=\"Vertical toolbar with action buttons\" _level={2}></KolHeading>\n\n\t\t\t\t<KolPopoverButton _label={'Actions'} _variant=\"primary\" _icons={{ right: 'codicon codicon-chevron-down' }}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolPopoverButton>\n\n\t\t\t\t<KolHeading _label=\"Info icon with help text\" _level={2}></KolHeading>\n\n\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"codicon codicon-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={3}></KolHeading>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/progress/basic",
-      "group": "progress",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/progress/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/progress/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolProgress } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ProgressBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4 grid-cols-1 sm:grid-cols-2\">\n\t\t\t<fieldset title=\"Percentages\" className=\"flex flex-col gap-4\">\n\t\t\t\t<KolProgress _variant=\"bar\" _max={7} _value={0}></KolProgress>\n\t\t\t\t<KolProgress _variant=\"bar\" _max={7} _value={2}></KolProgress>\n\t\t\t\t<KolProgress _variant=\"bar\" _max={7} _value={7}></KolProgress>\n\t\t\t\t<KolProgress _variant=\"cycle\" _max={7} _value={6}></KolProgress>\n\t\t\t</fieldset>\n\t\t\t<fieldset title=\"Custom units\" className=\"flex flex-col gap-4\">\n\t\t\t\t<KolProgress _label=\"Distance\" _variant=\"bar\" _max={65434} _value={7236} _unit=\"m\"></KolProgress>\n\t\t\t\t<KolProgress _label=\"12 Tasks to do\" _variant=\"bar\" _max={12} _value={5} _unit=\"tasks completed\"></KolProgress>\n\t\t\t\t<KolProgress _label=\"Max 150 kg\" _variant=\"cycle\" _max={150} _value={42} _unit=\"kg\"></KolProgress>\n\t\t\t</fieldset>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/quote/basic",
-      "group": "quote",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/quote/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/quote/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolQuote } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const QuoteBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolQuote renders a quote with optional citation. This sample shows a quote in the variant &quot;inline&quot; with a link for citation.</p>\n\t\t</SampleDescription>\n\n\t\t<KolQuote _href=\"https://datatracker.ietf.org/doc/html/rfc1149\" _quote=\"Avian carriers can provide high delay.\" _variant=\"inline\"></KolQuote>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/quote/block",
-      "group": "quote",
-      "name": "block",
-      "path": "packages/samples/react/src/components/quote/block.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/quote/block.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolQuote } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const QuoteBlock: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows a quote in the &quot;block&quot; variant.</p>\n\t\t</SampleDescription>\n\n\t\t<KolQuote\n\t\t\t_label=\"RFC 1149\"\n\t\t\t_href=\"https://datatracker.ietf.org/doc/html/rfc1149\"\n\t\t\t_quote=\"Avian carriers can provide high delay, low throughput, and low altitude\n\t\t\t\t\t\t\t\tservice. The connection topology is limited to a single point-to-point path\n\t\t\t\t\t\t\t\tfor each carrier, used with standard carriers, but many carriers can be used\n\t\t\t\t\t\t\t\twithout significant interference with each other, outside early spring.\n\t\t\t\t\t\t\t\tThis is because of the 3D ether space available to the carriers, in contrast\n\t\t\t\t\t\t\t\tto the 1D ether used by IEEE802.3. The carriers have an intrinsic collision\n\t\t\t\t\t\t\t\tavoidance system, which increases availability.\"\n\t\t\t_variant=\"block\"\n\t\t></KolQuote>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/change-tabindex",
-      "group": "scenarios",
-      "name": "change-tabindex",
-      "path": "packages/samples/react/src/scenarios/change-tabindex.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/change-tabindex.tsx",
-      "code": "/* eslint-disable jsx-a11y/tabindex-no-positive */\n\nimport { SampleDescription } from '../components/SampleDescription';\nimport {\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolCombobox,\n\tKolInputCheckbox,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputColor,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLinkButton,\n\tKolLink,\n\tKolSingleSelect,\n\tKolSplitButton,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport React from 'react';\nimport type { FC } from 'react';\nimport { ERROR_MSG, HINT_MSG } from '../shares/constants';\nimport { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';\nimport type { Option, StencilUnknown } from '@public-ui/components';\n\nexport const ChangeTabindex: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example show how different components works with tabIndex.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid gap-4\">\n\t\t\t\t<KolCard _label=\"Button\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolButton _label=\"Button 1, Tabindex 4\" _variant=\"primary\" tabIndex={4} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Button 2, Tabindex 3\" _variant=\"primary\" tabIndex={3} />\n\t\t\t\t\t\t<KolButton _label=\"Button 3, Tabindex 2\" _variant=\"primary\" tabIndex={2} />\n\t\t\t\t\t\t<KolButton _label=\"Button 4, Tabindex 1\" _variant=\"primary\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"ButtonLink\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolButtonLink _disabled _label=\"ButtonLink 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 3, Tabindex 2\" tabIndex={2} />\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Combobox\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolCombobox _hint={HINT_MSG} _label=\"Combobox 1, Tabindex 4\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />\n\t\t\t\t\t\t<KolCombobox _disabled _hint={HINT_MSG} _label=\"Combobox 2, Tabindex 3\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />\n\t\t\t\t\t\t<KolCombobox\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_hint={HINT_MSG}\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\t_label=\"Combobox 3, Tabindex 2\"\n\t\t\t\t\t\t\t_suggestions={COUNTRY_SUGGESTIONS}\n\t\t\t\t\t\t\t_value={'Deutschland'}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolCombobox _hint={HINT_MSG} _label=\"Combobox 4, Tabindex 1\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputCheckbox\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputCheckbox _label=\"InputCheckbox 4, Tabindex 1\" _value={false} tabIndex={4} />\n\t\t\t\t\t\t<KolInputCheckbox _disabled _label=\"InputCheckbox 3, Tabindex 2\" _value={false} tabIndex={3} />\n\t\t\t\t\t\t<KolInputCheckbox _touched _label=\"InputCheckbox 2, Tabindex 3\" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />\n\t\t\t\t\t\t<KolInputCheckbox _label=\"InputCheckbox 1, Tabindex 4\" _value={false} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputColor\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputColor _value=\"#f08080\" _label=\"InputCheckbox 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputColor _disabled _value=\"#f08080\" _label=\"InputCheckbox 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputColor _touched _value=\"#f08080\" _label=\"InputCheckbox 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputColor _value=\"#f08080\" _label=\"InputCheckbox 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputDate\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputDate _type=\"datetime-local\" _label=\"InputCheckbox 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputDate _disabled _type=\"datetime-local\" _label=\"InputCheckbox 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputDate\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_type=\"datetime-local\"\n\t\t\t\t\t\t\t_label=\"InputCheckbox 3, Tabindex 2\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputDate _type=\"datetime-local\" _label=\"InputCheckbox 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputEmail\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputEmail _label=\"InputEmail 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputEmail _disabled _label=\"InputEmail 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputEmail _touched _label=\"InputEmail 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputEmail _label=\"InputEmail 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputFile\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputFile _label=\"InputFile 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputFile _disabled _label=\"InputFile 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputFile _touched _label=\"InputFile 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputFile _label=\"InputFile 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputNumber\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputNumber _label=\"InputNumber 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputNumber _disabled _label=\"InputNumber 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputNumber _touched _label=\"InputNumber 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputNumber _label=\"InputNumber 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputPassword\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputPassword _label=\"InputPassword 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputPassword _disabled _label=\"InputPassword 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputPassword _touched _label=\"InputPassword 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputPassword _label=\"InputPassword 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputRadio\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 1, Tabindex 4\"\n\t\t\t\t\t\t\ttabIndex={4}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 2, Tabindex 3\"\n\t\t\t\t\t\t\t_disabled\n\t\t\t\t\t\t\ttabIndex={3}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 3, Tabindex 2\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>{' '}\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 4, Tabindex 1\"\n\t\t\t\t\t\t\ttabIndex={1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputRange\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputRange _label=\"InputRange 1, Tabindex 4\" _min={0} _max={50} tabIndex={4} />\n\t\t\t\t\t\t<KolInputRange _disabled _label=\"InputRange 2, Tabindex 3\" _min={0} _max={50} tabIndex={3} />\n\t\t\t\t\t\t<KolInputRange _touched _label=\"InputRange 3, Tabindex 2\" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputRange _label=\"InputRange 4, Tabindex 1\" _min={0} _max={50} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputText\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputText _label=\"InputText 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputText _disabled _label=\"InputText 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputText _touched _label=\"InputText 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputText _label=\"InputText 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"LinkButton\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 1, Tabindex 4\" _variant=\"primary\" tabIndex={4}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _disabled _href={'#/back-page'} _label=\"InputText 2, Tabindex 3\" _variant=\"primary\" tabIndex={3}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 3, Tabindex 2\" _variant=\"primary\" tabIndex={2}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 4, Tabindex 1\" _variant=\"primary\" tabIndex={1}></KolLinkButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Link\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolLink _disabled _href=\"#/back-page\" _label=\"InputText 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 3, Tabindex 2\" tabIndex={2} />\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"SingleSelect\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolSingleSelect _label=\"InputText 1, Tabindex 4\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />\n\t\t\t\t\t\t<KolSingleSelect _disabled _label=\"InputText 2, Tabindex 3\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />\n\t\t\t\t\t\t<KolSingleSelect\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_label=\"InputText 3, Tabindex 2\"\n\t\t\t\t\t\t\t_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\t_value={'de'}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolSingleSelect _label=\"InputText 4, Tabindex 1\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"SplitButton\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 1, Tabindex 4\" tabIndex={4}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 2, Tabindex 3\" tabIndex={3} _disabled>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 3, Tabindex 2\" tabIndex={2}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 4, Tabindex 1\" tabIndex={1}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Textarea\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolTextarea _label=\"Textarea 1, Tabindex 4\" _rows={3} _placeholder=\"Placeholder\" tabIndex={4} />\n\t\t\t\t\t\t<KolTextarea _disabled _label=\"Textarea 2, Tabindex 3\" _rows={3} _placeholder=\"Placeholder\" tabIndex={3} />\n\t\t\t\t\t\t<KolTextarea\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_label=\"Textarea 3, Tabindex 2\"\n\t\t\t\t\t\t\t_rows={3}\n\t\t\t\t\t\t\t_placeholder=\"Placeholder\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolTextarea _label=\"Textarea 4, Tabindex 1\" _rows={3} _placeholder=\"Placeholder\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/custom-tooltip-width",
-      "group": "scenarios",
-      "name": "custom-tooltip-width",
-      "path": "packages/samples/react/src/scenarios/custom-tooltip-width.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/custom-tooltip-width.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolButton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { useToasterService } from '../hooks/useToasterService';\n\nexport const CustomTooltipWidth: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the\n\t\t\t\t\tparent elements.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolButton\n\t\t\t\t_label=\"Tooltip with fixed width\"\n\t\t\t\t_hideLabel\n\t\t\t\tstyle={{ '--kol-tooltip-width': '400px' }}\n\t\t\t\t_icons=\"codicon codicon-reactions\"\n\t\t\t\t_on={dummyEventHandler}\n\t\t\t></KolButton>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/disabled-interactive-scenario",
-      "group": "scenarios",
-      "name": "disabled-interactive-scenario",
-      "path": "packages/samples/react/src/scenarios/disabled-interactive-elements.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/disabled-interactive-elements.tsx",
-      "code": "import {\n\tKolAccordion,\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolDetails,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { useToasterService } from '../hooks/useToasterService';\n\nconst OPTIONS = [\n\t{\n\t\tlabel: 'Option A',\n\t\tvalue: 'A',\n\t},\n\t{\n\t\tlabel: 'Option B',\n\t\tvalue: 'B',\n\t},\n];\n\nexport const DisabledInteractiveElements: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example shows how deactivated interactive elements are displayed.</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>Deactivated interactive elements pose a particular challenge for accessibility.</li>\n\t\t\t\t\t<li>It must not be possible to focus on deactivated interactive elements, otherwise the tab paths will be unnecessarily extended.</li>\n\t\t\t\t\t<li>Deactivated interactive elements should be labelled clearly and legibly.</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tDeactivated interactive elements have a tooltip for sighted people and aria labelling for the screen readers reading mode if they are represented by\n\t\t\t\t\t\tan interpretable graphic.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>This implementation ensures standardized use for all users.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid gap-4\">\n\t\t\t\t<KolCard _label=\"Button\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-home\" _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"codicon codicon-home\" _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"ButtonLink\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButtonLink _label=\"Label\" />\n\t\t\t\t\t\t<KolButtonLink _disabled _label=\"Label\" />\n\t\t\t\t\t\t<KolButtonLink _hideLabel _icons=\"codicon codicon-home\" _label=\"Label\" />\n\t\t\t\t\t\t<KolButtonLink _hideLabel _icons=\"codicon codicon-home\" _disabled _label=\"Label\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"Link\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolLink _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLink _disabled _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLink _hideLabel _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLink _disabled _hideLabel _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Label\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"LinkButton\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolLinkButton _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLinkButton _disabled _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLinkButton _hideLabel _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLinkButton _disabled _hideLabel _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Label\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"Accordion\" _level={0}>\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t<KolAccordion _label=\"Label\">Content</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _disabled _label=\"Label\">\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _disabled _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"Details\" _level={0}>\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t<KolDetails _label=\"Label\">Content</KolDetails>\n\t\t\t\t\t\t<KolDetails _disabled _label=\"Label\">\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolDetails>\n\t\t\t\t\t\t<KolDetails _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolDetails>\n\t\t\t\t\t\t<KolDetails _disabled _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolDetails>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t{[KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRange, KolInputText].map(\n\t\t\t\t\t(Input) => {\n\t\t\t\t\t\tconst render = (\n\t\t\t\t\t\t\tInput as typeof KolInputCheckbox & {\n\t\t\t\t\t\t\t\trender: { displayName: string };\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t).render;\n\t\t\t\t\t\tconst name = render.displayName;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<KolCard key={name} _label={name} _level={0}>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t\t<Input _label=\"Label\" />\n\t\t\t\t\t\t\t\t\t<Input _disabled _label=\"Label\" />\n\t\t\t\t\t\t\t\t\t<Input _hideLabel _label=\"Label\" />\n\t\t\t\t\t\t\t\t\t<Input _disabled _hideLabel _label=\"Label\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</KolCard>\n\t\t\t\t\t\t);\n\t\t\t\t\t},\n\t\t\t\t)}\n\t\t\t\t{[KolInputRadio, KolSelect].map((Input) => {\n\t\t\t\t\tconst render = (\n\t\t\t\t\t\tInput as typeof KolInputRadio & {\n\t\t\t\t\t\t\trender: { displayName: string };\n\t\t\t\t\t\t}\n\t\t\t\t\t).render;\n\t\t\t\t\tconst name = render.displayName;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<KolCard key={name} _label={name} _level={0}>\n\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t<Input _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t\t<Input _disabled _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t\t<Input _hideLabel _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t\t<Input _disabled _hideLabel _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolCard>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\t<KolCard _label=\"KolTextarea\" _level={0}>\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t<KolTextarea _label=\"Label\" _rows={3} />\n\t\t\t\t\t\t<KolTextarea _disabled _label=\"Label\" _rows={3} />\n\t\t\t\t\t\t<KolTextarea _hideLabel _label=\"Label\" _rows={3} />\n\t\t\t\t\t\t<KolTextarea _disabled _hideLabel _label=\"Label\" _rows={3} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/focus-elements",
-      "group": "scenarios",
-      "name": "focus-elements",
-      "path": "packages/samples/react/src/scenarios/focus-elements.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/focus-elements.tsx",
-      "code": "import {\n\tKolAccordion,\n\tKolAlert,\n\tKolButton,\n\tKolButtonLink,\n\tKolCombobox,\n\tKolDetails,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC, ForwardRefRenderFunction } from 'react';\nimport { useMemo } from 'react';\nimport React, { forwardRef, useLayoutEffect, useRef } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { SampleDescription } from '../components/SampleDescription';\nimport type { FocusableElement } from '@public-ui/components';\n\nconst getFocusElements = () => {\n\tconst focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();\n\tfocusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox className=\"w-full\" _name=\"checkbox\" _label=\"Checkbox\" ref={ref} />);\n\tfocusElements.set('inputColor', (_, ref) => <KolInputColor className=\"w-full\" _name=\"color\" _label=\"Color\" ref={ref} />);\n\tfocusElements.set('inputDate', (_, ref) => <KolInputDate className=\"w-full\" _name=\"date\" _label=\"Date\" ref={ref} />);\n\tfocusElements.set('inputEmail', (_, ref) => <KolInputEmail className=\"w-full\" _name=\"email\" _label=\"Email\" ref={ref} />);\n\tfocusElements.set('inputFile', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"File\" ref={ref} />);\n\tfocusElements.set('inputFileMultiple', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"Files (multiple)\" _multiple ref={ref} />);\n\tfocusElements.set('inputNumber', (_, ref) => <KolInputNumber className=\"w-full\" _name=\"number\" _label=\"Number\" ref={ref} />);\n\tfocusElements.set('inputPassword', (_, ref) => <KolInputPassword className=\"w-full\" _name=\"password\" _label=\"Password\" ref={ref} />);\n\tfocusElements.set('inputRadio', (_, ref) => (\n\t\t<KolInputRadio\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"radio\"\n\t\t\t_label=\"Radio\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_value=\"A\"\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('inputRange', (_, ref) => <KolInputRange className=\"w-full\" _name=\"range\" _label=\"Range\" ref={ref} />);\n\tfocusElements.set('inputText', (_, ref) => <KolInputText className=\"w-full\" _name=\"text\" _label=\"Text\" ref={ref} />);\n\tfocusElements.set('select', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('selectMultiple', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select (multiple)\"\n\t\t\t_multiple\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_rows={2}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('singleSelect', (_, ref) => (\n\t\t<KolSingleSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"singleSelect\"\n\t\t\t_label=\"Single Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('textarea', (_, ref) => <KolTextarea className=\"w-full\" _name=\"textarea\" _label=\"Textarea\" _rows={5} ref={ref} />);\n\tfocusElements.set('accordion', (_, ref) => <KolAccordion className=\"w-full\" _label=\"Accordion here\" ref={ref} />);\n\tfocusElements.set('button', (_, ref) => (\n\t\t<div>\n\t\t\t<KolButton _label=\"Button here\" ref={ref} />\n\t\t</div>\n\t));\n\tfocusElements.set('buttonLink', (_, ref) => <KolButtonLink _label=\"ButtonLink here\" ref={ref} />);\n\tfocusElements.set('combobox', (_, ref) => <KolCombobox className=\"w-full\" _label=\"KolCombobox here\" _suggestions={[]} ref={ref} />);\n\tfocusElements.set('details', (_, ref) => (\n\t\t<KolDetails className=\"w-full\" _label=\"Details here\" ref={ref}>\n\t\t\tdetailed details\n\t\t</KolDetails>\n\t));\n\tfocusElements.set('link', (_, ref) => <KolLink className=\"w-full\" _label=\"Link here\" _href=\"#\" ref={ref} />);\n\tfocusElements.set('linkButton', (_, ref) => (\n\t\t<div>\n\t\t\t<KolLinkButton _label=\"LinkButton here\" _href=\"#\" ref={ref} />\n\t\t</div>\n\t));\n\n\treturn focusElements;\n};\n\ntype FallbackProps = {\n\tinvalidComponent?: boolean;\n};\nconst Fallback = (props: FallbackProps) => {\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst componentNames = [...focusElements.keys()].map((key) => key);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample serves for automated tests of the focus state for input components. When loading one of the examples linked below, focus will be set on\n\t\t\t\t\tthe element initially. When testing manually, you may have to reload the page after opening an example.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t{props.invalidComponent && (\n\t\t\t\t<KolAlert _type=\"error\" _variant=\"card\">\n\t\t\t\t\tComponent not found.\n\t\t\t\t</KolAlert>\n\t\t\t)}\n\n\t\t\t<KolHeading _level={2} _label=\"Focus Test Cases\" />\n\t\t\t<ul>\n\t\t\t\t{componentNames.map((componentName) => (\n\t\t\t\t\t<li key={componentName}>\n\t\t\t\t\t\t<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`} />\n\t\t\t\t\t</li>\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t</>\n\t);\n};\n\nexport const FocusElements: FC = () => {\n\tconst ref = useRef<FocusableElement>(null);\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst [searchParams] = useSearchParams();\n\tconst componentName = searchParams.get('component');\n\n\tuseLayoutEffect(() => {\n\t\tsetTimeout(() => {\n\t\t\t// Timeout not strictly necessary but prevents a layout glitch in snapshots with Playwright.\n\t\t\tvoid ref.current?.kolFocus();\n\t\t}, 500);\n\t}, [ref]);\n\n\tif (componentName) {\n\t\tconst Component = focusElements.get(componentName);\n\t\tif (!Component) {\n\t\t\treturn <Fallback invalidComponent />;\n\t\t}\n\t\tconst Element = forwardRef(Component);\n\n\t\treturn <Element ref={ref} />;\n\t} else {\n\t\treturn <Fallback />;\n\t}\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/input-group-with-error",
-      "group": "scenarios",
-      "name": "input-group-with-error",
-      "path": "packages/samples/react/src/scenarios/input-group-with-error.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/input-group-with-error.tsx",
-      "code": "import React from 'react';\nimport type { FC } from 'react';\nimport { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react-v19';\nimport { SampleDescription } from '../components/SampleDescription';\nimport type { SelectOption } from '@public-ui/components';\n\nexport const InputGroupWithError: FC = () => {\n\tconst phoneError = true;\n\tconst phoneErrorMessage = 'Unrecognized phone number.';\n\tconst pizzaError = true;\n\tconst pizzaErrorMessage = 'Choose at least two and up to five toppings.';\n\tconst pizzaToppings = ['Mushrooms', 'Bell Peppers', 'Onions', 'Olives', 'Spinach', 'Tomatoes', 'Artichokes', 'Zucchini', 'Jalapeños', 'Basil'];\n\n\tconst countryCodes: SelectOption<string>[] = [\n\t\t{\n\t\t\tlabel: 'United States +1',\n\t\t\tvalue: '1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Greece +30 ',\n\t\t\tvalue: '30',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Germany +49',\n\t\t\tvalue: '49',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Japan +81',\n\t\t\tvalue: '81',\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 how input components can be grouped together with just one error message, without repeating the message for every field.</p>\n\t\t\t\t<p>The sample only demonstrates how the errors can be displayed, an actual validation logic is not part of the example.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<fieldset>\n\t\t\t\t<legend>Phone number</legend>\n\t\t\t\t{phoneError && <KolAlert _alert _type=\"error\" _label={phoneErrorMessage} />}\n\n\t\t\t\t<div className=\"grid grid-cols-3 gap-4 max-w-2xl\">\n\t\t\t\t\t<KolSelect _options={countryCodes} _label=\"CountryCode \" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />\n\t\t\t\t\t<KolInputText _label=\"Area code\" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />\n\t\t\t\t\t<KolInputText _label=\"Local number\" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\n\t\t\t<fieldset className=\"mt\">\n\t\t\t\t<legend>Pizza toppings</legend>\n\t\t\t\t{pizzaError && <KolAlert _alert _type=\"error\" _label={pizzaErrorMessage} />}\n\n\t\t\t\t{pizzaToppings.map((topping) => (\n\t\t\t\t\t<KolInputCheckbox key={topping} _label={topping} _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />\n\t\t\t\t))}\n\t\t\t</fieldset>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/inputs-get-value",
-      "group": "scenarios",
-      "name": "inputs-get-value",
-      "path": "packages/samples/react/src/scenarios/inputs-get-value.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/inputs-get-value.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolCombobox,\n\tKolTextarea,\n} from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../components/SampleDescription';\nimport { COUNTRY_SUGGESTIONS } from '../shares/country';\n\nimport type { HTMLStencilElement } from '@stencil/core/internal';\nimport type { W3CInputValue } from '@public-ui/components';\n\nconst EventTargetContext = createContext<EventTarget | undefined>(undefined);\nconst EventLoggerActiveContext = createContext<boolean>(false);\n\ntype Props = {\n\tInputComponent: React.ComponentType<any>;\n\tinputProps: { [key: string]: any };\n\tformatter?: (value: any) => string;\n\ttestId?: string;\n};\nconst Scenario = (props: Props) => {\n\tconst ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>(null);\n\tconst [displayValue, setDisplayValue] = useState<unknown>(undefined);\n\tconst [modelValue, setModelValue] = useState<unknown>(props.inputProps._value);\n\tconst formatter = props.formatter || JSON.stringify;\n\tconst eventTarget = useContext(EventTargetContext);\n\tconst eventLoggerActive = useContext(EventLoggerActiveContext);\n\n\tconst handleButtonClick = async () => {\n\t\tconst value = await ref.current?.getValue();\n\t\tsetDisplayValue(value);\n\t};\n\n\tuseEffect(() => {\n\t\tconst handleRunAll = () => {\n\t\t\tvoid handleButtonClick();\n\t\t};\n\t\teventTarget?.addEventListener('runAll', handleRunAll);\n\n\t\treturn () => {\n\t\t\teventTarget?.removeEventListener('runAll', handleRunAll);\n\t\t};\n\t}, [eventTarget]);\n\n\tconst eventListeners = Object.fromEntries(\n\t\t['onInput', 'onChange', 'onBlur', 'onClick', 'onFocus', 'onMouseDown'].map((eventName) => [\n\t\t\teventName,\n\t\t\t(event: Event, value: W3CInputValue) => {\n\t\t\t\tif (eventLoggerActive) {\n\t\t\t\t\tconsole.log(props.inputProps._label, eventName, value, event);\n\t\t\t\t}\n\t\t\t\tif (eventName === 'onInput') {\n\t\t\t\t\tsetModelValue(value);\n\t\t\t\t}\n\t\t\t},\n\t\t]),\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"grid grid-cols-3 items-end gap-4\" data-testid={props.testId}>\n\t\t\t\t<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} _value={modelValue} />\n\t\t\t\t<KolButton\n\t\t\t\t\t_label=\"getValue()\"\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\tvoid handleButtonClick();\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t></KolButton>\n\t\t\t\t<pre className=\"text-base\">{formatter(displayValue)}</pre>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport const InputsGetValue: FC = () => {\n\tconst eventTarget = useMemo(() => new EventTarget(), []);\n\tconst [eventLoggerActive, setEventLoggerActive] = useState<boolean>(true);\n\n\treturn (\n\t\t<>\n\t\t\t<EventTargetContext.Provider value={eventTarget}>\n\t\t\t\t<EventLoggerActiveContext.Provider value={eventLoggerActive}>\n\t\t\t\t\t<SampleDescription>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThis sample shows how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quot;getValue()&quot; button\n\t\t\t\t\t\t\tand prints the current value right next to itself.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</SampleDescription>\n\n\t\t\t\t\t<section className=\"w-full flex flex-col\">\n\t\t\t\t\t\t<KolCard _label=\"Sample options\" className=\"block ha mb-8\">\n\t\t\t\t\t\t\t<KolInputCheckbox\n\t\t\t\t\t\t\t\t_label=\"Log events to console\"\n\t\t\t\t\t\t\t\t_value={true}\n\t\t\t\t\t\t\t\t_checked={eventLoggerActive}\n\t\t\t\t\t\t\t\t_on={{ onChange: (_, active) => setEventLoggerActive(active as boolean) }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</KolCard>\n\n\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t<Scenario testId=\"scenario-inputText\" InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />\n\t\t\t\t\t\t\t<Scenario\n\t\t\t\t\t\t\t\ttestId=\"scenario-inputCheckboxString\"\n\t\t\t\t\t\t\t\tInputComponent={KolInputCheckbox}\n\t\t\t\t\t\t\t\tinputProps={{ _label: 'KolInputCheckbox (value)', _value: 'Checkbox True Value' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Scenario testId=\"scenario-inputCheckboxBoolean\" InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox (boolean)' }} />\n\t\t\t\t\t\t\t<Scenario testId=\"scenario-inputColor\" InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />\n\t\t\t\t\t\t\t<Scenario testId=\"scenario-inputDate\" InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />\n\t\t\t\t\t\t\t<Scenario testId=\"scenario-inputEmail\" InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />\n\t\t\t\t\t\t\t<Scenario\n\t\t\t\t\t\t\t\ttestId=\"scenario-inputFile\"\n\t\t\t\t\t\t\t\tInputComponent={KolInputFile}\n\t\t\t\t\t\t\t\tinputProps={{ _label: 'KolInputFile' }}\n\t\t\t\t\t\t\t\tformatter={(value) =>\n\t\t\t\t\t\t\t\t\tvalue instanceof FileList\n\t\t\t\t\t\t\t\t\t\t? `FileList{${Array.from(value)\n\t\t\t\t\t\t\t\t\t\t\t\t.map((file: File) => file.name)\n\t\t\t\t\t\t\t\t\t\t\t\t.join(', ')}}`\n\t\t\t\t\t\t\t\t\t\t: JSON.stringify(value)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Scenario testId=\"scenario-inputNumber\" InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />\n\t\t\t\t\t\t\t<Scenario testId=\"scenario-inputPassword\" InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />\n\t\t\t\t\t\t\t<Scenario testId=\"scenario-inputRange\" InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />\n\t\t\t\t\t\t\t<Scenario\n\t\t\t\t\t\t\t\ttestId=\"scenario-inputRadio\"\n\t\t\t\t\t\t\t\tInputComponent={KolInputRadio}\n\t\t\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\t\t\t_label: 'KolInputRadio',\n\t\t\t\t\t\t\t\t\t_orientation: 'horizontal',\n\t\t\t\t\t\t\t\t\t_options: [\n\t\t\t\t\t\t\t\t\t\t{ label: 'New York', value: 'New York' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Rosenheim', value: 'Rosenheim' },\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t_value: 'New York',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Scenario\n\t\t\t\t\t\t\t\ttestId=\"scenario-select\"\n\t\t\t\t\t\t\t\tInputComponent={KolSelect}\n\t\t\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\t\t\t_label: 'KolSelect',\n\t\t\t\t\t\t\t\t\t_options: [\n\t\t\t\t\t\t\t\t\t\t{ label: 'New York', value: 'New York' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Rosenheim', value: 'Rosenheim' },\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Scenario\n\t\t\t\t\t\t\t\ttestId=\"scenario-singleSelect\"\n\t\t\t\t\t\t\t\tInputComponent={KolSingleSelect}\n\t\t\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\t\t\t_label: 'KolSingleSelect',\n\t\t\t\t\t\t\t\t\t_options: [\n\t\t\t\t\t\t\t\t\t\t{ label: 'New York', value: 'New York' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Rosenheim', value: 'Rosenheim' },\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t_value: 'Rosenheim',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Scenario\n\t\t\t\t\t\t\t\ttestId=\"scenario-combobox\"\n\t\t\t\t\t\t\t\tInputComponent={KolCombobox}\n\t\t\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\t\t\t_label: 'KolCombobox',\n\t\t\t\t\t\t\t\t\t_suggestions: COUNTRY_SUGGESTIONS,\n\t\t\t\t\t\t\t\t\t_value: 'Deutschland',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Scenario\n\t\t\t\t\t\t\t\ttestId=\"scenario-textarea\"\n\t\t\t\t\t\t\t\tInputComponent={KolTextarea}\n\t\t\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\t\t\t_label: 'KolTextarea',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Scenario\n\t\t\t\t\t\t\t\ttestId=\"scenario-button\"\n\t\t\t\t\t\t\t\tInputComponent={KolButton}\n\t\t\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\t\t\t_label: 'KolButton',\n\t\t\t\t\t\t\t\t\t_variant: 'ghost',\n\t\t\t\t\t\t\t\t\t_value: 'KolButton value',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Scenario\n\t\t\t\t\t\t\t\ttestId=\"scenario-buttonLink\"\n\t\t\t\t\t\t\t\tInputComponent={KolButtonLink}\n\t\t\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\t\t\t_label: 'KolButtonLink',\n\t\t\t\t\t\t\t\t\t_value: 'KolButtonLink value',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<div className=\"grid grid-cols-3 gap-4\">\n\t\t\t\t\t\t\t\t<div></div>\n\t\t\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t\t\t_label=\"Run all\"\n\t\t\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\teventTarget.dispatchEvent(new Event('runAll'));\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></KolButton>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</section>\n\t\t\t\t</EventLoggerActiveContext.Provider>\n\t\t\t</EventTargetContext.Provider>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/performance-test",
-      "group": "scenarios",
-      "name": "performance-test",
-      "path": "packages/samples/react/src/scenarios/performance-test.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/performance-test.tsx",
-      "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\nconst MAX_LENGTH = 333;\nconst NUMBER_OF_INPUTS = new Array(MAX_LENGTH).fill(0).map((_, i) => i + 1);\n\nexport const PerformanceTest: FC = () => {\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.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid gap-4\">\n\t\t\t\t{NUMBER_OF_INPUTS.map((idx) => (\n\t\t\t\t\t<div className=\"flex flex-wrap items-end gap-4\" key={idx}>\n\t\t\t\t\t\t<KolInputText _label={`TextInput #${idx}`} />\n\t\t\t\t\t\t<KolInputNumber _label={`NumberInput #${idx}`} />\n\t\t\t\t\t\t<KolInputCheckbox _label={`Checkbox #${idx}`} />\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/react-hook-form-adapter",
-      "group": "scenarios",
-      "name": "react-hook-form-adapter",
-      "path": "packages/samples/react/src/scenarios/react-hook-form/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/react-hook-form/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport type { SubmitHandler, FieldErrors } from 'react-hook-form';\nimport { useForm } from 'react-hook-form';\nimport {\n\tKolInputTextController,\n\tKolInputPasswordController,\n\tKolInputEmailController,\n\tKolInputNumberController,\n\tKolInputRangeController,\n\tKolInputDateController,\n\tKolInputColorController,\n\tKolInputFileController,\n\tKolTextareaController,\n\tKolComboboxController,\n\tKolSelectController,\n\tKolSingleSelectController,\n\tKolInputRadioController,\n\tKolInputCheckboxController,\n} from '@public-ui/react-hook-form-adapter';\nimport { KolButton } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../../components/SampleDescription';\nimport { COUNTRY_SUGGESTIONS } from '../../shares/country';\n\ninterface FormData {\n\tfirstName: string;\n\tlastName: string;\n\temail: string;\n\tpassword: string;\n\tage: number;\n\tvolume: number;\n\tbirthday: string;\n\tfavoriteColor: string;\n\tcv: FileList | null;\n\tbio: string;\n\tcountry: string;\n\tlanguage: string;\n\tframework: string;\n\tgender: string;\n\ttermsAccepted: boolean;\n}\n\nconst defaultValues: FormData = {\n\tfirstName: '',\n\tlastName: '',\n\temail: '',\n\tpassword: '',\n\tage: 18,\n\tvolume: 50,\n\tbirthday: '',\n\tfavoriteColor: '#000000',\n\tcv: null,\n\tbio: '',\n\tcountry: '',\n\tlanguage: 'de',\n\tframework: '',\n\tgender: '',\n\ttermsAccepted: false,\n};\n\nconst languageOptions = [\n\t{ label: 'English', value: 'en' },\n\t{ label: 'German', value: 'de' },\n\t{ label: 'French', value: 'fr' },\n];\n\nconst frameworkOptions = [\n\t{ label: 'React', value: 'react' },\n\t{ label: 'Vue', value: 'vue' },\n\t{ label: 'Stencil', value: 'stencil' },\n];\n\nconst genderOptions = [\n\t{ label: 'Male', value: 'male' },\n\t{ label: 'Female', value: 'female' },\n\t{ label: 'Other', value: 'other' },\n];\n\nconst allFields: Array<keyof FormData> = [\n\t'firstName',\n\t'lastName',\n\t'email',\n\t'password',\n\t'age',\n\t'volume',\n\t'birthday',\n\t'favoriteColor',\n\t'cv',\n\t'bio',\n\t'country',\n\t'language',\n\t'framework',\n\t'gender',\n\t'termsAccepted',\n];\n\nexport const RHFBasic: FC = () => {\n\tconst { control, handleSubmit, setValue, getValues, trigger } = useForm<FormData>({\n\t\tdefaultValues,\n\t\tmode: 'onTouched',\n\t\tshouldFocusError: true,\n\t});\n\n\tconst touchAndValidateAll = () => {\n\t\tallFields.forEach((name) => {\n\t\t\tsetValue(name, getValues(name), { shouldTouch: true, shouldValidate: true });\n\t\t});\n\t};\n\n\tconst onSubmit: SubmitHandler<FormData> = (data) => {\n\t\talert(JSON.stringify(data, null, 2));\n\t};\n\n\tconst onError = (errors: FieldErrors<FormData>) => {\n\t\ttouchAndValidateAll();\n\t\tvoid trigger(undefined, { shouldFocus: true });\n\n\t\tconsole.warn('Validation errors:', errors);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample demonstrates a form using React Hook Form with KoliBri adapters. All inputs are validated, and error messages are shown on submit.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<form onSubmit={handleSubmit(onSubmit, onError)} className=\"grid gap-4 w-full max-w-xl\">\n\t\t\t\t<KolInputTextController name=\"firstName\" control={control} _label=\"First Name\" rules={{ required: 'First name is required' }} _required />\n\t\t\t\t<KolInputTextController name=\"lastName\" control={control} _label=\"Last Name\" rules={{ required: 'Last name is required' }} _required />\n\t\t\t\t<KolInputEmailController name=\"email\" control={control} _label=\"Email\" rules={{ required: 'Email is required' }} _required />\n\t\t\t\t<KolInputPasswordController name=\"password\" control={control} _label=\"Password\" rules={{ required: 'Password is required' }} _required />\n\t\t\t\t<KolInputNumberController name=\"age\" control={control} _label=\"Age\" rules={{ required: 'Age is required', min: 0 }} _required />\n\t\t\t\t<KolInputRangeController name=\"volume\" control={control} _label=\"Volume (0–100)\" _min={0} _max={100} />\n\t\t\t\t<KolInputDateController name=\"birthday\" control={control} _label=\"Birthday\" rules={{ required: 'Birthday is required' }} />\n\t\t\t\t<KolInputColorController name=\"favoriteColor\" control={control} _label=\"Favorite Color\" id=\"favoriteColor\" />\n\t\t\t\t<KolInputFileController name=\"cv\" control={control} _label=\"Upload CV\" rules={{ required: 'Please upload your CV' }} _required />\n\t\t\t\t<KolTextareaController name=\"bio\" control={control} _label=\"Bio\" rules={{ required: 'Please provide a short bio' }} _required />\n\t\t\t\t<KolComboboxController\n\t\t\t\t\tcontrol={control}\n\t\t\t\t\trules={{ required: 'Please select a country' }}\n\t\t\t\t\tname=\"country\"\n\t\t\t\t\t_label=\"Country\"\n\t\t\t\t\t_suggestions={COUNTRY_SUGGESTIONS}\n\t\t\t\t\t_required\n\t\t\t\t/>\n\t\t\t\t<KolSelectController\n\t\t\t\t\tcontrol={control}\n\t\t\t\t\trules={{ required: 'Please select a language' }}\n\t\t\t\t\tname=\"language\"\n\t\t\t\t\t_label=\"Preferred Language\"\n\t\t\t\t\t_options={languageOptions}\n\t\t\t\t\t_required\n\t\t\t\t/>\n\t\t\t\t<KolSingleSelectController\n\t\t\t\t\trules={{ required: 'Please select a framework' }}\n\t\t\t\t\tcontrol={control}\n\t\t\t\t\tname=\"framework\"\n\t\t\t\t\t_label=\"Favorite Framework\"\n\t\t\t\t\t_options={frameworkOptions}\n\t\t\t\t\t_required\n\t\t\t\t/>\n\t\t\t\t<KolInputRadioController\n\t\t\t\t\tcontrol={control}\n\t\t\t\t\trules={{ required: 'Please select your gender' }}\n\t\t\t\t\tname=\"gender\"\n\t\t\t\t\t_label=\"Gender\"\n\t\t\t\t\t_options={genderOptions}\n\t\t\t\t\t_required\n\t\t\t\t/>\n\t\t\t\t<KolInputCheckboxController\n\t\t\t\t\tname=\"termsAccepted\"\n\t\t\t\t\tcontrol={control}\n\t\t\t\t\t_label=\"I accept the terms and conditions\"\n\t\t\t\t\trules={{ required: 'You must accept the terms' }}\n\t\t\t\t\t_required\n\t\t\t\t/>\n\n\t\t\t\t<KolButton _label=\"Submit\" _type=\"submit\" />\n\t\t\t</form>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/same-height-of-all-interactive-elements",
-      "group": "scenarios",
-      "name": "same-height-of-all-interactive-elements",
-      "path": "packages/samples/react/src/scenarios/same-height-of-all-interactive-elements.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/same-height-of-all-interactive-elements.tsx",
-      "code": "import {\n\tKolButton,\n\tKolCombobox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRange,\n\tKolInputText,\n\tKolLinkButton,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { useToasterService } from '../hooks/useToasterService';\n\nexport const SameHeightOfAllInteractiveElements: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tAll interactive elements, such as buttons and input fields, should have the same height to ensure a consistent and visually balanced user interface.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"w-full flex flex-wrap gap-4\">\n\t\t\t\t<KolButton _icons=\"codicon codicon-home\" _label=\"Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-home\" _label=\"Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolLinkButton _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Link-Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolLinkButton _hideLabel _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Link-Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolCombobox _hideLabel _icons=\"codicon codicon-home\" _label=\"Combobox\" _suggestions={[]} />\n\t\t\t\t<KolInputColor\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: 'codicon codicon-home',\n\t\t\t\t\t}}\n\t\t\t\t\t_label=\"Input-Color\"\n\t\t\t\t/>\n\t\t\t\t<KolInputFile _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-File\" />\n\t\t\t\t<KolInputDate _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Date\" />\n\t\t\t\t<KolInputEmail _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Email\" />\n\t\t\t\t<KolInputNumber _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Number\" />\n\t\t\t\t<KolInputPassword _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Password\" />\n\t\t\t\t<KolInputRange _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Range\" />\n\t\t\t\t<KolInputText _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Text\" />\n\t\t\t\t<KolSelect _hideLabel _icons=\"codicon codicon-home\" _label=\"Combobox\" _options={[]} />\n\t\t\t\t<KolSingleSelect _hideLabel _icons=\"codicon codicon-home\" _label=\"Combobox\" _options={[]} />\n\t\t\t\t<KolTextarea _hideLabel _icons=\"codicon codicon-home\" _label=\"Combobox\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/sample-form-with-validation",
-      "group": "scenarios",
-      "name": "sample-form-with-validation",
-      "path": "packages/samples/react/src/scenarios/sample-form-with-validation.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/sample-form-with-validation.tsx",
-      "code": "import React from 'react';\nimport { useForm } from 'react-hook-form';\nimport type { FieldError } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { z } from 'zod';\n\nimport {\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolCombobox,\n\tKolTextarea,\n\tKolButton,\n\tKolHeading,\n\tKolAlert,\n\tKolLink,\n} from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../components/SampleDescription';\nimport { COUNTRY_SUGGESTIONS } from '../shares/country';\nimport { useToasterService } from '../hooks/useToasterService';\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, touchedFields },\n\t\treset,\n\t\tsetValue,\n\t\ttrigger,\n\t\twatch,\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 err = (key: keyof z.infer<typeof formSchema>) => {\n\t\tconst fieldError = errors[key];\n\n\t\tif (!fieldError || typeof fieldError !== 'object' || !('message' in fieldError)) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn {\n\t\t\t_description: fieldError.message as string,\n\t\t\t_type: 'error' as const,\n\t\t};\n\t};\n\n\tconst isTouched = (key: keyof z.infer<typeof formSchema>) => {\n\t\treturn !!touchedFields[key];\n\t};\n\n\tconst bind = <K extends keyof z.infer<typeof formSchema>>(key: K) => ({\n\t\tid: `field-${key as string}`,\n\t\t_name: key,\n\t\t_value: watch(key) as z.infer<typeof formSchema>[K],\n\t\t_touched: isTouched(key),\n\t\t_msg: err(key),\n\t\t_on: {\n\t\t\tonInput: (_: Event, v: unknown) => setValue(key, v as any, { shouldTouch: true, shouldValidate: true }),\n\t\t\tonBlur: () => trigger(key),\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<KolInputDate _label=\"Date\" {...bind('date')} />\n\t\t\t\t<KolInputText _label=\"Text (≥ 10 chars)\" {...bind('text')} />\n\t\t\t\t<KolInputEmail _label=\"Email\" {...bind('email')} />\n\t\t\t\t<KolInputPassword _label=\"Password\" {...bind('password')} />\n\t\t\t\t<KolInputRange _label=\"Range (≥ 30)\" _min={0} _max={100} {...bind('range')} />\n\t\t\t\t<KolInputNumber _label=\"Number (1 – 10)\" {...bind('number')} />\n\t\t\t\t<KolInputCheckbox _label=\"Accept terms\" {...bind('checkbox')} />\n\t\t\t\t<KolInputRadio\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\t{...bind('radio')}\n\t\t\t\t/>\n\t\t\t\t<KolInputColor _label=\"Favorite Color\" {...bind('color')} />\n\t\t\t\t<KolSelect\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\t{...bind('select')}\n\t\t\t\t/>\n\t\t\t\t<KolSingleSelect\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\t{...bind('singleSelect')}\n\t\t\t\t/>\n\t\t\t\t<KolCombobox _label=\"Country\" _suggestions={COUNTRY_SUGGESTIONS} {...bind('combobox')} />\n\t\t\t\t<KolTextarea _label=\"Message\" _rows={4} {...bind('textarea')} />\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",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/static-form",
-      "group": "scenarios",
-      "name": "static-form",
-      "path": "packages/samples/react/src/scenarios/static-form.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/static-form.tsx",
-      "code": "import {\n\tKolButton,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolCombobox,\n\tKolTextarea,\n\tKolHeading,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { COUNTRY_SUGGESTIONS } from '../shares/country';\n\nexport const StaticForm: FC = () => {\n\tconst { searchParams } = new URL(location.href);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows how KoliBri can be used in a static form context.</p>\n\t\t\t\t<ol>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tFirst you have to enable the <code>experimental mode</code>:{' '}\n\t\t\t\t\t\t<code className=\"bg-gray-200\">&lt;meta name=&quot;kolibri&quot; content=&quot;dev-mode=false;experimental-mode=true;&quot; /&gt;</code>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tCurrently you have to use a native <code>form</code> element:{' '}\n\t\t\t\t\t\t<code className=\"bg-gray-200\">&lt;form method=&quot;GET&quot;&gt;...&lt;/form&gt;</code>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tIt is important in static usage to give every input a <code>name</code> attribute:{' '}\n\t\t\t\t\t\t<code className=\"bg-gray-200\">&lt;KolInputColor _name=&quot;color&quot; _label=&quot;Color&quot; /&gt;</code>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tLast of all one button should have the type <code>submit</code>:{' '}\n\t\t\t\t\t\t<code className=\"bg-gray-200\">&lt;KolButton _label=&quot;Submit&quot; _type=&quot;submit&quot; _variant=&quot;primary&quot; /&gt;</code>\n\t\t\t\t\t</li>\n\t\t\t\t</ol>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full flex flex-col\">\n\t\t\t\t{searchParams.size > 0 && (\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t<KolHeading _level={2} _label=\"Submitted data\" />\n\t\t\t\t\t\t<pre className=\"text-base\">\n\t\t\t\t\t\t\t<code>{JSON.stringify(Object.fromEntries(searchParams.entries()), null, 2)}</code>\n\t\t\t\t\t\t</pre>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t<form className=\"grid gap-4\" method=\"get\" noValidate>\n\t\t\t\t\t<KolInputCheckbox _name=\"checkbox\" _label=\"Checkbox\" />\n\t\t\t\t\t<KolInputColor _name=\"color\" _label=\"Color\" />\n\t\t\t\t\t<KolInputDate _name=\"date\" _label=\"Date\" />\n\t\t\t\t\t<KolInputEmail _name=\"email\" _label=\"Email\" />\n\t\t\t\t\t<KolInputFile _name=\"file\" _label=\"File\" />\n\t\t\t\t\t<KolInputFile _name=\"file\" _label=\"Files (multiple)\" _multiple />\n\t\t\t\t\t<KolInputNumber _name=\"number\" _label=\"Number\" />\n\t\t\t\t\t<KolInputPassword _name=\"password\" _label=\"Password\" />\n\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t_name=\"radio\"\n\t\t\t\t\t\t_label=\"Radio\"\n\t\t\t\t\t\t_options={[\n\t\t\t\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t\t<KolInputRange _name=\"range\" _label=\"Range\" />\n\t\t\t\t\t<KolInputText _name=\"text\" _label=\"Text\" />\n\t\t\t\t\t<KolSelect\n\t\t\t\t\t\t_name=\"select\"\n\t\t\t\t\t\t_label=\"Select\"\n\t\t\t\t\t\t_options={[\n\t\t\t\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t\t<KolSelect\n\t\t\t\t\t\t_name=\"select\"\n\t\t\t\t\t\t_label=\"Select (multiple)\"\n\t\t\t\t\t\t_multiple\n\t\t\t\t\t\t_options={[\n\t\t\t\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t\t\t\t]}\n\t\t\t\t\t\t_rows={2}\n\t\t\t\t\t/>\n\t\t\t\t\t<KolSingleSelect\n\t\t\t\t\t\t_name=\"singleSelect\"\n\t\t\t\t\t\t_label=\"Single Select\"\n\t\t\t\t\t\t_options={[\n\t\t\t\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t\t<KolCombobox _name=\"combobox\" _label=\"Combobox\" _suggestions={COUNTRY_SUGGESTIONS} />\n\t\t\t\t\t<KolTextarea _name=\"textarea\" _label=\"Textarea\" _rows={5} />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Submit\" _type=\"submit\" _variant=\"primary\" />\n\t\t\t\t\t\t<KolButton _label=\"Reset\" _type=\"reset\" />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Add a random string to allow the form to be always submitted. Without it, if theres no change to the data, the form simply won't submit when requested. */}\n\t\t\t\t\t<input type=\"hidden\" value={crypto.randomUUID()} name=\"random\" />\n\t\t\t\t</form>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/toolbar-item-order",
-      "group": "scenarios",
-      "name": "toolbar-item-order",
-      "path": "packages/samples/react/src/scenarios/toolbar-item-order.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/toolbar-item-order.tsx",
-      "code": "import React, { useEffect, useMemo, useState } from 'react';\nimport type { FC } from 'react';\nimport type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolToolbar } from '@public-ui/react-v19';\n\nexport const ToolbarItemOrder: FC = () => {\n\tconst [isSubmitting, setIsSubmitting] = useState(false);\n\tconst [isSubmitting2, setIsSubmitting2] = useState(false);\n\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout>;\n\t\tif (isSubmitting) {\n\t\t\ttimer = setTimeout(() => {\n\t\t\t\tsetIsSubmitting(false);\n\t\t\t}, 2000);\n\t\t}\n\t\treturn () => clearTimeout(timer);\n\t}, [isSubmitting]);\n\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout>;\n\t\tif (isSubmitting2) {\n\t\t\ttimer = setTimeout(() => {\n\t\t\t\tsetIsSubmitting2(false);\n\t\t\t}, 2000);\n\t\t}\n\t\treturn () => clearTimeout(timer);\n\t}, [isSubmitting2]);\n\n\tconst handleSubmit = () => setIsSubmitting(true);\n\tconst handleSubmit2 = () => setIsSubmitting2(true);\n\n\tconst toolbarItems = useMemo(() => {\n\t\tconst items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({\n\t\t\t_label: `Button ${index + 1}`,\n\t\t\t_on: { onClick: handleSubmit },\n\t\t\t_icons: isSubmitting ? 'codicon codicon-loading codicon-modifier-spin' : void 0,\n\t\t\t_disabled: isSubmitting,\n\t\t}));\n\t\treturn items;\n\t}, [isSubmitting]);\n\n\tconst brokenToolbarItems = useMemo(() => {\n\t\tconst items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({\n\t\t\t_label: `Button ${index + 1}`,\n\t\t\t_on: { onClick: handleSubmit2 },\n\t\t\t_disabled: isSubmitting2,\n\t\t\t_icons: isSubmitting2 ? 'codicon codicon-loading codicon-modifier-spin' : void 0,\n\t\t}));\n\t\treturn items;\n\t}, [isSubmitting2]);\n\n\treturn (\n\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n\t\t\t<KolHeading _label=\"Disabled Toolbar Buttons Bug (solved)\" />\n\n\t\t\t<KolHeading _label=\"icon vor disabled\" _level={2} />\n\t\t\t<KolToolbar _label=\"KolToolbar A\" _items={toolbarItems} />\n\t\t\t<KolHeading _label=\"disabled vor icon\" _level={2} />\n\t\t\t<p>Klicke auf einen der {brokenToolbarItems.length - 1} ersten Buttons hatte zur Folge, dass die nachfolgenden Buttons kaputt gehen.</p>\n\t\t\t<KolToolbar _label=\"KolToolbar B\" _items={brokenToolbarItems} />\n\t\t</div>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/scenarios/tooltip-positioning",
-      "group": "scenarios",
-      "name": "tooltip-positioning",
-      "path": "packages/samples/react/src/scenarios/tooltip-positioning.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/scenarios/tooltip-positioning.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { KolPopoverButton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../components/SampleDescription';\n\nexport const TooltipPositioning: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis example demonstrates tooltip positioning within container query contexts. Container queries can interfere with fixed positioning, causing\n\t\t\t\t\ttooltips to render incorrectly relative to the viewport. The layout containment fix ensures tooltips position properly even when their parent elements\n\t\t\t\t\tuse container-based sizing and layout rules.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tcontainer: 'test / size',\n\t\t\t\t\tcontain: 'layout',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<KolPopoverButton _label=\"Sample PopoverButton—Click for Popover\" _icons=\"codicon codicon-info\" _tooltipAlign=\"right\" _hideLabel>\n\t\t\t\t\tThis is an explanation shown on click.\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/select/basic",
-      "group": "select",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/select/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/select/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { SelectVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SelectBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolSelect renders a select field. The sample shows KolSelect in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={SelectVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/single-select/basic",
-      "group": "single-select",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/single-select/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/single-select/basic.tsx",
-      "code": "import React from 'react';\nimport type { FC } from 'react';\nimport { FormWrap } from '../FormWrap';\nimport { SampleDescription } from '../SampleDescription';\nimport { SingleSelectVariants } from './partials/variants';\n\nexport const SingleSelectBasic: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>SingleSelect provides a select field for a single value, supported by a search field.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<FormWrap RefComponent={SingleSelectVariants} showButtons={false} />\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/skip-nav/basic",
-      "group": "skip-nav",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/skip-nav/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/skip-nav/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolSkipNav } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SkipNavBasic: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>\n\t\t\t<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>\n\t\t</SampleDescription>\n\n\t\t<KolSkipNav\n\t\t\t_label=\"Hidden navigation\"\n\t\t\t_links={[\n\t\t\t\t{\n\t\t\t\t\t_label: 'To the top',\n\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t_label: 'To the form',\n\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t_label: 'To the end',\n\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t},\n\t\t\t]}\n\t\t></KolSkipNav>\n\t</div>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/spin/basic",
-      "group": "spin",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/spin/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/spin/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolSpin renders a loading indicator. This sample shows the default variant &quot;dot&quot;.</p>\n\t\t</SampleDescription>\n\n\t\t<KolSpin _show />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/spin/custom",
-      "group": "spin",
-      "name": "custom",
-      "path": "packages/samples/react/src/components/spin/custom.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/spin/custom.tsx",
-      "code": "import './custom.css';\nimport { SampleDescription } from '../SampleDescription';\n\nimport React from 'react';\n\nimport { KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\n\nexport const SpinCustom: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows a custom loading animation. Using the expert slot, it is possible to insert custom animations. Custom animations are not necessarily\n\t\t\t\tbarrier-free.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolSpin _show _variant=\"none\">\n\t\t\t<span slot=\"expert\" className=\"loader\"></span>\n\t\t</KolSpin>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/spin/cycle",
-      "group": "spin",
-      "name": "cycle",
-      "path": "packages/samples/react/src/components/spin/cycle.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/spin/cycle.tsx",
-      "code": "import React from 'react';\n\nimport { KolSpin } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinCycle: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows the KolSpin variant &quot;cycle&quot;.</p>\n\t\t</SampleDescription>\n\n\t\t<KolSpin _show _variant=\"cycle\" />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/spin/label",
-      "group": "spin",
-      "name": "label",
-      "path": "packages/samples/react/src/components/spin/label.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/spin/label.tsx",
-      "code": "import React, { useEffect, useState } from 'react';\nimport { KolSpin } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SpinLabel: FC = () => {\n\tconst [show, setShow] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst id = setInterval(() => setShow((value) => !value), 3000);\n\t\treturn () => clearInterval(id);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolSpin with a label.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolSpin _show={show} _label={show ? 'Loading data...' : 'Data loaded.'} />\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/split-button/basic",
-      "group": "split-button",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/split-button/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/split-button/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolSplitButton, KolToolbar } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonBasic: FC = () => {\n\tconst { buttonWithTextClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: buttonWithTextClickEventHandler,\n\t};\n\tconst TOOLBAR_ITEMS = [\n\t\t{\n\t\t\t_label: 'Save',\n\t\t\t_icons: 'codicon codicon-save',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\t_label: 'Move',\n\t\t\t_icons: 'codicon codicon-move',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'codicon codicon-trash',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe <code>SplitButton</code> component combines a primary action button with a context menu. Clicking the main button triggers the\n\t\t\t\t\t<strong> Edit</strong> action. The context menu opens a vertical list of additional actions:\n\t\t\t\t\t<strong> Save</strong>, <strong>Move</strong>, and <strong>Delete</strong>.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolSplitButton _label=\"Edit\" _on={dummyEventHandler}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolSplitButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/split-button/with-context",
-      "group": "split-button",
-      "name": "with-context",
-      "path": "packages/samples/react/src/components/split-button/with-context.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/split-button/with-context.tsx",
-      "code": "/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport * as React from 'react';\n\nimport { KolButton, KolInputText, KolSplitButton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonWithContext: FC = () => {\n\tconst splitButtonRef = React.useRef<HTMLKolSplitButtonElement & { closePopup: any }>(null);\n\n\tconst handleCloseClick = () => {\n\t\tsplitButtonRef.current?.closePopup();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t<KolSplitButton ref={splitButtonRef as any} _label=\"Only the arrow opens\">\n\t\t\t\t\t<div style={{ width: 300, padding: 16, border: '1px solid #ccc' }} onClick={(e) => e.stopPropagation()}>\n\t\t\t\t\t\t<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>\n\t\t\t\t\t\t<div style={{ gap: 16, display: 'flex', flexDirection: 'column' }}>\n\t\t\t\t\t\t\t<KolInputText _label=\"User\" />\n\t\t\t\t\t\t\t<KolInputText _label=\"Role\" />\n\t\t\t\t\t\t\t<KolButton _label=\"Close\" _on={{ onClick: handleCloseClick }} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolSplitButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/column-alignment",
-      "group": "table",
-      "name": "column-alignment",
-      "path": "packages/samples/react/src/components/table/column-alignment.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/column-alignment.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];\nconst genericNonSorter = () => 0;\n\nexport const TableColumnAlignment: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with columns headers and data in different text alignments.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col\">\n\t\t\t<KolHeading _label=\"Simple table\" _level={3}></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with different text align properties\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left' },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center' },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table with sortable columns\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with sortable columns\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', compareFn: genericNonSorter },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table some sortable columns\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with some but not all columns sortable\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table with vertical heading\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with vertical heading\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left' },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center' },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [[{ label: 'Vertical' }]],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/complex-headers",
-      "group": "table",
-      "name": "complex-headers",
-      "path": "packages/samples/react/src/components/table/complex-headers.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/complex-headers.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TableComplexHeaders: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using vertical and horizontal headers, applying colspan and rowspan.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col\">\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Business hours\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Center',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Tiergarten',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Maxvorstadt',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\t_headers={{\n\t\t\t\t\tvertical: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Berlin',\n\t\t\t\t\t\t\t\trowSpan: 2,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'München',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'District',\n\t\t\t\t\t\t\t\trowSpan: 2,\n\t\t\t\t\t\t\t\tkey: 'asp',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Workdays',\n\t\t\t\t\t\t\t\tcolSpan: 5,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Weekend',\n\t\t\t\t\t\t\t\tcolSpan: 2,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Monday',\n\t\t\t\t\t\t\t\tkey: 'monday',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Tuesday',\n\t\t\t\t\t\t\t\tkey: 'tuesday',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Wednesday',\n\t\t\t\t\t\t\t\tkey: 'wednesday',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Thursday',\n\t\t\t\t\t\t\t\tkey: 'thursday',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Friday',\n\t\t\t\t\t\t\t\tkey: 'friday',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Saturday',\n\t\t\t\t\t\t\t\tkey: 'saturday',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Sunday',\n\t\t\t\t\t\t\t\tkey: 'sunday',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/horizontal-scrollbar",
-      "group": "table",
-      "name": "horizontal-scrollbar",
-      "path": "packages/samples/react/src/components/table/horizontal-scrollbar.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/horizontal-scrollbar.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport { DATA as tableData } from './test-data';\nimport type { Data } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\nconst DATA = [{ small: 'Small Example', large: 'Larger Example' }];\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Large Column', key: 'large', textAlign: 'left', width: '300px' },\n\t\t\t{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },\n\t\t],\n\t],\n};\nconst genericNonSorter = () => 0;\n\nexport const TableHorizontalScrollbar: FC = () => {\n\tconst [hasWidthRestriction, setHasWidthRestriction] = useState(true);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows KolTableStateful with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table\n\t\t\t\t\tcontainer and to scroll it using arrow keys.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full flex flex-col gap-4\">\n\t\t\t\t<div className=\"w-[400px] flex flex-col gap-4\">\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Table for demonstration purposes with horizontal scrollbar.\"\n\t\t\t\t\t\t_minWidth={hasWidthRestriction ? '600px' : '300px'}\n\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t/>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Table for demonstration horizontal scrolling with pagination.\"\n\t\t\t\t\t\t_minWidth={hasWidthRestriction ? '600px' : '300px'}\n\t\t\t\t\t\t_headers={{\n\t\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t{ label: 'Order', key: 'order' },\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tlabel: 'Date',\n\t\t\t\t\t\t\t\t\t\tkey: 'date',\n\t\t\t\t\t\t\t\t\t\tcompareFn: genericNonSorter,\n\t\t\t\t\t\t\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_data={tableData}\n\t\t\t\t\t\t_pagination\n\t\t\t\t\t/>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Table for demonstration purposes with horizontal scrollbar with auto minWidth.\"\n\t\t\t\t\t\t_minWidth={hasWidthRestriction ? '600px' : '300px'}\n\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t_data={[]}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<KolInputCheckbox\n\t\t\t\t\t_checked={hasWidthRestriction}\n\t\t\t\t\t_label=\"Toggle width restriction\"\n\t\t\t\t\t_variant=\"switch\"\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonChange: (_event, value) => {\n\t\t\t\t\t\t\tsetHasWidthRestriction(Boolean(value));\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t></KolInputCheckbox>\n\n\t\t\t\t<KolHeading _label=\"Same table without scrollbar\" _level={2} className=\"block mt-4\" />\n\t\t\t\t<p className=\"mt-0\">\n\t\t\t\t\t<i>Scrollbar appears on very small viewport sizes</i>\n\t\t\t\t</p>\n\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Table for demonstration purposes without horizontal scrollbar\"\n\t\t\t\t\t_minWidth=\"600px\"\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_pagination\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/interactive-child-elements",
-      "group": "table",
-      "name": "interactive-child-elements",
-      "path": "packages/samples/react/src/components/table/interactive-child-elements.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/interactive-child-elements.tsx",
-      "code": "import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nfunction KolButtonWrapper({ _on, ...other }: ButtonProps) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton {...other} _on={dummyEventHandler} />;\n}\n\nconst getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {\n\tconst capitalizedVariant = variant.charAt(0).toUpperCase() + variant.slice(1);\n\treturn {\n\t\tlabel: capitalizedVariant,\n\t\tkey: variant,\n\t\ttextAlign: 'left',\n\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\tconst commonProps = {\n\t\t\t\t_label: capitalizedVariant,\n\t\t\t\t_variant: variant,\n\t\t\t\t_icons: { right: 'codicon codicon-squirrel' },\n\t\t\t};\n\t\t\tgetRoot(createReactRenderElement(element)).render(\n\t\t\t\tcell.label === 'button' ? <KolButtonWrapper {...commonProps} /> : <KolLinkButton _href=\"#/back-page\" {...commonProps} />,\n\t\t\t);\n\t\t},\n\t};\n};\n\nexport const InteractiveChildElements: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows a KolTableStateless with different interactive child elements. It can be used to assure themes show these child elements correctly.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col\">\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Button styles\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headerCells={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tgetButtonHeaderCell('primary'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('secondary'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('normal'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('danger'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('ghost'),\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [[{ label: 'Button' }, { label: 'Link-Button' }]],\n\t\t\t\t}}\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tprimary: 'button',\n\t\t\t\t\t\tsecondary: 'button',\n\t\t\t\t\t\tnormal: 'button',\n\t\t\t\t\t\tdanger: 'button',\n\t\t\t\t\t\tghost: 'button',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tprimary: 'link-button',\n\t\t\t\t\t\tsecondary: 'link-button',\n\t\t\t\t\t\tnormal: 'link-button',\n\t\t\t\t\t\tdanger: 'link-button',\n\t\t\t\t\t\tghost: 'link-button',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\tclassName=\"block\"\n\t\t\t/>\n\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Link styles\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headerCells={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tkey: 'regular',\n\t\t\t\t\t\t\t\tlabel: 'Regular',\n\t\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\t\t\t\t\tconst commonProps = {\n\t\t\t\t\t\t\t\t\t\t_label: cell.label,\n\t\t\t\t\t\t\t\t\t\t_icons: { right: 'codicon codicon-squirrel' },\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tgetRoot(createReactRenderElement(element)).render(\n\t\t\t\t\t\t\t\t\t\tcell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href=\"#/back-page\" {...commonProps} />,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [[{ label: 'Link' }, { label: 'Button-Link' }]],\n\t\t\t\t}}\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tregular: 'link',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tregular: 'button-link',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\tclassName=\"block mt\"\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/multi-sort",
-      "group": "table",
-      "name": "multi-sort",
-      "path": "packages/samples/react/src/components/table/multi-sort.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/multi-sort.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';\nimport type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'order',\n\t\t\t\tkey: 'order',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\t\t\tif ((data0 as Data).order < (data1 as Data).order) return -1;\n\t\t\t\t\telse if ((data1 as Data).order < (data0 as Data).order) return 1;\n\t\t\t\t\telse return 0;\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\t\t\tif ((data0 as Data).date < (data1 as Data).date) return -1;\n\t\t\t\t\telse if ((data1 as Data).date < (data0 as Data).date) return 1;\n\t\t\t\t\telse return 0;\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'order',\n\t\t\t\tkey: 'order',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\t\t\tif ((data0 as Data).order < (data1 as Data).order) return -1;\n\t\t\t\t\telse if ((data1 as Data).order < (data0 as Data).order) return 1;\n\t\t\t\t\telse return 0;\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\t\t\tif ((data0 as Data).date < (data1 as Data).date) return -1;\n\t\t\t\t\telse if ((data1 as Data).date < (data0 as Data).date) return 1;\n\t\t\t\t\telse return 0;\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\nexport const MultiSortTable: FC = () => {\n\tconst [allowMultiSortVertical, setAllowMultiSortVertical] = useState(false);\n\tconst [allowMultiSortHorizontal, setAllowMultiSortHorizontal] = useState(true);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full grid gap-4\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Vertical\" />\n\t\t\t\t\t<KolInputCheckbox\n\t\t\t\t\t\t_checked={allowMultiSortVertical}\n\t\t\t\t\t\t_label=\"Allow Multi-Sort\"\n\t\t\t\t\t\t_variant=\"switch\"\n\t\t\t\t\t\t_on={{ onChange: (_, value) => setAllowMultiSortVertical(Boolean(value)) }}\n\t\t\t\t\t></KolInputCheckbox>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Sort Table with Order and Date\"\n\t\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t\t_data={DATA.slice(0, 10)}\n\t\t\t\t\t\t_headers={HEADERS_VERTICAL}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={allowMultiSortVertical}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Horizontal\" />\n\t\t\t\t\t<KolInputCheckbox\n\t\t\t\t\t\t_checked={allowMultiSortHorizontal}\n\t\t\t\t\t\t_label=\"Allow Multi-Sort\"\n\t\t\t\t\t\t_variant=\"switch\"\n\t\t\t\t\t\t_on={{ onChange: (_, value) => setAllowMultiSortHorizontal(Boolean(value)) }}\n\t\t\t\t\t></KolInputCheckbox>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Sort Table with Order and Date\"\n\t\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t_headers={HEADERS_HORIZONTAL}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={allowMultiSortHorizontal}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/non-hidable-columns",
-      "group": "table",
-      "name": "non-hidable-columns",
-      "path": "packages/samples/react/src/components/table/non-hidable-columns.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/non-hidable-columns.tsx",
-      "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [\n\t{ id: '1001', name: 'John', age: 30 },\n\t{ id: '1002', name: 'Jane', age: 25 },\n];\n\nexport const TableNonHidableColumns: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This example demonstrates a column that cannot be hidden in the settings.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful\n\t\t\t_label=\"Table with a non-hidable column\"\n\t\t\t_minWidth=\"auto\"\n\t\t\t_hasSettingsMenu\n\t\t\t_headers={{\n\t\t\t\thorizontal: [\n\t\t\t\t\t[\n\t\t\t\t\t\t{ key: 'id', label: 'ID', hidable: false },\n\t\t\t\t\t\t{ key: 'name', label: 'Name' },\n\t\t\t\t\t\t{ key: 'age', label: 'Age' },\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t}}\n\t\t\t_data={DATA}\n\t\t\tclassName=\"block\"\n\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t/>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/pagination-position",
-      "group": "table",
-      "name": "pagination-position",
-      "path": "packages/samples/react/src/components/table/pagination-position.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/pagination-position.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order' },\n\t\t\t{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\nconst PAGINATION: KoliBriTablePaginationProps = { _page: 2 };\n\nexport const PaginationPosition: FC = () => (\n\t<div className=\"w-full grid gap-14\">\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with different pagination positions.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col gap-14\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at the bottom.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at the bottom\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={PAGINATION}\n\t\t\t\t\t_paginationPosition=\"bottom\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at the top.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at the top\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={PAGINATION}\n\t\t\t\t\t_paginationPosition=\"top\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at both top and bottom.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at both top and bottom\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={PAGINATION}\n\t\t\t\t\t_paginationPosition=\"both\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t</section>\n\t</div>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/predefined-settings",
-      "group": "table",
-      "name": "predefined-settings",
-      "path": "packages/samples/react/src/components/table/predefined-settings.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/predefined-settings.tsx",
-      "code": "import { SampleDescription } from '../SampleDescription';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nconst DATA = [{ columnA: 'Column A', columnB: 'Column B', columnC: 'Column C' }];\n\nexport const PredefinedSettings: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example shows the table with predefined settings.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with predefined settings\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_hasSettingsMenu\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'column A', key: 'columnA' },\n\t\t\t\t\t\t\t{ label: 'column B', key: 'columnB' },\n\t\t\t\t\t\t\t{ label: 'column C', key: 'columnC' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_tableSettings={{\n\t\t\t\t\tcolumns: [\n\t\t\t\t\t\t{ key: 'columnA', visible: false, label: 'Column A', position: 2 },\n\t\t\t\t\t\t{ key: 'columnB', visible: true, label: 'Column B', position: 1, width: 20 },\n\t\t\t\t\t\t{ key: 'columnC', visible: true, label: 'Column C', position: 0, width: 45 },\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\t_min-width=\"500px\"\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/render-cell",
-      "group": "table",
-      "name": "render-cell",
-      "path": "packages/samples/react/src/components/table/render-cell.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/render-cell.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\n\nimport type { IconsPropType, KoliBriTableHeaders } from '@public-ui/components';\nimport { useToasterService } from '../../hooks/useToasterService';\n\ntype Data = {\n\torder: number;\n\tdate: Date;\n\tshipped: boolean;\n};\nconst DATA: Data[] = [\n\t{\n\t\torder: 0,\n\t\tshipped: false,\n\t\tdate: new Date('1981-05-26T21:33:43.612Z'),\n\t},\n\t{\n\t\torder: 1,\n\t\tshipped: true,\n\t\tdate: new Date('1971-04-25T19:44:17.014Z'),\n\t},\n\t{\n\t\torder: 2,\n\t\tshipped: false,\n\t\tdate: new Date('1986-07-10T11:39:29.539Z'),\n\t},\n];\n\nfunction KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _icons={icons} _on={dummyEventHandler} />;\n}\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: '#',\n\t\t\t\tkey: 'order',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: '10em',\n\n\t\t\t\t/* Example 1: Use render return value to format data */\n\t\t\t\trender: (_el, cell) => `Index: ${cell.label}`,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Status',\n\t\t\t\tkey: 'shipped',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: '10em',\n\n\t\t\t\t/* Example 2: Simple render function using textContent */\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tif (cell.label) {\n\t\t\t\t\t\tel.textContent = `Order has been dispatched 🚚`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tel.textContent = `Order pending 📦`;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Date (string)',\n\t\t\t\tkey: 'date',\n\t\t\t\twidth: '20em',\n\t\t\t\ttextAlign: 'center',\n\n\t\t\t\t/* Example 3: Render function using innerHTML. ⚠️Make sure to sanitize data to avoid XSS. */\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tel.innerHTML = `<strong>${DATE_FORMATTER.format(cell.label as unknown as Date)}</strong>`;\n\t\t\t\t},\n\t\t\t\tcompareFn: (data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime(),\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Action (react)',\n\t\t\t\twidth: '20em',\n\n\t\t\t\t/* Example 4: Render function using React */\n\t\t\t\trender: (el) => {\n\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: `grid`,\n\t\t\t\t\t\t\t\tgridAutoFlow: `column`,\n\t\t\t\t\t\t\t\talignItems: `end`,\n\t\t\t\t\t\t\t\tgap: `1rem`,\n\t\t\t\t\t\t\t\tmaxWidth: `400px`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<KolInputText _label=\"Input\" />\n\t\t\t\t\t\t\t<KolButtonWrapper label=\"Save\" icons={{ left: 'codicon codicon-save' }} />\n\t\t\t\t\t\t</div>,\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableRenderCell: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful _label=\"Sort by date column\" _minWidth=\"auto\" _data={DATA} _headers={HEADERS} className=\"w-full\" />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/sort-data",
-      "group": "table",
-      "name": "sort-data",
-      "path": "packages/samples/react/src/components/table/sort-data.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/sort-data.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center' },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1) => {\n\t\t\t\t\tif ((data0 as Data).date < (data1 as Data).date) return -1;\n\t\t\t\t\telse if ((data1 as Data).date < (data0 as Data).date) return 1;\n\t\t\t\t\telse return 0;\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center' },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1) => {\n\t\t\t\t\tif ((data0 as Data).date < (data1 as Data).date) return -1;\n\t\t\t\t\telse if ((data1 as Data).date < (data0 as Data).date) return 1;\n\t\t\t\t\telse return 0;\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableSortData: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full grid gap-4\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Vertical headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _minWidth=\"auto\" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className=\"block\" />\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Horizontal headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _minWidth=\"auto\" _data={DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" />\n\t\t\t</section>\n\t\t</section>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/stateful-with-selection",
-      "group": "table",
-      "name": "stateful-with-selection",
-      "path": "packages/samples/react/src/components/table/stateful-with-selection.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/stateful-with-selection.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { getRoot } from '../../shares/react-roots';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },\n\t{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatefulWithSelection: FC = () => {\n\tconst [selectedValue, setSelectedValue] = useState<Data[] | null>();\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tselectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : ['AAA1004'],\n\t\tdisabledKeys: ['AAA1003', 'AAA1004'],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\tconst handleButtonClick = async () => {\n\t\tconst selection = await kolTableStatefulRef.current?.getSelection();\n\t\tsetSelectedValue(selection as Data[] | null);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatefulRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headers={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatefulRef}\n\t\t\t\t/>\n\t\t\t\t<div className=\"grid grid-cols-3 items-end gap-4 mt-4\">\n\t\t\t\t\t<KolButton\n\t\t\t\t\t\t_label=\"getSelection()\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid handleButtonClick();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButton>\n\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(selectedValue, null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/stateful-with-single-selection",
-      "group": "table",
-      "name": "stateful-with-single-selection",
-      "path": "packages/samples/react/src/components/table/stateful-with-single-selection.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/stateful-with-single-selection.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { getRoot } from '../../shares/react-roots';\nimport { useToasterService } from '../../hooks/useToasterService';\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n];\n\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatefulWithSingleSelection: FC = () => {\n\tconst [selectedValue, setSelectedValue] = useState<Data | null>();\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tmultiple: false,\n\t\tselectedKeys: selectedValue ? [selectedValue.internalIdentifier] : [],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | string | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\tconst handleButtonClick = async () => {\n\t\tconst selection = await kolTableStatefulRef.current?.getSelection();\n\t\tsetSelectedValue(selection as Data | null);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatefulRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with radio buttons for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Table with selection radio\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headers={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatefulRef}\n\t\t\t\t/>\n\t\t\t\t<div className=\"grid grid-cols-3 items-end gap-4 mt-4\">\n\t\t\t\t\t<KolButton\n\t\t\t\t\t\t_label=\"getSelection()\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid handleButtonClick();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButton>\n\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(selectedValue, null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/stateless",
-      "group": "table",
-      "name": "stateless",
-      "path": "packages/samples/react/src/components/table/stateless.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/stateless.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { KolTableStateless } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];\n\nexport const TableStateless: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolTableStateless can be used directly, with the KolTableStateful wrapper.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Table for demonstration purposes\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headerCells={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },\n\t\t\t\t\t\t\t{ key: 'center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },\n\t\t\t\t\t\t\t{ key: 'right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },\n\t\t\t\t\t\t\t{ key: 'nosort', label: 'no sort option' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'vertical-left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },\n\t\t\t\t\t\t\t{ key: 'vertical-center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },\n\t\t\t\t\t\t\t{ key: 'vertical-right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },\n\t\t\t\t\t\t\t{ key: 'vertical-nosort', label: 'no sort option' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t_on={{\n\t\t\t\t\tonSort: (_event, payload) => {\n\t\t\t\t\t\tconsole.log(payload);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/stateless-with-selection",
-      "group": "table",
-      "name": "stateless-with-selection",
-      "path": "packages/samples/react/src/components/table/stateless-with-selection.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/stateless-with-selection.tsx",
-      "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },\n\t{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['AAA1002', 'AAA1004']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tselectedKeys,\n\t\tkeyPropertyName: 'internalIdentifier',\n\t\tdisabledKeys: ['AAA1003', 'AAA1004'],\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[] | SelectionValue) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(Array.isArray(selection) ? selection : [selection]);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/stateless-with-settings-menu",
-      "group": "table",
-      "name": "stateless-with-settings-menu",
-      "path": "packages/samples/react/src/components/table/stateless-with-settings-menu.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/stateless-with-settings-menu.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { KolTableStateless } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\ntype Data = {\n\tid: string;\n\tname: string;\n\trole: string;\n\temail: string;\n\tactive: string;\n};\nconst DATA: Data[] = [\n\t{ id: 'U1001', name: 'Alice Johnson', role: 'Admin', email: 'alice@example.org', active: 'Yes' },\n\t{ id: 'U1002', name: 'Bob Smith', role: 'Editor', email: 'bob@example.org', active: 'No' },\n\t{ id: 'U1003', name: 'Carol Lee', role: 'Viewer', email: 'carol@example.org', active: 'Yes' },\n\t{ id: 'U1004', name: 'David Kim', role: 'Editor', email: 'david@example.org', active: 'Yes' },\n];\n\nexport const TableStatelessWithSettingsMenu: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows <code>KolTableStateless</code> with the settings menu enabled via\n\t\t\t\t<code>_hasSettingsMenu</code>.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateless\n\t\t\t_label=\"Users (stateless with settings menu)\"\n\t\t\t_minWidth=\"auto\"\n\t\t\tclassName=\"w-full\"\n\t\t\t_hasSettingsMenu={true}\n\t\t\t_headerCells={{\n\t\t\t\thorizontal: [\n\t\t\t\t\t[\n\t\t\t\t\t\t{ key: 'id', label: 'ID', textAlign: 'center' },\n\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'center' },\n\t\t\t\t\t\t{ key: 'role', label: 'Role', textAlign: 'center' },\n\t\t\t\t\t\t{ key: 'email', label: 'E-Mail', textAlign: 'center' },\n\t\t\t\t\t\t{ key: 'active', label: 'Active', textAlign: 'center' },\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t}}\n\t\t\t_data={DATA}\n\t\t\t_on={{\n\t\t\t\tonSort: (_e, payload) => console.log('sort', payload),\n\t\t\t\tonSelectionChange: (_e, value) => console.log('selection', value),\n\t\t\t}}\n\t\t/>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/stateless-with-single-selection",
-      "group": "table",
-      "name": "stateless-with-single-selection",
-      "path": "packages/samples/react/src/components/table/stateless-with-single-selection.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/stateless-with-single-selection.tsx",
-      "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'Foo Disabled', internalIdentifier: `AAA1003` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSingleSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['1002']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tmultiple: false,\n\t\tselectedKeys,\n\t\tdisabledKeys: ['AAA1003'],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[] | SelectionValue) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(Array.isArray(selection) ? selection : [selection]);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/sticky-header",
-      "group": "table",
-      "name": "sticky-header",
-      "path": "packages/samples/react/src/components/table/sticky-header.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/sticky-header.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { SampleDescription } from '../SampleDescription';\nimport { COMPLEX_DATA } from './test-complex-data';\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right' },\n\t\t\t{ label: 'Common Name', key: 'common_name', textAlign: 'left' },\n\t\t\t{ label: 'Scientific Name', key: 'scientific_name', textAlign: 'left' },\n\t\t\t{ label: 'EMail', key: 'email', textAlign: 'left' },\n\t\t\t{ label: 'IP Address', key: 'ip_address', textAlign: 'center' },\n\t\t\t{ label: 'User Name', key: 'user_name', textAlign: 'left' },\n\t\t\t{ label: 'Bitcoin Address', key: 'bitcoin_address', textAlign: 'center' },\n\t\t\t{ label: 'Street Address', key: 'street_address', textAlign: 'center' },\n\t\t\t{ label: 'IBAN', key: 'iban', textAlign: 'left' },\n\t\t],\n\t],\n};\n\nexport const TableStickyHeader: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTableStateful with horizontal and vertical scrollbars. It should be focusable and scrollable with the keyboard. The table headline\n\t\t\t\tshould be sticky at the top of the table.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolHeading _level={2} _label=\"Sticky headers\" />\n\t\t<KolTableStateful _label=\"Sort a date column\" _minWidth=\"1800px\" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/with-footer",
-      "group": "table",
-      "name": "with-footer",
-      "path": "packages/samples/react/src/components/table/with-footer.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/with-footer.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TableWithFooter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with footer data.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful\n\t\t\tclassName=\"w-full\"\n\t\t\t_label=\"Business hours\"\n\t\t\t_minWidth=\"auto\"\n\t\t\t_headers={{\n\t\t\t\thorizontal: [\n\t\t\t\t\t[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'District',\n\t\t\t\t\t\t\tkey: 'asp',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Monday',\n\t\t\t\t\t\t\tkey: 'monday',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Tuesday',\n\t\t\t\t\t\t\tkey: 'tuesday',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Wednesday',\n\t\t\t\t\t\t\tkey: 'wednesday',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Thursday',\n\t\t\t\t\t\t\tkey: 'thursday',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Friday',\n\t\t\t\t\t\t\tkey: 'friday',\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t}}\n\t\t\t_data={[\n\t\t\t\t{\n\t\t\t\t\tasp: 'Center',\n\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\tfriday: '08:00',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tasp: 'Tiergarten',\n\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\tfriday: '08:00',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tasp: 'Maxvorstadt',\n\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\tfriday: '08:00',\n\t\t\t\t},\n\t\t\t]}\n\t\t\t_dataFoot={[\n\t\t\t\t{\n\t\t\t\t\ttuesday: \"Lunch break from 11 to 14 o'clock\",\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/table/with-pagination",
-      "group": "table",
-      "name": "with-pagination",
-      "path": "packages/samples/react/src/components/table/with-pagination.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/table/with-pagination.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTableStateful } from '@public-ui/react-v19';\n\nimport { DATE_FORMATTER } from './formatter';\nimport { SampleDescription } from '../SampleDescription';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order' },\n\t\t\t{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\nconst PAGINATION: KoliBriTablePaginationProps = { _page: 2 };\n\nexport const TableWithPagination: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>\n\t\t</SampleDescription>\n\t\t<div className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Table description\" _minWidth=\"auto\" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/tabs/align",
-      "group": "tabs",
-      "name": "align",
-      "path": "packages/samples/react/src/components/tabs/align.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/tabs/align.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport type { AlignPropType } from '@public-ui/components';\n\nconst tabs = [\n\t{\n\t\t_icons: 'codicon codicon-pie-chart',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'codicon codicon-calendar',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'codicon codicon-briefcase',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'codicon codicon-telescope',\n\t\t_label: 'Last tab',\n\t},\n];\n\nexport const TabsAlign: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTabs with the property <code>_align</code> set to <code>left</code>, <code>right</code>, <code>top</code> and <code>bottom</code>.\n\t\t\t</p>\n\t\t</SampleDescription>\n\t\t<div className=\"grid gap-8\">\n\t\t\t{(['left', 'right', 'top', 'bottom'] as AlignPropType[]).map((align) => {\n\t\t\t\tconst text = `Tabs with ${align} align`;\n\t\t\t\treturn (\n\t\t\t\t\t<div key={align} className=\"grid gap-4\">\n\t\t\t\t\t\t<KolHeading _level={2} _label={text} />\n\t\t\t\t\t\t<KolTabs _tabs={tabs} _align={align} _label={text}>\n\t\t\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t\t\t</KolTabs>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/tabs/basic",
-      "group": "tabs",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/tabs/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/tabs/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'codicon codicon-pie-chart',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'codicon codicon-calendar',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'codicon codicon-briefcase',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'codicon codicon-telescope',\n\t\t_label: 'Last tab',\n\t},\n];\n\nconst tabsWithoutIcons = tabs.map((tab) => ({\n\t...tab,\n\t_icons: undefined,\n}));\n\nexport const TabsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTabs _tabs={tabsWithoutIcons} _label=\"Regular tabs\">\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\n\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with icons\">\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/tabs/behavior",
-      "group": "tabs",
-      "name": "behavior",
-      "path": "packages/samples/react/src/components/tabs/behavior.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/tabs/behavior.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'codicon codicon-pie-chart',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'codicon codicon-calendar',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'codicon codicon-briefcase',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'codicon codicon-telescope',\n\t\t_label: 'Last tab',\n\t},\n];\n\nexport const TabsBehavior: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTabs with the property <code>_behavior</code> set to <code>select-manual</code> and <code>select-automatic</code>.\n\t\t\t</p>\n\t\t\t<p>This property allows controlling when an arrow key is pressed whether the tab change takes place right away or only focuses the tab caption.</p>\n\t\t</SampleDescription>\n\t\t<div className=\"grid gap-8\">\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label='Tabs with \"select manual\" behavior' />\n\t\t\t\t<KolTabs _tabs={tabs} _behavior=\"select-manual\" _label=\"Tabs with select manual behavior\">\n\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t</KolTabs>\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label='Tabs with \"select automatic\" behavior' />\n\t\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _behavior=\"select-automatic\" _label=\"Tabs with select automatic behavior\">\n\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t</KolTabs>\n\t\t\t</div>\n\t\t</div>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/tabs/create-button",
-      "group": "tabs",
-      "name": "create-button",
-      "path": "packages/samples/react/src/components/tabs/create-button.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/tabs/create-button.tsx",
-      "code": "import React, { useState } from 'react';\nimport type { FC } from 'react';\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CreateButton: FC = () => {\n\tconst [tabs, setTabs] = useState([\n\t\t{\n\t\t\t_label: 'First tab',\n\t\t},\n\t\t{\n\t\t\t_label: 'Second Tab',\n\t\t},\n\t]);\n\n\tconst addTab = () => {\n\t\tsetTabs([\n\t\t\t...tabs,\n\t\t\t{\n\t\t\t\t_label: `Tab #${tabs.length + 1}`,\n\t\t\t},\n\t\t]);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with create button\" _hasCreateButton _on={{ onCreate: addTab }}>\n\t\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t\t<div key={`tab-${index}`} slot={`tab-${index}`}>\n\t\t\t\t\t\tContents of {tab._label}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\n\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t</KolTabs>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/tabs/icons-only",
-      "group": "tabs",
-      "name": "icons-only",
-      "path": "packages/samples/react/src/components/tabs/icons-only.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/tabs/icons-only.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'codicon codicon-pie-chart',\n\t\t_label: 'First Tab',\n\t\t_hideLabel: true,\n\t},\n\t{\n\t\t_icons: 'codicon codicon-calendar',\n\t\t_label: 'Second Tab',\n\t\t_hideLabel: true,\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'codicon codicon-briefcase',\n\t\t_label: 'Disabled Tab',\n\t\t_hideLabel: true,\n\t},\n\t{\n\t\t_icons: 'codicon codicon-telescope',\n\t\t_label: 'Last Tab',\n\t\t_hideLabel: true,\n\t},\n];\nexport const TabsIconsOnly: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTabs with hidden labels.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTabs _label=\"Tabs with icons\" _tabs={tabs}>\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/textarea/adjust-height",
-      "group": "textarea",
-      "name": "adjust-height",
-      "path": "packages/samples/react/src/components/textarea/adjust-height.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/textarea/adjust-height.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolForm, KolTextarea } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore\nmagna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd\ngubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing\nelitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos\net accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor\nsit amet.`;\n\nexport const TextareaAdjustHeight: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_adjustHeight</code>-property of KolTextarea. The textarea automatically grows with its content.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolForm className=\"w-full\">\n\t\t\t<KolTextarea _adjustHeight={true} _value={VALUE} _label=\"Text input (auto grow)\" />\n\t\t</KolForm>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/textarea/basic",
-      "group": "textarea",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/textarea/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/textarea/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { TextareaVariants } from './partials/variants';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TextareaBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolTextarea renders a text field. The sample shows KolTextarea in a form context with different variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={TextareaVariants} showButtons={false} />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/textarea/resize",
-      "group": "textarea",
-      "name": "resize",
-      "path": "packages/samples/react/src/components/textarea/resize.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/textarea/resize.tsx",
-      "code": "import React from 'react';\n\nimport { KolForm, KolTextarea } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nexport const TextareaResize: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_resize</code>-property of KolTextarea. The sample textarea can (only) be resized in the given direction.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolForm className=\"w-full\">\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolTextarea _label=\"Text input (unset)\" />\n\t\t\t\t<KolTextarea _resize=\"vertical\" _label=\"Text input (vertical)\" />\n\t\t\t\t<KolTextarea _resize=\"none\" _label=\"Text input (none)\" />\n\t\t\t</div>\n\t\t</KolForm>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/textarea/rows",
-      "group": "textarea",
-      "name": "rows",
-      "path": "packages/samples/react/src/components/textarea/rows.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/textarea/rows.tsx",
-      "code": "import React from 'react';\n\nimport { KolForm, KolTextarea } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TextareaRows: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates the <code>_rows</code>-property of KolTextarea. The sample textarea has a fixed row number of 10.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolForm className=\"w-full\">\n\t\t\t<KolTextarea _rows={10} _label=\"Texteingabe\" />\n\t\t</KolForm>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/textarea/with-counter",
-      "group": "textarea",
-      "name": "with-counter",
-      "path": "packages/samples/react/src/components/textarea/with-counter.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/textarea/with-counter.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTextarea } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TextareaWithCounter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThe sample demonstrates various <code>KolTextarea</code> configurations — contrasting soft vs. hard <code>_maxLength</code> settings and the optional\n\t\t\t\t<code>_hasCounter</code> — including one instance without length limits.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col gap-4\">\n\t\t\t<KolTextarea _label=\"Textarea with soft max length\" _value={'Lorem Ipsum'} className=\"mt-2\" _maxLength={20} _hasCounter _maxLengthBehavior=\"soft\" />\n\t\t\t<KolTextarea _label=\"Textarea with max length\" _value={'Lorem Ipsum'} className=\"mt-2\" _maxLength={20} />\n\t\t\t<KolTextarea _label=\"Textarea with max length and counter\" _value={'Lorem Ipsum'} className=\"mt-2\" _maxLength={20} _hasCounter />\n\t\t\t<KolTextarea _label=\"Textarea with counter\" _value={'Lorem Ipsum'} className=\"mt-2\" _hasCounter />\n\t\t</section>\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/toast/basic",
-      "group": "toast",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/toast/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/toast/basic.tsx",
-      "code": "import React, { useEffect } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport { ToasterService } from '@public-ui/components';\nimport { KolButton } from '@public-ui/react-v19';\nimport type { AlertTypePropType } from '@public-ui/components';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const ToastBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultType = searchParams.get('type') as AlertTypePropType;\n\tconst toaster = ToasterService.getInstance(document);\n\tconst handleButtonClickSimple = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t\tonClose: () => {\n\t\t\t\tconsole.log('Simple toast has been closed.');\n\t\t\t},\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${defaultType}'`,\n\t\t\t\ttype: defaultType,\n\t\t\t});\n\t\t}\n\t}, [defaultType, toaster]);\n\n\tconst handleButtonClickComplex = () => {\n\t\tvoid toaster.enqueue({\n\t\t\trender: (element: HTMLElement, { close }) => {\n\t\t\t\tgetRoot(element).render(\n\t\t\t\t\t<>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label={'Hello World from Toast!'}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tconsole.log('Toast Button clicked!');\n\t\t\t\t\t\t\t\t\tclose();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>,\n\t\t\t\t);\n\t\t\t},\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleButtonClickOpenAndClose = async () => {\n\t\tconst close = await toaster.enqueue({\n\t\t\tdescription: 'I will disappear in two seconds...',\n\t\t\tlabel: `Good Bye`,\n\t\t\ttype: 'warning',\n\t\t});\n\n\t\tif (close) {\n\t\t\tsetTimeout(close, 2000);\n\t\t}\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample demonstrates the toast service with all its options.</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label=\"Show simple toast\" _on={{ onClick: handleButtonClickSimple }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show complex toast\" _on={{ onClick: handleButtonClickComplex }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show toast and close after 2 seconds\" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/toast/configurator",
-      "group": "toast",
-      "name": "configurator",
-      "path": "packages/samples/react/src/components/toast/configurator.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/toast/configurator.tsx",
-      "code": "import React, { useEffect, useMemo, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolButton, KolInputRadio } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nconst toastTypes = ['default', 'info', 'success', 'warning', 'error'] as const;\nconst toastTypeOptions = toastTypes.map((type) => ({\n\tlabel: type,\n\tvalue: type,\n}));\n\nconst isAlertType = (value: unknown): value is AlertTypePropType => {\n\treturn typeof value === 'string' && toastTypes.includes(value as AlertTypePropType);\n};\n\nexport const ToastConfigurator: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst queryType = searchParams.get('type');\n\tconst defaultType = isAlertType(queryType) ? queryType : undefined;\n\tconst [selectedType, setSelectedType] = useState<AlertTypePropType>(() => defaultType ?? 'default');\n\tconst toaster = useMemo<ToasterService>(() => ToasterService.getInstance(document), []);\n\n\tuseEffect(() => {\n\t\ttoastTypes.forEach((type) => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${type}'`,\n\t\t\t\ttype,\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\ttoaster.closeAll();\n\t\t};\n\t}, [toaster]);\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tsetSelectedType(defaultType);\n\t\t}\n\t}, [defaultType]);\n\n\tconst handleTypeChange = (_: Event, value: unknown) => {\n\t\tif (isAlertType(value)) {\n\t\t\tsetSelectedType(value);\n\t\t}\n\t};\n\n\tconst handleConfiguredToast = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Toast with type '${selectedType}'`,\n\t\t\ttype: selectedType,\n\t\t});\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates the toast service with all its options. Use the configuration below to choose a toast type and open a toast with the card\n\t\t\t\t\tvariant.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _label=\"Toast type\" _value={selectedType} _options={toastTypeOptions} _on={{ onChange: handleTypeChange }} />\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label={`Open ${selectedType} toast`} _on={{ onClick: handleConfiguredToast }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/toolbar/basic",
-      "group": "toolbar",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/toolbar/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/toolbar/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { KolHeading, KolToolbar } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ToolbarBasic: FC = () => {\n\tconst TOOLBAR_ITEMS = [\n\t\t{\n\t\t\t_label: 'Back',\n\t\t\t_hideLabel: true,\n\t\t\t_icons: {\n\t\t\t\tleft: {\n\t\t\t\t\ticon: 'codicon codicon-arrow-left',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t_label: 'Next',\n\t\t\t_hideLabel: true,\n\t\t\t_icons: {\n\t\t\t\tright: {\n\t\t\t\t\ticon: 'codicon codicon-arrow-right',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t_href: '#/back-page',\n\t\t\t_label: 'Simple Link 1',\n\t\t},\n\t\t{\n\t\t\t_href: '#/back-page',\n\t\t\t_label: 'Simple Link 3',\n\t\t},\n\t\t{\n\t\t\t_label: 'Bold',\n\t\t},\n\t];\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolToolbars renders a set of given control elements grouped into one toolbar where focus can be moved using the keyboard arrow keys. The sample\n\t\t\t\t\tfeatures button and link elements.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolHeading _label=\"Orientation horizontal\" _level={2} />\n\t\t\t\t<KolToolbar class=\"block w-fit\" _label=\"Toolbar\" _items={TOOLBAR_ITEMS} />\n\n\t\t\t\t<KolHeading _label=\"Orientation vertical\" _level={2} />\n\t\t\t\t<KolToolbar class=\"block w-fit\" _label=\"Toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/toolbar/disabled",
-      "group": "toolbar",
-      "name": "disabled",
-      "path": "packages/samples/react/src/components/toolbar/disabled.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/toolbar/disabled.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { KolToolbar } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ToolbarDisabled: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolToolbars with some of the elements disabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolToolbar\n\t\t\t\t_label=\"Toolbar\"\n\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t_items={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Back',\n\t\t\t\t\t\t_disabled: true,\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_icons: {\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-arrow-left',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Next',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_icons: {\n\t\t\t\t\t\t\tright: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-arrow-right',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t_label: 'Simple Link 1',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t_disabled: true,\n\t\t\t\t\t\t_label: 'Simple Link 3',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Bold',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/tree/basic/:subPage",
-      "group": "tree",
-      "name": "basic/:subPage",
-      "path": "packages/samples/react/src/components/tree/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/tree/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useContext, useState } from 'react';\nimport { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';\nimport { getRandomEmoji } from '../../shares/randomEmoji';\nimport { useParams } from 'react-router';\nimport { HideMenusContext } from '../../shares/HideMenusContext';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TreeBasic: FC = () => {\n\tconst hideMenus = useContext(HideMenusContext);\n\tconst { subPage } = useParams();\n\tconst [homeLabel, setHomeLabel] = useState('1 Home');\n\tconst [showPets, setShowPets] = useState(false);\n\tconst [showEurope, setShowEurope] = useState(false);\n\tconst [showProducts, setShowProducts] = useState(true);\n\tconst updateHomeLabel = () => {\n\t\tsetHomeLabel(`1 Home ${getRandomEmoji()}`);\n\t};\n\n\tconst getItemProps = (page: string) => {\n\t\treturn {\n\t\t\t_href: `#/tree/basic/${page}${hideMenus ? '?hideMenus' : ''}`,\n\t\t\t_active: page === subPage,\n\t\t};\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolTree renders a keyboard accessible nested navigation. Branches of the tree can be collapsed or expanded.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolTree _label=\"Sitemap\" class=\"block w-fit\">\n\t\t\t\t<KolTreeItem _label={homeLabel} {...getItemProps('home')}></KolTreeItem>\n\t\t\t\t<KolTreeItem _label=\"2 About (open initially)\" {...getItemProps('about')} _open>\n\t\t\t\t\t<KolTreeItem _label=\"2.0 Legal\" {...getItemProps('legal')}></KolTreeItem>\n\t\t\t\t\t<KolTreeItem _label=\"2.1 Team\" {...getItemProps('team')}>\n\t\t\t\t\t\t<KolTreeItem _label=\"2.1.1. Values\" {...getItemProps('values')}></KolTreeItem>\n\t\t\t\t\t\t<KolTreeItem _label=\"2.1.2. Members\" {...getItemProps('members')}>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.2.1 Humans\" {...getItemProps('humans')}></KolTreeItem>\n\t\t\t\t\t\t\t{showPets && <KolTreeItem _label=\"2.1.2.2 Pets\" {...getItemProps('pets')}></KolTreeItem>}\n\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3 Locations\" {...getItemProps('locations')}>\n\t\t\t\t\t\t\t{showEurope && (\n\t\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3.1 Europe\" {...getItemProps('europe')}>\n\t\t\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3.1.1 Denmark\" {...getItemProps('denmark')} />\n\t\t\t\t\t\t\t\t\t<KolTreeItem _label=\"2.1.3.1.2 Netherlands\" {...getItemProps('netherlands')} />\n\t\t\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t</KolTreeItem>\n\t\t\t\t</KolTreeItem>\n\t\t\t\t{showProducts && (\n\t\t\t\t\t<KolTreeItem _label=\"3. Products\" {...getItemProps('products')}>\n\t\t\t\t\t\t<KolTreeItem _label=\"3.1 Home\" {...getItemProps('home-products')}>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"3.1.1 Refrigerators\" {...getItemProps('fridges')}></KolTreeItem>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"3.1.2 Coffee makers\" {...getItemProps('coffee-makers')}></KolTreeItem>\n\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t\t<KolTreeItem _label=\"3.1 Office\" {...getItemProps('office-products')}>\n\t\t\t\t\t\t\t<KolTreeItem _label=\"3.2.1 Printers\" {...getItemProps('printers')}></KolTreeItem>\n\t\t\t\t\t\t</KolTreeItem>\n\t\t\t\t\t</KolTreeItem>\n\t\t\t\t)}\n\t\t\t</KolTree>\n\n\t\t\t<p>Current tree item: {subPage ?? 'none'}</p>\n\n\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t<KolButton _label=\"Change label for '1 Home'\" _on={{ onClick: updateHomeLabel }}></KolButton>\n\t\t\t\t<KolButton _label=\"Toggle '2.1.2.2 Pets'\" _on={{ onClick: () => setShowPets(!showPets) }}></KolButton>\n\t\t\t\t<KolButton _label=\"Toggle '2.2.1 Europe' (two levels at once)\" _on={{ onClick: () => setShowEurope(!showEurope) }}></KolButton>\n\t\t\t\t<KolButton _label=\"Toggle '3. Products'\" _on={{ onClick: () => setShowProducts(!showProducts) }}></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/version/basic",
-      "group": "version",
-      "name": "basic",
-      "path": "packages/samples/react/src/components/version/basic.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/version/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolVersion } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nexport const VersionBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolVersion renders a label showing the given version number.</p>\n\t\t</SampleDescription>\n\n\t\t<KolVersion _label=\"1.1.1\" />\n\t</>\n);\n",
-      "kind": "sample"
-    },
-    {
-      "id": "sample/version/context",
-      "group": "version",
-      "name": "context",
-      "path": "packages/samples/react/src/components/version/context.tsx",
-      "absolutePath": "/home/runner/work/kolibri/kolibri/packages/samples/react/src/components/version/context.tsx",
-      "code": "import React from 'react';\n\nimport { KolVersion } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const VersionContext: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolVersion inline with text paragraph content.</p>\n\t\t</SampleDescription>\n\n\t\t<p>\n\t\t\t<KolVersion _label=\"1.0.0\" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna\n\t\t\taliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n\t\t\tipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t</p>\n\t</>\n);\n",
-      "kind": "sample"
-    }
-  ],
-  "generatedAt": "2025-10-12T03:00:19.944Z",
-  "buildMode": "prebuild"
-}