@public-ui/hydrate 4.1.2-rc.1 → 4.1.2-rc.2

package/dist/index.js

@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
 
 const NAMESPACE = 'kolibri';
 const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
-const Env = /* kolibri */ {"kolibriVersion":"4.1.2-rc.1"};
+const Env = /* kolibri */ {"kolibriVersion":"4.1.2-rc.2"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -6037,7 +6037,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
 let KolTreeTag = 'kol-tree';
 let KolTreeWcTag = 'kol-tree-wc';
 
-const defaultStyleCss$N = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}";
+const defaultStyleCss$N = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}";
 
 class KolAbbr {
     constructor(hostRef) {
@@ -6047,7 +6047,7 @@ class KolAbbr {
         };
     }
     render() {
-        return (hAsync(Host, { key: '7f764ad6e259ac460dcd1f133da2ef8ad41b74b7', class: "kol-abbr" }, hAsync("abbr", { key: '3f49be16f6bbbd0d2cbd953319f6b23a8766a241', tabIndex: this.state._label ? 0 : undefined }, hAsync("slot", { key: '81175d6ce9217f34e4faaa6aa08597e63f07389e' })), this.state._label ? hAsync(KolTooltipWcTag, { "aria-hidden": "true", _label: this.state._label }) : null));
+        return (hAsync(Host, { key: '94f9682f9dafc4621970a41bc2d713786e066763', class: "kol-abbr" }, hAsync("abbr", { key: 'dcc26a9b0c264ee71a50857f6dad39b62e23454a', tabIndex: this.state._label ? 0 : undefined }, hAsync("slot", { key: '061acba8e7ba7dc6b7895aeeb9e9642650fcf646' })), this.state._label ? hAsync(KolTooltipWcTag, { "aria-hidden": "true", _label: this.state._label }) : null));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -6292,7 +6292,7 @@ const watchHeadingLevel = (component, value) => {
     validateLevel(component, value);
 };
 
-const defaultStyleCss$M = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition: none !important;\n    }\n  }\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n  }\n  @media print {\n    :not(.collapsible--open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__wrapper {\n    /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n    transform: translateZ(0);\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    opacity: 0;\n    transform: scaleY(0);\n    transform-origin: top;\n    min-height: 0;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n  }\n  .collapsible--open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .collapsible--open .collapsible__wrapper-animation {\n    opacity: 1;\n    transform: scaleY(1);\n    visibility: visible;\n  }\n  .collapsible {\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__heading-button button .kol-span {\n    align-items: flex-start;\n  }\n  .collapsible--open:focus-within {\n    position: relative;\n    z-index: 100;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
+const defaultStyleCss$M = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition: none !important;\n    }\n  }\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n  }\n  @media print {\n    :not(.collapsible--open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__wrapper {\n    /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n    transform: translateZ(0);\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    opacity: 0;\n    transform: scaleY(0);\n    transform-origin: top;\n    min-height: 0;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n  }\n  .collapsible--open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .collapsible--open .collapsible__wrapper-animation {\n    opacity: 1;\n    transform: scaleY(1);\n    visibility: visible;\n  }\n  .collapsible {\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__heading-button button .kol-span {\n    align-items: flex-start;\n  }\n  .collapsible--open:focus-within {\n    position: relative;\n    z-index: 100;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
 
 featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
 
@@ -6352,7 +6352,7 @@ class KolAccordion {
                 animationClass: `${rootClass}__wrapper-animation`,
             },
         };
-        return (hAsync(KolCollapsibleFc, Object.assign({ key: '033717b5a67b6f63ebea447be031a9c234339e43' }, props), hAsync("slot", { key: '08b68dbec91743fdfabdee75a07a451713951dc6' })));
+        return (hAsync(KolCollapsibleFc, Object.assign({ key: '4676e68c1ae6165ff687d998116e432e52fa1b07' }, props), hAsync("slot", { key: '9d4b9607bb6bd6cc4be3d610568c0e7a8072e68f' })));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -6407,7 +6407,7 @@ class KolAccordion {
     }; }
 }
 
-const defaultStyleCss$L = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+const defaultStyleCss$L = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
 class KolAlert {
     constructor(hostRef) {
@@ -6422,7 +6422,7 @@ class KolAlert {
         };
     }
     render() {
-        return (hAsync(KolAlertWcTag, { key: 'bf51c76e2d6568eea0d1a0c3047da6987aa249d8', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: 'b754666af76f0fcbb15ffeaa4d11b2f61d93abc4' })));
+        return (hAsync(KolAlertWcTag, { key: '721b696fb334639b5996187b75774aa357e7131c', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: '49b4a02832d1ce95880243eaeb88bab7211f8137' })));
     }
     static get style() { return {
         default: defaultStyleCss$L
@@ -6853,7 +6853,7 @@ class KolAlertWc {
             onCloserClick: this.close,
             onAlertTimeout: this.handleAlertTimeout,
         };
-        return (hAsync(KolAlertFc, Object.assign({ key: '5db3514131f644ab76a9bddc438cdf0af412e6e8' }, props), hAsync("slot", { key: '61ef793542ae680a090596e44fcb98b9f4e55708' })));
+        return (hAsync(KolAlertFc, Object.assign({ key: '974773e3e6a186d229c03d1b027d755d3adee0b5' }, props), hAsync("slot", { key: '3af99a27b6b0b4a359c064fd80f0f855eb96734d' })));
     }
     validateAlert(value) {
         watchBoolean(this, '_alert', value);
@@ -10104,7 +10104,7 @@ class KolAvatar extends BaseWebComponent {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'f3de3f10eb6e10760c9b22bc89163e9760139ad3' }, hAsync(AvatarFC, { key: '57229b934dfe2639d35561450c895053115c08cc', color: this.ctrl.getRenderProp('color'), label: this.ctrl.getRenderProp('label'), src: this.ctrl.getRenderProp('src'), initials: this.initials })));
+        return (hAsync(Host, { key: '23eea40861c423929e8fd5900ca00a58568dd3c2' }, hAsync(AvatarFC, { key: 'be54606222a6b5fc4f5164d738af2512a4cce600', color: this.ctrl.getRenderProp('color'), label: this.ctrl.getRenderProp('label'), src: this.ctrl.getRenderProp('src'), initials: this.initials })));
     }
     static get watchers() { return {
         "_color": ["watchColor"],
@@ -19122,7 +19122,7 @@ const SpanFC = (props, children) => {
         }), classNames) }), renderIcon(top, 'top'), hAsync("span", { class: spanBem('container') }, renderIcon(left, 'left'), hideExpertSlot && renderLabel(label, hideLabel, allowMarkdown, badgeText), hAsync("span", { "aria-hidden": hideExpertSlot ? 'true' : undefined, class: spanBem('label'), hidden: hideExpertSlot }, children), isString$1(badgeText) && badgeText.length > 0 && (hAsync("kbd", { "aria-hidden": "true", class: "badge-text-hint" }, badgeText)), renderIcon(right, 'right')), renderIcon(bottom, 'bottom')));
 };
 
-const defaultStyleCss$J = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-badge {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n  }\n  .kol-badge .kol-badge__smart-button .button {\n    color: inherit;\n  }\n}";
+const defaultStyleCss$J = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-badge {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n  }\n  .kol-badge .kol-badge__smart-button .button {\n    color: inherit;\n  }\n}";
 
 featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
 class KolBadge {
@@ -19157,12 +19157,12 @@ class KolBadge {
     }
     render() {
         const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
-        return (hAsync("span", { key: '580574889ffde643ce43af9944ae45655960a902', class: clsx('kol-badge', {
+        return (hAsync("span", { key: '51cd5cfb019f4a9cac5da1fd53f060514387ac81', class: clsx('kol-badge', {
                 'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
             }), style: {
                 backgroundColor: this.bgColorStr,
                 color: this.colorStr,
-            } }, hAsync(SpanFC, { key: '1d0b60ce471a766a45fca01deda6f2dd7c878553', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
+            } }, hAsync(SpanFC, { key: 'cfa69844cccfca137f2ce5f3629f56da146de086', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
     }
     validateIcons(value) {
         validateIcons(this, value);
@@ -19233,7 +19233,7 @@ const watchNavLinks = (className, component, value) => {
     uiUxHintMillerscheZahl(className, component.state._links.length);
 };
 
-const defaultStyleCss$I = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n    flex-wrap: wrap;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-breadcrumb__list-element:first-child:last-child {\n    min-height: var(--a11y-min-size);\n  }\n}";
+const defaultStyleCss$I = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n    flex-wrap: wrap;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-breadcrumb__list-element:first-child:last-child {\n    min-height: var(--a11y-min-size);\n  }\n}";
 
 class KolBreadcrumb {
     constructor(hostRef) {
@@ -19248,7 +19248,7 @@ class KolBreadcrumb {
         };
     }
     render() {
-        return (hAsync("nav", { key: 'd9fd0b9aab296d102dc8914c3147ebc516c07680', class: "kol-breadcrumb", "aria-label": this.state._label }, hAsync("ul", { key: '8cb9aa83f850892ff7adac703119bb3a81475580', class: "kol-breadcrumb__list" }, this.state._links.length === 0 && (hAsync("li", { key: '71615c17898d74043c3d4109bc5b0f2271a5ad83' }, hAsync(IconFC, { key: '6588e705701058e4918608a8389511baa750379f', class: "kol-breadcrumb_icon", label: "", icons: "kolicon-house" }), "\u2026")), this.state._links.map(this.renderLink))));
+        return (hAsync("nav", { key: 'bff94e213bc73c24069c1e5aa297aa54b6e98003', class: "kol-breadcrumb", "aria-label": this.state._label }, hAsync("ul", { key: '2100b5df04175f39ebdfab1708100623856c4470', class: "kol-breadcrumb__list" }, this.state._links.length === 0 && (hAsync("li", { key: '3b73286454440609917059e00581d71ed20788d8' }, hAsync(IconFC, { key: '2b20cb24ae17a71c5b0dbeb713d1e32b04660f92', class: "kol-breadcrumb_icon", label: "", icons: "kolicon-house" }), "\u2026")), this.state._links.map(this.renderLink))));
     }
     validateLabel(value, _oldValue, initial = false) {
         if (!initial) {
@@ -19291,7 +19291,7 @@ class KolBreadcrumb {
     }; }
 }
 
-const defaultStyleCss$H = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n}";
+const defaultStyleCss$H = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n}";
 
 class KolButton {
     constructor(hostRef) {
@@ -19314,7 +19314,7 @@ class KolButton {
         return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
     }
     render() {
-        return (hAsync(KolButtonWcTag, { key: 'fe6afdaca4a57dc2e7a3e49944231c30cfafe1e4', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '375996d22e09b3068d52eff2d3f833c08732b069', name: "expert", slot: "expert" })));
+        return (hAsync(KolButtonWcTag, { key: 'd9a97c427bdbfb51b9803526d4450b657b8866c9', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '32a203c53d953b2b67843a2d9eb7a13e57e8c73d', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: defaultStyleCss$H
@@ -19352,7 +19352,7 @@ class KolButton {
     }; }
 }
 
-const defaultStyleCss$G = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-button--standalone .kol-button__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-button .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-button:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--inline {\n    min-width: unset;\n    min-height: unset;\n  }\n}";
+const defaultStyleCss$G = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-button--standalone .kol-button__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-button .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-button:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--inline {\n    min-width: unset;\n    min-height: unset;\n  }\n}";
 
 class KolButtonLink {
     constructor(hostRef) {
@@ -19374,7 +19374,7 @@ class KolButtonLink {
         return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
     }
     render() {
-        return (hAsync(KolButtonWcTag, { key: 'a2c848b3dd301fc345b257e472025d598241fd3e', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '35770be517dc2b461efec7c21b1811d6edf3ab91', name: "expert", slot: "expert" })));
+        return (hAsync(KolButtonWcTag, { key: '57e96c9d75c338f2772a58d6f6ec8cc602915d7d', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: 'afb56c33a6023b1ce22b4d68b0e4a96d00794c7c', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: defaultStyleCss$G
@@ -19692,14 +19692,14 @@ class KolButtonWc {
         const badgeText = this.state._accessKey || this.state._shortKey;
         const isDisabled = this.state._disabled === true;
         const hideLabel = this.state._hideLabel === true;
-        return (hAsync(Host, { key: '9c337180cb21c20221a9df3b9b27ae37f47a1790' }, hAsync("button", { key: '2e0ca7d59677074713d4053f36254481acdf39d6', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
+        return (hAsync(Host, { key: '9d9147d82979b4a1bca5da16005809aaefb01921' }, hAsync("button", { key: '7e78ab116353e31f2211869ad2ca5887bccea13d', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
                 'kol-button--disabled': isDisabled,
                 [`kol-button--${this.state._variant}`]: this.state._variant !== 'custom',
                 'kol-button--inline': this.state._inline === true,
                 'kol-button--standalone': this.state._inline === false,
                 'kol-button--hide-label': hideLabel,
                 [this.state._customClass]: typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-            }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(SpanFC, { key: '7fcec675f9fa011255ad528126ac2864c2d9c3c5', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'c847510cd8126a8b495079b70dd79dd0dda11a63', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: '6e7514c398355dedfb1913941edaee73c2777f96', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
+            }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(SpanFC, { key: 'cfef3ab393862d6a1a160fdbc4c932c0898f0449', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '075d2b913b1c8b44fb26cf8ea28e14b38fe5e024', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: '9470bcf5433e3150118a161287d023ec34de58cc', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -19709,6 +19709,7 @@ class KolButtonWc {
         };
         this.onClick = (event) => {
             var _a, _b;
+            event.stopPropagation();
             if (this.state._hideLabel) {
                 void this.hideTooltip();
             }
@@ -19911,7 +19912,7 @@ class KolButtonWc {
     }; }
 }
 
-const defaultStyleCss$F = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card :host {\n    display: inline-block;\n  }\n  .kol-card .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-card .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-card .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    grid-template-areas: \"header  close\" \"content content\";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n}";
+const defaultStyleCss$F = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card :host {\n    display: inline-block;\n  }\n  .kol-card .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-card .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-card .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    grid-template-areas: \"header  close\" \"content content\";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n}";
 
 class KolCard {
     constructor(hostRef) {
@@ -19920,7 +19921,7 @@ class KolCard {
         this._level = 0;
     }
     render() {
-        return (hAsync(KolCardWcTag, { key: 'db950a543bc2f41a1e0786c9ac3d4cb0fce5cf97', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: 'f7ad1dd60427b5e2ae00f0e2260309a025d1ed44' })));
+        return (hAsync(KolCardWcTag, { key: 'b7e95eac842a1cbcfb328656f17596283f17284a', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: '7b686b0f83c138ab0d497f9b6a0d7d5927bce63c' })));
     }
     static get style() { return {
         default: defaultStyleCss$F
@@ -20151,7 +20152,7 @@ class KolCardWc {
         this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
     }
     render() {
-        return (hAsync(Host, { key: '674a6314014c048aa08444b0a2b5968889b766dc' }, hAsync("div", { key: '222ede676ce0fbefd43a8bfea23c1916f5df1969', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: '75332c1ff5ddb4b4d033cc119b4bde91d65c9623', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '3e2b7ec0db3781392fae154c9e68546ec5dbc5fa', class: "kol-card__content" }, hAsync("slot", { key: '7a6516db0b5fe8afb25c84278ba7e036ad05f124' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: 'd24b492cbeff9ee1ffb49281e014f44d9075f694', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
+        return (hAsync(Host, { key: '70218a4d4de1bbdb2a443877460f9e2ef0b88589' }, hAsync("div", { key: 'eb1414340f6cd3d4ae8517b0c2323e1d39405711', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: '254dfea3bc3c449128907c3dae65e19e1d4cf873', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '8d235261845cb04cd3e06f5a32daba433eeee4ca', class: "kol-card__content" }, hAsync("slot", { key: '681bc139e3f13078fff1b16b8f59fb242c273d27' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: '1548b83ac480b2170ea777bcb88ab8af52a45797', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
                 left: {
                     icon: 'kolicon-cross',
                 },
@@ -20256,7 +20257,7 @@ class KolClickButton extends BaseWebComponent {
         });
     }
     render() {
-        return (hAsync(Host, { key: '110041b8dc2e5552da9a611d0e3d5bb9a62759f3' }, hAsync(ClickButtonFC, { key: 'ea052a69f9090f20dff0be51a98bb1bbbf206813', label: this.ctrl.getRenderProp('label'), refButton: this.ctrl.setButtonRef, handleClick: this.ctrl.handleClick })));
+        return (hAsync(Host, { key: '9a349fe366c8a522c1846d56445bde8b3f78c2c9' }, hAsync(ClickButtonFC, { key: '643a3024010ce5a75262b84abf65d8072b786fd1', label: this.ctrl.getRenderProp('label'), refButton: this.ctrl.setButtonRef, handleClick: this.ctrl.handleClick })));
     }
     static get watchers() { return {
         "_label": ["watchLabel"]
@@ -20763,7 +20764,7 @@ class ComboboxController extends InputIconController {
     }
 }
 
-const defaultStyleCss$E = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-input-container:has(.kol-custom-suggestions-options-group--open) {\n    z-index: 10;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-combobox__delete .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-combobox__delete :host {\n    display: inline-block;\n  }\n  .kol-combobox__delete .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-combobox__delete .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-combobox__delete .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-combobox__delete .kol-button {\n    margin-top: -2px;\n    margin-bottom: -2px;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}";
+const defaultStyleCss$E = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-input-container:has(.kol-custom-suggestions-options-group--open) {\n    z-index: 10;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-combobox__delete .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-combobox__delete :host {\n    display: inline-block;\n  }\n  .kol-combobox__delete .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-combobox__delete .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-combobox__delete .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-combobox__delete .kol-button {\n    margin-top: -2px;\n    margin-bottom: -2px;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}";
 
 class KolCombobox {
     async getValue() {
@@ -20890,13 +20891,13 @@ class KolCombobox {
     }
     render() {
         const isDisabled = this.state._disabled === true;
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'db71d35313b6e58f6a0eb98da23040272d994e3c' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6e7320c20b5d979a371b051476c974ca452cae5b', state: this.state }, hAsync("div", { key: '49f1a0da303e8d510d156202b38b6c6903e49eb2', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: '1d25644cc08ada56fa125985c9d269efa117c527' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '6d38d479643b4af04b36d6793be494da314c6c36', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '1a36f51e4b614079ab3aa5fc35585bc1b4d97652' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6958192a611238f226ac7711c24e0065eddf7c06', state: this.state }, hAsync("div", { key: 'd36093f03c0018b3de44ca31019d1a04b0e68dbf', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'f0427c656abb3aeca2b761e90226a8825b8136a7' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: 'ebc6797ce70fac0b8da88817eecb97e0400f8576', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
                 onClick: () => {
                     this.clearSelection();
                 },
-            } })), hAsync(IconFC, { key: '552ee289ef27f063271e6760bc85fd854dff7563', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), hAsync(IconFC, { key: '303c9ac2c437347fff9cfc93006ddbe592b8f313', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '0226ffb3820a113d2a0e8fdf3d5330be9b0ad7ea', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredSuggestions) &&
+            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '3f14db638330adacdcc5eb12c8b29892363e07e9', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
                     if (el)
@@ -21210,7 +21211,7 @@ class KolCombobox {
     }; }
 }
 
-const defaultStyleCss$D = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition: none !important;\n    }\n  }\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n  }\n  @media print {\n    :not(.collapsible--open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__wrapper {\n    /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n    transform: translateZ(0);\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    opacity: 0;\n    transform: scaleY(0);\n    transform-origin: top;\n    min-height: 0;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n  }\n  .collapsible--open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .collapsible--open .collapsible__wrapper-animation {\n    opacity: 1;\n    transform: scaleY(1);\n    visibility: visible;\n  }\n  .collapsible {\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__heading-button button .kol-span {\n    align-items: flex-start;\n  }\n  .collapsible--open:focus-within {\n    position: relative;\n    z-index: 100;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-details__heading-button {\n    display: flex;\n  }\n  .kol-details__heading-button .kol-button {\n    min-height: auto;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  .collapsible--open .kol-details__heading-button .kol-icon {\n    transform: rotate(90deg);\n  }\n}";
+const defaultStyleCss$D = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition: none !important;\n    }\n  }\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n  }\n  @media print {\n    :not(.collapsible--open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__wrapper {\n    /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n    transform: translateZ(0);\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    opacity: 0;\n    transform: scaleY(0);\n    transform-origin: top;\n    min-height: 0;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n  }\n  .collapsible--open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .collapsible--open .collapsible__wrapper-animation {\n    opacity: 1;\n    transform: scaleY(1);\n    visibility: visible;\n  }\n  .collapsible {\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__heading-button button .kol-span {\n    align-items: flex-start;\n  }\n  .collapsible--open:focus-within {\n    position: relative;\n    z-index: 100;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-details__heading-button {\n    display: flex;\n  }\n  .kol-details__heading-button .kol-button {\n    min-height: auto;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  .collapsible--open .kol-details__heading-button .kol-icon {\n    transform: rotate(90deg);\n  }\n}";
 
 class KolDetails {
     constructor(hostRef) {
@@ -21266,7 +21267,7 @@ class KolDetails {
                 animationClass: `${rootClass}__wrapper-animation`,
             },
         };
-        return (hAsync(KolCollapsibleFc, Object.assign({ key: '07bc611d260c54c24d5d46161db69ad2d77a85d0' }, props), hAsync("slot", { key: '1a188f043828b0a2cfad16b4e034606961a8722e' })));
+        return (hAsync(KolCollapsibleFc, Object.assign({ key: '413ea46975e272bf12c268e796f033581f37e7a2' }, props), hAsync("slot", { key: 'ad6cacb2da3506f0d5d78caafd22219c67aafe39' })));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -21321,7 +21322,7 @@ class KolDetails {
     }; }
 }
 
-const defaultStyleCss$C = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n\n.kol-card .kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .kol-button {\n  display: flex;\n  min-height: var(--a11y-min-size);\n  font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: \"​\";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  grid-template-areas: \"header  close\" \"content content\";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}";
+const defaultStyleCss$C = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n\n.kol-card .kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .kol-button {\n  display: flex;\n  min-height: var(--a11y-min-size);\n  font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: \"​\";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  grid-template-areas: \"header  close\" \"content content\";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}";
 
 class KolDialog {
     constructor(hostRef) {
@@ -21477,7 +21478,7 @@ class KolDialogWc {
     }; }
 }
 
-const defaultStyleCss$B = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card :host {\n    display: inline-block;\n  }\n  .kol-card .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-card .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-card .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    grid-template-areas: \"header  close\" \"content content\";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    overflow: auto;\n  }\n  .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n    top: 0;\n    max-width: 100vw;\n    height: 100vh;\n  }\n  .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--left {\n    left: 0;\n  }\n  .kol-drawer__wrapper--right {\n    right: 0;\n  }\n  .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n    left: 0;\n    width: 100vw;\n    max-height: 100vh;\n  }\n  .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    bottom: 0;\n  }\n  .kol-drawer__wrapper--top {\n    top: 0;\n  }\n  .kol-drawer__content {\n    position: relative;\n  }\n  .kol-drawer__dialog .kol-card__content {\n    overflow-y: auto;\n  }\n}";
+const defaultStyleCss$B = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card :host {\n    display: inline-block;\n  }\n  .kol-card .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-card .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-card .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    grid-template-areas: \"header  close\" \"content content\";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    overflow: auto;\n  }\n  .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n    top: 0;\n    max-width: 100vw;\n    height: 100vh;\n  }\n  .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--left {\n    left: 0;\n  }\n  .kol-drawer__wrapper--right {\n    right: 0;\n  }\n  .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n    left: 0;\n    width: 100vw;\n    max-height: 100vh;\n  }\n  .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    bottom: 0;\n  }\n  .kol-drawer__wrapper--top {\n    top: 0;\n  }\n  .kol-drawer__content {\n    position: relative;\n  }\n  .kol-drawer__dialog .kol-card__content {\n    overflow-y: auto;\n  }\n}";
 
 class KolDrawer {
     constructor(hostRef) {
@@ -21628,7 +21629,7 @@ class KolDrawer {
     }; }
 }
 
-const defaultStyleCss$A = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+const defaultStyleCss$A = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
 class KolForm {
     constructor(hostRef) {
@@ -21676,7 +21677,7 @@ class KolForm {
     }
     render() {
         const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
-        return (hAsync(Host, { key: '24abdec4e796efe805b3e29fa9f2e4d0189e64d4' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
+        return (hAsync(Host, { key: '57e0a3d78e82b869da11268451f88c47edd2c297' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
     }
     scrollToErrorList() {
         var _a;
@@ -21766,7 +21767,7 @@ class KolHeading {
     }
     render() {
         const { _secondaryHeadline, _label, _level } = this.state;
-        return (hAsync(KolHeadingFc, { key: 'e0215bf6a8c6689b9661f08a0216f36bf6d2f332', secondaryHeadline: _secondaryHeadline, level: _level }, _label, hAsync("slot", { key: '1cd10de7df8a97779b57dd91247f6d3505e10f61', name: "expert", slot: "expert" })));
+        return (hAsync(KolHeadingFc, { key: '5b1aa2d6529760e1163f3d3dfed33e6eeac23b87', secondaryHeadline: _secondaryHeadline, level: _level }, _label, hAsync("slot", { key: 'a164fde23c11d5d6b28bd1029a5d4c8c9453a111', name: "expert", slot: "expert" })));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -21816,7 +21817,7 @@ class IconController extends BaseController {
     }
 }
 
-const defaultStyleCss$y = "@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
+const defaultStyleCss$y = "@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
 
 class KolIcon extends BaseWebComponent {
     constructor(hostRef) {
@@ -21837,7 +21838,7 @@ class KolIcon extends BaseWebComponent {
         });
     }
     render() {
-        return (hAsync(Host, { key: '354e7cdb227a67da0b55b53c9142e1f5dd807069' }, hAsync(IconFC, { key: '3e6a099e74408565c559d97000a8c42d31c6501c', icons: this.ctrl.getRenderProp('icons'), label: this.ctrl.getRenderProp('label') })));
+        return (hAsync(Host, { key: 'eec010ecae679aa60be2e9a20c87fb817a84f562' }, hAsync(IconFC, { key: 'e0fdbd3ec1dfa9b95d3a5da034af895af36ec848', icons: this.ctrl.getRenderProp('icons'), label: this.ctrl.getRenderProp('label') })));
     }
     static get watchers() { return {
         "_icons": ["watchIcons"],
@@ -21941,7 +21942,7 @@ class KolImage extends BaseWebComponent {
         });
     }
     render() {
-        return (hAsync(Host, { key: '8235fd146e29b4c0ad872a44e5ed3b2883212539' }, hAsync(ImageFC, { key: 'c089bb048551367f2a50199573ae6e88d59bef7f', alt: this.ctrl.getRenderProp('alt'), loading: this.ctrl.getRenderProp('loading'), sizes: this.ctrl.getRenderProp('sizes'), src: this.ctrl.getRenderProp('src'), srcset: this.ctrl.getRenderProp('srcset') })));
+        return (hAsync(Host, { key: 'e90814ed3ba4d21ab39290bff603a04a5b122ece' }, hAsync(ImageFC, { key: '9221ca31432cb4192ff006375934b3a52a0243f9', alt: this.ctrl.getRenderProp('alt'), loading: this.ctrl.getRenderProp('loading'), sizes: this.ctrl.getRenderProp('sizes'), src: this.ctrl.getRenderProp('src'), srcset: this.ctrl.getRenderProp('srcset') })));
     }
     static get watchers() { return {
         "_alt": ["watchAlt"],
@@ -22218,7 +22219,7 @@ const FieldControlStateWrapper = (_a, children) => {
     return (hAsync(KolFieldControlFc, Object.assign({}, getFieldControlProps(state), other), children));
 };
 
-const defaultStyleCss$w = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-field-control {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: left;\n    grid-template-areas: \"input label\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-areas: \"input label\" \"hint hint\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-areas: \"label input\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-areas: \"label input\" \"hint hint\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-field-control__label {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    flex-grow: 1;\n    align-items: center;\n    cursor: pointer;\n    grid-area: label;\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: \"*\"/\"\";\n  }\n  .kol-field-control--required .kol-tooltip .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-checkbox {\n    display: flex;\n    position: relative;\n    align-items: center;\n    cursor: pointer;\n  }\n  .kol-checkbox--disabled {\n    cursor: not-allowed;\n  }\n  .kol-checkbox .kol-input {\n    background-color: #fff;\n    border-style: solid;\n    margin: 0;\n    border-width: 2px;\n    appearance: none;\n    cursor: inherit;\n  }\n  .kol-checkbox .kol-input:before {\n    content: \"\";\n  }\n  /**\n   * Variant: Checkbox\n   */\n  .kol-checkbox--variant-default {\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    justify-content: center;\n  }\n  .kol-checkbox--variant-default .kol-icon {\n    display: none;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n    pointer-events: none;\n  }\n  .kol-checkbox--variant-default .kol-input {\n    width: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon, .kol-checkbox--variant-default.kol-checkbox--indeterminate .kol-icon {\n    display: block;\n  }\n  /**\n   * Variant: Switch\n   */\n  .kol-checkbox--variant-switch {\n    position: relative;\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: inline-block;\n    position: relative;\n    width: 3.2em;\n    min-width: 3.2em;\n    height: 1.7em;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: #000;\n    position: absolute;\n    top: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n    width: 1.2em;\n    height: 1.2em;\n    transition: 0.5s;\n  }\n  .kol-checkbox--variant-switch .kol-input:checked::before {\n    transform: translateX(1.5em);\n  }\n  .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    transform: translate(0, -50%);\n    color: #000;\n    display: flex;\n    position: absolute;\n    top: 50%;\n    left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    width: 1.2em;\n    height: 1.2em;\n    align-items: center;\n    justify-content: center;\n    transition: 0.5s;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    transform: translate(1.5em, -50%);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n    transform: translate(0.75em, -50%);\n  }\n  /**\n   * Variant: Button\n   */\n  .kol-checkbox--variant-button {\n    min-width: var(--a11y-min-size);\n  }\n  .kol-checkbox--variant-button .kol-icon {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n}";
+const defaultStyleCss$w = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-field-control {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: left;\n    grid-template-areas: \"input label\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-areas: \"input label\" \"hint hint\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-areas: \"label input\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-areas: \"label input\" \"hint hint\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-field-control__label {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    flex-grow: 1;\n    align-items: center;\n    cursor: pointer;\n    grid-area: label;\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: \"*\"/\"\";\n  }\n  .kol-field-control--required .kol-tooltip .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-checkbox {\n    display: flex;\n    position: relative;\n    align-items: center;\n    cursor: pointer;\n  }\n  .kol-checkbox--disabled {\n    cursor: not-allowed;\n  }\n  .kol-checkbox .kol-input {\n    background-color: #fff;\n    border-style: solid;\n    margin: 0;\n    border-width: 2px;\n    appearance: none;\n    cursor: inherit;\n  }\n  .kol-checkbox .kol-input:before {\n    content: \"\";\n  }\n  /**\n   * Variant: Checkbox\n   */\n  .kol-checkbox--variant-default {\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    justify-content: center;\n  }\n  .kol-checkbox--variant-default .kol-icon {\n    display: none;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n    pointer-events: none;\n  }\n  .kol-checkbox--variant-default .kol-input {\n    width: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon, .kol-checkbox--variant-default.kol-checkbox--indeterminate .kol-icon {\n    display: block;\n  }\n  /**\n   * Variant: Switch\n   */\n  .kol-checkbox--variant-switch {\n    position: relative;\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: inline-block;\n    position: relative;\n    width: 3.2em;\n    min-width: 3.2em;\n    height: 1.7em;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: #000;\n    position: absolute;\n    top: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n    width: 1.2em;\n    height: 1.2em;\n    transition: 0.5s;\n  }\n  .kol-checkbox--variant-switch .kol-input:checked::before {\n    transform: translateX(1.5em);\n  }\n  .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    transform: translate(0, -50%);\n    color: #000;\n    display: flex;\n    position: absolute;\n    top: 50%;\n    left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    width: 1.2em;\n    height: 1.2em;\n    align-items: center;\n    justify-content: center;\n    transition: 0.5s;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    transform: translate(1.5em, -50%);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n    transform: translate(0.75em, -50%);\n  }\n  /**\n   * Variant: Button\n   */\n  .kol-checkbox--variant-button {\n    min-width: var(--a11y-min-size);\n  }\n  .kol-checkbox--variant-button .kol-icon {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n}";
 
 class KolInputCheckbox {
     getModelValue() {
@@ -22286,7 +22287,7 @@ class KolInputCheckbox {
         return this.state._icons.unchecked;
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '1d18c433405df0be50a37b2d303a0d0d6f9acd1a' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '0a155cfebb876d42f12c399d338b818ec02d8360' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '93ab0bbc68cf85072f3d30d64d8e2d73cd4ffbd2' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd73f65109e95527641481026388a0f0ced761794' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '785f3b99ef6485796d9948edd0da460f7f8cb5ed' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '9b30842961aa28a9be40aad6537a8e4a14aab95f' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22486,7 +22487,7 @@ class InputColorController extends InputIconController {
     }
 }
 
-const defaultStyleCss$v = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input-color__input--color {\n    flex-grow: 1;\n  }\n  .kol-input-color__input--text {\n    width: calc(112 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-color__inputs-wrapper {\n    display: flex;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-direction: row;\n    align-items: center;\n  }\n  .kol-input {\n    cursor: pointer;\n  }\n  .kol-input:disabled {\n    cursor: not-allowed;\n  }\n}";
+const defaultStyleCss$v = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input-color__input--color {\n    flex-grow: 1;\n  }\n  .kol-input-color__input--text {\n    width: calc(112 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-color__inputs-wrapper {\n    display: flex;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-direction: row;\n    align-items: center;\n  }\n  .kol-input {\n    cursor: pointer;\n  }\n  .kol-input:disabled {\n    cursor: not-allowed;\n  }\n}";
 
 class KolInputColor {
     async getValue() {
@@ -22523,7 +22524,7 @@ class KolInputColor {
         return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, this.state), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '83e502774da47d21bab0518ccba6a9fecba7e9ee' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '70c40f601ba979a5f39e37dfced8592cc21bb244', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: 'd707b8a1e4bd13f63dd2e5cbbcf1b6904fe72fdb', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '6a35b4d967822c287cb1e0fede8cff8dd1133212', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: '13c6236e6e9752e4a1b1d632fd4883dc2f887b5e', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '770efe143050f8c0fc74b17f8f39c65ab9ef3807' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6893b24074171d43294846ecda4d466f9e7bc232', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '1d1ba24dc0acbe2b4d1fe39e9a7c6719e0f86954', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: 'e1d061f3967c378731413268fa8ae132f6428d63', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: '5524697ec589ba7f719a4bf698a3960e6654db6c', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22844,7 +22845,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
 InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
 InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
 
-const defaultStyleCss$u = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  /**\n   * Workaround for detecting focus state of the native date input's calendar icon.\n   * The `:focus-visible` pseudo class does not work on the icon itself, but only on the input element.\n   * By using the `content` property we can detect whether the icon is focused by inspecting the computed style in JS.\n   * This should be replaced once native focus detection for the icon is available.\n   */\n  :host input[type=date],\n  :host input[type=datetime-local],\n  :host input[type=month],\n  :host input[type=time],\n  :host input[type=week] {\n    content: \"native-icon-focused\";\n  }\n  :host input[type=date]:focus-visible,\n  :host input[type=datetime-local]:focus-visible,\n  :host input[type=month]:focus-visible,\n  :host input[type=time]:focus-visible,\n  :host input[type=week]:focus-visible {\n    content: \"native-icon-not-focused\";\n  }\n  .kol-input {\n    cursor: text;\n  }\n  .kol-input::-webkit-calendar-picker-indicator {\n    cursor: pointer;\n  }\n}";
+const defaultStyleCss$u = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  /**\n   * Workaround for detecting focus state of the native date input's calendar icon.\n   * The `:focus-visible` pseudo class does not work on the icon itself, but only on the input element.\n   * By using the `content` property we can detect whether the icon is focused by inspecting the computed style in JS.\n   * This should be replaced once native focus detection for the icon is available.\n   */\n  :host input[type=date],\n  :host input[type=datetime-local],\n  :host input[type=month],\n  :host input[type=time],\n  :host input[type=week] {\n    content: \"native-icon-focused\";\n  }\n  :host input[type=date]:focus-visible,\n  :host input[type=datetime-local]:focus-visible,\n  :host input[type=month]:focus-visible,\n  :host input[type=time]:focus-visible,\n  :host input[type=week]:focus-visible {\n    content: \"native-icon-not-focused\";\n  }\n  .kol-input {\n    cursor: text;\n  }\n  .kol-input::-webkit-calendar-picker-indicator {\n    cursor: pointer;\n  }\n}";
 
 class KolInputDate {
     async getValue() {
@@ -22898,7 +22899,7 @@ class KolInputDate {
         return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '7ffb5c0dbd6165b4db8da1e28b4546cabdee725e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd7ca3cd025d5a28a44a13f5931332deb6887fe56', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'af04a17100a40f0ae593e414b853e1a80954dce2' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'be4fb542ed02c8daa2cd6d491334f5826a802476' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'e80f744e6f59f9d00ba375abd828df685e2106dc', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'cf955201d288f700f1d4689c0c1fc51158866f2c' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23237,7 +23238,7 @@ class InputEmailController extends InputTextEmailController {
     }
 }
 
-const defaultStyleCss$t = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
+const defaultStyleCss$t = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
 
 class KolInputEmail {
     async getValue() {
@@ -23275,7 +23276,7 @@ class KolInputEmail {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '76457a8344c3b1870a5a833a5672952f50dd7fd1' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '1e5b73a97fbe32e6546529f91731ae8144c01b00', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '50c0fca0d6d5f8452912859d2c42a0f48ff0d839' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '269531a16d621f2f3efb17f675e885258d6888ec' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4c400921885251e901b97322eff0bac7d36d1b36', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'cd31276b89eaedde4cf89e5581750be76a6af143' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23495,7 +23496,7 @@ class InputFileController extends InputIconController {
     }
 }
 
-const defaultStyleCss$s = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-input {\n    opacity: 0;\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 10) 0.5em;\n    cursor: pointer;\n  }\n  .kol-input::-webkit-file-upload-button, .kol-input::file-selector-button {\n    cursor: pointer;\n  }\n  .kol-input:disabled, .kol-input:disabled::-webkit-file-upload-button, .kol-input:disabled::file-selector-button {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n  .kol-input-container__container {\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n  }\n  .kol-input-container__filename {\n    overflow: hidden;\n    flex-grow: 1;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr;\n  }\n}";
+const defaultStyleCss$s = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-input {\n    opacity: 0;\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 10) 0.5em;\n    cursor: pointer;\n  }\n  .kol-input::-webkit-file-upload-button, .kol-input::file-selector-button {\n    cursor: pointer;\n  }\n  .kol-input:disabled, .kol-input:disabled::-webkit-file-upload-button, .kol-input:disabled::file-selector-button {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n  .kol-input-container__container {\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n  }\n  .kol-input-container__filename {\n    overflow: hidden;\n    flex-grow: 1;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr;\n  }\n}";
 
 class KolInputFile {
     async getValue() {
@@ -23537,7 +23538,7 @@ class KolInputFile {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '8c7389b8ce4e26ba8db5151f7fe8269a12e4b3fa' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '5068b6d834b7aac5fff730b57e7d976d03a6742b', state: this.state }, hAsync("span", { key: 'a772d993717f0ab0a48849cfd07ec1c9d21f5b26', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: 'd2abd0c382ce1c372c5e8460005ad8db446f3711' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: 'a4a27385a1d792eabb6b42cdc7204d966c58adc5', class: "kol-input-container__button", _label: this.translateDataBrowseText, _variant: "primary", _disabled: this._disabled }))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ffff49a9e84d52550d6e10b360c2aae93b5008df' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '60c1660efaacf2429f49c29add7f48b74b181196', state: this.state }, hAsync("span", { key: 'a8d904b4e12bfaebb6d87ef419e99ca58d97aee8', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: 'e5168fa61fa67f0f4765961c9dfefff081bc297a' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: 'c6849bd0bca049481867d91e6ba04793ac67eae6', class: "kol-input-container__button", _label: this.translateDataBrowseText, _variant: "primary", _disabled: this._disabled }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23781,7 +23782,7 @@ class InputNumberController extends InputIconController {
     }
 }
 
-const defaultStyleCss$r = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-input-number input {\n    appearance: textfield;\n    text-align: right;\n  }\n  .kol-input-number input::-webkit-inner-spin-button {\n    display: none;\n  }\n}";
+const defaultStyleCss$r = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-input-number input {\n    appearance: textfield;\n    text-align: right;\n  }\n  .kol-input-number input::-webkit-inner-spin-button {\n    display: none;\n  }\n}";
 
 class KolInputNumber {
     async getValue() {
@@ -23862,7 +23863,7 @@ class KolInputNumber {
             }, disabled: this._disabled || this._readOnly }, hAsync(IconFC, { icons: "kolicon-minus", label: "" })));
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a0805a59853ee6dfe7733764fbef5f8c20912692' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '1a51a33cdc67a9920c330d1a9106281155dda5e0', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'ccefd5f7c375d6a00c9d43326575cc51e8fa47e6' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '70b595878acec45771b7b5258169b3ce7fa66814' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6e3adbbbe5a950ea8172a3861a4c2afdd75827f9', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'bdebef34511a8966c86e3caaed8a34e8243ffd0b' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -24061,7 +24062,7 @@ class KolInputNumber {
     }; }
 }
 
-const defaultStyleCss$q = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-input-password {\n    --kol-tooltip-width: calc(160 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+const defaultStyleCss$q = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-input-password {\n    --kol-tooltip-width: calc(160 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
 class KolInputPassword {
     async getValue() {
@@ -24109,7 +24110,7 @@ class KolInputPassword {
             }, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '159f5467dc3480813005ad8336e1bf3a21617dc5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'cae34e405accaae63bc98011589f633e02b7715f', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: '6dc2593c8c8f67134cdf90405069d12a6365a378' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '870fa26cf8d74b4eee290b7e4c31dc89b55c70c1' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '166176fa0c0c0c064db93bd91bc046cf4012b7ac', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'bbf1caf735a54a51fcafb9c01c94a8aee7bca7ad' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -24347,7 +24348,7 @@ const RadioStateWrapper = (_a) => {
     return hAsync(RadioFc, Object.assign({ inputProps: getRadioProps(state, inputProps) }, other));
 };
 
-const defaultStyleCss$p = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: left;\n    grid-template-areas: \"input label\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-areas: \"input label\" \"hint hint\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-areas: \"label input\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-areas: \"label input\" \"hint hint\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-field-control__label {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    flex-grow: 1;\n    align-items: center;\n    cursor: pointer;\n    grid-area: label;\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: \"*\"/\"\";\n  }\n  .kol-field-control--required .kol-tooltip .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-form-field {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  .kol-form-field__label {\n    display: contents;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field__input {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-form-field__input--orientation-horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: flex-start;\n  }\n  .kol-form-field--disabled {\n    opacity: unset;\n  }\n  .kol-input-radio {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-input-radio__input {\n    border-style: solid;\n    border-radius: 100%;\n    display: flex;\n    width: var(--input-size);\n    min-width: var(--input-size);\n    height: var(--input-size);\n    min-height: var(--input-size);\n    margin: 0;\n    padding: 0;\n    border-width: var(--border-width);\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-input-radio__input:before {\n    border-radius: 100%;\n    width: calc(var(--input-size) / 2);\n    height: calc(var(--input-size) / 2);\n    margin: auto;\n    content: \"\";\n  }\n  .kol-input-radio__input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-input-radio__input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-input-radio__input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-input-radio--disabled {\n    cursor: not-allowed;\n  }\n}";
+const defaultStyleCss$p = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: left;\n    grid-template-areas: \"input label\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-areas: \"input label\" \"hint hint\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-areas: \"label input\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-areas: \"label input\" \"hint hint\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-field-control__label {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    flex-grow: 1;\n    align-items: center;\n    cursor: pointer;\n    grid-area: label;\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: \"*\"/\"\";\n  }\n  .kol-field-control--required .kol-tooltip .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-form-field {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  .kol-form-field__label {\n    display: contents;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field__input {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-form-field__input--orientation-horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: flex-start;\n  }\n  .kol-form-field--disabled {\n    opacity: unset;\n  }\n  .kol-input-radio {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-input-radio__input {\n    border-style: solid;\n    border-radius: 100%;\n    display: flex;\n    width: var(--input-size);\n    min-width: var(--input-size);\n    height: var(--input-size);\n    min-height: var(--input-size);\n    margin: 0;\n    padding: 0;\n    border-width: var(--border-width);\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-input-radio__input:before {\n    border-radius: 100%;\n    width: calc(var(--input-size) / 2);\n    height: calc(var(--input-size) / 2);\n    margin: auto;\n    content: \"\";\n  }\n  .kol-input-radio__input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-input-radio__input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-input-radio__input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-input-radio--disabled {\n    cursor: not-allowed;\n  }\n}";
 
 class KolInputRadio {
     async getValue() {
@@ -24397,7 +24398,7 @@ class KolInputRadio {
         };
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'dd1f3327b146841f7aa4df53dd50139f7a09fcb6' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '97630ccb8fed912b3ff478a91c77af4e2f0011b1' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
     }
     calculateDisabled(option) {
         return Boolean(this.state._disabled) || Boolean(option.disabled);
@@ -24633,7 +24634,7 @@ class InputRangeController extends InputIconController {
     }
 }
 
-const defaultStyleCss$o = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input-range__inputs-wrapper {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: row;\n    align-items: center;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    background-color: #d3d3d3;\n    display: inline-block;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n    height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    flex-grow: 1;\n    line-height: 1.5;\n    appearance: none;\n    border: 1px solid #000;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n    cursor: pointer;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    background-color: #000;\n    border-radius: 20px;\n    width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    -webkit-appearance: none;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n    cursor: pointer;\n  }\n  .kol-input-range__input--range::-moz-range-thumb {\n    background-color: #000;\n    border-radius: 20px;\n    width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    -moz-appearance: none;\n  }\n}";
+const defaultStyleCss$o = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input-range__inputs-wrapper {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: row;\n    align-items: center;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    background-color: #d3d3d3;\n    display: inline-block;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n    height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    flex-grow: 1;\n    line-height: 1.5;\n    appearance: none;\n    border: 1px solid #000;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n    cursor: pointer;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    background-color: #000;\n    border-radius: 20px;\n    width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    -webkit-appearance: none;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n    cursor: pointer;\n  }\n  .kol-input-range__input--range::-moz-range-thumb {\n    background-color: #000;\n    border-radius: 20px;\n    width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    -moz-appearance: none;\n  }\n}";
 
 class KolInputRange {
     async focus() {
@@ -24712,7 +24713,7 @@ class KolInputRange {
         const inputsWrapperStyle = {
             '--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
         };
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'f1db0f59140c9af3f4daab8e81623edbaa3d4462' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'ea17dd310a2ecf8eaca9099a503079f970eda3e0', state: this.state }, hAsync("div", { key: 'afb4b3ea7364ac8a3678e9e93eb75371ece32dce', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: 'e76b06941bfec34ec4bfa1c230da4410ab048bea', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '7ceeb5dea35fe624a7406a0e3bf300d005516c04', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: '614a46a0655686e363ba547f35ec873dae37e633', id: this.state._id, suggestions: this.state._suggestions }))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'eff8d2d085cb3496f0ba014dc439680261bf5dd8' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'e81490d9f741c35b98f28bc8be4213edb2cc3b99', state: this.state }, hAsync("div", { key: '609ab671923920c2e4ec80af89cc8c1b36d536d2', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: '6051137eff268cb03c92adb46a04443bcfdafae0', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '10f759e939ddd7e3dccc1a6709ca6469eadb2209', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: '1c18bba1adbb39db7cd4fa3ff890526297300375', id: this.state._id, suggestions: this.state._suggestions }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -24901,7 +24902,7 @@ class KolInputRange {
     }; }
 }
 
-const defaultStyleCss$n = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
+const defaultStyleCss$n = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
 
 class KolInputText {
     async getValue() {
@@ -24958,7 +24959,7 @@ class KolInputText {
         return Object.assign(Object.assign({ ref: this.catchRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '1f08b07d5c57ea8d3ea2191669dfc49851a87129' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd966f9e1ead1faf5373d070479ed6867236180ef', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '92514fe63dbf446c275bb4858545aa1d1fecacc4' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '821d1df11563c246bd21fb4b10372e6936cf72ee' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '457e1fea7aabbf9c3d67400238ddd630ca37ca1a', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'fb01c052668755be3609f3239f37b3d7e94ad477' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -25258,7 +25259,7 @@ class KolKolibri {
     }; }
 }
 
-const defaultStyleCss$l = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+const defaultStyleCss$l = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
 class KolLink {
     constructor(hostRef) {
@@ -25311,7 +25312,7 @@ class KolLink {
     }; }
 }
 
-const defaultStyleCss$k = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    flex: 1 0 100%;\n  }\n}";
+const defaultStyleCss$k = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    flex: 1 0 100%;\n  }\n}";
 
 class KolLinkButton {
     constructor(hostRef) {
@@ -25329,7 +25330,7 @@ class KolLinkButton {
         return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
     }
     render() {
-        return (hAsync(KolLinkWcTag, { key: 'f22cce5b6288c65af9fd7fb745d6607aef367f5e', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, hAsync("slot", { key: '4bb6733d914718772eeed7c35e8aef9862953783', name: "expert", slot: "expert" })));
+        return (hAsync(KolLinkWcTag, { key: '7fa3d6efa17f2b4a2726f7b2b8cf4a88ccc842c0', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, hAsync("slot", { key: '1fb60fd0f4784f7376135d498c4ffd68bf614efa', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: defaultStyleCss$k
@@ -25603,7 +25604,7 @@ class KolLinkWc {
     }; }
 }
 
-const defaultStyleCss$j = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n\n.kol-card .kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .kol-button {\n  display: flex;\n  min-height: var(--a11y-min-size);\n  font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: \"​\";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  grid-template-areas: \"header  close\" \"content content\";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}";
+const defaultStyleCss$j = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n\n.kol-card .kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .kol-button {\n  display: flex;\n  min-height: var(--a11y-min-size);\n  font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: \"​\";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  grid-template-areas: \"header  close\" \"content content\";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}";
 
 class KolModal {
     constructor(hostRef) {
@@ -25623,7 +25624,7 @@ class KolModal {
         await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
     }
     render() {
-        return (hAsync(KolDialogWcTag, { key: 'bfc37fce6c2d856d9e3c66d2309b9982647e5ffc', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: '94f594ce9be9f53e52e41b03f24f3a5439251b7f' })));
+        return (hAsync(KolDialogWcTag, { key: 'a67eb09e039e0d4be4210007c894f713559731bc', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: 'd5d178d907c3c0d20b5d97bb2e6e03e16277d7a9' })));
     }
     static get style() { return {
         default: defaultStyleCss$j
@@ -25645,7 +25646,7 @@ class KolModal {
     }; }
 }
 
-const defaultStyleCss$i = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .kol-nav__navigation .kol-span__container {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span__container .kol-span__label {\n    flex: 1;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    flex-direction: column;\n    list-style: none;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}";
+const defaultStyleCss$i = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .kol-nav__navigation .kol-span__container {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span__container .kol-span__label {\n    flex: 1;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    flex-direction: column;\n    list-style: none;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}";
 
 const entryIsLink = (entryProps) => {
     return typeof entryProps._href === 'string';
@@ -25774,9 +25775,9 @@ class KolNav {
     }
     render() {
         const collapsible = this.state._collapsible === true;
-        return (hAsync("div", { key: '83f3a54075e964de98639af6164d6b7c7038f09d', class: clsx('kol-nav', {
+        return (hAsync("div", { key: '38b72189cc9e53eea1c134ac062711a924a2306d', class: clsx('kol-nav', {
                 'kol-nav--is-compact': this.state._hideLabel,
-            }) }, hAsync("nav", { key: '60083858418df055dd74e9e34889dc209fadf21c', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '504913d780a54f9138b478a666a9a1d8e002bf6d', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (hAsync("div", { key: '2d1855f772a146a9ae4f59ca5f9efe584c0d7e60', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '66086c4c3df6a121e360ef6db61975c525ffbf19', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
+            }) }, hAsync("nav", { key: '4ca8650fa26ffb655faaf8712837dfee8ef851f4', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: 'afab51b9b0d3796f326f3a3ab8f20c466b012765', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (hAsync("div", { key: 'd9838c0c7c478a3b448c936b24b5ba1baff2c212', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: 'dc577ce9dffff35df4425d94234f06bc446f7833', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
                 onClick: () => {
                     this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
                 },
@@ -25850,7 +25851,7 @@ class KolNav {
     }; }
 }
 
-const defaultStyleCss$h = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}";
+const defaultStyleCss$h = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}";
 
 class KolPagination {
     constructor(hostRef) {
@@ -28131,7 +28132,7 @@ class KolPopover {
     }; }
 }
 
-const defaultStyleCss$g = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}";
+const defaultStyleCss$g = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}";
 
 let KolPopoverButton$1 = class KolPopoverButton {
     constructor(hostRef) {
@@ -28282,11 +28283,11 @@ class KolPopoverButton {
         (_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
     }
     render() {
-        return (hAsync("div", { key: 'f80a8d16ce68736215e1a9f8048f29db0f5ab5a3', class: clsx('kol-popover-button', {
+        return (hAsync("div", { key: 'd95f13541d94c96f344486a7cd1b92189e51a18f', class: clsx('kol-popover-button', {
                 'kol-popover-button--open': this.popoverOpen,
                 'kol-popover-button--inline': this.state._inline === true,
                 'kol-popover-button--standalone': this.state._inline === false,
-            }) }, hAsync(KolButtonWcTag, { key: '1cc0f470c4b156eb2770fd1c0094582a54e81606', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element) }, hAsync("slot", { key: 'a3a78e63b6da951f4527cb34df0d8c33507cc95e', name: "expert", slot: "expert" })), hAsync("div", { key: '695ead35ce982e1495b9edc1677fe623def67680', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '0b8abeae9ef69ff8cf09022fd91c24ef895e10d9' }))));
+            }) }, hAsync(KolButtonWcTag, { key: 'f9091defdc899879cfbc59ac52a3a3a63dfe47f3', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element) }, hAsync("slot", { key: 'b15085c16909521de817bc288b3a882167d55ff0', name: "expert", slot: "expert" })), hAsync("div", { key: 'd83498b6e6b41917bc2d8c9d227dfbf983125765', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: 'be3fbcfda570a7bfc89aa8eaf928bdd7d67b59a7' }))));
     }
     validateInline(value) {
         validateInline(this, value, {
@@ -28464,7 +28465,7 @@ class KolProgress extends BaseWebComponent {
         this.ctrl.destroy();
     }
     render() {
-        return (hAsync(Host, { key: 'fa1074c61f87860f304515d6d46afb97ea0a7664' }, hAsync(ProgressFC, { key: '09b98636cce78de839904acfb0a5bd5a7abe3dd8', label: this.ctrl.getRenderProp('label'), max: this.ctrl.getRenderProp('max'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value'), variant: this.ctrl.getRenderProp('variant'), liveValue: this.liveValue })));
+        return (hAsync(Host, { key: '8801c8e80e2ee4bfb96dd200064ee6c9da368eb6' }, hAsync(ProgressFC, { key: '00f2817835b0654a20cd11f7598f13b298616e06', label: this.ctrl.getRenderProp('label'), max: this.ctrl.getRenderProp('max'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value'), variant: this.ctrl.getRenderProp('variant'), liveValue: this.liveValue })));
     }
     static get watchers() { return {
         "_label": ["watchLabel"],
@@ -28573,7 +28574,7 @@ class KolQuote extends BaseWebComponent {
         });
     }
     render() {
-        return (hAsync(Host, { key: '79b8c67fe25a3bc1d53b7a5e6fc6e866d89033c3' }, hAsync(QuoteFC, { key: '64143aeb79bcf3e0b5cf6ef0e77f060b3f7e9b06', href: this.ctrl.getRenderProp('href'), label: this.ctrl.getRenderProp('label'), quote: this.ctrl.getRenderProp('quote'), variant: this.ctrl.getRenderProp('variant') })));
+        return (hAsync(Host, { key: '697513371a9f5e241807a6627c420133a8be763b' }, hAsync(QuoteFC, { key: '204884cac725647a5bc4b26c8b3278d78f5abd0b', href: this.ctrl.getRenderProp('href'), label: this.ctrl.getRenderProp('label'), quote: this.ctrl.getRenderProp('quote'), variant: this.ctrl.getRenderProp('variant') })));
     }
     static get watchers() { return {
         "_href": ["watchHref"],
@@ -28599,7 +28600,7 @@ class KolQuote extends BaseWebComponent {
     }; }
 }
 
-const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n}";
+const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n}";
 
 class KolSelect {
     constructor(hostRef) {
@@ -28625,7 +28626,7 @@ class KolSelect {
         return Promise.resolve((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.focus());
     }
     render() {
-        return (hAsync(Host, { key: '1e92431ea58a4bfc3f0de2bdf454f6a9e027fe98', class: "kol-select" }, hAsync(KolSelectWcTag, { key: '57a74fe2dae64061fe7ca517db9b4ebd93c89a73', ref: this.catchRef, _accessKey: this._accessKey, _disabled: this._disabled, _hideLabel: this._hideLabel, _hideMsg: this._hideMsg, _hint: this._hint, _icons: this._icons, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value }, hAsync("slot", { key: '409f1436592a63649350d56f3dc6d4a7901aad9f', name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: 'c4593755d8732cce11f74ae18b9b06cf731844e8', class: "kol-select" }, hAsync(KolSelectWcTag, { key: 'a5179c4b6598c559c268c5bff2be5b65d4b6c6f2', ref: this.catchRef, _accessKey: this._accessKey, _disabled: this._disabled, _hideLabel: this._hideLabel, _hideMsg: this._hideMsg, _hint: this._hint, _icons: this._icons, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value }, hAsync("slot", { key: '814c3d6906f40eb3e55801a6b87282937711e00f', name: "expert", slot: "expert" }))));
     }
     static get style() { return {
         default: defaultStyleCss$d
@@ -28888,11 +28889,11 @@ class KolSelectWc {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '5f0a307074c04096c87c8562bb4b32cd7a68fe33' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '1c4df443d35659907835ce2a72d16fb2a23be340', state: this.state }, hAsync("form", { key: '78f8b37700ac271ebcfb92529e0fefbd79fffedd', onSubmit: (event) => {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '2c7aa2c9f330a07430136380e6172e899de6bcb9' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b6a3724314becc0b065e12531e522804399e05c7', state: this.state }, hAsync("form", { key: '48c914334af4ef75d70754d8e4cfd4f55bcaf491', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host});
-            } }, hAsync("input", { key: '73ccb43eee0a4e71e9fa907d4e6a40bdf903fb33', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '4cb054a8550a6c58eac0fdc23e751152c141c592' }, this.getSelectProps()))))));
+            } }, hAsync("input", { key: 'b5cf0201f329e3656414d3bb9ec9644b3321d7d9', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '62d70601e4c70f4ae9ecdee8b7f6a9a99b5989b9' }, this.getSelectProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -29117,7 +29118,7 @@ class SingleSelectController extends InputIconController {
     }
 }
 
-const defaultStyleCss$c = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-input-container:has(.kol-custom-suggestions-options-group--open) {\n    z-index: 10;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-single-select__delete .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-single-select__delete :host {\n    display: inline-block;\n  }\n  .kol-single-select__delete .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-single-select__delete .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-single-select__delete .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-single-select__delete .kol-button {\n    margin-top: -2px;\n    margin-bottom: -2px;\n  }\n  .kol-single-select__no-results-message {\n    display: flex;\n    min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}";
+const defaultStyleCss$c = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-input-container:has(.kol-custom-suggestions-options-group--open) {\n    z-index: 10;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-single-select__delete .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-single-select__delete :host {\n    display: inline-block;\n  }\n  .kol-single-select__delete .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-single-select__delete .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-single-select__delete .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-single-select__delete .kol-button {\n    margin-top: -2px;\n    margin-bottom: -2px;\n  }\n  .kol-single-select__no-results-message {\n    display: flex;\n    min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}";
 
 class KolSingleSelect {
     async getValue() {
@@ -29302,15 +29303,15 @@ class KolSingleSelect {
     render() {
         var _a;
         const isDisabled = this.state._disabled === true;
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '01462ae2cfe7a4b013aeda8ee7f3dcb2a577a3d9' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'dcd0cd2858e279495348a3e31646b88d653dc784', state: this.state }, hAsync("div", { key: '6234f9883dd1da2bc501ae2f2ac90491eb23ac9b', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '09c0159be006bbf78473b707655421d9aa7f26bc' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '070fccb64dd13f5498c46e93fb7bda715bcb7349', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: "kol-single-select__delete", hidden: isDisabled, _on: {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '0ad65f9e8ec532605f929ac2f36d8ce3951750ad' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '97ad20bae723ea13884adc73adcb6805f17ebf07', state: this.state }, hAsync("div", { key: '2111616d8ed8614cf60d51b614c17f1b8481482f', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '29f4774ad1bdfd5a1735b6e0a0cf4bfa8e1eb39f' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '643180795cead8a5cd2d5215a2526e63fef30496', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: "kol-single-select__delete", hidden: isDisabled, _on: {
                 onClick: () => {
                     var _a;
                     this.clearSelection();
                     (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
                 },
-            } })), hAsync(IconFC, { key: '18b56debf53dc98556c566af8d692cff6318ca0a', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), hAsync(IconFC, { key: 'fbc8bbfb3b5e32b2697805f7545c2115ae0651d3', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: 'eb3bb614b05d58c7944ef6a09ea0dfbd10e28b9a', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
+            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '4fd51195954c697fa34de518a95f67c3bdf89313', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
@@ -29801,7 +29802,7 @@ class KolSkeleton extends BaseWebComponent {
     }; }
 }
 
-const defaultStyleCss$b = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-skip-nav__list {\n    display: grid;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    position: absolute;\n    left: calc(-99999 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n  }\n}";
+const defaultStyleCss$b = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-skip-nav__list {\n    display: grid;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    position: absolute;\n    left: calc(-99999 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n  }\n}";
 
 class KolSkipNav {
     constructor(hostRef) {
@@ -29812,7 +29813,7 @@ class KolSkipNav {
         };
     }
     render() {
-        return (hAsync("nav", { key: 'a6ded7b2bae70f051fc586555aef04f635ded319', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: 'f56a7c1fc39183f822a1bf782829b01b4252b44d', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
+        return (hAsync("nav", { key: '24330768765ceff61c39f402d654f34049bfe143', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: '0735036b8b98eeacf9928e1e8024e611d2aedf83', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
             return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
         }))));
     }
@@ -29888,7 +29889,7 @@ class KolSpin {
     }
     render() {
         var _a, _b;
-        return (hAsync(Host, { key: 'a65699e1797bd8ec134c364e7221a084b43be1fb', class: "kol-spin" }, this.state._show ? (hAsync(Fragment, null, hAsync("span", { class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`) }, renderSpin(this.state._variant)), hAsync("span", { "aria-busy": "true", class: "visually-hidden", role: "alert" }, (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning))) : (this.showToggled && (hAsync("span", { "aria-busy": "false", class: "visually-hidden", role: "alert" }, (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone)))));
+        return (hAsync(Host, { key: 'c40967e57df1e5e8d555a3459b97287cedc82779', class: "kol-spin" }, this.state._show ? (hAsync(Fragment, null, hAsync("span", { class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`) }, renderSpin(this.state._variant)), hAsync("span", { "aria-busy": "true", class: "visually-hidden", role: "alert" }, (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning))) : (this.showToggled && (hAsync("span", { "aria-busy": "false", class: "visually-hidden", role: "alert" }, (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone)))));
     }
     validateShow(value) {
         this.showToggled = this.state._show === true && this._show === false;
@@ -29928,7 +29929,7 @@ class KolSpin {
     }; }
 }
 
-const defaultStyleCss$9 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-popover {\n    position: absolute;\n    height: 0;\n  }\n  .kol-popover__content {\n    opacity: 0;\n    background-color: #fff;\n    position: absolute;\n    min-width: max-content;\n    min-height: max-content;\n    margin: 0;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    rotate: 0.125turn;\n    background-color: inherit;\n    position: absolute;\n    z-index: -1;\n    width: var(--font-size);\n    height: var(--font-size);\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-split-button {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n    width: 100%;\n    align-items: stretch;\n  }\n  .kol-split-button__button {\n    min-width: 0;\n    flex: 1 1 auto;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover {\n    z-index: 1;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}";
+const defaultStyleCss$9 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-popover {\n    position: absolute;\n    height: 0;\n  }\n  .kol-popover__content {\n    opacity: 0;\n    background-color: #fff;\n    position: absolute;\n    min-width: max-content;\n    min-height: max-content;\n    margin: 0;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    rotate: 0.125turn;\n    background-color: inherit;\n    position: absolute;\n    z-index: -1;\n    width: var(--font-size);\n    height: var(--font-size);\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-split-button {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n    width: 100%;\n    align-items: stretch;\n  }\n  .kol-split-button__button {\n    min-width: 0;\n    flex: 1 1 auto;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover {\n    z-index: 1;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}";
 
 class KolSplitButton {
     constructor(hostRef) {
@@ -29975,10 +29976,10 @@ class KolSplitButton {
     }
     render() {
         const i18nDropdownLabel = 'kol-split-button-dropdown-label';
-        return (hAsync("div", { key: 'd78bc8dd9db17e47d7341304963c68855c957881', class: "kol-split-button" }, hAsync("div", { key: 'd1156a676b55082b2465bb6936bb272287c3c59b', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '640ec607e31a21e9c1873ef1ebe509b1b23dc7d6', class: clsx('kol-split-button__button', {
+        return (hAsync("div", { key: '1db27acd2f885cfb9a02fd2a2cb71cc47f0e78dc', class: "kol-split-button" }, hAsync("div", { key: '7ee7ff3341ab233d5806479785a5b1b06075aba8', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: 'ff8f3834f6eb6045b60c9b6da72aeea13ca19b73', class: clsx('kol-split-button__button', {
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '29ab6f963a74581b514bdc06d68bec88a6835f5b', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: 'a8bb82ea82d8051f34e2b187d75dd7da63356d40', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '5993a01d500e06067ab0ff044808da91b9bfa8eb', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'ceb376d48a5226d27a93594dc735b1db65c2d661' }))));
+            }), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: 'aee052a6abc8e584a937d2482865ea715b3d76a5', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '1241664c4f9107bb8976634917fcc719d96597bb', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '61f96fd0cd1a6e2e9a8bda162091dc0d9cfe1af5', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'e101cf53a5770794886640dacf21f6621f7e767a' }))));
     }
     async closePopup() {
         this.handleOnClose();
@@ -30178,7 +30179,7 @@ var KeyboardKey;
     KeyboardKey["Space"] = " ";
 })(KeyboardKey || (KeyboardKey = {}));
 
-const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table {\n    --kol-table-selection-col-width: var(--a11y-min-size);\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    background-color: white;\n    position: sticky !important;\n    left: 0;\n    z-index: 2;\n    width: var(--kol-table-selection-col-width, auto);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions {\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n    background-color: white;\n    position: sticky !important;\n    z-index: 1;\n  }\n  .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n    border-right: 2px solid black;\n  }\n  .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n    border-left: 2px solid black;\n  }\n  .kol-table__cell-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection {\n    position: relative;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}";
+const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table {\n    --kol-table-selection-col-width: var(--a11y-min-size);\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    background-color: white;\n    position: sticky !important;\n    left: 0;\n    z-index: 2;\n    width: var(--kol-table-selection-col-width, auto);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions {\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n    background-color: white;\n    position: sticky !important;\n    z-index: 1;\n  }\n  .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n    border-right: 2px solid black;\n  }\n  .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n    border-left: 2px solid black;\n  }\n  .kol-table__cell-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection {\n    position: relative;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}";
 
 const PAGINATION_OPTIONS = [10, 20, 50, 100];
 const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
@@ -30513,7 +30514,7 @@ class KolTableStateful {
             horizontal: (_d = (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _d !== void 0 ? _d : [],
             vertical: (_f = (_e = this.state._headers.vertical) === null || _e === void 0 ? void 0 : _e.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _f !== void 0 ? _f : [],
         };
-        return (hAsync(Host, { key: '95f418596db6eecceeba755b1a264b36bf2d31ac', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '4a3d37bc195e5d6414f4208087045f2e4ed17630', ref: this.catchRef, _data: displayedData, _fixedCols: this._fixedCols, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
+        return (hAsync(Host, { key: '8f8010de85a6fc55cda1d9c688d80973ec64346a', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '792a2cc9b7f3bfa4485e8cf5c39c1c745442343d', ref: this.catchRef, _data: displayedData, _fixedCols: this._fixedCols, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -30563,7 +30564,7 @@ class KolTableStateful {
     }; }
 }
 
-const defaultStyleCss$7 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table {\n    --kol-table-selection-col-width: var(--a11y-min-size);\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    background-color: white;\n    position: sticky !important;\n    left: 0;\n    z-index: 2;\n    width: var(--kol-table-selection-col-width, auto);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions {\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n    background-color: white;\n    position: sticky !important;\n    z-index: 1;\n  }\n  .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n    border-right: 2px solid black;\n  }\n  .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n    border-left: 2px solid black;\n  }\n  .kol-table__cell-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection {\n    position: relative;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}";
+const defaultStyleCss$7 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table {\n    --kol-table-selection-col-width: var(--a11y-min-size);\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    background-color: white;\n    position: sticky !important;\n    left: 0;\n    z-index: 2;\n    width: var(--kol-table-selection-col-width, auto);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions {\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n    background-color: white;\n    position: sticky !important;\n    z-index: 1;\n  }\n  .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n    border-right: 2px solid black;\n  }\n  .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n    border-left: 2px solid black;\n  }\n  .kol-table__cell-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection {\n    position: relative;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}";
 
 let KolTableStateless$1 = class KolTableStateless {
     constructor(hostRef) {
@@ -31347,7 +31348,7 @@ const validateHasCreateButton = (component, value) => {
     watchBoolean(component, '_hasCreateButton', value);
 };
 
-const defaultStyleCss$6 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tabs {\n    display: var(--display);\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    order: var(--button-group-order);\n    flex-direction: var(--button-group-flex-direction);\n    flex-wrap: wrap;\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    display: block;\n    border-bottom-style: solid;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}";
+const defaultStyleCss$6 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tabs {\n    display: var(--display);\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    order: var(--button-group-order);\n    flex-direction: var(--button-group-flex-direction);\n    flex-wrap: wrap;\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    display: block;\n    border-bottom-style: solid;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}";
 
 class KolTabs {
     constructor(hostRef) {
@@ -31548,9 +31549,9 @@ class KolTabs {
             }, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
     }
     render() {
-        return (hAsync("div", { key: '4e58f1f69a3ba972d4a98a25fa4b2a65c78a79ff', ref: (el) => {
+        return (hAsync("div", { key: '7ffe401b113f0331ccac35130ddd22078747d840', ref: (el) => {
                 this.tabPanelsElement = el;
-            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'b16bba05b5dad4d0144231086488f0f1d7e1daf3', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
+            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '3e524e7918e5dd1a105efd9359561bf89779343a', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -31732,7 +31733,7 @@ class TextareaController extends InputIconController {
     }
 }
 
-const defaultStyleCss$5 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    display: ruby;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}";
+const defaultStyleCss$5 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}";
 
 const increaseTextareaHeight = (el) => {
     el.style.overflow = 'hidden';
@@ -31781,7 +31782,7 @@ class KolTextarea {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '633c65295555ee15873eb7c5944c4df5b8ffe99f' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '687e9d1ed39ae95c6550dc6c617a3011d05f3857', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '75121bbf58bb7432bd63d2a4e84d028f41b52d7c' }, this.getTextAreaProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '8dfc2cd97333524309dc4f5a04092e0128915a5e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'dc68bc2fa18c67785571d551339d38629f4971da', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '952d81247a37f85693bf355d9128e7b2697de151' }, this.getTextAreaProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -31985,7 +31986,7 @@ class KolTextarea {
     }; }
 }
 
-const defaultStyleCss$4 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    max-width: 90vw;\n    flex-direction: column;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}";
+const defaultStyleCss$4 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    max-width: 90vw;\n    flex-direction: column;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}";
 
 const TRANSITION_TIMEOUT = 300;
 class KolToastContainer {
@@ -32048,7 +32049,7 @@ class KolToastContainer {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'de1eab4d373513f210a0ae8d36a457e254e1e076', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'f550cd34eec6f1a2a9de5792903034b772de6197', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
+        return (hAsync(Host, { key: '8f8256c2e4a929fcef039c3b88058b7aae6df105', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '1a72d21da9d3cbd5a65cb6a9c220d37a8e237da8', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
                 onClick: () => {
                     void this.closeAll();
                 },
@@ -32071,7 +32072,7 @@ class KolToastContainer {
     }; }
 }
 
-const defaultStyleCss$3 = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    flex: 1 0 100%;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .kol-toolbar--orientation-vertical {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .kol-toolbar--orientation-vertical .kol-span {\n    align-items: flex-start;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}";
+const defaultStyleCss$3 = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    flex: 1 0 100%;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .kol-toolbar--orientation-vertical {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .kol-toolbar--orientation-vertical .kol-span {\n    align-items: flex-start;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}";
 
 class KolToolbar {
     constructor(hostRef) {
@@ -32441,7 +32442,7 @@ class KolTree {
     }; }
 }
 
-const defaultStyleCss$1 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tree-item {\n    --indentation: var(--tree-item-indentation, calc(10 * 1rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-tree-item__link .kol-link {\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    padding-right: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: max(var(--indentation) * var(--level) + 8 * 1rem / var(--kolibri-root-font-size, 16), 8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    text-decoration: none;\n  }\n  .kol-tree-item__link--first-level .kol-link {\n    padding-left: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link-inner {\n    display: flex;\n    align-items: center;\n  }\n  .kol-tree-item__children {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree-item .kol-span {\n    place-items: unset;\n  }\n  .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n    display: inline-flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-tree-item__text {\n    text-decoration: underline;\n  }\n}";
+const defaultStyleCss$1 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773990435463\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773990435463#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773990435463\") format(\"woff2\"), url(\"kolicons.woff?t=1773990435463\") format(\"woff\"), url(\"kolicons.ttf?t=1773990435463\") format(\"truetype\"), url(\"kolicons.svg?t=1773990435463#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tree-item {\n    --indentation: var(--tree-item-indentation, calc(10 * 1rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-tree-item__link .kol-link {\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    padding-right: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: max(var(--indentation) * var(--level) + 8 * 1rem / var(--kolibri-root-font-size, 16), 8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    text-decoration: none;\n  }\n  .kol-tree-item__link--first-level .kol-link {\n    padding-left: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link-inner {\n    display: flex;\n    align-items: center;\n  }\n  .kol-tree-item__children {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree-item .kol-span {\n    place-items: unset;\n  }\n  .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n    display: inline-flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-tree-item__text {\n    text-decoration: underline;\n  }\n}";
 
 class KolTreeItem {
     constructor(hostRef) {
@@ -32502,12 +32503,12 @@ class KolTreeItemWc {
     }
     render() {
         const { _href, _active, _hasChildren, _open, _label } = this.state;
-        return (hAsync(Host, { key: '84a958b4cffa9cd7655f4822faf008bf4b7e4f2a', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'c6aa2e1b5892657f29b64950200d5bc17ace3114', class: "kol-tree-item", style: {
+        return (hAsync(Host, { key: '83f64be6fcb307a54dbccf15636b4192c0100393', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: '56df1259ec7371cf9445b6eddad1c38d17dafcfa', class: "kol-tree-item", style: {
                 '--level': `${this.level}`,
-            } }, hAsync(KolLinkWcTag, { key: 'd0110a723f7399f972a9c7757426bbf91d832c9e', class: clsx('kol-tree-item__link', {
+            } }, hAsync(KolLinkWcTag, { key: '0f9ec9c414f1c78142c54f5f4c63c27fc42a9f9a', class: clsx('kol-tree-item__link', {
                 'kol-tree-item__link--first-level': this.level === 0,
                 'kol-tree-item__link--active': _active,
-            }), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: 'e85700d41be1e9891f2a831ff85a10957ed5e791', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(IconFC, { class: "kol-tree-item__toggle-button-icon", icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, label: '' }))) : (hAsync("span", { class: "kol-tree-item__toggle-button-placeholder" })), hAsync("span", { key: 'fcb1fc576b6fcf5f3e2e7b53e9c41498fa7d277e', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: '03b9166b52e92f99e0235f6ba98b5a6340e269bd', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: 'b7319ec3068f2c630fabe61383a782fc4c6c1d30' })))));
+            }), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '706c7bac7978d45ccb6c3ab62e957117cea4381f', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(IconFC, { class: "kol-tree-item__toggle-button-icon", icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, label: '' }))) : (hAsync("span", { class: "kol-tree-item__toggle-button-placeholder" })), hAsync("span", { key: '7545647f7334d4e22924689a5f594595f4eca907', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: 'be5b1fe9db0541c4ebf75d1255dc865f01bb4d57', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: 'b3ed152baf057e3193a2372dd257ec204c7b266c' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);