@public-ui/hydrate 2.2.18-rc.3 → 2.2.19-e9c0b593384d660ec86496ebc4ea0d46381cd328.0

package/dist/index.js

@@ -4523,7 +4523,7 @@ let KolLinkTag = 'kol-link';
 let KolLinkWcTag = 'kol-link-wc';
 let KolPaginationTag = 'kol-pagination';
 let KolPopoverWcTag = 'kol-popover-wc';
-let KolSelectTag = 'kol-select';
+let KolSelectWcTag = 'kol-select-wc';
 let KolSpanWcTag = 'kol-span-wc';
 let KolTableStatefulTag = 'kol-table-stateful';
 let KolTableStatelessWcTag = 'kol-table-stateless-wc';
@@ -4824,7 +4824,7 @@ var locale_de = {
     page: 'Seite',
     'page-current': 'Seite {{page}}',
     'page-selected': 'Seite {{page}} ist ausgewählt',
-    'page-per-site': '{{entries}} Einträge pro Seite',
+    'page-per-site': 'Einträge pro Seite',
     'nav-maximize': 'Navigation maximieren',
     'nav-minimize': 'Navigation minimieren',
     'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
@@ -4834,7 +4834,7 @@ var locale_de = {
     'avatar-alt': 'Avatar von {{name}}',
     'split-button-dropdown-label-open': 'Optionen anzeigen',
     'split-button-dropdown-label-close': 'Optionen schließen',
-    'toast-close-all': 'Alle schließen',
+    'toast-close-all': 'Alle Benachrichtigungen schließen',
     'error-list': 'Fehlerliste',
     'error-list-message': 'Bitte korrigieren Sie folgende Fehler:',
     version: 'Versionsnummer',
@@ -4879,7 +4879,7 @@ var locale_en = {
     page: 'Page',
     'page-current': 'Page {{page}}',
     'page-selected': 'Page {{page}} is selected',
-    'page-per-site': '{{entries}} entries per page',
+    'page-per-site': 'Entries per page',
     'nav-maximize': 'Maximize navigation',
     'nav-minimize': 'Minimize navigation',
     'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
@@ -4889,7 +4889,7 @@ var locale_en = {
     'avatar-alt': 'Avatar of {{name}}',
     'split-button-dropdown-label-open': 'Show options',
     'split-button-dropdown-label-close': 'Hide options',
-    'toast-close-all': 'Close all',
+    'toast-close-all': 'Close all notifications',
     'error-list': 'Error list',
     'error-list-message': 'Please correct the following errors',
     version: 'Version number',
@@ -5018,7 +5018,7 @@ const KolAlertFc = (props, children) => {
         }, 10000);
     }
     const rootProps = Object.assign({ class: clsx('kol-alert-wc', 'alert', type, variant, { hasCloser: !!hasCloser }, classNames) }, other);
-    return (hAsync("div", Object.assign({}, rootProps, { "aria-live": alert ? 'assertive' : 'polite', role: alert ? 'alert' : 'status' }),
+    return (hAsync("div", Object.assign({}, rootProps, { role: alert ? 'alert' : undefined }),
         hAsync("div", { class: "heading" },
             hAsync(AlertIcon, { label: label, type: type }),
             hAsync("div", { class: "heading-content" },
@@ -5244,16 +5244,16 @@ class KolBadge {
         };
     }
     renderSmartButton(props) {
-        return (hAsync(KolButtonWcTag, { _ariaControls: this.id, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign, _variant: props._variant }));
+        return (hAsync(KolButtonWcTag, { _ariaControls: this.id, _ariaDescription: props._ariaDescription, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign, _variant: props._variant }));
     }
     render() {
         const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
-        return (hAsync(Host, { key: 'e18cef57a5d00c73f9040d17f16e53a22bb21c2d', class: "kol-badge" }, hAsync("span", { key: '6375f9d2c8c8863165d6e0dce77ad89f708275b5', class: {
+        return (hAsync(Host, { key: '4feef27579b3fef20e90585b1afadb10ff93cbdb', class: "kol-badge" }, hAsync("span", { key: 'fcdf3294e40d4c6e0268ef4fc5ca106b12c0a258', class: {
                 'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
             }, style: {
                 backgroundColor: this.bgColorStr,
                 color: this.colorStr,
-            } }, hAsync(KolSpanWcTag, { key: 'a74d942a94c5bbeb002bbd42a5d45a9e75c704e8', id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
+            } }, hAsync(KolSpanWcTag, { key: 'eb2f1148028f06742c2a478d0955a61bfc4c8ad3', id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -6169,12 +6169,23 @@ class KolCard {
 }
 
 const getRenderStates = (state) => {
-    var _a, _b;
-    const isMessageValidError = Boolean(((_a = state._msg) === null || _a === void 0 ? void 0 : _a._type) === 'error' && state._msg._description && ((_b = state._msg._description) === null || _b === void 0 ? void 0 : _b.length) > 0);
-    const hasError = isMessageValidError && state._touched === true;
+    var _a, _b, _c;
+    const hasValidMsg = Boolean(state._msg && state._msg._description && ((_a = state._msg._description) === null || _a === void 0 ? void 0 : _a.length) > 0);
+    const msgType = (_c = (_b = state._msg) === null || _b === void 0 ? void 0 : _b._type) !== null && _c !== void 0 ? _c : 'default';
     const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
     const ariaDescribedBy = [];
-    if (hasError === true) {
+    if (!hasValidMsg) {
+        if (hasHint === true) {
+            ariaDescribedBy.push(`${state._id}-hint`);
+        }
+        if (state._hasCounter) {
+            ariaDescribedBy.push(`${state._id}-counter`);
+        }
+        return { hasError: false, hasHint, ariaDescribedBy };
+    }
+    const showMsg = msgType === 'error' ? state._touched === true : true;
+    const hasError = showMsg && msgType === 'error';
+    if (showMsg) {
         ariaDescribedBy.push(`${state._id}-error`);
     }
     if (hasHint === true) {
@@ -7470,7 +7481,7 @@ class KolIndentedTextWc {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, { key: '53d04fb6546dbc2ca0f14e9205371eaf84170667', class: "kol-indented-text-wc" }, hAsync("div", { key: 'b707f21527f130dec52b2545ce94d73bf5e399b9' }, hAsync("slot", { key: '8a8961dad6ea7d489431d218ba396ca9527e0f19' }))));
+        return (hAsync(Host, { key: 'c98f4371e64e74164bf2c78090f397f1163922b2', class: "kol-indented-text-wc" }, hAsync("div", { key: '5ca5b15edceb14262a35ab6d212d9f349f55105f' }, hAsync("slot", { key: 'a6f6a3a070f340fe5bab48c22e551bfd3f25df35' }))));
     }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -10309,24 +10320,23 @@ class KolInputRadio {
         (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { ariaDescribedBy, hasError } = getRenderStates(this.state);
+        const { ariaDescribedBy, hasError, hasHint } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
-        return (hAsync(Host, { key: 'f024b1dc4ee66d69521d477b0514a49c6a0d44ed', class: "kol-input-radio" }, hAsync("fieldset", { key: '9c9cb9980f73a565fc640ba5165ffaabd9a67c88', class: {
+        return (hAsync(Host, { key: '0ace03e6b8caeac0abb1577ac3baac3dcd5a26ff', class: "kol-input-radio" }, hAsync("fieldset", { key: '94c25cd781f26aa3dc2938c2fd2b6d068b22117e', "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, class: {
                 fieldset: true,
                 disabled: this.state._disabled === true,
                 error: hasError === true,
                 required: this.state._required === true,
                 'hidden-error': this._hideError === true,
                 [this.state._orientation]: true,
-            } }, hAsync("legend", { key: '1a9297ad6eed45d02eb8b968d1d8c0cadee05de4', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: 'e810fc276bfd5e4111fb16f1e36472e75da32b50' }, hAsync("span", { key: 'd039159587647a8733c1cee54e6c40eec7847f5d', slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : this._label))), this.state._options.map((option, index) => {
+            } }, hAsync("legend", { key: '92887a844b031ccdb7550e55550d3d528f851c40', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '6a28e88daa688a56ca2f8a453f77b7d55a3bd237' }, hAsync("span", { key: '6acfe8d22beff0105bec6f203e29bfde5f2c4ba5', slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : this._label))), this.state._options.map((option, index) => {
             const customId = `${this.state._id}-${index}`;
             const slotName = `radio-${index}`;
             const selected = this.state._value === option.value;
             return (hAsync(KolInputTag, { class: {
                     radio: true,
                     disabled: Boolean(this.state._disabled || option.disabled),
-                }, key: customId, _disabled: this.state._disabled || option.disabled, _hideLabel: this.state._hideLabel, _hint: option.hint, _id: customId, _label: option.label, _renderNoLabel: true, _required: this.state._required, _slotName: slotName, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("div", { slot: slotName, class: "radio-input-wrapper" }, hAsync("input", Object.assign({ ref: this.state._value === option.value ? this.catchRef : undefined, title: "", "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: "radio", id: customId, checked: selected, name: this.state._name || this.state._id, disabled: this.state._disabled || option.disabled, required: this.state._required, tabIndex: this.state._tabIndex, value: `-${index}` }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined, onInput: this.onInput, onKeyDown: this.onKeyDown.bind(this), onFocus: (event) => {
+                }, key: customId, _disabled: this.state._disabled || option.disabled, _hideLabel: this.state._hideLabel, _hint: option.hint, _id: customId, _label: option.label, _renderNoLabel: true, _required: this.state._required, _slotName: slotName, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("div", { slot: slotName, class: "radio-input-wrapper" }, hAsync("input", Object.assign({ ref: this.state._value === option.value ? this.catchRef : undefined, title: "", "aria-label": this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: "radio", id: customId, checked: selected, name: this.state._name || this.state._id, disabled: this.state._disabled || option.disabled, required: this.state._required, tabIndex: this.state._tabIndex, value: `-${index}` }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined, onInput: this.onInput, onKeyDown: this.onKeyDown.bind(this), onFocus: (event) => {
                     this.controller.onFacade.onFocus(event);
                     this.inputHasFocus = true;
                 }, onBlur: (event) => {
@@ -10338,7 +10348,7 @@ class KolInputRadio {
                     padding: this.state._hideLabel ? '0' : undefined,
                     visibility: this.state._hideLabel ? 'hidden' : undefined,
                 } }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
-        }), hasError && hAsync(FormFieldMsgFc, { key: '4ab353a44639e311e4f63cc14eebb0cd77736827', _alert: this.showAsAlert(), _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }), hasHint && hAsync("span", { key: 'cfc2dbeaa917525177d88f9f4ea7a65ac32a5e4b', class: "hint" }, this.state._hint))));
+        }), hasError && hAsync(FormFieldMsgFc, { key: '2b39bf4d20435ee90359429bebfe12766d383b94', _alert: this.showAsAlert(), _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }), hasHint && (hAsync("span", { key: '9a18f783fa05aac61ac49475eb1f2bb1a83e4e63', class: "hint", id: `${this.state._id}-hint` }, this.state._hint)))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -10629,7 +10639,7 @@ class KolInputRange {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
             } }))), hasSuggestions && [
-            hAsync("datalist", { key: '05ab7a9b3a3f7c68f16db917cc057b635aacb25f', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
+            hAsync("datalist", { key: '05ab7a9b3a3f7c68f16db917cc057b635aacb25f', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: JSON.stringify(option) })))),
         ]))));
     }
     constructor(hostRef) {
@@ -11188,7 +11198,7 @@ class KolInputWc {
                 input: true,
                 'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
                 'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
-            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: 'db617a34b5625bf385bce736898bf8b60b0362e2', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '5aef005fe5cf7b0c7414da238e003b24d9ec8b76', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '2d4f58690c482754336c8433c616115c7b7a1dc1', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '0f71452a36701957777a83e5a127e1dd4eb2ac61', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '4211c78a773048d9e529a6c8b939d036cc2529b2', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(FormFieldMsgFc, { key: '1bcc512281d678916a1b9b9297e3183ab268ac63', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '1973b589b4fb98d1bdd3623ad8a7b50c9701ba65', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync(Fragment, null, hAsync("span", { key: 'cc3d491b45ecfa25c19d2e191c94f8df112ce4d7', class: "counter", "aria-hidden": "true", "data-testid": "input-counter" }, this._currentLength, this._maxLength && `/${this._maxLength}`, " ", translate('kol-characters')), hAsync("span", { key: '01a05e463b7f068b9af87ac06e08a4f5057be189', id: `${this._id}-counter`, "aria-live": "polite", "aria-atomic": "true", class: "visually-hidden", "data-testid": "input-counter-aria" }, this._currentLengthDebounced, this._maxLength && ` ${translate('kol-of')} ${this._maxLength}`, " ", translate('kol-characters'))))));
+            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: 'db617a34b5625bf385bce736898bf8b60b0362e2', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '5aef005fe5cf7b0c7414da238e003b24d9ec8b76', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '2d4f58690c482754336c8433c616115c7b7a1dc1', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '0f71452a36701957777a83e5a127e1dd4eb2ac61', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '4211c78a773048d9e529a6c8b939d036cc2529b2', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(FormFieldMsgFc, { key: '1bcc512281d678916a1b9b9297e3183ab268ac63', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '1973b589b4fb98d1bdd3623ad8a7b50c9701ba65', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: JSON.stringify(option) }))))), this._hasCounter && (hAsync(Fragment, null, hAsync("span", { key: '5692122109ff8f8e4c67fb3b52dd0d6add55ea0b', class: "counter", "aria-hidden": "true", "data-testid": "input-counter" }, this._currentLength, this._maxLength && `/${this._maxLength}`, " ", translate('kol-characters')), hAsync("span", { key: '5de55b5b1e251a0f538d9cc9688f212d2e1309c3', id: `${this._id}-counter`, "aria-live": "polite", "aria-atomic": "true", class: "visually-hidden", "data-testid": "input-counter-aria" }, this._currentLengthDebounced, this._maxLength && ` ${translate('kol-of')} ${this._maxLength}`, " ", translate('kol-characters'))))));
     }
     getModifierClassNameByMsgType(showMsg) {
         var _a, _b;
@@ -12325,7 +12335,7 @@ class KolNav {
     }; }
 }
 
-const defaultStyleCss$h = "@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .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, unset);\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-wc .tooltip-floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip-wc .tooltip-floating.show {\n    animation-name: showTooltip;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .separator:before {\n    content: \"•••\";\n  }\n}";
+const defaultStyleCss$h = "@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .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, unset);\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-wc .tooltip-floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip-wc .tooltip-floating.show {\n    animation-name: showTooltip;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  option:checked::before {\n    content: \"✓ \";\n  }\n}\n@layer kol-component {\n  :host {\n    display: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .separator:before {\n    content: \"•••\";\n  }\n  .page-size {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n  }\n}";
 var KolPaginationDefaultStyle0 = defaultStyleCss$h;
 
 const leftDoubleArrowIcon = {
@@ -12354,7 +12364,6 @@ const NUMBER_FORMATTER = new Intl.NumberFormat(userLanguage, {
 class KolPagination {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.nonce = nonce();
         this.calcCount = (total, pageSize = 1) => Math.ceil(total / pageSize);
         this.getCount = () => this.calcCount(this.state._max, this.state._pageSize);
         this.onClick = (event, page) => {
@@ -12441,7 +12450,7 @@ class KolPagination {
                 for (const value of nextValue) {
                     if (typeof value === 'number') {
                         options.push({
-                            label: translate('kol-page-per-site', { placeholders: { entries: `${value}` } }),
+                            label: `${value}`,
                             value: value,
                         });
                     }
@@ -12506,9 +12515,9 @@ class KolPagination {
                 return null;
             }
         });
-        return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-first'), _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: translate('kol-page-back'), _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: translate('kol-page-next'), _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-last'), _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(KolSelectTag, { _hideLabel: true, _id: `pagination-size-${this.nonce}`, _label: translate('kol-entries-per-site'), _options: this.state._pageSizeOptions, _on: {
+        return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-first'), _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: translate('kol-page-back'), _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: translate('kol-page-next'), _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-last'), _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync("div", { class: "page-size" }, hAsync(KolSelectWcTag, { _label: translate('kol-entries-per-site'), _options: this.state._pageSizeOptions, _on: {
                 onChange: this.onChangePageSize,
-            }, _value: [this.state._pageSize] }))));
+            }, _value: [this.state._pageSize] })))));
     }
     getUnselectedPageButton(page) {
         const pageText = NUMBER_FORMATTER.format(page);
@@ -15247,20 +15256,107 @@ class KolQuote {
     }; }
 }
 
+const defaultStyleCss$d = "@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .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, unset);\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-wc .tooltip-floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip-wc .tooltip-floating.show {\n    animation-name: showTooltip;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  option:checked::before {\n    content: \"✓ \";\n  }\n}";
+var KolSelectDefaultStyle0 = defaultStyleCss$d;
+
+class KolSelect {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.catchRef = (ref) => {
+            this.selectWcRef = ref;
+        };
+        this._accessKey = undefined;
+        this._alert = undefined;
+        this._disabled = false;
+        this._error = undefined;
+        this._hideError = false;
+        this._hideLabel = false;
+        this._hint = '';
+        this._icons = undefined;
+        this._id = undefined;
+        this._label = undefined;
+        this._msg = undefined;
+        this._multiple = false;
+        this._name = undefined;
+        this._on = undefined;
+        this._options = undefined;
+        this._required = false;
+        this._shortKey = undefined;
+        this._rows = undefined;
+        this._syncValueBySelector = undefined;
+        this._tabIndex = undefined;
+        this._tooltipAlign = 'top';
+        this._touched = false;
+        this._value = undefined;
+    }
+    async getValue() {
+        var _a;
+        return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
+    }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        await ((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
+    }
+    render() {
+        return (hAsync(Host, { key: 'a303fcd439bef030c12fdda84453495f41dc732b', class: "kol-select" }, hAsync(KolSelectWcTag, { key: 'f2442747b865aea9a8ea171893064a38bf589c02', ref: this.catchRef, _accessKey: this._accessKey, _alert: this._alert, _disabled: this._disabled, _error: this._error, _hideError: this._hideError, _hideLabel: this._hideLabel, _hint: this._hint, _icons: this._icons, _id: this._id, _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: '8a38f28a0f4dadeaf0e5bcb8228e077c6fea55e3', name: "expert", slot: "expert" }))));
+    }
+    static get style() { return {
+        default: KolSelectDefaultStyle0
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 41,
+        "$tagName$": "kol-select",
+        "$members$": {
+            "_accessKey": [1, "_access-key"],
+            "_alert": [1540],
+            "_disabled": [4],
+            "_error": [1],
+            "_hideError": [1540, "_hide-error"],
+            "_hideLabel": [4, "_hide-label"],
+            "_hint": [1],
+            "_icons": [1],
+            "_id": [1],
+            "_label": [1],
+            "_msg": [1],
+            "_multiple": [4],
+            "_name": [1],
+            "_on": [16],
+            "_options": [1],
+            "_required": [4],
+            "_shortKey": [1, "_short-key"],
+            "_rows": [2],
+            "_syncValueBySelector": [1, "_sync-value-by-selector"],
+            "_tabIndex": [2, "_tab-index"],
+            "_tooltipAlign": [1, "_tooltip-align"],
+            "_touched": [1540],
+            "_value": [1025],
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["_alert", "_alert"], ["_hideError", "_hide-error"], ["_touched", "_touched"]]
+    }; }
+}
+
 class SelectController extends InputIconController {
     constructor(component, name, host) {
         super(component, name, host);
         this.keyOptionMap = new Map();
         this.getOptionByKey = (key) => this.keyOptionMap.get(key);
         this.isValueInOptions = (value, options) => {
-            return (options.find((option) => typeof option.value === 'string'
-                ? option.value === value
+            return (options.find((option) => option.value === value
+                ? true
                 : Array.isArray(option.options)
                     ? this.isValueInOptions(value, option.options)
                     : false) !== undefined);
         };
         this.filterValuesInOptions = (values, options) => {
-            return values.filter((value) => this.isValueInOptions(value, options) !== undefined);
+            return values.filter((value) => this.isValueInOptions(value, options));
         };
         this.afterPatchOptions = (value, _state, _component, key) => {
             if (key === '_value') {
@@ -15275,9 +15371,7 @@ class SelectController extends InputIconController {
                 const value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;
                 const selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? value : [], options);
                 if (this.component._multiple === false && selected.length === 0) {
-                    nextState.set('_value', [
-                        options[0].value,
-                    ]);
+                    nextState.set('_value', [options[0].value]);
                 }
                 else if (Array.isArray(value) && selected.length < value.length) {
                     nextState.set('_value', selected);
@@ -15309,7 +15403,7 @@ class SelectController extends InputIconController {
         validateRows(this.component, value);
     }
     validateValue(value) {
-        watchJsonArrayString(this.component, '_value', () => true, value, undefined, {
+        watchJsonArrayString(this.component, '_value', (item) => typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean', value, undefined, {
             hooks: {
                 afterPatch: this.afterPatchOptions,
                 beforePatch: this.beforePatchOptions,
@@ -15326,13 +15420,10 @@ class SelectController extends InputIconController {
     }
 }
 
-const defaultStyleCss$d = "@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .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, unset);\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-wc .tooltip-floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip-wc .tooltip-floating.show {\n    animation-name: showTooltip;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  option:checked::before {\n    content: \"✓ \";\n  }\n}";
-var KolSelectDefaultStyle0 = defaultStyleCss$d;
-
 const isSelected = (valueList, optionValue) => {
     return Array.isArray(valueList) && valueList.includes(optionValue);
 };
-class KolSelect {
+class KolSelectWc {
     async getValue() {
         return this.state._value;
     }
@@ -15358,16 +15449,16 @@ class KolSelect {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '12666909df9ef40342054af600236d7108c9193a', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '05d2779344e84c602e92e24b7150c8175f3d8b98', class: {
+        return (hAsync(Host, { key: 'aec07ca91f95cf59107ac5f5afb73d7befc2549f', class: { 'kol-select-wc': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'e33293fa0aa701477062f328af7ff06e40eae08d', class: {
                 'hide-label': !!this.state._hideLabel,
                 select: true,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'f0cffc19cd6b02564bd24629f0d317ad143258dd', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'd2f40bd6518004a1f2460122240f299bf7c32102', slot: "input" }, hAsync("form", { key: '5b77d1d688dd80830e58510744b8d7bf93d25a76', onSubmit: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '9d4670f1a6b2f16b6bdfa2970003815580a355a2', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '4d66f8b2d5aea406b7f76edcb6aad8f78e060cf8', slot: "input" }, hAsync("form", { key: '16eb99da01b1e4a47a2ca2d73297a6b11275eb07', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host,
                     ref: this.selectRef,
                 });
-            } }, hAsync("input", { key: '032874a817a08add1aaef245f814550400367371', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '63e98335f1c6cfba22aa2e6b35ec5b06bda16976', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
+            } }, hAsync("input", { key: '57dbb7e9195828d0a15cc7c0a7cbee241b328a96', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: 'b744d87ff8cd648aa20e61a3a25ec5c14db5a9d4', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -15505,7 +15596,8 @@ class KolSelect {
         var _a, _b, _c;
         this._value = Array.from(((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.options) || [])
             .filter((option) => option.selected === true)
-            .map((option) => { var _a; return (_a = this.controller.getOptionByKey(option.value)) === null || _a === void 0 ? void 0 : _a.value; });
+            .map((option) => { var _a; return (_a = this.controller.getOptionByKey(option.value)) === null || _a === void 0 ? void 0 : _a.value; })
+            .filter((value) => value !== undefined);
         tryToDispatchKoliBriEvent('input', this.host, this._value);
         (_c = (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onInput) === null || _c === void 0 ? void 0 : _c.call(_b, event, this._value);
     }
@@ -15541,12 +15633,9 @@ class KolSelect {
         "_touched": ["validateTouched"],
         "_value": ["validateValue"]
     }; }
-    static get style() { return {
-        default: KolSelectDefaultStyle0
-    }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
-        "$tagName$": "kol-select",
+        "$flags$": 4,
+        "$tagName$": "kol-select-wc",
         "$members$": {
             "_accessKey": [1, "_access-key"],
             "_alert": [1540],
@@ -15635,7 +15724,7 @@ class SingleSelectController extends InputIconController {
     }
 }
 
-const defaultStyleCss$c = "/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .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, unset);\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-wc .tooltip-floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip-wc .tooltip-floating.show {\n    animation-name: showTooltip;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__button {\n    width: var(--a11y-min-size);\n    height: auto;\n  }\n  .single-select__listbox {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .single-select__item.highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__no-results-message {\n    display: flex;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n}";
+const defaultStyleCss$c = "/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .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, unset);\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-wc .tooltip-floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip-wc .tooltip-floating.show {\n    animation-name: showTooltip;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__button {\n    width: var(--a11y-min-size);\n    height: auto;\n  }\n  .single-select__listbox {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .single-select__item:not(.single-select__item--disabled).highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__item--disabled:focus, .single-select__item--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .single-select__no-results-message {\n    display: flex;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n}";
 var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
 
 class KolSingleSelect {
@@ -15748,14 +15837,28 @@ class KolSingleSelect {
             return;
         }
         let newIndex = this._focusedOptionIndex + delta;
-        if (newIndex >= this._filteredOptions.length) {
-            newIndex = 0;
+        let iterations = 0;
+        let foundEnabledOption = false;
+        const maxIterations = this._filteredOptions.length;
+        while (iterations < maxIterations) {
+            if (newIndex >= this._filteredOptions.length) {
+                newIndex = 0;
+            }
+            if (newIndex < 0) {
+                newIndex = this._filteredOptions.length - 1;
+            }
+            const option = this._filteredOptions[newIndex];
+            if (!option.disabled) {
+                foundEnabledOption = true;
+                break;
+            }
+            newIndex += delta;
+            iterations++;
         }
-        if (newIndex < 0) {
-            newIndex = this._filteredOptions.length - 1;
+        if (foundEnabledOption) {
+            this._focusedOptionIndex = newIndex;
+            this.focusOption(this._focusedOptionIndex);
         }
-        this._focusedOptionIndex = newIndex;
-        this.focusOption(this._focusedOptionIndex);
     }
     focusOption(index) {
         if (this.refOptions) {
@@ -15765,8 +15868,9 @@ class KolSingleSelect {
     }
     focusSuggestionStartingWith(char) {
         const charLowerCase = char.toLowerCase();
-        const index = Array.isArray(this._filteredOptions) && this._filteredOptions.findIndex((option) => option.label.toLowerCase().startsWith(charLowerCase));
-        if (typeof index === 'number') {
+        const index = Array.isArray(this._filteredOptions) &&
+            this._filteredOptions.findIndex((option) => option.label.toLowerCase().startsWith(charLowerCase) && !option.disabled);
+        if (typeof index === 'number' && index >= 0) {
             this._focusedOptionIndex = index;
             this.focusOption(index);
         }
@@ -15775,43 +15879,54 @@ class KolSingleSelect {
         var _a;
         const hasExpertSlot = showExpertSlot(this.state._label);
         const { ariaDescribedBy } = getRenderStates(this.state);
-        return (hAsync(Host, { key: '3fafd0245696a55c24c2783611fdbc67b08355dd', class: "kol-single-select" }, hAsync("div", { key: 'a4f45b56bb95b417647a03bbd0d2d78e6ac90585', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'd81bafafd3e6178d610d7b301a9ce6c902db3aca', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '9f186f984ed1639208247b7ba021951fb5e5e20d', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '4d353782d00e20753ad311db6e9fd9a62183bcdd', slot: "input" }, hAsync("div", { key: 'f8700bc080d3511d043b0216a9b5812fb4bc3dc4', class: "single-select__group" }, hAsync("input", Object.assign({ key: '30c418d9304fe36c1ca1bb702264ed5546f2889e', ref: this.catchRef, class: "single-select__input", "data-testid": "single-select-input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
+        return (hAsync(Host, { key: '7180098d193a24c598e7a5d994e0faa7de779b40', class: "kol-single-select" }, hAsync("div", { key: '9fa7035c951a732dac6cf834b6d3a7fb210aa2e3', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: '7a387335c227a1c72112c05d052247f4122b3618', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '2f47e4f853340ab4710bebce19cc65b9234509c3', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '9d7cec91578868224a7a91198345f8d4da5f21fa', slot: "input" }, hAsync("div", { key: '14e28f986822de92d05622eae4d3b12f64168d89', class: "single-select__group" }, hAsync("input", Object.assign({ key: 'e4f8f97dc7212cb34ddccff893bbfd04743602e9', ref: this.catchRef, class: "single-select__input", "data-testid": "single-select-input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            }, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'dc652b81cf633ea7067d47269a7f3fb7432b3e2f', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
+            }, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '56f9c3f1ed3773092b83a8d025ebfa9ca6f71cd9', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
                 var _a;
                 this.clearSelection();
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
-            }, class: "single-select__delete" })), hAsync("button", { key: '07ecf92ce00cfcba08d295108a486353cad021b3', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '249a8b5ea3face2f71f5379df830e0d17cb31c57', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '7cc61149ec5255e37ae35fd5370db6dd93d28964', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
-                if (el)
-                    this.refOptions[index] = el;
-            }, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, onClick: (event) => {
-                var _a;
-                this.selectOption(option);
-                (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
-                this.toggleListbox(event);
-                this._isOpen = false;
-                this._hasOpened = false;
-            }, onMouseOver: () => {
-                if (!this.blockSuggestionMouseOver) {
-                    this._focusedOptionIndex = index;
-                    this.focusOption(index);
-                }
-            }, onFocus: () => {
-                this._focusedOptionIndex = index;
-                this.focusOption(index);
-            }, class: "single-select__item", onKeyDown: (e) => {
-                var _a;
-                if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+            }, class: "single-select__delete" })), hAsync("button", { key: '120d09eccca8b3b8555e185ef2380edc7a402da1', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '59dff271a5219a84e3e8e0a18d3bf7e9e8b7fa5c', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'e4101ba05c1af934d188a1508c81cb14ef26d75e', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => {
+            var _a;
+            return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
+                    if (el)
+                        this.refOptions[index] = el;
+                }, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, "aria-disabled": option.disabled ? 'true' : undefined, onClick: (event) => {
+                    var _a;
+                    if (option.disabled) {
+                        return;
+                    }
                     this.selectOption(option);
                     (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
-                    this.toggleListbox(e);
-                    e.preventDefault();
-                }
-            } }, hAsync("input", { class: "visually-hidden", type: "radio", name: "options", id: `option-radio-${index}`, value: option.value, checked: this._value === option.value || index === this._focusedOptionIndex }), hAsync("label", { htmlFor: `option-radio-${index}`, class: "radio-label" }, option.label))))) : (hAsync("li", { class: "single-select__no-results-message" }, translate('kol-no-results-message'), " ")))))))));
+                    this.toggleListbox(event);
+                    this._isOpen = false;
+                    this._hasOpened = false;
+                }, onMouseOver: () => {
+                    if (!this.blockSuggestionMouseOver) {
+                        this._focusedOptionIndex = index;
+                        this.focusOption(index);
+                    }
+                }, onFocus: () => {
+                    if (!option.disabled) {
+                        this._focusedOptionIndex = index;
+                        this.focusOption(index);
+                    }
+                }, class: clsx('single-select__item', { 'single-select__item--disabled': option.disabled }), onKeyDown: (e) => {
+                    var _a;
+                    if (option.disabled) {
+                        return;
+                    }
+                    if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+                        this.selectOption(option);
+                        (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
+                        this.toggleListbox(e);
+                        e.preventDefault();
+                    }
+                } }, hAsync("input", { class: "visually-hidden", type: "radio", disabled: (_a = option.disabled) !== null && _a !== void 0 ? _a : undefined, name: "options", id: `option-radio-${index}`, value: option.value, checked: this._value === option.value || index === this._focusedOptionIndex }), hAsync("label", { htmlFor: `option-radio-${index}`, class: "radio-label" }, option.label)));
+        })) : (hAsync("li", { class: "single-select__no-results-message" }, translate('kol-no-results-message'), " ")))))))));
     }
     handleFocusOut() {
         setTimeout(() => {
@@ -16167,7 +16282,7 @@ class KolSkipNav {
         };
     }
     render() {
-        return (hAsync(Host, { key: '8e786df9a83fb71363a103355756259f9522dbf6', class: "kol-skip-nav" }, hAsync("nav", { key: 'f713d795fe85f942836cfd5ea4baa5cb5e2a9d49', "aria-label": this.state._label }, hAsync("ul", { key: '5091da25f30f9cb48c1368db616c581a49795bd7' }, this.state._links.map((link, index) => {
+        return (hAsync(Host, { key: '31dea69f183ae64b04d1d3c9f21a12dc67c460db', class: "kol-skip-nav" }, hAsync("nav", { key: '2ddbf00d7c97058942323af5bafa68fd5a5959dd', "aria-label": this.state._label }, hAsync("ul", { key: '80b9bb23de090f334dadde08ef95a0ffdf2d0dff' }, this.state._links.map((link, index) => {
             return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
         })))));
     }
@@ -24560,10 +24675,10 @@ class KolSpanWc {
     render() {
         var _a, _b, _c, _d, _e;
         const hideExpertSlot = !showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '6acfa1112779f384c069b3a43142fc0027b06aa1', class: {
+        return (hAsync(Host, { key: 'fdfd3a826efeaf6222f82807d1092ead54df42bc', class: {
                 'kol-span-wc': true,
                 'hide-label': !!this.state._hideLabel,
-            } }, this.state._icons.top && (hAsync(KolIconTag, { key: '536a8b1f51ea877893548ae185d69f684e92cdd3', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: '7343d1728341da8d23bf65274d43f7c64f9cf40b' }, this.state._icons.left && (hAsync(KolIconTag, { key: '941667040ce77636aafbf925f8ce4c5ebad48af5', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._badgeText && this.state._label.length ? (hAsync(InternalUnderlinedBadgeText, { label: this.state._label, badgeText: this.state._badgeText })) : (((_c = this.state._label) !== null && _c !== void 0 ? _c : ''))))) : (''), hAsync("span", { key: 'd6893d1ca89b9a0b3a7e3fc9a7ec21c500d69efc', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '13a800012c9fc299e5c51328a458c95df1e747d1', name: "expert" })), this.state._badgeText && (hAsync("kbd", { key: 'fbbe928e1f3637d9d7e5b0e57da5945972c52ef8', class: "badge-text-hint", "aria-hidden": "true" }, this.state._badgeText)), this.state._icons.right && (hAsync(KolIconTag, { key: 'b854d785ff74fe164bd4e597d6fc2738b47b65ea', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: 'f3b4d9f162601a1caf91379da31c32e8724e14c9', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
+            } }, this.state._icons.top && (hAsync(KolIconTag, { key: 'a850b2ce84c9fa0798ea66706b175f396423d538', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: '0616d82985e38e46e3539bfbcf30cef782e04fbb' }, this.state._icons.left && (hAsync(KolIconTag, { key: '50dad540d78da59ed93d1cab8f4584a081a90e83', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._badgeText && this.state._label.length ? (hAsync(InternalUnderlinedBadgeText, { label: this.state._label, badgeText: this.state._badgeText })) : (((_c = this.state._label) !== null && _c !== void 0 ? _c : ''))))) : (''), hAsync("span", { key: '7b2d56c97dab35aa6b504e755c68baf69cd73f66', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '05b5293ea3c92e2138aa8952f6b8ebd48a22ae04', name: "expert" })), this.state._badgeText && (hAsync("kbd", { key: '6807b33128c322c5ba01985e71b6779ebeec25cd', class: "badge-text-hint", "aria-hidden": "true" }, this.state._badgeText)), this.state._icons.right && (hAsync(KolIconTag, { key: 'a69dddc7f7009487146de09e315eb043db3eea42', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: '55e888759d73d994b4988947da7b39710daff80a', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
     }
     validateBadgeText(value) {
         validateBadgeText(this, value);
@@ -24641,7 +24756,7 @@ class KolSpin {
         };
     }
     render() {
-        return (hAsync(Host, { key: '972df80fb3799743d512f2cd8049bea7ef4a51d4', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
+        return (hAsync(Host, { key: '9980594780aef9155770d257bc71a329cdb43bcb', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
                 spin: true,
                 [this.state._variant]: true,
             }, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
@@ -24726,10 +24841,10 @@ class KolSplitButton {
     }
     render() {
         const i18nDropdownLabel = 'kol-split-button-dropdown-label';
-        return (hAsync(Host, { key: 'f86660df23d257e12ac34040c5f51f4bb7593956', class: "kol-split-button" }, hAsync("div", { key: 'd8c33523b2e92a678f2f10f29b8c5b50a31b89b1', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: '48ff4d15ea74cbfbb6b854efebf15a56c6b5b05e', class: {
+        return (hAsync(Host, { key: 'd747d36dee39a6dbba4dbee54f40fcae97a89df9', class: "kol-split-button" }, hAsync("div", { key: '4fe31843dc5166cfcf1c9fdbb50501e7603c41bf', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: '8c751dce761c6f5b61162a4ae51645b7abc2224d', class: {
                 'main-button': true,
                 button: true,
-            }, _ariaControls: this._ariaControls, _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, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: 'fda18766b722b64e9cd017e006fb63487909d81f', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '60a7fa38c3a67531a177e2ece6746f895daf4e02', class: { 'secondary-button': true, [this._variant]: this._variant !== 'custom' }, _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler, _variant: this._variant })), hAsync(KolPopoverWcTag, { key: 'd50e4e94ba2b5b9e3c647ed0ac3689274c864df3', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '825e2dfe41a14440dc4e54bdbc8f516d1fe4a512' }))));
+            }, _ariaControls: this._ariaControls, _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, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '3bd199965fbb156f399de3558316be887272235e', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '1a30acb4c71e787f264434c6feed5a534eb4a7f1', class: { 'secondary-button': true, [this._variant]: this._variant !== 'custom' }, _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler, _variant: this._variant })), hAsync(KolPopoverWcTag, { key: 'b12c89bb545f90b59d0a99d3d9bb2e1c2b50cf9b', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '0be3889b87cdecc5f485b57ff6b1d47b26d7e636' }))));
     }
     async closePopup() {
         this.handleOnClose();
@@ -24781,7 +24896,7 @@ class KolSymbol {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'ae74420e334ef753151f20cf720316c346714414', class: "kol-symbol" }, hAsync("span", { key: '11506de7dad153787ca79b91086a47b5b6a752ce', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
+        return (hAsync(Host, { key: '90b470072c9a1933123d6cf1930e71dc91f93c26', class: "kol-symbol" }, hAsync("span", { key: '5b68c660c07085b545df10203a4d3f43814981c4', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -24830,7 +24945,7 @@ class KolTable {
         this._on = undefined;
     }
     render() {
-        return (hAsync(KolTableStatefulTag, { key: 'cf219df08e0b9bd30eb58ca488225a848e0185c4', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
+        return (hAsync(KolTableStatefulTag, { key: 'b40171dcd9ce27f98ed2a23754e23df165a7515a', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -25259,7 +25374,7 @@ class KolTableStateful {
             horizontal: (_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) })))),
             vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
         };
-        return (hAsync(Host, { key: '59bca8f76980c690f2e71a80dbdfc4001ed491d4', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '18d3c813d23c9ca566c0d1a4777bb919256dc8c5', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
+        return (hAsync(Host, { key: '08f169e0520e974e018e987202a9af0ced93a19e', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '86b50cb5b9d07ea8c137c54a51b92ec03b656dce', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -25322,7 +25437,7 @@ class KolTableStateless$1 {
         this._selection = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '880df6cca6cf1d311bf526a27c697ea049fd1eaf', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: '28907ca20be6bca9643c7db79c9b1a80a272cfdf', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
+        return (hAsync(Host, { key: '733796675ff193e4eab4354c4a3df3f3728df938', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: '60f23e1dc04182d918b0211514b90a0c597419e5', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
     }
     static get style() { return {
         default: KolTableStatelessDefaultStyle0
@@ -25781,9 +25896,9 @@ class KolTableStateless {
     render() {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
         this.checkboxRefs = [];
-        return (hAsync(Host, { key: 'd4e9d9eb3d6c582fa91fc5c2810ffb567bb203cf', class: "kol-table-stateless-wc" }, hAsync("div", { key: '2d2096201437601307c592db1c2d9e26a8c43f9f', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'a984d2d87a344a8a2f2552fb27d33f79c681c85b', style: {
+        return (hAsync(Host, { key: '4dc4852d25aa27bf6d9a3428adbe16abb1afb3c4', class: "kol-table-stateless-wc" }, hAsync("div", { key: '447073ebc05661e95f918990e6e4da2758d7df99', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '6c567cf91459742f1d9255cbca4f77a79f4b2a8f', style: {
                 minWidth: this.state._deprecatedMinWidth || this.state._minWidth,
-            } }, hAsync("caption", { key: 'ecbf27a633df06c21134a269ae4c8731df6e661a', id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '17ff8eb5a844f09c7e2a4f43db4a6a88ace9aac4' }, [
+            } }, hAsync("caption", { key: 'f4e55364797dada9b790b91aad302955a9fd8941', id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'f2828ff867a80ad39d209640bb2b861d973c9730' }, [
             this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
                 cols.map((cell, colIndex) => {
                     if (cell.asTd === true) {
@@ -25809,7 +25924,7 @@ class KolTableStateless {
                     }
                 })))),
             this.renderSpacer('head', this.state._headerCells.horizontal),
-        ])), hAsync("tbody", { key: '95350a0c1dc0fdad38585eedbabd3c3646919813' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), hAsync("tbody", { key: 'cf9963ac9b1883e37a924c493f019c67cb66932b' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -26047,11 +26162,11 @@ class KolTabs {
             } }))));
     }
     render() {
-        return (hAsync(Host, { key: '06943269902300193df86c432eeb87d4279b6e48', class: "kol-tabs" }, hAsync("div", { key: '746b496d80452724c1dc4d976e5fe024a6618619', ref: (el) => {
+        return (hAsync(Host, { key: 'a3968a8ef448170295b32cd87f99c38b6f0b2b23', class: "kol-tabs" }, hAsync("div", { key: '208a4c4daa5a68fd7bd3637ded3fa513b0e4f418', ref: (el) => {
                 this.tabPanelsElement = el;
             }, class: {
                 [`tabs-align-${this.state._align}`]: true,
-            } }, this.renderButtonGroup(), hAsync("div", { key: '2b66ede990e28f6257e4c17dd159e7e692ca44e5', class: "tabs-content", ref: this.catchTabPanelHost }))));
+            } }, this.renderButtonGroup(), hAsync("div", { key: 'b7455389653d13113ea488f361a32f7b0edcfa83', class: "tabs-content", ref: this.catchTabPanelHost }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -26268,7 +26383,7 @@ class KolTextarea {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '932e50ca620513717e574c4ecf1a5b743e93fef7', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '93d8c07cc5a588825dcde4a15ee4856d87cf26da', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'b713ec67ec0e862bef532d04e5db1624d6c0b83f', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'd1d32ae1c100ca457f47c9f366b65f0bd56408d6', slot: "input" }, hAsync("textarea", Object.assign({ key: '2fb99d49c542399366fa255c59f482064b442fb5', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: this.state._spellCheck }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
+        return (hAsync(Host, { key: '4521e94fa842252253c31ad6d38caa55ce4e87b0', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'b8d0fae4561631325e7c15e477247984732d7d40', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '7eb733a2b2bbe891a40ab079f6993a1622b309c4', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a2d0026e436995ab17e5fdad9ae43f69fcd0719e', slot: "input" }, hAsync("textarea", Object.assign({ key: '5d998e4bd5290b4c549271338245867882150c51', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: this.state._spellCheck }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -26526,7 +26641,7 @@ const InternalToast = ({ key, onClose, onRef, toastState }) => {
             hAsync("div", { ref: onRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
 };
 
-const defaultStyleCss$4 = "/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .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, unset);\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-wc .tooltip-floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip-wc .tooltip-floating.show {\n    animation-name: showTooltip;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    flex-direction: column;\n  }\n  .close-all {\n    align-self: flex-end;\n  }\n}";
+const defaultStyleCss$4 = "/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .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, unset);\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-wc .tooltip-floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip-wc .tooltip-floating.show {\n    animation-name: showTooltip;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    max-width: 90vw;\n    flex-direction: column;\n  }\n  .close-all {\n    align-self: flex-end;\n  }\n}";
 var KolToastContainerDefaultStyle0 = defaultStyleCss$4;
 
 const TRANSITION_TIMEOUT = 300;
@@ -26589,7 +26704,7 @@ class KolToastContainer {
         }
     }
     render() {
-        return (hAsync(Host, { key: '0675db1de5cfcaab05fce59f77a8690e21b33313', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'c9d662e674ee361eefa1229517bad7f7111807f4', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
+        return (hAsync(Host, { key: '75bd108ec28225c3319a27f2181923d7d0a73fda', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'b4b27a44db0a85940c62e0eec06b623ffd0bc0cc', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
                 onClick: () => {
                     void this.closeAll();
                 },
@@ -26647,7 +26762,7 @@ class KolToolbar {
         return Object.assign(Object.assign({}, rest), { _icons, _disabled });
     }
     render() {
-        return (hAsync(Host, { key: '54fb48e2638c9649b2bd5d28c5dd99f1068d85d2', class: "kol-toolbar" }, hAsync("div", { key: '319331b36f3b26cdbbf80645175b868313fc11ec', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
+        return (hAsync(Host, { key: 'b3d64370b42779863c0bb7c631790c1c2057bbab', class: "kol-toolbar" }, hAsync("div", { key: 'c4fddaa528e345be91561aadb24e5c5f85404071', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -26859,7 +26974,7 @@ class KolTooltipWc {
         }
     }
     render() {
-        return (hAsync(Host, { key: '092069a1b40726d8b5a7a63b07d91a8caaece955', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: '3eb1f5e75eacf2d2fd8e63341f316c3bb7495345', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: 'a51ca1cb502de1bad2e7c1a5defd1d846529fe06', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: 'a0bd94af84f1a054cd73d03b960fbcda6bfa31a6', class: "tooltip-area tooltip-content", id: this.state._id, _badgeText: this._badgeText, _label: this.state._label })))));
+        return (hAsync(Host, { key: '9e4d556350fe633cbc4698acdab9af4137260144', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: '80400a2fbb5da8e5e9318466fbdf1f63eb290320', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: '4c817d25203a649f778fa98c5c97e27a5259ad4f', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: '97dc74f5efc3841c338efe4ca61f9de9094195a3', class: "tooltip-area tooltip-content", id: this.state._id, _badgeText: this._badgeText, _label: this.state._label })))));
     }
     validateBadgeText(value) {
         validateBadgeText(this, value);
@@ -26938,7 +27053,7 @@ class KolTree {
         this._label = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '533e6e854979804420db3f83cc77dd3fe2cadd7e', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: '2e9a576587ec283766128895b4a5fd862e2cab4d', _label: this._label }, hAsync("slot", { key: 'e94f981358823827a97f1e500aea341c3a3d2733' }))));
+        return (hAsync(Host, { key: 'f0df57f2e520474e25f95aafa76c3773e5d6f9ce', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'fdabfe7fd5ede28f1f09736db4ad692d3f7da3a1', _label: this._label }, hAsync("slot", { key: '0b82271f1158425b74a05f1007523e332528b400' }))));
     }
     static get style() { return {
         default: KolTreeDefaultStyle0
@@ -26986,7 +27101,7 @@ class KolTreeItem {
         return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
     }
     render() {
-        return (hAsync(KolTreeItemWcTag, { key: 'e12256326412437eec2dcb533694cc19f634ea40', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'fdd610d3c0d4e0ddae658a013fd0ed4b103a89d2' })));
+        return (hAsync(KolTreeItemWcTag, { key: '18d638b7de8b572b086a20f6dc9f0db7593ccfaa', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '0bdb5a4432c57acb48d9418da052ed6242edd4b2' })));
     }
     static get style() { return {
         default: KolTreeItemDefaultStyle0
@@ -27029,13 +27144,13 @@ class KolTreeItemWc {
     }
     render() {
         const { _href, _active, _hasChildren, _open, _label } = this.state;
-        return (hAsync(Host, { key: '7138fb8c723f2bf3e3a06fbb6aea211534068f36', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: 'f790d81d295f070457e39b6591de5c58cbe95b09', class: "tree-item", style: {
+        return (hAsync(Host, { key: '1181be8d7250b750cf064480ef9941c2d99fe2d0', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '3349d65ca244c70fa6fa82403f45bb521f88d2d5', class: "tree-item", style: {
                 '--level': `${this.level}`,
-            } }, hAsync(KolLinkWcTag, { key: '77d589d030b3eae35b1e7810fdc225f169e6bb4c', class: {
+            } }, hAsync(KolLinkWcTag, { key: '7387e1ffd5327583f1e9dc8733b0835c2248070e', class: {
                 'tree-link': true,
                 'first-level': this.level === 0,
                 active: Boolean(_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: 'cdc688eb4d867dd1c7f4629139e38c471e02c23f', class: "tree-link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "toggle-button-placeholder" })), hAsync("span", { key: 'f2147ae17873f9a96221aef13dda7953ac7f592c', class: "text" }, _label))), hAsync("ul", { key: '1020c40614da618527a53c460f9d974ed575da6f', hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: 'd73bfce093bfbb5ff28758e82888a6d449b28c88' })))));
+            }, _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: '456e0b79433f48e81811f6e4e635d2e1281b4e6b', class: "tree-link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "toggle-button-placeholder" })), hAsync("span", { key: '074816a9371ebf5cb3a49b3460c5a368bc36465d', class: "text" }, _label))), hAsync("ul", { key: 'b073f00265bc39c0b44f38b6e48de75f57418ceb', hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '79717d641b1cbf39ad956e19224ffed46ecee014' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);
@@ -27140,7 +27255,7 @@ class KolTreeWc {
         validateLabel(this, value);
     }
     render() {
-        return (hAsync(Host, { key: '4cf8271ad3e912570e8524903698ac34ee8083a6', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'cf4d2f5e3d2847696c0f36b23645ca110504beec', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: 'e61d793c177dc6f974e4a385d247bd4b1ccf9a9d', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '009e01247599b2d5ac3419e44cf20b428fd17bf4' })))));
+        return (hAsync(Host, { key: '1787e04f7c274d06626ba519287830ee0dfac428', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: '531cecb03fb89162726d16d21b422b623c3a274f', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '8901ad4bbf1a08b301d1dba576f473c3189738e8', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '2a1c6f38ad5a0ea45dbc28db982ccc354f3918d2' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
@@ -27338,7 +27453,7 @@ class KolVersion {
         };
     }
     render() {
-        return (hAsync(Host, { key: '3148ea6ea867fa5f5779548dc02deab964ba5f12', class: "kol-version" }, hAsync(KolBadgeTag, { key: '3ddd8c9162ada00894d3591c18f95c2df33b320f', _color: "#bec5c9", _icons: {
+        return (hAsync(Host, { key: '00515e4ef2d1623035eb8a51b6d413df8c3d9de7', class: "kol-version" }, hAsync(KolBadgeTag, { key: '52fdfff5ee794e13bfb9622c5a4527ac725a4a54', _color: "#bec5c9", _icons: {
                 left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
             }, _label: this.state._label })));
     }
@@ -27433,6 +27548,7 @@ registerComponents([
   KolProgress,
   KolQuote,
   KolSelect,
+  KolSelectWc,
   KolSingleSelect,
   KolSkipNav,
   KolSpanWc,