@public-ui/theme-default 3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0 → 3.0.2-rc.1

package/README.md

@@ -30,35 +30,35 @@ register(DEFAULT, defineCustomElements).then(() => {
 
 👉 [https://public-ui.github.io](https://public-ui.github.io)
 
-## Usage (DE)
-
-Das Default-Theme ist ein _Token-Based_ Theme, das mit minimalen Anpassungen sofort verwendet werden kann. Es bringt bereits alle notwendigen Stylings mit und kann
-über Design Tokens, in Form von _CSS Custom Properties_ an das eigene Design angepasst werden.
-
-### Variablen
-
-| Variable                          | Standard-Wert                                    | Bedeutung                                          |
-| --------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
-| `--kolibri-border-radius`         | `5px`                                            | Border-Radius für abgerundete Elemente             |
-| `--kolibri-font-family`           | `Verdana, Arial, Calibri, Helvetica, sans-serif` | Allgemeine Schriftart                              |
-| `--kolibri-font-size`             | `16px`                                           | Allgemeine Schriftgröße                            |
-| `--kolibri-spacing`               | `0.25rem`                                        | Allgemeiner Abstand zwischen Elementen             |
-| `--kolibri-border-width`          | `1px`                                            | Allgemeine Rahmen-Breite                           |
-| `--kolibri-color-primary`         | `#004b76`                                        | Primärfarbe                                        |
-| `--kolibri-color-primary-variant` | `#0077b6`                                        | Alternative Variante der Primärfarbe               |
-| `--kolibri-color-secondary`       | `#ccebf7`                                        | Sekundärfarbe                                      |
-| `--kolibri-color-danger`          | `#c0003c`                                        | Farbe für Fehlermeldungen und gefährliche Aktionen |
-| `--kolibri-color-warning`         | `#c44931`                                        | Farbe für Warnungen                                |
-| `--kolibri-color-success`         | `#005c45`                                        | Farbe für Erfolgsmeldungen                         |
-| `--kolibri-color-subtle`          | `#576164`                                        | Farbe für feine Akzente wie z.B. Rahmen            |
-| `--kolibri-color-light`           | `#ffffff`                                        | Helle Farbe für z.B. Hintergründe                  |
-| `--kolibri-color-text`            | `#202020`                                        | Textfarbe                                          |
-| `--kolibri-color-mute`            | `#f2f3f4`                                        | Farbe für deaktivierte Elemente                    |
-| `--kolibri-color-mute-variant`    | `#bec5c9`                                        | Alternative Farbe für deaktivierte Elemente        |
-
-### Verwendung
-
-Theme importieren und registrieren:
+## Usage
+
+The default theme is token based and works with minimal adjustments. It already contains all necessary styling and can
+be customized with design tokens using _CSS Custom Properties_.
+
+### Variables
+
+| Variable                          | Default value                                    | Meaning                                |
+| --------------------------------- | ------------------------------------------------ | -------------------------------------- |
+| `--kolibri-border-radius`         | `5px`                                            | Border radius for rounded elements     |
+| `--kolibri-font-family`           | `Verdana, Arial, Calibri, Helvetica, sans-serif` | Default font family                    |
+| `--kolibri-font-size`             | `16px`                                           | Base font size                         |
+| `--kolibri-spacing`               | `0.25rem`                                        | Base spacing between elements          |
+| `--kolibri-border-width`          | `1px`                                            | Border width                           |
+| `--kolibri-color-primary`         | `#004b76`                                        | Primary color                          |
+| `--kolibri-color-primary-variant` | `#0077b6`                                        | Alternative primary color              |
+| `--kolibri-color-secondary`       | `#ccebf7`                                        | Secondary color                        |
+| `--kolibri-color-danger`          | `#c0003c`                                        | Color for errors and dangerous actions |
+| `--kolibri-color-warning`         | `#c44931`                                        | Warning color                          |
+| `--kolibri-color-success`         | `#005c45`                                        | Success color                          |
+| `--kolibri-color-subtle`          | `#576164`                                        | Subtle accent color for borders        |
+| `--kolibri-color-light`           | `#ffffff`                                        | Light background color                 |
+| `--kolibri-color-text`            | `#202020`                                        | Text color                             |
+| `--kolibri-color-mute`            | `#f2f3f4`                                        | Color for disabled elements            |
+| `--kolibri-color-mute-variant`    | `#bec5c9`                                        | Alternate disabled color               |
+
+### Usage
+
+Import and register the theme:
 
 ```js
 import { register } from '@public-ui/components';
@@ -68,9 +68,9 @@ import { DEFAULT } from '@public-ui/theme-default';
 register(DEFAULT, defineCustomElements);
 ```
 
-Für mehr Details und weitere Optionen siehe [Erste Schritte](https://public-ui.github.io/docs/get-started/first-steps#einbinden-in-ein-bestehendes-projekt).
+For more details and options see [Getting started](https://public-ui.github.io/docs/get-started/first-steps#einbinden-in-ein-bestehendes-projekt).
 
-Um die _Design Tokens_ anzupassen, reicht ein einfaches Stylesheet, das die gewünschten Custom Properties überschreibt. Es ist dabei nicht notwendig, alle Properties zu setzen, sondern nur solche, die auch überschrieben werden sollen. Beispiel:
+To adjust the design tokens, create a simple stylesheet that overrides the desired custom properties. You do not need to set every property—only those you want to change. Example:
 
 ```css
 :root {
@@ -81,3 +81,26 @@ Um die _Design Tokens_ anzupassen, reicht ein einfaches Stylesheet, das die gew
 	--kolibri-color-primary-variant: #ff64b9;
 }
 ```
+
+## Design Tokens
+
+The following tokens are defined in `src/global.scss` and serve as the base for colors, fonts, and spacing across all components.
+
+| Token                     | Default value                                                                | Meaning                      |
+| ------------------------- | ---------------------------------------------------------------------------- | ---------------------------- |
+| `--border-radius`         | `var(--kolibri-border-radius, 5px)`                                          | Default border radius        |
+| `--font-family`           | `var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif)` | Default font                 |
+| `--font-size`             | `var(--kolibri-font-size, #{rem(16)})`                                       | Base font size               |
+| `--spacing`               | `var(--kolibri-spacing, #{rem(4)})`                                          | Standard spacing             |
+| `--border-width`          | `var(--kolibri-border-width, 1px)`                                           | Border width                 |
+| `--color-primary`         | `var(--kolibri-color-primary, #004b76)`                                      | Primary accent color         |
+| `--color-primary-variant` | `var(--kolibri-color-primary-variant, #0077b6)`                              | Variant of the primary color |
+| `--color-secondary`       | `var(--kolibri-color-secondary, #ccebf7)`                                    | Secondary color              |
+| `--color-danger`          | `var(--kolibri-color-danger, #b4003c)`                                       | Error color                  |
+| `--color-warning`         | `var(--kolibri-color-warning, #c44931)`                                      | Warning color                |
+| `--color-success`         | `var(--kolibri-color-success, #005c45)`                                      | Success color                |
+| `--color-subtle`          | `var(--kolibri-color-subtle, #576164)`                                       | Subtle lines and borders     |
+| `--color-light`           | `var(--kolibri-color-light, #ffffff)`                                        | Light surface color          |
+| `--color-text`            | `var(--kolibri-color-text, #202020)`                                         | Standard text color          |
+| `--color-mute`            | `var(--kolibri-color-mute, #f2f3f4)`                                         | Muted color                  |
+| `--color-mute-variant`    | `var(--kolibri-color-mute-variant, #bec5c9)`                                 | Alternate muted color        |

package/dist/index.cjs

@@ -1092,9 +1092,9 @@ var css_248z$g = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--
 
 var css_248z$f = "@layer kol-theme-component {\n  :host {\n    background-color: var(--color-mute);\n  }\n  .kol-nav__list {\n    list-style: none;\n  }\n  .kol-nav__list--nested {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__list--nested .kol-link,\n  .kol-nav__list--nested .kol-button {\n    font-weight: normal !important;\n    border-left-color: transparent !important;\n  }\n  .kol-nav__entry--link {\n    display: flex;\n  }\n  .kol-nav__entry .kol-link:hover {\n    text-decoration: underline;\n  }\n  .kol-nav__entry .kol-link,\n  .kol-nav__entry .kol-button {\n    align-items: center;\n    color: var(--color-primary);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    text-decoration: none;\n  }\n  .kol-nav__entry .kol-link:focus-visible,\n  .kol-nav__entry .kol-button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__list--vertical .kol-nav__entry .kol-link,\n  .kol-nav__list--vertical .kol-nav__entry .kol-button {\n    border-left: 2px solid transparent;\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav--horizontal .kol-nav__entry .kol-link,\n  .kol-nav--horizontal .kol-nav__entry .kol-button {\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-link,\n  .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-button {\n    border-left-color: var(--color-primary);\n  }\n  .kol-nav__list-item--active .kol-nav__entry .kol-link,\n  .kol-nav__list-item--active .kol-nav__entry .kol-button {\n    font-weight: bold;\n  }\n  .kol-nav__expand-button .kol-button:hover {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .kol-nav__expand-button .kol-button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__expand-button .kol-button__text {\n    justify-content: center;\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-nav__toggle-button .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-nav__toggle-button .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__toggle-button .kol-button:disabled:hover .kol-nav__toggle-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n}";
 
-var css_248z$e = "@layer kol-theme-component {\n  .kol-pagination__button--selected .kol-button {\n    opacity: 1;\n  }\n  .kol-button__text {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n    border: 0;\n  }\n  .kol-button:focus .kol-button__text {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .kol-button:active .kol-button__text {\n    color: var(--color-light);\n    outline: none;\n  }\n}";
+var css_248z$e = "@layer kol-theme-component {\n  @layer kol-component {\n    @media (min-width: 1024px) {\n      .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n        gap: calc(16rem / var(--kolibri-root-font-size, 16));\n      }\n    }\n    .kol-pagination .kol-button:focus .kol-button__text {\n      border-radius: var(--border-radius);\n      outline-offset: 2px;\n      outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n      transition: 200ms outline-offset linear;\n    }\n    .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n      background-color: var(--color-primary-variant);\n      border-color: var(--color-primary-variant);\n      box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n      color: var(--color-light);\n    }\n    .kol-pagination .kol-button:active .kol-button__text {\n      color: var(--color-light);\n      outline: none;\n    }\n    .kol-pagination .kol-button__text {\n      background-color: var(--color-light);\n      border-radius: var(--border-radius);\n      border: 1px solid var(--color-primary);\n      color: var(--color-primary);\n      font-weight: 700;\n      min-height: var(--a11y-min-size);\n      min-width: var(--a11y-min-size);\n      padding: calc(8rem / var(--kolibri-root-font-size, 16));\n      text-align: center;\n      transition-duration: 0.5s;\n      transition-property: background-color, color, border-color;\n    }\n    .kol-pagination__button--selected .kol-button {\n      opacity: 1;\n    }\n    .kol-pagination__button--selected .kol-button__text {\n      background-color: var(--color-primary);\n      color: var(--color-light);\n      border: 0;\n    }\n  }\n}";
 
-var css_248z$d = "@layer kol-theme-component {\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-popover-button__popover {\n    border: var(--border-width) solid var(--color-primary);\n    padding: var(--spacing);\n  }\n}";
+var css_248z$d = "@layer kol-theme-component {\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n}";
 
 var css_248z$c = "@layer kol-theme-component {\n  .kol-progress__bar-progress {\n    fill: var(--color-primary-variant);\n  }\n  .kol-progress__cycle-background {\n    stroke: var(--color-mute-variant);\n  }\n  .kol-progress__cycle-progress {\n    stroke: var(--color-primary-variant);\n  }\n}";
 
@@ -1106,9 +1106,9 @@ var css_248z$9 = "@layer kol-theme-component {\n  .kol-skip-nav .kol-link__text
 
 var css_248z$8 = "@layer kol-theme-component {\n  .kol-split-button {\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-primary);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .kol-split-button__button .kol-button .kol-span {\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n  }\n  .kol-split-button__horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: 2px;\n    width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button__secondary-button {\n    height: 100%;\n  }\n  .kol-split-button__secondary-button .kol-span {\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n  }\n  .kol-split-button .kol-span {\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-split-button .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-split-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-split-button .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-split-button .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-split-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-split-button .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-split-button .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-split-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-split-button__button .kol-button__text {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .kol-split-button__secondary-button .kol-button__text {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .kol-split-button .kol-button {\n    height: 100%;\n  }\n  .kol-split-button .kol-button__text {\n    height: 100%;\n    border: none;\n  }\n}";
 
-var css_248z$7 = "@layer kol-theme-component {\n  .kol-table-settings {\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    border-top: var(--border-width) solid var(--color-mute-variant);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    line-height: var(--line-height);\n    word-break: break-word;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(var(--a11y-min-size) + 2px);\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__focus-element {\n    outline: none;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-primary);\n    background-color: var(--color-light);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 3px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-table-stateful__pagination {\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
+var css_248z$7 = "@layer kol-theme-component {\n  .kol-table-settings {\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    border-top: var(--border-width) solid var(--color-mute-variant);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  @layer kol-component {\n    @media (min-width: 1024px) {\n      .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n        gap: calc(16rem / var(--kolibri-root-font-size, 16));\n      }\n    }\n    .kol-pagination .kol-button:focus .kol-button__text {\n      border-radius: var(--border-radius);\n      outline-offset: 2px;\n      outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n      transition: 200ms outline-offset linear;\n    }\n    .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n      background-color: var(--color-primary-variant);\n      border-color: var(--color-primary-variant);\n      box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n      color: var(--color-light);\n    }\n    .kol-pagination .kol-button:active .kol-button__text {\n      color: var(--color-light);\n      outline: none;\n    }\n    .kol-pagination .kol-button__text {\n      background-color: var(--color-light);\n      border-radius: var(--border-radius);\n      border: 1px solid var(--color-primary);\n      color: var(--color-primary);\n      font-weight: 700;\n      min-height: var(--a11y-min-size);\n      min-width: var(--a11y-min-size);\n      padding: calc(8rem / var(--kolibri-root-font-size, 16));\n      text-align: center;\n      transition-duration: 0.5s;\n      transition-property: background-color, color, border-color;\n    }\n    .kol-pagination__button--selected .kol-button {\n      opacity: 1;\n    }\n    .kol-pagination__button--selected .kol-button__text {\n      background-color: var(--color-primary);\n      color: var(--color-light);\n      border: 0;\n    }\n  }\n  .kol-table {\n    line-height: var(--line-height);\n    word-break: break-word;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(var(--a11y-min-size) + 2px);\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__focus-element {\n    outline: none;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-primary);\n    background-color: var(--color-light);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 3px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-table-stateful__pagination {\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
 
-var css_248z$6 = "@layer kol-theme-component {\n  .kol-table-settings {\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    border-top: var(--border-width) solid var(--color-mute-variant);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    line-height: var(--line-height);\n    word-break: break-word;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(var(--a11y-min-size) + 2px);\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__focus-element {\n    outline: none;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-primary);\n    background-color: var(--color-light);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 3px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n}";
+var css_248z$6 = "@layer kol-theme-component {\n  .kol-table-settings {\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    border-top: var(--border-width) solid var(--color-mute-variant);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  @layer kol-component {\n    @media (min-width: 1024px) {\n      .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n        gap: calc(16rem / var(--kolibri-root-font-size, 16));\n      }\n    }\n    .kol-pagination .kol-button:focus .kol-button__text {\n      border-radius: var(--border-radius);\n      outline-offset: 2px;\n      outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n      transition: 200ms outline-offset linear;\n    }\n    .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n      background-color: var(--color-primary-variant);\n      border-color: var(--color-primary-variant);\n      box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n      color: var(--color-light);\n    }\n    .kol-pagination .kol-button:active .kol-button__text {\n      color: var(--color-light);\n      outline: none;\n    }\n    .kol-pagination .kol-button__text {\n      background-color: var(--color-light);\n      border-radius: var(--border-radius);\n      border: 1px solid var(--color-primary);\n      color: var(--color-primary);\n      font-weight: 700;\n      min-height: var(--a11y-min-size);\n      min-width: var(--a11y-min-size);\n      padding: calc(8rem / var(--kolibri-root-font-size, 16));\n      text-align: center;\n      transition-duration: 0.5s;\n      transition-property: background-color, color, border-color;\n    }\n    .kol-pagination__button--selected .kol-button {\n      opacity: 1;\n    }\n    .kol-pagination__button--selected .kol-button__text {\n      background-color: var(--color-primary);\n      color: var(--color-light);\n      border: 0;\n    }\n  }\n  .kol-table {\n    line-height: var(--line-height);\n    word-break: break-word;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(var(--a11y-min-size) + 2px);\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__focus-element {\n    outline: none;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-primary);\n    background-color: var(--color-light);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 3px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n}";
 
 var css_248z$5 = "@layer kol-theme-component {\n  .kol-tabs {\n    display: grid;\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-display: grid;\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: flex;\n    --grid-template-rows: 1fr auto;\n    --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-top {\n    --display: flex;\n    --grid-template-rows: auto 1fr;\n    --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: var(--display);\n    flex-wrap: wrap;\n    gap: var(--button-group-gap);\n    order: var(--button-group-order);\n  }\n  .kol-tabs .kol-button {\n    background-color: transparent;\n    border: 0;\n    border-radius: var(--border-radius);\n    border: none;\n    font-style: normal;\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    color: var(--color-subtle);\n    padding: 0;\n  }\n  .kol-tabs .kol-button:hover {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n    padding-bottom: 0.25em;\n  }\n  .kol-tabs .kol-button.selected .kol-span__container {\n    border-bottom: 0.25em solid;\n  }\n  .kol-tabs .kol-button .kol-span__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__content {\n    padding: 0.25em 0;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n  .kol-tabs .kol-button-wc {\n    width: 100%;\n  }\n}";