npm - @public-ui/mcp - Versions diffs - 4.0.0-beta.1 → 4.0.0-rc.1 - Mend

@public-ui/mcp 4.0.0-beta.1 → 4.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +5 -5
package/shared/sample-index.json +32 -32

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/mcp",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-rc.1",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -42,14 +42,14 @@
     }
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "1.24.3",
+    "@modelcontextprotocol/sdk": "1.25.2",
     "express": "5.2.1",
     "fuse.js": "7.1.0",
     "zod": "3.25.76",
-    "@public-ui/components": "4.0.0-beta.1"
+    "@public-ui/components": "4.0.0-rc.1"
   },
   "devDependencies": {
-    "@modelcontextprotocol/inspector": "0.17.5",
+    "@modelcontextprotocol/inspector": "0.18.0",
     "@types/express": "5.0.6",
     "@types/node": "24.10.4",
     "@typescript-eslint/eslint-plugin": "7.18.0",
@@ -58,7 +58,7 @@
     "eslint-config-prettier": "9.1.2",
     "eslint-plugin-html": "8.1.3",
     "eslint-plugin-json": "3.1.0",
-    "knip": "5.73.4",
+    "knip": "5.80.0",
     "nodemon": "3.1.11",
     "prettier": "3.7.4",
     "prettier-plugin-organize-imports": "4.3.0",

package/shared/sample-index.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "metadata": {
-    "generatedAt": "2025-12-22T13:52:32.345Z",
+    "generatedAt": "2026-01-08T12:15:17.384Z",
     "buildMode": "ci",
     "counts": {
       "total": 232,
@@ -10,7 +10,7 @@
       "totalScenarios": 15
     },
     "repo": {
-      "commit": "4bcf5743f126c326d0d7f69fad00fbc1ec398eb1",
+      "commit": "de123fb907547ab4a389fb5ece3ede15230e5239",
       "branch": "develop",
       "repoUrl": "https://github.com/public-ui/kolibri"
     }
@@ -21,7 +21,7 @@
       "group": "docs",
       "name": "AGENTS",
       "path": "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- Never add a `packageManager` field to any `package.json` file.\n- Avoid that branch name may contain hidden characters.\n- If something does not work, check in the event of an error whether all dependent submodules have been built.\n- To build a single package faster, run commands with downstream dependents using `pnpm --filter ...<package>` (e.g., `pnpm --filter ...@public-ui/sample-react build`).\n\n## 🚨 Format-first rule\n\n> **Stop before you commit:** run the formatter so CI never rejects your patch for style drift.\n\n1. Run `pnpm format` from the repo root whenever you change code, docs or configs.\n2. If you only touched one package, you may instead run `pnpm --filter <package> format` for a quicker pass.\n3. Re-stage the affected files (`git add -u`) so the formatted result is what lands in the commit.\n\nNo package scripts in this repo need extra flags such as `-- --write`; the scripts already know when to write changes versus just check.\n\n## Semantic Versioning\n\nThis repository follows **Semantic Versioning** (SemVer) for all packages. Each package version is defined in its own `package.json` file. The versioning scheme is as follows:\n\n- **Major version**: Incremented for incompatible API changes.\n- **Minor version**: Incremented for adding functionality in a backwards-compatible manner.\n- **Patch version**: Incremented for backwards-compatible bug fixes.\n\nIf we deprecate a feature, we will mark it as deprecated in the code and documentation, but we will not remove it immediately. Instead, we will provide a migration guide (migration\\*.md) for users to transition to the new feature. Also we provide a migration tool in the `packages/tools/kolibri-cli` package to help with the migration process. You have to add a migration task from the previous version to the new version in the `packages/tools/kolibri-cli/src/migrations` folder. In the migration package, are a lot of migration tasks already implemented, so you can use them as a reference.\n\n## Project Structure\n\n- `packages/components` – Stencil based web components\n  - `packages/components/src/component` – components\n  - `packages/components/src/schema` – schema definitions for all components\n- `packages/samples` – sample applications demonstrating usage\n  - `packages/samples/angular` – Angular sample app; do not edit\n  - `packages/samples/react` – React sample app; all samples; write component samples here\n- `packages/adapters/*` – generated framework integration packages; do not edit\n- `packages/themes` – style themes and assets\n  - `packages/themes/default` – primary maintained standard theme\n  - All other themes are not actively maintained\n- `packages/tools/kolibri-cli` – helper CLI for migration\n- Documentation lives in `docs/`.\n- Do always ignore and do not edit all `assets` folders in all packages, as these are generated by the build process and should not be edited manually. If you need to change something in the assets, you have to change it in the source code and rebuild the package.\n\n## Theming\n\nThe theming is realized with adopted style sheets on web components and will be adopted at the mounted hook of the components. All following styling rules are only relevant for the `components` and `themes` packages.\n\n### The 5 styling layers\n\n1. **A11y Preset layer**: This layer comes out of the `adopted-style-sheets` package and contains the basic styles for accessibility. It is applied to all components.\n2. **Basis Global layer**: This layer contains the basis global styles for all components and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n3. **Basis Component layer**: This layer contains the basis styles for one component and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n4. **Theme Global layer**: This layer contains the global styles for all components of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n5. **Theme Component layer**: This layer contains the component specific styles for one component of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n\n### Global accessibility styles\n\n```css\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: #{rem(44)};\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of rem(44).\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\t.kol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n```\n\n### Styling rules\n\nThe basis global layer set the default font-size and box-sizing for all components.\n\n```css\n@layer kol-global {\n\t:host {\n\t\tfont-size: rem(16);\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n  ...\n}\n```\n\n### Custom Theming rules\n\nThe custom theme layer is used to set the colors and other theme specific styles. The custom theme layer should not contain any layout styles, as these are already set in the basis global and component layers.\n\nFor example, generally the font-family is set in the theme global layer, on the `:host` element, so that all components inherit the font-family from the theme. The font-size is set in the basis global layer, so that all components inherit the font-size from the basis global layer. But it is possible to set a other base font-size in the theme global layer, if needed.\n\n```css\n@layer kol-theme-global {\n\t:host {\n\t\t--font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n\t\t--font-size: var(--kolibri-font-size, #{rem(16)});\n    ...\n\t}\n\n\t:host {\n\t\tfont-size: var(--font-size);\n\n\t\t* {\n\t\t\tfont-family: var(--font-family);\n\t\t}\n\t}\n  ...\n}\n```\n\nIn the theme component layer, you can set what ever you need to realize your own custom style guidelines. For example, you can set the colors, borders, shadows, etc. for the component.\n\n```css\n@layer kol-theme-component {\n  ...\n}\n```\n\n### CSS Custom Properties and SASS Variables\n\nCSS custom properties remain part of the global cascade and are not isolated by the Shadow DOM.\nOverusing them in theme files can collide with variables defined on a host page.\nExpose only well‑prefixed design tokens as custom properties and rely on SASS variables for\ninternal calculations to keep components robust and avoid unintended style leaks.\n\n### General rules for custom themes\n\n- Do not use `!important` in your styles, as this will override the styles of the basis global and component layers.\n- Do only overwrite styling definitions you will really customize. Do not set styling definitions that are already set (redundant) in the basis global and component layers, as this will override the styles of the basis global and component layers.\n- Do not `inherit` styles over the `:host` element, as this will override the styles of the basis global and component layers. This makes your component less robust from outside environment styles. Only the `kol-icon` inherits some specific styles, like `color`, `font-size`, `font-family` and `line-height`, as these are needed for the icon to be displayed correctly inline to this neighbored elements.\n- Do not set the default `font-family`, `font-size` or `box-sizing` in the basis or theme component layer (redundant), as these are already set in the basis global layers. If you need to set a different font-family or font-size, you can do this in the theme global layer.\n- Do not set `margin` or `padding` in the basis global and component layers. If you need to set a different margin or padding, you can do this in the theme global or component layers.\n- Do not use `overflow: hidden` in styling or theming, as it often causes issues for reuse and should be avoided.\n- **Do not use `@layer` declarations in utility files**: Helper files, mixin files, and partial files (starting with `_`) should not contain `@layer` declarations. These files are utilities and should be layer-agnostic. This is enforced by the custom Stylelint rule `kolibri/no-layer-in-utility-files`.\n\n## Samples\n\nThe samples are located in `packages/samples/react` and demonstrate how to use the components in react. Each component has its own folder and the basic sample are in `basic.tsx`. Other stories can be added in the same folder. All samples of a component are registered in the `routes.ts` file.\n\n## Coding Conventions\n\n- Formatting is enforced via **Prettier** with settings defined in `prettier.config.js` (print width 160, single quotes, tabs).\n- `.editorconfig` sets `indent_style = tab` and `max_line_length = 160` for code files. Markdown and YAML files use spaces.\n- ESLint and Stylelint are run using `pnpm lint`. 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- Do not disable ESLint, Stylelint or TypeScript rules inline. Fix the code instead of turning such rules off.\n- ESLint and Stylelint are run using `pnpm lint`. Pre‑commit hooks run `lint-staged` which formats and lints changed files.\n- Lists and enumerations in code should be kept in alphabetical order (see `docs/tutorials/NEW_COMPONENT.md`).\n- Commit messages follow the **Conventional Commits** specification.\n- See also the [Contributing Guide](CONTRIBUTING.md) for more details on coding conventions and best practices.\n- Spell \"KoliBri\" with this casing in all documentation and code. The only exception is the component named KolKolibri.\n- Use ESM import syntax in browser code and scripts whenever supported, instead of `require` imports.\n- Do not create barrel files (e.g. `index.ts` that re-export modules). Import modules directly instead.\n- Do not place constant declarations before import statements; imports must always be at the very top of the file.\n- **Scripts must be platform-independent**: All scripts in the `scripts/` folder must work on Windows, macOS, and Linux without requiring external tools or platform-specific dependencies. Use Node.js built-in modules instead of external command-line tools like `rg`, `grep`, `find`, etc.\n\n## Linting and Formatting\n\n- Run `pnpm lint` to check for linting errors across all packages. This script runs ESLint, Stylelint and TypeScript checks. You can try to automatically fix linting issues with `pnpm lint:eslint --fix`, but this may not resolve all issues.\n- Ensure all packages are built by running `pnpm build` before executing `pnpm lint` or `pnpm test`. Some packages rely on generated artifacts that linting and testing depend on.\n- Run `pnpm format` to format all code files using Prettier. You can try to automatically fix linting issues with `pnpm format -w`, but this may not resolve all issues.\n- If your pull request only modifies Markdown files, skip `pnpm build`, `pnpm lint` and `pnpm test`. Just format the Markdown using `pnpm format` or Prettier.\n\n### Pre-commit checklist\n\n- **Always run `pnpm format` (or `pnpm --filter <package> format` for a single workspace) right before committing.** Formatting failures are one of the most common reasons for blocked quality gates, so make this the last step before `git commit` even for documentation-only changes.\n- After formatting, re-stage affected files with `git add -u` so the formatted content is what gets committed.\n\n## Testing\n\n- Run `pnpm test` from the repository root to execute all unit and integration tests.\n- Visual and snapshot tests can be updated with `pnpm test:update` or via the `update-snapshots.yml` GitHub workflow (see `CONTRIBUTING.md`).\n- Individual packages provide their own test scripts (e.g. `pnpm --filter @public-ui/components test:unit`).\n\n## Pull Request Guidelines\n\n- PR titles should be meaningful as they appear in the release notes.\n- Every PR must link to its issue and contain only changes related to that issue.\n- Ensure automated tests pass and manual testing is completed when required.\n- Update documentation or migration guides if your changes affect them.\n",
+      "code": "# Agent Instructions\n\nThis repository is a monorepo managed with **pnpm** and **Nx**. It contains multiple packages under `packages/` such as web components, themes, adapters, samples and tooling.\n\n## Handling hints\n\nWe have a monorepo structure with multiple packages, each with its own `package.json`. The root `package.json` contains shared dependencies and scripts. Use `pnpm` commands to manage dependencies and run scripts across packages.\n\n- To install dependencies, use `pnpm i` at the root level. This will install all dependencies for all packages.\n- If you change a dependency in a package:\n  - Use only exact version numbers in `package.json`. Other peers will not be able to use the package if you can use a range version.\n  - You need to run `pnpm i` at the root level. This updates the lockfile and ensures all packages are using the correct versions.\n- Never add a `packageManager` field to any `package.json` file.\n- Avoid that branch name may contain hidden characters.\n- If something does not work, check in the event of an error whether all dependent submodules have been built.\n- To build a single package faster, run commands with downstream dependents using `pnpm --filter ...<package>` (e.g., `pnpm --filter ...@public-ui/sample-react build`).\n\n## 🚨 Format-first rule\n\n> **Stop before you commit:** run the formatter so CI never rejects your patch for style drift.\n\n1. Run `pnpm format` from the repo root whenever you change code, docs or configs.\n2. If you only touched one package, you may instead run `pnpm --filter <package> format` for a quicker pass.\n3. Re-stage the affected files (`git add -u`) so the formatted result is what lands in the commit.\n\nNo package scripts in this repo need extra flags such as `-- --write`; the scripts already know when to write changes versus just check.\n\n## Semantic Versioning\n\nThis repository follows **Semantic Versioning** (SemVer) for all packages. Each package version is defined in its own `package.json` file. The versioning scheme is as follows:\n\n- **Major version**: Incremented for incompatible API changes.\n- **Minor version**: Incremented for adding functionality in a backwards-compatible manner.\n- **Patch version**: Incremented for backwards-compatible bug fixes.\n\nIf we deprecate a feature, we will mark it as deprecated in the code and documentation, but we will not remove it immediately. Instead, we will provide a migration guide (migration\\*.md) for users to transition to the new feature. Also we provide a migration tool in the `packages/tools/kolibri-cli` package to help with the migration process. You have to add a migration task from the previous version to the new version in the `packages/tools/kolibri-cli/src/migrations` folder. In the migration package, are a lot of migration tasks already implemented, so you can use them as a reference.\n\n## Project Structure\n\n- `packages/components` – Stencil based web components\n  - `packages/components/src/component` – components\n  - `packages/components/src/schema` – schema definitions for all components\n- `packages/samples` – sample applications demonstrating usage\n  - `packages/samples/angular` – Angular sample app; do not edit\n  - `packages/samples/react` – React sample app; all samples; write component samples here\n- `packages/adapters/*` – generated framework integration packages; do not edit\n- `packages/themes` – style themes and assets\n  - `packages/themes/default` – primary maintained standard theme\n  - All other themes are not actively maintained\n- `packages/tools/kolibri-cli` – helper CLI for migration\n- Documentation lives in `docs/`.\n- Do always ignore and do not edit all `assets` folders in all packages, as these are generated by the build process and should not be edited manually. If you need to change something in the assets, you have to change it in the source code and rebuild the package.\n\n## Theming\n\nThe theming is realized with adopted style sheets on web components and will be adopted at the mounted hook of the components. All following styling rules are only relevant for the `components` and `themes` packages.\n\n### The 5 styling layers\n\n1. **A11y Preset layer**: This layer comes out of the `adopted-style-sheets` package and contains the basic styles for accessibility. It is applied to all components.\n2. **Basis Global layer**: This layer contains the basis global styles for all components and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n3. **Basis Component layer**: This layer contains the basis styles for one component and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n4. **Theme Global layer**: This layer contains the global styles for all components of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n5. **Theme Component layer**: This layer contains the component specific styles for one component of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n\n### Global accessibility styles\n\n```css\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: #{rem(44)};\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of rem(44).\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\t.kol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n```\n\n### Styling rules\n\nThe basis global layer set the default font-size and box-sizing for all components.\n\n```css\n@layer kol-global {\n\t:host {\n\t\tfont-size: rem(16);\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n  ...\n}\n```\n\n### Custom Theming rules\n\nThe custom theme layer is used to set the colors and other theme specific styles. The custom theme layer should not contain any layout styles, as these are already set in the basis global and component layers.\n\nFor example, generally the font-family is set in the theme global layer, on the `:host` element, so that all components inherit the font-family from the theme. The font-size is set in the basis global layer, so that all components inherit the font-size from the basis global layer. But it is possible to set a other base font-size in the theme global layer, if needed.\n\n```css\n@layer kol-theme-global {\n\t:host {\n\t\t--font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n\t\t--font-size: var(--kolibri-font-size, #{rem(16)});\n    ...\n\t}\n\n\t:host {\n\t\tfont-size: var(--font-size);\n\n\t\t* {\n\t\t\tfont-family: var(--font-family);\n\t\t}\n\t}\n  ...\n}\n```\n\nIn the theme component layer, you can set what ever you need to realize your own custom style guidelines. For example, you can set the colors, borders, shadows, etc. for the component.\n\n```css\n@layer kol-theme-component {\n  ...\n}\n```\n\n### CSS Custom Properties and SASS Variables\n\nCSS custom properties remain part of the global cascade and are not isolated by the Shadow DOM.\nOverusing them in theme files can collide with variables defined on a host page.\nExpose only well‑prefixed design tokens as custom properties and rely on SASS variables for\ninternal calculations to keep components robust and avoid unintended style leaks.\n\n### General rules for custom themes\n\n- Do not use `!important` in your styles, as this will override the styles of the basis global and component layers.\n- Do only overwrite styling definitions you will really customize. Do not set styling definitions that are already set (redundant) in the basis global and component layers, as this will override the styles of the basis global and component layers.\n- Do not `inherit` styles over the `:host` element, as this will override the styles of the basis global and component layers. This makes your component less robust from outside environment styles. Only the `kol-icon` inherits some specific styles, like `color`, `font-size`, `font-family` and `line-height`, as these are needed for the icon to be displayed correctly inline to this neighbored elements.\n- Do not set the default `font-family`, `font-size` or `box-sizing` in the basis or theme component layer (redundant), as these are already set in the basis global layers. If you need to set a different font-family or font-size, you can do this in the theme global layer.\n- Do not set `margin` or `padding` in the basis global and component layers. If you need to set a different margin or padding, you can do this in the theme global or component layers.\n- Do not use `overflow: hidden` in styling or theming, as it often causes issues for reuse and should be avoided.\n- **Do not use `@layer` declarations in utility files**: Helper files, mixin files, and partial files (starting with `_`) should not contain `@layer` declarations. These files are utilities and should be layer-agnostic. This is enforced by the custom Stylelint rule `kolibri/no-layer-in-utility-files`.\n\n## Samples\n\nThe samples are located in `packages/samples/react` and demonstrate how to use the components in react. Each component has its own folder and the basic sample are in `basic.tsx`. Other stories can be added in the same folder. All samples of a component are registered in the `routes.ts` file.\n\n## Coding Conventions\n\n- Formatting is enforced via **Prettier** with settings defined in `prettier.config.js` (print width 160, single quotes, tabs).\n- `.editorconfig` sets `indent_style = tab` and `max_line_length = 160` for code files. Markdown and YAML files use spaces.\n- ESLint and Stylelint are run using `pnpm lint`. Lint rules should **not** be disabled via inline comments. Instead, describe the problem and work towards a clean solution.\n- Lists and enumerations in code should be kept in alphanumeric order. This also applies to import specifiers and union type literals.\n- Do not disable ESLint, Stylelint or TypeScript rules inline. Fix the code instead of turning such rules off.\n- ESLint and Stylelint are run using `pnpm lint`.\n- Lists and enumerations in code should be kept in alphabetical order (see `docs/tutorials/NEW_COMPONENT.md`).\n- Commit messages follow the **Conventional Commits** specification.\n- See also the [Contributing Guide](CONTRIBUTING.md) for more details on coding conventions and best practices.\n- Spell \"KoliBri\" with this casing in all documentation and code. The only exception is the component named KolKolibri.\n- Use ESM import syntax in browser code and scripts whenever supported, instead of `require` imports.\n- Do not create barrel files (e.g. `index.ts` that re-export modules). Import modules directly instead.\n- Do not place constant declarations before import statements; imports must always be at the very top of the file.\n- **Scripts must be platform-independent**: All scripts in the `scripts/` folder must work on Windows, macOS, and Linux without requiring external tools or platform-specific dependencies. Use Node.js built-in modules instead of external command-line tools like `rg`, `grep`, `find`, etc.\n\n## Linting and Formatting\n\n- Run `pnpm lint` to check for linting errors across all packages. This script runs ESLint, Stylelint and TypeScript checks. You can try to automatically fix linting issues with `pnpm lint:eslint --fix`, but this may not resolve all issues.\n- Ensure all packages are built by running `pnpm build` before executing `pnpm lint` or `pnpm test`. Some packages rely on generated artifacts that linting and testing depend on.\n- Run `pnpm format` to format all code files using Prettier. You can try to automatically fix linting issues with `pnpm format -w`, but this may not resolve all issues.\n- If your pull request only modifies Markdown files, skip `pnpm build`, `pnpm lint` and `pnpm test`. Just format the Markdown using `pnpm format` or Prettier.\n\n### Pre-commit checklist\n\n- **Always run `pnpm format` (or `pnpm --filter <package> format` for a single workspace) right before committing.** Formatting failures are one of the most common reasons for blocked quality gates, so make this the last step before `git commit` even for documentation-only changes.\n- After formatting, re-stage affected files with `git add -u` so the formatted content is what gets committed.\n\n## Testing\n\n- Run `pnpm test` from the repository root to execute all unit and integration tests.\n- Visual and snapshot tests can be updated with `pnpm test:update` or via the `update-snapshots.yml` GitHub workflow (see `CONTRIBUTING.md`).\n- Individual packages provide their own test scripts (e.g. `pnpm --filter @public-ui/components test:unit`).\n\n## Pull Request Guidelines\n\n- PR titles should be meaningful as they appear in the release notes.\n- Every PR must link to its issue and contain only changes related to that issue.\n- Ensure automated tests pass and manual testing is completed when required.\n- Update documentation or migration guides if your changes affect them.\n",
       "kind": "doc"
     },
     {
@@ -45,7 +45,7 @@
       "group": "docs",
       "name": "BREAKING_CHANGES.v4",
       "path": "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## Loader entry point\n\nImport the component loader from `@public-ui/components/loader`. The previous `@public-ui/components/dist/loader` path is no longer part of the public API surface.\n\n**Before:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\n```\n\n**After:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/loader';\n```\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- Input messages only render once the field is marked as `_touched`, regardless of the message type. Ensure `_touched` is set when a message should be displayed.\n- The `kolFocus()` and `kolFocusLink()` methods have been removed in v4. Use the native `focus()` method instead.\n  - **Migration note:** Runtime backward compatibility for `kolFocus()` and `kolFocusLink()` is not provided. If your code still calls these helper methods, you must update it (for example, by running the KoliBri migration CLI) to use the native `focus()` method on the relevant element.\n\n### kol-combobox & kol-single-select\n\n- `_hideClearButton` has been replaced with `_hasClearButton` (default: `true`). Set `_hasClearButton=\"false\"` to hide the clear button while keeping existing values intact. The migration CLI rewrites `_hide-clear-button` attributes and `_hideClearButton` props automatically, flipping boolean values so behaviour stays the same.\n\n### kol-nav\n\n- The `orientation` property has been removed from kol-nav. It is now always in vertical mode by default.\n\n**Before:**\n\n```html\n<kol-nav _orientation=\"vertical\" _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n**After (v4):**\n\n```html\n<kol-nav _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n### ToasterService and toast component\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### kol-modal → kol-dialog\n\n- The Modal component was renamed to Dialog. Use the new tag `<kol-dialog>` (or the `KolDialog` React wrapper) instead of `<kol-modal>` / `KolModal`.\n- No functional API changes are intended; this is a naming alignment. The migration CLI for v4 rewrites the tag name automatically.\n```\n\n### kol-table-stateless & kol-table-stateful\n\n#### Selection Callbacks\n\nThe `onSelectionChange` callback signatures have been simplified to always return arrays:\n\n**kol-table-stateless** - Always returns `KoliBriTableSelectionKeys` (array of keys):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys | KoliBriTableSelectionKey) => {\n\t// Type guard required\n\tconst keys = Array.isArray(selection) ? selection : [selection];\n\tsetSelectedKeys(keys);\n};\n```\n\n**After (v4):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys) => {\n\t// Direct usage - always an array\n\tsetSelectedKeys(selection);\n};\n```\n\n**kol-table-stateful** - Always returns `KoliBriTableDataType[] | null` (array of objects or null):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {\n\t// Type guard required for single selection\n\tif (Array.isArray(selection)) {\n\t\tsetSelectedData(selection);\n\t} else if (selection !== null) {\n\t\tsetSelectedData([selection]);\n\t}\n};\n```\n\n**After (v4):**\n\n````typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t// Direct usage - always an array or null\n\tsetSelectedData(selection || []);\n};\n### Pagination\n\n- The pagination text (e.g., \"Page 1 of 10\") is now integrated into the Pagination component itself. Previously, this text had to be provided by the application code or was handled by the Stateful Table component.\n- The `_page` property now automatically generates and displays the pagination information text within the component.\n\n**Before (Version 3):**\n\n```typescript\n// Application code had to provide pagination text\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n<div>Page {currentPage} of {totalPages}</div>\n\n// Or it was handled by Stateful Table\n<kol-table-stateful></kol-table-stateful>\n````\n\n**After (Version 4):**\n\n```typescript\n// Pagination component handles text internally\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n// Text is automatically displayed within the component\n```\n\n#### Settings Menu\n\nThe settings menu is now part of the `_horizontalHeaderCells` prop. The settings for visibility (`visible`), hidability (`hidable`), sortability (`sortable`), and resizability (`resizable`) are now managed directly through the header cell configuration.\n\n**Header Cell Properties:**\n\n- **`visible: boolean`** - Controls whether the column is currently displayed in the table. Users can toggle this in the settings menu if `hidable` is true.\n- **`hidable: boolean`** - Determines if the column can be hidden/shown by the user through the settings menu. If false, the visibility cannot be changed by the user (but may still be changed programmatically).\n- **`sortable: boolean`** - Controls whether a sort button appears in the column header. If true, users can click to sort. The current sort direction is indicated by `sortDirection` ('ASC', 'DESC', or undefined).\n- **`resizable: boolean`** - Determines if the column width can be adjusted by the user through the settings menu.\n- **`width: string`** - CSS width value (e.g., '20ch', '150px') that can be modified by users if `resizable` is true.\n\n**Before:**\n\n```tsx\n// Settings were applied immediately\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_tableSettings={tableSettings}\n\t_on={{\n\t\tonSettingsChange: (event, tableSettings) => {\n\t\t\t// Settings applied immediately\n\t\t\tsetTableSettings(tableSettings);\n\t\t},\n\t}}\n/>\n```\n\n**After:**\n\n```tsx\n// Settings are only applied after clicking \"Apply\"\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'firstName',\n\t\t\t\tlabel: 'First Name',\n\t\t\t\tvisible: true, // Column is displayed\n\t\t\t\thidable: true, // User can hide this column\n\t\t\t\tsortable: true, // User can sort by this column\n\t\t\t\tresizable: true, // User can resize this column\n\t\t\t\twidth: '20ch', // Current width\n\t\t\t\tsortDirection: 'ASC', // Current sort state\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'age',\n\t\t\t\tlabel: 'Age',\n\t\t\t\tvisible: true,\n\t\t\t\thidable: false, // This column cannot be hidden by user\n\t\t\t\tsortable: true,\n\t\t\t\tresizable: false, // Fixed width\n\t\t\t\twidth: '8ch',\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [],\n};\n\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_on={{\n\t\tonChangeHeaderCells: (event, headerCells) => {\n\t\t\t// Settings only updated after user confirms in the menu\n\t\t\t// The callback receives the complete header cell structure with both\n\t\t\t// horizontal and vertical cells. Only the horizontal cells may have\n\t\t\t// been modified by the settings menu; vertical cells are preserved unchanged.\n\t\t\tsetHeaderCells(headerCells);\n\t\t},\n\t}}\n/>;\n```\n\n**Behavior:**\n\n- When `_hasSettingsMenu={true}`, a settings button appears in the table header\n- Users can modify column visibility, width, and other properties through the settings dialog\n- Changes are only applied to the table when the user clicks \"Apply\" or \"OK\"\n- The `onChangeHeaderCells` callback receives the updated header cells after confirmation\n- Columns with `hidable={false}` cannot be toggled in the settings menu\n- Columns with `resizable={false}` cannot be resized by the user\n",
+      "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## Loader entry point\n\nImport the component loader from `@public-ui/components/loader`. The previous `@public-ui/components/dist/loader` path is no longer part of the public API surface.\n\n**Before:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\n```\n\n**After:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/loader';\n```\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- Input messages only render once the field is marked as `_touched`, regardless of the message type. Ensure `_touched` is set when a message should be displayed.\n- The `kolFocus()` and `kolFocusLink()` methods have been removed in v4. Use the native `focus()` method instead.\n  - **Migration note:** Runtime backward compatibility for `kolFocus()` and `kolFocusLink()` is not provided. If your code still calls these helper methods, you must update it (for example, by running the KoliBri migration CLI) to use the native `focus()` method on the relevant element.\n- DOM events emitted by components now use native event names without the `kol` prefix. Listen for `change`, `submit`, `click`, and similar names. All `kol*` event aliases have been removed.\n\n**Complete list of event name changes:**\n\n| Old Event Name         | New Event Name      |\n| ---------------------- | ------------------- |\n| `kolBlur`              | `blur`              |\n| `kolChange`            | `change`            |\n| `kolChangeHeaderCells` | `changeheadercells` |\n| `kolChangePage`        | `changepage`        |\n| `kolChangePageSize`    | `changepagesize`    |\n| `kolClick`             | `click`             |\n| `kolClose`             | `close`             |\n| `kolCreate`            | `create`            |\n| `kolFocus`             | `focus`             |\n| `kolInput`             | `input`             |\n| `kolKeydown`           | `keydown`           |\n| `kolMousedown`         | `mousedown`         |\n| `kolReset`             | `reset`             |\n| `kolSelect`            | `select`            |\n| `kolSelectionChange`   | `selectionchange`   |\n| `kolSort`              | `sort`              |\n| `kolSubmit`            | `submit`            |\n| `kolToggle`            | `toggle`            |\n\n**Before:**\n\n```ts\nelement.addEventListener('kolSubmit', handler);\nelement.dispatchEvent(new CustomEvent('kolChange', { detail: value }));\n```\n\n**After:**\n\n```ts\nelement.addEventListener('submit', handler);\nelement.dispatchEvent(new CustomEvent('change', { detail: value }));\n```\n\n> **W3C Standard Compliance:** All custom event names now follow the W3C naming convention and use lowercase letters only (see [W3C Event Reference](https://developer.mozilla.org/en-US/docs/Web/API/Document/selectionchange_event)). This includes custom events like `changeheadercells`, `changepage`, `changepagesize`, and `selectionchange`. While standard DOM events (like `blur`, `change`, `click`) were already lowercase, our custom composite event names have been updated from camelCase to lowercase for consistency with web standards.\n\n> **TypeScript note:** If you use TypeScript event maps or typed listeners, update any type declarations that still reference the old `kol*` event names. This includes global `HTMLElementEventMap` / `DocumentEventMap` augmentations, custom event map interfaces, and `CustomEvent` type aliases keyed by names like `'kolSubmit'` or `'kolChange'`. Replace those keys with the new native event names (for example, `'submit'`, `'change'`, `'changeheadercells'`, etc.) so your type checks stay in sync with the runtime events.\n\n**Migration examples for custom events:**\n\n```ts\n// Before (v3)\nelement.addEventListener('kolChangeHeaderCells', handler);\nelement.addEventListener('kolChangePage', handler);\nelement.addEventListener('kolSelectionChange', handler);\n\n// After (v4)\nelement.addEventListener('changeheadercells', handler);\nelement.addEventListener('changepage', handler);\nelement.addEventListener('selectionchange', handler);\n```\n\n### kol-combobox & kol-single-select\n\n- `_hideClearButton` has been replaced with `_hasClearButton` (default: `true`). Set `_hasClearButton=\"false\"` to hide the clear button while keeping existing values intact. The migration CLI rewrites `_hide-clear-button` attributes and `_hideClearButton` props automatically, flipping boolean values so behaviour stays the same.\n\n### kol-nav\n\n- The `orientation` property has been removed from kol-nav. It is now always in vertical mode by default.\n\n**Before:**\n\n```html\n<kol-nav _orientation=\"vertical\" _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n**After (v4):**\n\n```html\n<kol-nav _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n### ToasterService and toast component\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### kol-modal → kol-dialog\n\n- The Modal component was renamed to Dialog. Use the new tag `<kol-dialog>` (or the `KolDialog` React wrapper) instead of `<kol-modal>` / `KolModal`.\n- No functional API changes are intended; this is a naming alignment. The migration CLI for v4 rewrites the tag name automatically.\n```\n\n### kol-table-stateless & kol-table-stateful\n\n#### Selection Callbacks\n\nThe `onSelectionChange` callback signatures have been simplified to always return arrays:\n\n**kol-table-stateless** - Always returns `KoliBriTableSelectionKeys` (array of keys):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys | KoliBriTableSelectionKey) => {\n\t// Type guard required\n\tconst keys = Array.isArray(selection) ? selection : [selection];\n\tsetSelectedKeys(keys);\n};\n```\n\n**After (v4):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys) => {\n\t// Direct usage - always an array\n\tsetSelectedKeys(selection);\n};\n```\n\n**kol-table-stateful** - Always returns `KoliBriTableDataType[] | null` (array of objects or null):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {\n\t// Type guard required for single selection\n\tif (Array.isArray(selection)) {\n\t\tsetSelectedData(selection);\n\t} else if (selection !== null) {\n\t\tsetSelectedData([selection]);\n\t}\n};\n```\n\n**After (v4):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t// Direct usage - always an array or null\n\tsetSelectedData(selection || []);\n};\n```\n\n#### Header Cell Width and Label Requirements, \\_minWidth Removal\n\nThe `_minWidth` property has been removed from kol-table components. The table now uses `table-layout: fixed` in CSS. When `width` values are provided on header cells, the sum of all widths determines the table's minimum width.\n\n**Breaking Type Changes:**\n\n- `KoliBriTableCell.width` remains optional, but is now `number | undefined` (pixels only, no string units)\n  - When provided, must be a number (e.g., `200` for 200 pixels)\n  - When omitted, the column width is determined by CSS (auto-sized by content)\n\n**CSS Behavior Change:**\n\nThe table now uses `table-layout: fixed`, which provides:\n\n- Predictable column widths: Columns with explicit `width` are exactly as wide as specified\n- Better performance: Browser doesn't need to calculate widths based on content\n- Flexible layout: Columns without `width` are auto-sized; the table's minimum width is only the sum of explicitly defined column widths\n\n**Before (v3):**\n\n```typescript\n// _minWidth property on component, table-layout: auto (content-dependent widths)\n<kol-table-stateful _minWidth=\"400px\" _headerCells={headerCells}></kol-table-stateful>\n\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'name', label: 'Name' },                    // width optional\n\t\t\t{ key: 'age', label: 'Age', width: '150px' },      // width as string with unit\n\t\t],\n\t],\n\tvertical: [],\n};\n```\n\n**After (v4):**\n\n```typescript\n// _minWidth removed - table uses table-layout: fixed\n<kol-table-stateful _headerCells={headerCells}></kol-table-stateful>\n\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'name', label: 'Name' },                   // width optional - column auto-sizes\n\t\t\t{ key: 'age', label: 'Age', width: 150 },         // width as number (pixels)\n\t\t],\n\t],\n\tvertical: [],\n};\n// Table minimum width is 150px (only columns with explicit width are counted)\n```\n\n**Migration:**\n\n- Remove all `_minWidth` properties from table components\n- Convert any `width` string values (e.g., `'150px'`) to numbers (e.g., `150`)\n- The `width` property is optional – omit it if you want the column to auto-size\n- The `label` property is already required\n- With `table-layout: fixed`, columns with explicit widths are exact – plan your widths to accommodate content\n\n#### Multiple Header Rows and Width Calculation\n\nWhen using multiple header rows (e.g., a parent row with merged columns and a child row with individual columns), the table's minimum width is calculated by summing **all** width values from **all** header rows.\n\n**Important:** With multiple header rows, you should specify width on **either** the merged (parent) column **or** the individual (child) columns—not both. If you specify widths on both levels, all widths are summed together, which may result in a wider table than intended.\n\n**Guidelines:**\n\n- **Equal distribution:** Specify only the width of the merged (parent) column. Child columns will distribute the space equally based on their content.\n- **More control:** Specify widths on individual (child) columns instead of the merged column. This gives precise control over each column's width.\n\n**Example 1: Width on merged column only (equal distribution)**\n\n```typescript\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2, width: 300 }, // Merged column with total width\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name' }, // Child column - auto-sizes within parent\n\t\t\t{ key: 'lastName', label: 'Last Name' }, // Child column - auto-sizes within parent\n\t\t],\n\t],\n};\n// Table minimum width: 300px\n```\n\n**Example 2: Width on individual columns only (more control)**\n\n```typescript\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2 }, // Merged column - no width specified\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name', width: 150 }, // Explicit width\n\t\t\t{ key: 'lastName', label: 'Last Name', width: 200 }, // Explicit width\n\t\t],\n\t],\n};\n// Table minimum width: 350px (150 + 200)\n```\n\n**Example 3: Avoid specifying widths on both levels**\n\n```typescript\n// ⚠️ NOT RECOMMENDED - widths are summed from all rows\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2, width: 300 }, // Parent width: 300\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name', width: 150 }, // Child width: 150\n\t\t\t{ key: 'lastName', label: 'Last Name', width: 200 }, // Child width: 200\n\t\t],\n\t],\n};\n// Table minimum width: 650px (300 + 150 + 200) - probably not intended!\n```\n\n### Pagination\n\n- The pagination text (e.g., \"Page 1 of 10\") is now integrated into the Pagination component itself. Previously, this text had to be provided by the application code or was handled by the Stateful Table component.\n- The `_page` property now automatically generates and displays the pagination information text within the component.\n\n**Before (Version 3):**\n\n```typescript\n// Application code had to provide pagination text\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n<div>Page {currentPage} of {totalPages}</div>\n\n// Or it was handled by Stateful Table\n<kol-table-stateful></kol-table-stateful>\n```\n\n**After (Version 4):**\n\n```typescript\n// Pagination component handles text internally\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n// Text is automatically displayed within the component\n```\n\n#### Settings Menu\n\nThe settings menu is now part of the `_horizontalHeaderCells` prop. The settings for visibility (`visible`), hidability (`hidable`), sortability (`sortable`), and resizability (`resizable`) are now managed directly through the header cell configuration.\n\n**Header Cell Properties:**\n\n- **`label: string`** - Required. The display text for the column header.\n- **`width?: number`** - Optional. Column width in pixels. The sum of all defined widths determines the table's minimum width. Columns without `width` auto-size.\n- **`visible: boolean`** - Controls whether the column is currently displayed in the table. Users can toggle this in the settings menu if `hidable` is true.\n- **`hidable: boolean`** - Determines if the column can be hidden/shown by the user through the settings menu. If false, the visibility cannot be changed by the user (but may still be changed programmatically).\n- **`sortable: boolean`** - Controls whether a sort button appears in the column header. If true, users can click to sort. The current sort direction is indicated by `sortDirection` ('ASC', 'DESC', or 'NOS').\n- **`resizable: boolean`** - Determines if the column width can be adjusted by the user through the settings menu.\n\n**Before:**\n\n```tsx\n// Settings were applied immediately\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_tableSettings={tableSettings}\n\t_on={{\n\t\tonSettingsChange: (event, tableSettings) => {\n\t\t\t// Settings applied immediately\n\t\t\tsetTableSettings(tableSettings);\n\t\t},\n\t}}\n/>\n```\n\n**After:**\n\n```tsx\n// Settings are only applied after clicking \"Apply\"\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'firstName',\n\t\t\t\tlabel: 'First Name',\n\t\t\t\twidth: 200, // Optional: width in pixels\n\t\t\t\tvisible: true, // Column is displayed\n\t\t\t\thidable: true, // User can hide this column\n\t\t\t\tsortable: true, // User can sort by this column\n\t\t\t\tresizable: true, // User can resize this column\n\t\t\t\tsortDirection: 'ASC', // Current sort state\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'age',\n\t\t\t\tlabel: 'Age',\n\t\t\t\twidth: 100, // Optional: width in pixels\n\t\t\t\tvisible: true,\n\t\t\t\thidable: false, // This column cannot be hidden by user\n\t\t\t\tsortable: true,\n\t\t\t\tresizable: false, // Fixed width\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [],\n};\n\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_on={{\n\t\tonChangeHeaderCells: (event, headerCells) => {\n\t\t\t// Settings only updated after user confirms in the menu\n\t\t\t// The callback receives the complete header cell structure with both\n\t\t\t// horizontal and vertical cells. Only the horizontal cells may have\n\t\t\t// been modified by the settings menu; vertical cells are preserved unchanged.\n\t\t\tsetHeaderCells(headerCells);\n\t\t},\n\t}}\n/>;\n```\n\n**Behavior:**\n\n- When `_hasSettingsMenu={true}`, a settings button appears in the table header\n- Users can modify column visibility, width, and other properties through the settings dialog\n- Changes are only applied to the table when the user clicks \"Apply\" or \"OK\"\n- The `onChangeHeaderCells` callback receives the updated header cells after confirmation\n- Columns with `hidable={false}` cannot be toggled in the settings menu\n- Columns with `resizable={false}` cannot be resized by the user\n",
       "kind": "doc"
     },
     {
@@ -269,7 +269,7 @@
       "group": "breadcrumb",
       "name": "basic",
       "path": "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: 'fa-solid fa-house',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the start page with very long link test',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons and text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _icons: 'fa-solid fa-house', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the main page and I_am_a_really_long_compound_word_trying_to_break_the_layout',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb _label=\"Minimal Breadcrumb\" _links={[{ _label: 'Homepage', _href: '#/back-page' }]}></KolBreadcrumb>\n\t\t</div>\n\t</>\n);\n",
+      "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: 'fa-solid fa-house',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the start page with very long link test',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons and text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _icons: 'kolicon-house', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the main page and I_am_a_really_long_compound_word_trying_to_break_the_layout',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb _label=\"Minimal Breadcrumb\" _links={[{ _label: 'Homepage', _href: '#/back-page' }]}></KolBreadcrumb>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -365,7 +365,7 @@
       "group": "button",
       "name": "icons",
       "path": "packages/samples/react/src/components/button/icons.tsx",
-      "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple\n\t\t\t\t\tpositions at once.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Basic Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Top\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Multiple Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Left & Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Top & Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\ttransform: 'rotate(45deg)',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"All Directions\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Simple Icon String\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _label=\"Home Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-heart\" _label=\"Heart Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-trash\" _label=\"Trash Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Large Icon on Top\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t'font-size': '400%',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Home\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple\n\t\t\t\t\tpositions at once.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Basic Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Top\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Multiple Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Left & Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Top & Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\ttransform: 'rotate(45deg)',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"All Directions\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Simple Icon String\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _label=\"Home Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-heart\" _label=\"Heart Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-trash\" _label=\"Trash Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Large Icon on Top\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t'font-size': '400%',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-house',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Home\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -501,7 +501,7 @@
       "group": "handout",
       "name": "basic",
       "path": "packages/samples/react/src/components/handout/basic.tsx",
-      "code": "import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';\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';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { getTheme, getThemeName } from '../../shares/store';\nimport { TABLE_DATA, type TableDataType } from './table-data';\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\twidth: '100px',\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\twidth: '100px',\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\twidth: '110px',\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\twidth: '100px',\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\twidth: '100px',\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\twidth: '100px',\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\twidth: '100px',\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: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-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=\"fa-solid fa-house\" _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: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-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=\"fa-solid fa-house\" _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=\"fa-solid fa-house\" _label=\"Link text with icon\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _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=\"fa-solid fa-house\" _label=\"Link text with icon\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"fa-solid fa-house\" _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: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house', _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: 'fa-solid fa-house', _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': 'fa-solid fa-house'}\"\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 flex\">\n\t\t\t\t\t\t<KolTableStateful _label=\"Table\" _minWidth=\"800px\" _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",
+      "code": "import type { ButtonProps, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';\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';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { getTheme, getThemeName } from '../../shares/store';\nimport { TABLE_DATA, type TableDataType } from './table-data';\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\twidth: 500,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Weekend',\n\t\t\t\tcolSpan: 2,\n\t\t\t\twidth: 200,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolButtonWrapper _label={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\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#060\" _label={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\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#006\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 110,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#600\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#303\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#330\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#033\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Noon',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Evening',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Night',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst renderCellContent = (element: HTMLElement, content: React.ReactNode) => {\n\tconst renderElement = document.createElement('div');\n\trenderElement.setAttribute('role', 'presentation');\n\telement.innerHTML = '';\n\telement.appendChild(renderElement);\n\tgetRoot(renderElement).render(content);\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: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-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=\"fa-solid fa-house\" _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: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-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: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-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=\"fa-solid fa-house\" _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=\"fa-solid fa-house\" _label=\"Link text with icon\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _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=\"fa-solid fa-house\" _label=\"Link text with icon\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"fa-solid fa-house\" _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: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house',\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: 'fa-solid fa-house', _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: 'fa-solid fa-house', _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': 'fa-solid fa-house'}\"\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=\"gap-2 p-2 flex flex-col\">\n\t\t\t\t\t\t<KolTableStateful _label=\"Table\" _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"
     },
     {
@@ -1045,7 +1045,7 @@
       "group": "table",
       "name": "column-alignment",
       "path": "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",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];\nconst genericNonSorter = () => 0;\n\nexport const TableColumnAlignment: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with columns headers and data in different text alignments.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col\">\n\t\t\t<KolHeading _label=\"Simple table\" _level={3}></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with different text align properties\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table with sortable columns\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with sortable columns\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table some sortable columns\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with some but not all columns sortable\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter, width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\n\t\t\t<KolHeading _label=\"Table with vertical heading\" _level={3} className=\"block mt-6\"></KolHeading>\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Table for demonstration purposes with vertical heading\"\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'left', key: 'left', textAlign: 'left', width: 160 },\n\t\t\t\t\t\t\t{ label: 'center', key: 'center', textAlign: 'center', width: 160 },\n\t\t\t\t\t\t\t{ label: 'right', key: 'right', textAlign: 'right', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [[{ label: 'Vertical', width: 160 }]],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1053,7 +1053,7 @@
       "group": "table",
       "name": "complex-headers",
       "path": "packages/samples/react/src/components/table/complex-headers.tsx",
-      "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TableComplexHeaders: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using vertical and horizontal headers, applying colspan and rowspan.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col\">\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Business hours\"\n\t\t\t\t_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",
+      "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TableComplexHeaders: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using vertical and horizontal headers, applying colspan and rowspan.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col\">\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Business hours\"\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Center',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t\tsaturday: '09:00',\n\t\t\t\t\t\tsunday: '10:00',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Tiergarten',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t\tsaturday: '09:00',\n\t\t\t\t\t\tsunday: '10:00',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tasp: 'Maxvorstadt',\n\t\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\t\tfriday: '08:00',\n\t\t\t\t\t\tsaturday: '09:00',\n\t\t\t\t\t\tsunday: '10:00',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\t_headers={{\n\t\t\t\t\tvertical: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Berlin',\n\t\t\t\t\t\t\t\trowSpan: 2,\n\t\t\t\t\t\t\t\twidth: 100,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'München',\n\t\t\t\t\t\t\t\twidth: 100,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'District',\n\t\t\t\t\t\t\t\trowSpan: 2,\n\t\t\t\t\t\t\t\tkey: 'asp',\n\t\t\t\t\t\t\t\twidth: 120,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Workdays',\n\t\t\t\t\t\t\t\tcolSpan: 5,\n\t\t\t\t\t\t\t\twidth: 580,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Weekend',\n\t\t\t\t\t\t\t\tcolSpan: 2,\n\t\t\t\t\t\t\t\twidth: 200,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Monday',\n\t\t\t\t\t\t\t\tkey: 'monday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Tuesday',\n\t\t\t\t\t\t\t\tkey: 'tuesday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Wednesday',\n\t\t\t\t\t\t\t\tkey: 'wednesday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Thursday',\n\t\t\t\t\t\t\t\tkey: 'thursday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Friday',\n\t\t\t\t\t\t\t\tkey: 'friday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Saturday',\n\t\t\t\t\t\t\t\tkey: 'saturday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Sunday',\n\t\t\t\t\t\t\t\tkey: 'sunday',\n\t\t\t\t\t\t\t\twidth: 50,\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1061,7 +1061,7 @@
       "group": "table",
       "name": "direction-aware-sort",
       "path": "packages/samples/react/src/components/table/direction-aware-sort.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\ntype TemperatureRow = {\n\tcity: string;\n\ttemperature: number;\n};\n\nconst COMFORTABLE_TEMPERATURE = 22;\n\nconst TEMPERATURE_DATA: TemperatureRow[] = [\n\t{ city: 'Reykjavík', temperature: 6 },\n\t{ city: 'Berlin', temperature: 21 },\n\t{ city: 'Palma de Mallorca', temperature: 29 },\n\t{ city: 'Cairo', temperature: 35 },\n\t{ city: 'Helsinki', temperature: 14 },\n];\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'City', key: 'city' },\n\t\t\t{\n\t\t\t\tlabel: 'Temperature (°C)',\n\t\t\t\tkey: 'temperature',\n\t\t\t\ttextAlign: 'right',\n\t\t\t\tcompareFn: (rowA, rowB, direction = 'ASC') => {\n\t\t\t\t\tconst temperatureA = (rowA as TemperatureRow).temperature;\n\t\t\t\t\tconst temperatureB = (rowB as TemperatureRow).temperature;\n\t\t\t\t\tconst differenceA = Math.abs(temperatureA - COMFORTABLE_TEMPERATURE);\n\t\t\t\t\tconst differenceB = Math.abs(temperatureB - COMFORTABLE_TEMPERATURE);\n\n\t\t\t\t\tif (differenceA !== differenceB) {\n\t\t\t\t\t\treturn direction === 'DESC' ? differenceB - differenceA : differenceA - differenceB;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn direction === 'DESC' ? temperatureB - temperatureA : temperatureA - temperatureB;\n\t\t\t\t},\n\t\t\t\trender: (_element, _cell, row) => {\n\t\t\t\t\tconst difference = Math.abs((row as TemperatureRow).temperature - COMFORTABLE_TEMPERATURE);\n\t\t\t\t\treturn `${(row as TemperatureRow).temperature} °C (Δ ${difference} °C)`;\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableDirectionAwareSort: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates how <code>compareFn</code> receives the current <code>sortDirection</code>. Ascending sorts show cities that are closest to\n\t\t\t\t22&nbsp;°C first, descending sorts highlight the most extreme temperatures.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateful _minWidth=\"100%\" _label=\"Direction aware compare function\" _data={TEMPERATURE_DATA} _headers={HEADERS} className=\"block\" />\n\t\t</section>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\ntype TemperatureRow = {\n\tcity: string;\n\ttemperature: number;\n};\n\nconst COMFORTABLE_TEMPERATURE = 22;\n\nconst TEMPERATURE_DATA: TemperatureRow[] = [\n\t{ city: 'Reykjavík', temperature: 6 },\n\t{ city: 'Berlin', temperature: 21 },\n\t{ city: 'Palma de Mallorca', temperature: 29 },\n\t{ city: 'Cairo', temperature: 35 },\n\t{ city: 'Helsinki', temperature: 14 },\n];\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'City', key: 'city', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'Temperature (°C)',\n\t\t\t\tkey: 'temperature',\n\t\t\t\ttextAlign: 'right',\n\t\t\t\twidth: 160,\n\t\t\t\tcompareFn: (rowA, rowB, direction = 'ASC') => {\n\t\t\t\t\tconst temperatureA = (rowA as TemperatureRow).temperature;\n\t\t\t\t\tconst temperatureB = (rowB as TemperatureRow).temperature;\n\t\t\t\t\tconst differenceA = Math.abs(temperatureA - COMFORTABLE_TEMPERATURE);\n\t\t\t\t\tconst differenceB = Math.abs(temperatureB - COMFORTABLE_TEMPERATURE);\n\n\t\t\t\t\tif (differenceA !== differenceB) {\n\t\t\t\t\t\treturn direction === 'DESC' ? differenceB - differenceA : differenceA - differenceB;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn direction === 'DESC' ? temperatureB - temperatureA : temperatureA - temperatureB;\n\t\t\t\t},\n\t\t\t\trender: (_element, _cell, row) => {\n\t\t\t\t\tconst difference = Math.abs((row as TemperatureRow).temperature - COMFORTABLE_TEMPERATURE);\n\t\t\t\t\treturn `${(row as TemperatureRow).temperature} °C (Δ ${difference} °C)`;\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableDirectionAwareSort: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample demonstrates how <code>compareFn</code> receives the current <code>sortDirection</code>. Ascending sorts show cities that are closest to\n\t\t\t\t22&nbsp;°C first, descending sorts highlight the most extreme temperatures.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Direction aware compare function\" _data={TEMPERATURE_DATA} _headers={HEADERS} className=\"block\" />\n\t\t</section>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1069,7 +1069,7 @@
       "group": "table",
       "name": "horizontal-scrollbar",
       "path": "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 type { Data } from './test-data';\nimport { DATA as tableData } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\nconst DATA = [{ small: 'Small Example', large: 'Larger Example' }];\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },\n\t\t\t{ label: 'Large Column', key: 'large', textAlign: 'left', width: '300px' },\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",
+      "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA as tableData } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\nconst DATA = [{ small: 'Small Example', large: 'Larger Example' }];\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Small Column', key: 'small', textAlign: 'left', width: 200 },\n\t\t\t{ label: 'Large Column', key: 'large', textAlign: 'left', width: 300 },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 400 },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 400 },\n\t\t],\n\t],\n};\nconst COMPACT_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Small Column', key: 'small', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Large Column', key: 'large', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 160 },\n\t\t],\n\t],\n};\nconst genericNonSorter = () => 0;\nconst ORDER_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'Date',\n\t\t\t\tkey: 'date',\n\t\t\t\twidth: 160,\n\t\t\t\tcompareFn: genericNonSorter,\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date),\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableHorizontalScrollbar: FC = () => {\n\tconst [hasWidthRestriction, setHasWidthRestriction] = useState(true);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows KolTableStateful with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table\n\t\t\t\t\tcontainer and to scroll it using arrow keys.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full flex flex-col gap-4\">\n\t\t\t\t<div className=\"w-[400px] flex flex-col gap-4\">\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Table for demonstration purposes with horizontal scrollbar.\"\n\t\t\t\t\t\t_headers={hasWidthRestriction ? HEADERS : COMPACT_HEADERS}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t/>\n\t\t\t\t\t<KolTableStateful _label=\"Table for demonstration horizontal scrolling with pagination.\" _headers={ORDER_HEADERS} _data={tableData} _pagination />\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Table for demonstration purposes with horizontal scrollbar with auto width calculation.\"\n\t\t\t\t\t\t_headers={hasWidthRestriction ? HEADERS : COMPACT_HEADERS}\n\t\t\t\t\t\t_data={[]}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<KolInputCheckbox\n\t\t\t\t\t_checked={hasWidthRestriction}\n\t\t\t\t\t_label=\"Toggle width restriction\"\n\t\t\t\t\t_variant=\"switch\"\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonChange: (_event, value) => {\n\t\t\t\t\t\t\tsetHasWidthRestriction(Boolean(value));\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t></KolInputCheckbox>\n\n\t\t\t\t<KolHeading _label=\"Same table without scrollbar\" _level={2} className=\"block mt-4\" />\n\t\t\t\t<p className=\"mt-0\">\n\t\t\t\t\t<i>Scrollbar appears on very small viewport sizes</i>\n\t\t\t\t</p>\n\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Table for demonstration purposes without horizontal scrollbar\"\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_pagination\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1077,7 +1077,7 @@
       "group": "table",
       "name": "interactive-child-elements",
       "path": "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 { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\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: 'kolicon-kolibri' },\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: 'kolicon-kolibri' },\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",
+      "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 { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\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 variantLabel = `${variant}`;\n\tconst capitalizedVariant = variantLabel.charAt(0).toUpperCase() + variantLabel.slice(1);\n\treturn {\n\t\tlabel: capitalizedVariant,\n\t\tkey: variantLabel,\n\t\ttextAlign: 'left',\n\t\twidth: 160,\n\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\tconst { label } = cell as { label: string };\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: 'kolicon-kolibri' },\n\t\t\t};\n\t\t\tgetRoot(createReactRenderElement(element)).render(\n\t\t\t\tlabel === '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_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: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'Button', width: 120 },\n\t\t\t\t\t\t\t{ label: 'Link-Button', width: 120 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\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_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\twidth: 180,\n\t\t\t\t\t\t\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\t\t\t\t\tconst commonProps = {\n\t\t\t\t\t\t\t\t\t\t_label: label,\n\t\t\t\t\t\t\t\t\t\t_icons: { right: 'kolicon-kolibri' },\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\tlabel === '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: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'Link', width: 140 },\n\t\t\t\t\t\t\t{ label: 'Button-Link', width: 140 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\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"
     },
     {
@@ -1085,7 +1085,7 @@
       "group": "table",
       "name": "multi-sort",
       "path": "packages/samples/react/src/components/table/multi-sort.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolButtonLink, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\ntype BacklogEntry = {\n\tdate: Date;\n\tassignee: string;\n\tdepartment: string;\n\tpriority: 'High' | 'Medium' | 'Low';\n\tstatus: 'Blocked' | 'In progress' | 'Ready';\n\topenTickets: number;\n};\n\nconst ASSIGNEES = ['Devon Chen', 'Fatima Alvi', 'Leon Köhler', 'Mila Schmidt', 'Sven Lindholm'];\nconst DEPARTMENTS = ['Customer Service', 'Digital Services', 'Infrastructure', 'Municipal Office'];\nconst PRIORITY_SEQUENCE: BacklogEntry['priority'][] = ['High', 'Medium', 'Low'];\nconst STATUS_SEQUENCE: BacklogEntry['status'][] = ['Blocked', 'In progress', 'Ready'];\n\nconst PRIORITY_ORDER = PRIORITY_SEQUENCE.reduce<Record<BacklogEntry['priority'], number>>(\n\t(order, priority, index) => {\n\t\torder[priority] = index;\n\t\treturn order;\n\t},\n\t{} as Record<BacklogEntry['priority'], number>,\n);\n\nconst STATUS_ORDER = STATUS_SEQUENCE.reduce<Record<BacklogEntry['status'], number>>(\n\t(order, status, index) => {\n\t\torder[status] = index;\n\t\treturn order;\n\t},\n\t{} as Record<BacklogEntry['status'], number>,\n);\n\nconst BACKLOG_DATA: BacklogEntry[] = Array.from({ length: 15 }).map((_, index) => ({\n\tdate: new Date(Date.now() - index * 1000 * 60 * 60 * 24),\n\tassignee: ASSIGNEES[index % ASSIGNEES.length],\n\tdepartment: DEPARTMENTS[index % DEPARTMENTS.length],\n\tpriority: PRIORITY_SEQUENCE[index % PRIORITY_SEQUENCE.length],\n\tstatus: STATUS_SEQUENCE[index % STATUS_SEQUENCE.length],\n\topenTickets: (index * 3) % 11,\n}));\nconst TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [\n\t{\n\t\tlabel: 'Assignee',\n\t\tkey: 'assignee',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t(data0 as BacklogEntry).assignee.localeCompare((data1 as BacklogEntry).assignee, 'de'),\n\t\tsortDirection: 'ASC',\n\t},\n\t{\n\t\tlabel: 'Department',\n\t\tkey: 'department',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t(data0 as BacklogEntry).department.localeCompare((data1 as BacklogEntry).department, 'de'),\n\t},\n\t{\n\t\tlabel: 'Priority',\n\t\tkey: 'priority',\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\tPRIORITY_ORDER[(data0 as BacklogEntry).priority] - PRIORITY_ORDER[(data1 as BacklogEntry).priority],\n\t\tsortDirection: 'DESC',\n\t},\n\t{\n\t\tlabel: 'Status',\n\t\tkey: 'status',\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\tSTATUS_ORDER[(data0 as BacklogEntry).status] - STATUS_ORDER[(data1 as BacklogEntry).status],\n\t},\n\t{\n\t\tlabel: 'Open tickets',\n\t\tkey: 'openTickets',\n\t\ttextAlign: 'right',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => (data0 as BacklogEntry).openTickets - (data1 as BacklogEntry).openTickets,\n\t},\n\t{\n\t\tlabel: 'Last updated',\n\t\tkey: 'date',\n\t\ttextAlign: 'center',\n\t\trender: (_el, _cell, tuple) => DATE_FORMATTER.format((tuple as BacklogEntry).date),\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\tif ((data0 as BacklogEntry).date < (data1 as BacklogEntry).date) return -1;\n\t\t\telse if ((data1 as BacklogEntry).date < (data0 as BacklogEntry).date) return 1;\n\t\t\telse return 0;\n\t\t},\n\t},\n];\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [TABLE_HEADER_CELLS],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [TABLE_HEADER_CELLS],\n};\n\nexport const MultiSortTable: FC = () => {\n\tconst [verticallHeader, setVerticalHeader] = useState(HEADERS_VERTICAL);\n\tconst [horizontalHeader, setHorizontalHeader] = useState(HEADERS_HORIZONTAL);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tMulti-sort allows layering multiple column sorts at once. Compare the compact examples with the project backlog showcase to see how the sort order\n\t\t\t\t\tindicator helps track complex prioritisation.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full grid gap-6\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Vertical\" />\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Sort Table with Order and Date\"\n\t\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t\t_data={BACKLOG_DATA.slice(0, 10)}\n\t\t\t\t\t\t_headers={verticallHeader}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={true}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Horizontal\" />\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful\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={BACKLOG_DATA}\n\t\t\t\t\t\t_headers={horizontalHeader}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={true}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
+      "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolButtonLink, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\ntype BacklogEntry = {\n\tdate: Date;\n\tassignee: string;\n\tdepartment: string;\n\tpriority: 'High' | 'Medium' | 'Low';\n\tstatus: 'Blocked' | 'In progress' | 'Ready';\n\topenTickets: number;\n};\n\nconst ASSIGNEES = ['Devon Chen', 'Fatima Alvi', 'Leon Köhler', 'Mila Schmidt', 'Sven Lindholm'];\nconst DEPARTMENTS = ['Customer Service', 'Digital Services', 'Infrastructure', 'Municipal Office'];\nconst PRIORITY_SEQUENCE: BacklogEntry['priority'][] = ['High', 'Medium', 'Low'];\nconst STATUS_SEQUENCE: BacklogEntry['status'][] = ['Blocked', 'In progress', 'Ready'];\n\nconst PRIORITY_ORDER = PRIORITY_SEQUENCE.reduce<Record<BacklogEntry['priority'], number>>(\n\t(order, priority, index) => {\n\t\torder[priority] = index;\n\t\treturn order;\n\t},\n\t{} as Record<BacklogEntry['priority'], number>,\n);\n\nconst STATUS_ORDER = STATUS_SEQUENCE.reduce<Record<BacklogEntry['status'], number>>(\n\t(order, status, index) => {\n\t\torder[status] = index;\n\t\treturn order;\n\t},\n\t{} as Record<BacklogEntry['status'], number>,\n);\n\nconst BACKLOG_DATA: BacklogEntry[] = Array.from({ length: 15 }).map((_, index) => ({\n\tdate: new Date(Date.now() - index * 1000 * 60 * 60 * 24),\n\tassignee: ASSIGNEES[index % ASSIGNEES.length],\n\tdepartment: DEPARTMENTS[index % DEPARTMENTS.length],\n\tpriority: PRIORITY_SEQUENCE[index % PRIORITY_SEQUENCE.length],\n\tstatus: STATUS_SEQUENCE[index % STATUS_SEQUENCE.length],\n\topenTickets: (index * 3) % 11,\n}));\n\nconst TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [\n\t{\n\t\tlabel: 'Assignee',\n\t\tkey: 'assignee',\n\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t(data0 as BacklogEntry).assignee.localeCompare((data1 as BacklogEntry).assignee, 'de'),\n\t\tsortDirection: 'ASC',\n\t},\n\t{\n\t\tlabel: 'Department',\n\t\tkey: 'department',\n\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t(data0 as BacklogEntry).department.localeCompare((data1 as BacklogEntry).department, 'de'),\n\t},\n\t{\n\t\tlabel: 'Priority',\n\t\tkey: 'priority',\n\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\tPRIORITY_ORDER[(data0 as BacklogEntry).priority] - PRIORITY_ORDER[(data1 as BacklogEntry).priority],\n\t\tsortDirection: 'DESC',\n\t},\n\t{\n\t\tlabel: 'Status',\n\t\tkey: 'status',\n\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\tSTATUS_ORDER[(data0 as BacklogEntry).status] - STATUS_ORDER[(data1 as BacklogEntry).status],\n\t},\n\t{\n\t\tlabel: 'Open tickets',\n\t\tkey: 'openTickets',\n\n\t\ttextAlign: 'right',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => (data0 as BacklogEntry).openTickets - (data1 as BacklogEntry).openTickets,\n\t},\n\t{\n\t\tlabel: 'Last updated',\n\t\tkey: 'date',\n\n\t\ttextAlign: 'center',\n\t\trender: (_el, _cell, tuple) => DATE_FORMATTER.format((tuple as BacklogEntry).date),\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\tif ((data0 as BacklogEntry).date < (data1 as BacklogEntry).date) return -1;\n\t\t\telse if ((data1 as BacklogEntry).date < (data0 as BacklogEntry).date) return 1;\n\t\t\telse return 0;\n\t\t},\n\t},\n];\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [TABLE_HEADER_CELLS],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [TABLE_HEADER_CELLS],\n};\n\nexport const MultiSortTable: FC = () => {\n\tconst [verticallHeader, setVerticalHeader] = useState(HEADERS_VERTICAL);\n\tconst [horizontalHeader, setHorizontalHeader] = useState(HEADERS_HORIZONTAL);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tMulti-sort allows layering multiple column sorts at once. Compare the compact examples with the project backlog showcase to see how the sort order\n\t\t\t\t\tindicator helps track complex prioritisation.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full grid gap-6\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Vertical\" />\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Sort Table with Order and Date\"\n\t\t\t\t\t\t_data={BACKLOG_DATA.slice(0, 10)}\n\t\t\t\t\t\t_headers={verticallHeader}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={true}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Horizontal\" />\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful _label=\"Sort Table with Order and Date\" _data={BACKLOG_DATA} _headers={horizontalHeader} className=\"block\" _allowMultiSort={true} />\n\t\t\t\t</section>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1093,7 +1093,7 @@
       "group": "table",
       "name": "non-hidable-columns",
       "path": "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",
+      "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [\n\t{ id: '1001', name: 'John', age: 30 },\n\t{ id: '1002', name: 'Jane', age: 25 },\n];\n\nexport const TableNonHidableColumns: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This example demonstrates a column that cannot be hidden in the settings.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful\n\t\t\t_label=\"Table with a non-hidable column\"\n\t\t\t_hasSettingsMenu\n\t\t\t_headers={{\n\t\t\t\thorizontal: [\n\t\t\t\t\t[\n\t\t\t\t\t\t{ key: 'id', label: 'ID', hidable: false, width: 160 },\n\t\t\t\t\t\t{ key: 'name', label: 'Name', width: 160 },\n\t\t\t\t\t\t{ key: 'age', label: 'Age', width: 160 },\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t}}\n\t\t\t_data={DATA}\n\t\t\tclassName=\"block\"\n\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t/>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1101,7 +1101,7 @@
       "group": "table",
       "name": "pagination-position",
       "path": "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",
+      "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', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\nconst PAGINATION: KoliBriTablePaginationProps = { _page: 2 };\n\nexport const 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_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_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_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"
     },
     {
@@ -1109,7 +1109,7 @@
       "group": "table",
       "name": "predefined-settings",
       "path": "packages/samples/react/src/components/table/predefined-settings.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 = [{ 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_hasSettingsMenu\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'columnC', visible: true, label: 'Column C', width: '45ch' },\n\t\t\t\t\t\t\t{ key: 'columnB', visible: true, label: 'Column B', width: '20ch' },\n\t\t\t\t\t\t\t{ key: 'columnA', visible: false, label: 'Column A' },\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\t_minWidth=\"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",
+      "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\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_hasSettingsMenu\n\t\t\t\t_headers={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'columnC', visible: true, label: 'Column C', width: 450 },\n\t\t\t\t\t\t\t{ key: 'columnB', visible: true, label: 'Column B', width: 200 },\n\t\t\t\t\t\t\t{ key: 'columnA', visible: false, label: 'Column A', width: 160 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1117,7 +1117,7 @@
       "group": "table",
       "name": "render-cell",
       "path": "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: 'fa-solid fa-floppy-disk' }} />\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",
+      "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, KoliBriTableCell, 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: 100,\n\n\t\t\t\t/* Example 1: Use render return value to format data */\n\t\t\t\trender: (_el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\treturn `Index: ${label}`;\n\t\t\t\t},\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: 100,\n\n\t\t\t\t/* Example 2: Simple render function using textContent */\n\t\t\t\trender: (el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\tconst element = el as HTMLElement;\n\t\t\t\t\tif (label) {\n\t\t\t\t\t\telement.textContent = `Order has been dispatched 🚚`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.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: 200,\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: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\t(el as HTMLElement).innerHTML = `<strong>${DATE_FORMATTER.format(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: 200,\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: 'fa-solid fa-floppy-disk' }} />\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\" _data={DATA} _headers={HEADERS} className=\"w-full\" />\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1125,7 +1125,7 @@
       "group": "table",
       "name": "settings-column-options",
       "path": "packages/samples/react/src/components/table/settings-column-options.tsx",
-      "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\ntype UserRow = {\n\tid: string;\n\tname: string;\n\tteam: string;\n\temail: string;\n\tstatus: string;\n};\n\nconst DATA: UserRow[] = [\n\t{ id: 'U-001', name: 'Andrea Schmidt', team: 'Design', email: 'andrea@example.org', status: 'Active' },\n\t{ id: 'U-002', name: 'Boris Klein', team: 'Engineering', email: 'boris@example.org', status: 'Active' },\n\t{ id: 'U-003', name: 'Chiara Russo', team: 'Support', email: 'chiara@example.org', status: 'On leave' },\n];\n\nexport const TableSettingsColumnOptions: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis example demonstrates how the table settings respect column metadata. Some columns can be hidden, reordered, or resized, while others stay locked\n\t\t\t\tbased on their <code>hidable</code>, <code>sortable</code>, and <code>resizable</code> flags.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful\n\t\t\t_label=\"Table with column option restrictions\"\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, sortable: false, visible: true, width: '15ch' },\n\t\t\t\t\t\t{ key: 'name', label: 'Name', visible: true, width: '30ch' },\n\t\t\t\t\t\t{ key: 'team', label: 'Team', sortable: false, visible: true, width: '20ch' },\n\t\t\t\t\t\t{ key: 'email', label: 'E-Mail', resizable: false, visible: true, width: '25ch' },\n\t\t\t\t\t\t{ key: 'status', label: 'Status', hidable: false, resizable: false, visible: true, width: '10ch' },\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: '720px' }}\n\t\t/>\n\t</>\n);\n",
+      "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\ntype UserRow = {\n\tid: string;\n\tname: string;\n\tteam: string;\n\temail: string;\n\tstatus: string;\n};\n\nconst DATA: UserRow[] = [\n\t{ id: 'U-001', name: 'Andrea Schmidt', team: 'Design', email: 'andrea@example.org', status: 'Active' },\n\t{ id: 'U-002', name: 'Boris Klein', team: 'Engineering', email: 'boris@example.org', status: 'Active' },\n\t{ id: 'U-003', name: 'Chiara Russo', team: 'Support', email: 'chiara@example.org', status: 'On leave' },\n];\n\nexport const TableSettingsColumnOptions: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis example demonstrates how the table settings respect column metadata. Some columns can be hidden, reordered, or resized, while others stay locked\n\t\t\t\tbased on their <code>hidable</code>, <code>sortable</code>, and <code>resizable</code> flags.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful\n\t\t\t_label=\"Table with column option restrictions\"\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, sortable: false, visible: true, width: 240 },\n\t\t\t\t\t\t{ key: 'name', label: 'Name', visible: true, width: 480 },\n\t\t\t\t\t\t{ key: 'team', label: 'Team', sortable: false, visible: true, width: 320 },\n\t\t\t\t\t\t{ key: 'email', label: 'E-Mail', resizable: false, visible: true, width: 400 },\n\t\t\t\t\t\t{ key: 'status', label: 'Status', hidable: false, resizable: false, visible: true, width: 160 },\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t}}\n\t\t\t_data={DATA}\n\t\t\tclassName=\"block\"\n\t\t\tstyle={{ maxWidth: '720px' }}\n\t\t/>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1133,7 +1133,7 @@
       "group": "table",
       "name": "sort-data",
       "path": "packages/samples/react/src/components/table/sort-data.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\nconst compareByDate =\n\t(sortDirection = 'ASC') =>\n\t(data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\tconst first = (data0 as Data).date.getTime();\n\t\tconst second = (data1 as Data).date.getTime();\n\t\tconst result = first - second;\n\t\treturn sortDirection === 'DESC' ? -result : result;\n\t};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center' },\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, direction) => compareByDate(direction)(data0, data1),\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center' },\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, direction) => compareByDate(direction)(data0, data1),\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableSortData: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full grid gap-4\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Vertical headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _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",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\nconst compareByDate =\n\t(sortDirection = 'ASC') =>\n\t(data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\tconst first = (data0 as Data).date.getTime();\n\t\tconst second = (data1 as Data).date.getTime();\n\t\tconst result = first - second;\n\t\treturn sortDirection === 'DESC' ? -result : result;\n\t};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 160,\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center', width: 160 },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 160,\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableSortData: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full grid gap-4\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Vertical headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className=\"block\" />\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Horizontal headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _data={DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" />\n\t\t\t</section>\n\t\t</section>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1141,7 +1141,7 @@
       "group": "table",
       "name": "stateful-with-selection",
       "path": "packages/samples/react/src/components/table/stateful-with-selection.tsx",
-      "code": "import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateful } 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\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[] | 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",
+      "code": "import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateful } 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\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];\ntype KolTableStatefulElement = {\n\taddEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;\n\tremoveEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;\n\tgetSelection?: () => Promise<KoliBriTableDataType[] | null>;\n};\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 }: CustomEvent<Data[]>) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\tconst handleButtonClick = async () => {\n\t\tconst tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;\n\t\tconst selection = await tableElement?.getSelection?.();\n\t\tsetSelectedValue(selection as Data[] | null);\n\t};\n\n\tuseEffect(() => {\n\t\tconst tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;\n\t\tconst selectionChangeEvent = 'kolSelectionChange';\n\t\ttableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\ttableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatefulRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tconst data = (cell as { data?: Data }).data;\n\t\tconst id = data?.id;\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows 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_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"
     },
     {
@@ -1149,7 +1149,7 @@
       "group": "table",
       "name": "stateful-with-single-selection",
       "path": "packages/samples/react/src/components/table/stateful-with-single-selection.tsx",
-      "code": "import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateful } 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\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[] | 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",
+      "code": "import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateful } 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\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];\ntype KolTableStatefulElement = {\n\taddEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;\n\tremoveEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;\n\tgetSelection?: () => Promise<KoliBriTableDataType[] | null>;\n};\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 }: CustomEvent<Data[]>) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\tconst handleButtonClick = async () => {\n\t\tconst tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;\n\t\tconst selection = await tableElement?.getSelection?.();\n\t\tsetSelectedValue(selection as Data | null);\n\t};\n\n\tuseEffect(() => {\n\t\tconst tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;\n\t\tconst selectionChangeEvent = 'kolSelectionChange';\n\t\ttableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\ttableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatefulRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tconst data = (cell as { data?: Data }).data;\n\t\tconst id = data?.id;\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows 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_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"
     },
     {
@@ -1157,7 +1157,7 @@
       "group": "table",
       "name": "stateless",
       "path": "packages/samples/react/src/components/table/stateless.tsx",
-      "code": "import { KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];\n\nexport const TableStateless: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolTableStateless can be used directly, with the KolTableStateful wrapper.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Table for demonstration purposes\"\n\t\t\t\t_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",
+      "code": "import { KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];\n\nexport const TableStateless: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolTableStateless can be used directly, with the KolTableStateful wrapper.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Table for demonstration purposes\"\n\t\t\t\t_headerCells={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },\n\t\t\t\t\t\t\t{ key: 'center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },\n\t\t\t\t\t\t\t{ key: 'right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },\n\t\t\t\t\t\t\t{ key: 'nosort', label: 'no sort option' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ key: 'vertical-left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },\n\t\t\t\t\t\t\t{ key: 'vertical-center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },\n\t\t\t\t\t\t\t{ key: 'vertical-right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },\n\t\t\t\t\t\t\t{ key: 'vertical-nosort', label: 'no sort option' },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\t_data={DATA}\n\t\t\t\tclassName=\"block\"\n\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t_on={{\n\t\t\t\t\tonSort: (_event, payload) => {\n\t\t\t\t\t\tconsole.log(payload);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1165,7 +1165,7 @@
       "group": "table",
       "name": "stateless-with-selection",
       "path": "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[]) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(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",
+      "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\ntype KolTableStatelessElement = {\n\taddEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n\tremoveEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n};\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },\n\t{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['AAA1002', 'AAA1004']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tselectedKeys,\n\t\tkeyPropertyName: 'internalIdentifier',\n\t\tdisabledKeys: ['AAA1003', 'AAA1004'],\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<SelectionValue[]>) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(selection);\n\t};\n\n\tuseEffect(() => {\n\t\tconst tableElement = kolTableStatelessRef.current as unknown as KolTableStatelessElement | null;\n\t\tconst selectionChangeEvent = 'kolSelectionChange';\n\t\ttableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\ttableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tconst data = (cell as { data?: Data }).data;\n\t\tconst id = data?.id;\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1173,7 +1173,7 @@
       "group": "table",
       "name": "stateless-with-settings-menu",
       "path": "packages/samples/react/src/components/table/stateless-with-settings-menu.tsx",
-      "code": "import { KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\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>. Each column demonstrates a different combination of sorting and resizing options.\n\t\t\t</p>\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>ID</strong> keeps a fixed width with <code>resizable: false</code> while still allowing sorting.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Name</strong> represents the default behavior with both sorting and resizing enabled.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Role</strong> disables sorting but keeps <code>resizable: true</code> so users can widen the column if necessary.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>E-Mail</strong> allows sorting but locks its width with <code>resizable: false</code> to keep the layout stable.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Active</strong> is neither sortable nor resizable to emphasise the status indicator.\n\t\t\t\t</li>\n\t\t\t</ul>\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{\n\t\t\t\t\t\t\tkey: 'id',\n\t\t\t\t\t\t\tlabel: 'ID',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'name',\n\t\t\t\t\t\t\tlabel: 'Name',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'role',\n\t\t\t\t\t\t\tlabel: 'Role',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: false,\n\t\t\t\t\t\t\tresizable: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'email',\n\t\t\t\t\t\t\tlabel: 'E-Mail',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'active',\n\t\t\t\t\t\t\tlabel: 'Active',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: false,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t}}\n\t\t\t_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",
+      "code": "import { KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\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>. Each column demonstrates a different combination of sorting and resizing options.\n\t\t\t</p>\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>ID</strong> keeps a fixed width with <code>resizable: false</code> while still allowing sorting.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Name</strong> represents the default behavior with both sorting and resizing enabled.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Role</strong> disables sorting but keeps <code>resizable: true</code> so users can widen the column if necessary.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>E-Mail</strong> allows sorting but locks its width with <code>resizable: false</code> to keep the layout stable.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Active</strong> is neither sortable nor resizable to emphasise the status indicator.\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateless\n\t\t\t_label=\"Users (stateless with settings menu)\"\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{\n\t\t\t\t\t\t\tkey: 'id',\n\t\t\t\t\t\t\tlabel: 'ID',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'name',\n\t\t\t\t\t\t\tlabel: 'Name',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'role',\n\t\t\t\t\t\t\tlabel: 'Role',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: false,\n\t\t\t\t\t\t\tresizable: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'email',\n\t\t\t\t\t\t\tlabel: 'E-Mail',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'active',\n\t\t\t\t\t\t\tlabel: 'Active',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: false,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t}}\n\t\t\t_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"
     },
     {
@@ -1181,7 +1181,7 @@
       "group": "table",
       "name": "stateless-with-single-selection",
       "path": "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[]) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(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",
+      "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\ntype KolTableStatelessElement = {\n\taddEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n\tremoveEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;\n};\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: '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 }: CustomEvent<SelectionValue[]>) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(selection);\n\t};\n\n\tuseEffect(() => {\n\t\tconst tableElement = kolTableStatelessRef.current as unknown as KolTableStatelessElement | null;\n\t\tconst selectionChangeEvent = 'kolSelectionChange';\n\t\ttableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\ttableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tconst data = (cell as { data?: Data }).data;\n\t\tconst id = data?.id;\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1189,7 +1189,7 @@
       "group": "table",
       "name": "sticky-header",
       "path": "packages/samples/react/src/components/table/sticky-header.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\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: 'Conservation status', key: 'conservation_status', textAlign: 'left' },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left' },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left' },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', 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. The data now lists animal species with conservation-focused details.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolHeading _level={2} _label=\"Sticky headers\" />\n\t\t<KolTableStateful _label=\"Animal species overview\" _minWidth=\"1200px\" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" />\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\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', width: 160 },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160 },\n\t\t],\n\t],\n};\n\nexport const TableStickyHeader: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTableStateful with 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. The data now lists animal species with conservation-focused details.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolHeading _level={2} _label=\"Sticky headers\" />\n\t\t<KolTableStateful _label=\"Animal species overview\" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" />\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1197,7 +1197,7 @@
       "group": "table",
       "name": "with-footer",
       "path": "packages/samples/react/src/components/table/with-footer.tsx",
-      "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TableWithFooter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with footer data.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful\n\t\t\tclassName=\"w-full\"\n\t\t\t_label=\"Business hours\"\n\t\t\t_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",
+      "code": "import { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const TableWithFooter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with footer data.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful\n\t\t\tclassName=\"w-full\"\n\t\t\t_label=\"Business hours\"\n\t\t\t_headers={{\n\t\t\t\thorizontal: [\n\t\t\t\t\t[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'District',\n\t\t\t\t\t\t\tkey: 'asp',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Monday',\n\t\t\t\t\t\t\tkey: 'monday',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Tuesday',\n\t\t\t\t\t\t\tkey: 'tuesday',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Wednesday',\n\t\t\t\t\t\t\tkey: 'wednesday',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Thursday',\n\t\t\t\t\t\t\tkey: 'thursday',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Friday',\n\t\t\t\t\t\t\tkey: 'friday',\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t}}\n\t\t\t_data={[\n\t\t\t\t{\n\t\t\t\t\tasp: 'Center',\n\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\tfriday: '08:00',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tasp: 'Tiergarten',\n\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\tfriday: '08:00',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tasp: 'Maxvorstadt',\n\t\t\t\t\tmonday: '08:00',\n\t\t\t\t\ttuesday: '08:00',\n\t\t\t\t\twednesday: '10:00',\n\t\t\t\t\tthursday: '11:00',\n\t\t\t\t\tfriday: '08:00',\n\t\t\t\t},\n\t\t\t]}\n\t\t\t_dataFoot={[\n\t\t\t\t{\n\t\t\t\t\ttuesday: \"Lunch break from 11 to 14 o'clock\",\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1205,7 +1205,7 @@
       "group": "table",
       "name": "with-pagination",
       "path": "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 { 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 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",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\nconst PAGINATION: KoliBriTablePaginationProps = { _page: 2 };\n\nexport const TableWithPagination: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>\n\t\t</SampleDescription>\n\t\t<div className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Table description\" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1349,7 +1349,7 @@
       "group": "scenarios",
       "name": "button-shortkey-table",
       "path": "packages/samples/react/src/scenarios/button-shortkey-table.tsx",
-      "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { getRoot } from '../shares/react-roots';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.focus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.focus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t// 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 ButtonShortkeyTable: FC = () => {\n\ttype Data = {\n\t\tlabel: string;\n\t};\n\tconst DATA: Data[] = [\n\t\t{\n\t\t\tlabel: 'Row 1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 2',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 3',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 4',\n\t\t},\n\t];\n\n\tconst HEADERS: KoliBriTableHeaders = {\n\t\thorizontal: [\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Label',\n\t\t\t\t\tkey: 'label',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t},\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\tconst data = cell.data as Data | undefined;\n\t\t\t\t\t\tif (!data?.label) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(<RowActions label={data.label} />);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis scenario demonstrates an interactive table where each row contains buttons with shortcut keys. The shortcut keys provide visual keyboard\n\t\t\t\t\tindicators and are also functionally implemented.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>How to use:</strong> Move focus within one of the &quot;Actions&quot; cells and press &quot;e&quot; to edit or &quot;d&quot; to delete the\n\t\t\t\t\tcorresponding row.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Interactive Table with Button Shortkeys\" />\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label={`Interactive table with shortkey buttons in each row`}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t_minWidth=\"400px\"\n\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { getRoot } from '../shares/react-roots';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.focus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.focus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t// 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 ButtonShortkeyTable: FC = () => {\n\ttype Data = {\n\t\tlabel: string;\n\t};\n\tconst DATA: Data[] = [\n\t\t{\n\t\t\tlabel: 'Row 1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 2',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 3',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 4',\n\t\t},\n\t];\n\n\tconst HEADERS: KoliBriTableHeaders = {\n\t\thorizontal: [\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Label',\n\t\t\t\t\tkey: 'label',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\twidth: 200,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Actions',\n\t\t\t\t\tkey: 'actions',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\twidth: 150,\n\t\t\t\t\trender: (el, cell) => {\n\t\t\t\t\t\tconst data = cell.data as Data | undefined;\n\t\t\t\t\t\tif (!data?.label) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(<RowActions label={data.label} />);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis scenario demonstrates an interactive table where each row contains buttons with shortcut keys. The shortcut keys provide visual keyboard\n\t\t\t\t\tindicators and are also functionally implemented.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>How to use:</strong> Move focus within one of the &quot;Actions&quot; cells and press &quot;e&quot; to edit or &quot;d&quot; to delete the\n\t\t\t\t\tcorresponding row.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Interactive Table with Button Shortkeys\" />\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label={`Interactive table with shortkey buttons in each row`}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "scenario"
     },
     {
@@ -1741,7 +1741,7 @@
       "group": "spec",
       "name": "popover-button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/popover-button.md",
-      "code": "# kol-popover-button-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                      | Type                                                                                                                                                   | Default     |\n| --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                  | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                           | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                       | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                 | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                             | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                     | `string`                                                                                                                                               | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_popoverAlign`       | `_popover-align`    | Defines where to show the Popover preferably: top, right, bottom or left.                                                                                                        | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'bottom'`  |\n| `_role`               | `_role`             | Defines the role of the components primary element.                                                                                                                              | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                     | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                          | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_tabIndex`           | `_tab-index`        | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                 | `number \\| undefined`                                                                                                                                  | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                        | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                               | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                         | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                           | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                           | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                   | `'normal'`  |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by calling the native hidePopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShow the popover programmatically by calling the native showPopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description          |\n| ---- | -------------------- |\n|      | The popover content. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-popover-button-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                  | Type                                                                                                 | Default     |\n| --------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \\| undefined`                                                                                | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                        | `string \\| undefined`                                                                                | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                              | `string \\| undefined`                                                                                | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \\| undefined`                                                                               | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \\| undefined`                                                                               | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                               | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                         | `boolean \\| undefined`                                                                               | `false`     |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                             | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                | `string \\| undefined`                                                                                | `undefined` |\n| `_popoverAlign`       | `_popover-align`    | Defines where to show the Popover preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                | `'bottom'`  |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \\| undefined`                                                                                | `undefined` |\n| `_tabIndex`           | `_tab-index`        | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \\| undefined`                                                                                | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                           | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                       | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                            | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                         | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                       | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'`  |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by calling the native hidePopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShow the popover programmatically by calling the native showPopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description          |\n| ---- | -------------------- |\n|      | The popover content. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1805,7 +1805,7 @@
       "group": "spec",
       "name": "table-stateful",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateful.md",
-      "code": "# kol-table-stateful\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                 | Attribute              | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default     |\n| ------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_allowMultiSort`        | `_allow-multi-sort`    | Defines whether to allow multi sort.                                                                               | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_data` _(required)_     | `_data`                | Defines the primary table data.                                                                                    | `KoliBriTableDataType[] \\| string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_dataFoot`              | `_data-foot`           | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_hasSettingsMenu`       | `_has-settings-menu`   | Enables the settings menu if true (default: false).                                                                | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_headers` _(required)_  | `_headers`             | Defines the horizontal and vertical table headers.                                                                 | `string \\| { horizontal?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |\n| `_label` _(required)_    | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_minWidth` _(required)_ | `_min-width`           | Defines the table min-width (CSS width values).                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_on`                    | --                     | Defines the callback functions for table events.                                                                   | `undefined \\| { onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload> \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_pagination`            | `_pagination`          | Defines whether to show the data distributed over multiple pages.                                                  | `boolean \\| string \\| undefined \\| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \\| undefined; _page?: number \\| undefined; _max?: number \\| undefined; _boundaryCount?: number \\| undefined; _hasButtons?: boolean \\| Stringified<PaginationHasButton> \\| undefined; _pageSize?: number \\| undefined; _pageSizeOptions?: Stringified<number[]> \\| undefined; _siblingCount?: number \\| undefined; _customClass?: string \\| undefined; _label?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_paginationPosition`    | `_pagination-position` | Controls the position of the pagination.                                                                           | `\"both\" \\| \"bottom\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'bottom'`  |\n| `_selection`             | `_selection`           | Defines how rows can be selected and the current selection.                                                        | `string \\| undefined \\| ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string \\| undefined; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; disabledKeys?: KoliBriTableSelectionKeys \\| undefined; })`                                                                                                                                                                                                                                                                  | `undefined` |\n\n\n## Methods\n\n### `getSelection() => Promise<KoliBriTableDataType[] | null>`\n\nReturns the selected rows.\n\n#### Returns\n\nType: `Promise<KoliBriTableDataType[] | null>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-table-stateful\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                | Attribute              | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default     |\n| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_allowMultiSort`       | `_allow-multi-sort`    | Defines whether to allow multi sort.                                                                               | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_data` _(required)_    | `_data`                | Defines the primary table data.                                                                                    | `KoliBriTableDataType[] \\| string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_dataFoot`             | `_data-foot`           | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_hasSettingsMenu`      | `_has-settings-menu`   | Enables the settings menu if true (default: false).                                                                | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_headers` _(required)_ | `_headers`             | Defines the horizontal and vertical table headers.                                                                 | `string \\| { horizontal?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |\n| `_label` _(required)_   | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_on`                   | --                     | Defines the callback functions for table events.                                                                   | `undefined \\| { onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload> \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_pagination`           | `_pagination`          | Defines whether to show the data distributed over multiple pages.                                                  | `boolean \\| string \\| undefined \\| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \\| undefined; _page?: number \\| undefined; _max?: number \\| undefined; _boundaryCount?: number \\| undefined; _hasButtons?: boolean \\| Stringified<PaginationHasButton> \\| undefined; _pageSize?: number \\| undefined; _pageSizeOptions?: Stringified<number[]> \\| undefined; _siblingCount?: number \\| undefined; _customClass?: string \\| undefined; _label?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_paginationPosition`   | `_pagination-position` | Controls the position of the pagination.                                                                           | `\"both\" \\| \"bottom\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'bottom'`  |\n| `_selection`            | `_selection`           | Defines how rows can be selected and the current selection.                                                        | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })`                                                                                                                                                                                                                                                                  | `undefined` |\n\n\n## Methods\n\n### `getSelection() => Promise<KoliBriTableDataType[] | null>`\n\nReturns the selected rows.\n\n#### Returns\n\nType: `Promise<KoliBriTableDataType[] | null>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1813,7 +1813,7 @@
       "group": "spec",
       "name": "table-stateless",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateless.md",
-      "code": "# kol-table-stateless\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute            | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                   | Default     |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_data` _(required)_        | `_data`              | Defines the primary table data.                                                                                    | `KoliBriTableDataType[] \\| string`                                                                                                                                                                                                                                                     | `undefined` |\n| `_dataFoot`                 | `_data-foot`         | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[] \\| string \\| undefined`                                                                                                                                                                                                                                        | `undefined` |\n| `_hasSettingsMenu`          | `_has-settings-menu` | Enables the settings menu if true (default: false).                                                                | `boolean \\| undefined`                                                                                                                                                                                                                                                                 | `undefined` |\n| `_headerCells` _(required)_ | `_header-cells`      | Defines the horizontal and vertical table headers.                                                                 | `string \\| { horizontal?: KoliBriTableHeaderCell[][] \\| undefined; vertical?: KoliBriTableHeaderCell[][] \\| undefined; }`                                                                                                                                                              | `undefined` |\n| `_label` _(required)_       | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                               | `undefined` |\n| `_minWidth` _(required)_    | `_min-width`         | Defines the table min-width (CSS width values).                                                                    | `string`                                                                                                                                                                                                                                                                               | `undefined` |\n| `_on`                       | --                   | Defines the callback functions for table events.                                                                   | `undefined \\| { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> \\| undefined; onSelectionChange?: EventValueOrEventCallback<Event, KoliBriTableSelectionKeys> \\| undefined; onChangeHeaderCells?: EventValueOrEventCallback<Event, TableHeaderCells> \\| undefined; }` | `undefined` |\n| `_selection`                | `_selection`         | Defines how rows can be selected and the current selection.                                                        | `string \\| undefined \\| ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string \\| undefined; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; disabledKeys?: KoliBriTableSelectionKeys \\| undefined; })`                     | `undefined` |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-table-stateless\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute            | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                   | Default     |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_data` _(required)_        | `_data`              | Defines the primary table data.                                                                                    | `KoliBriTableDataType[] \\| string`                                                                                                                                                                                                                                                     | `undefined` |\n| `_dataFoot`                 | `_data-foot`         | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[] \\| string \\| undefined`                                                                                                                                                                                                                                        | `undefined` |\n| `_hasSettingsMenu`          | `_has-settings-menu` | Enables the settings menu if true (default: false).                                                                | `boolean \\| undefined`                                                                                                                                                                                                                                                                 | `undefined` |\n| `_headerCells` _(required)_ | `_header-cells`      | Defines the horizontal and vertical table headers.                                                                 | `string \\| { horizontal?: KoliBriTableHeaderCell[][] \\| undefined; vertical?: KoliBriTableHeaderCell[][] \\| undefined; }`                                                                                                                                                              | `undefined` |\n| `_label` _(required)_       | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                               | `undefined` |\n| `_on`                       | --                   | Defines the callback functions for table events.                                                                   | `undefined \\| { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> \\| undefined; onSelectionChange?: EventValueOrEventCallback<Event, KoliBriTableSelectionKeys> \\| undefined; onChangeHeaderCells?: EventValueOrEventCallback<Event, TableHeaderCells> \\| undefined; }` | `undefined` |\n| `_selection`                | `_selection`         | Defines how rows can be selected and the current selection.                                                        | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })`                     | `undefined` |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {