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

package/dist/index.mjs

@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
 
 const NAMESPACE = 'kolibri';
 const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
-const Env = /* kolibri */ {"kolibriVersion":"4.0.3-rc.1"};
+const Env = /* kolibri */ {"kolibriVersion":"4.0.3-rc.2"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -2080,13 +2080,6 @@ const validateButtonType = (component, value) => {
     watchValidator(component, `_type`, (value) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value), new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]), value);
 };
 
-const buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'];
-const validateButtonVariant = (component, value) => {
-    watchValidator(component, `_variant`, (value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value), new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]), value, {
-        defaultValue: 'normal',
-    });
-};
-
 const validateChecked = (component, value) => {
     watchBoolean(component, '_checked', value);
 };
@@ -2733,6 +2726,14 @@ const validateAlertVariant = (component, value) => {
     watchValidator(component, '_variant', isAlertVariantPropType, new Set(alertVariantOptions), value);
 };
 
+const isSafeClassName = (value) => {
+    var re = new RegExp('^[a-zA-Z][a-zA-Z0-9_-]{3,60}$');
+    return typeof value === 'string' && re.test(value);
+};
+const validateVariantClassName = (component, value) => {
+    watchValidator(component, '_variant', isSafeClassName, new Set(['^[a-zA-Z][a-zA-Z0-9_-]{3,60}$']), value);
+};
+
 const inputCheckboxVariantOptions = ['button', 'default', 'switch'];
 const isInputCheckboxVariantPropType = (value) => {
     return typeof value === 'string' && inputCheckboxVariantOptions.includes(value);
@@ -6143,7 +6144,9 @@ const toVal = (mix) => {
                 if (item) {
                     const y = toVal(item);
                     if (y) {
-                        str && (str += ' ');
+                        if (str) {
+                            str += ' ';
+                        }
                         str += y;
                     }
                 }
@@ -6152,7 +6155,9 @@ const toVal = (mix) => {
         else {
             for (const key in mix) {
                 if (mix[key]) {
-                    str && (str += ' ');
+                    if (str) {
+                        str += ' ';
+                    }
                     str += key;
                 }
             }
@@ -6166,7 +6171,9 @@ const clsx = (...args) => {
         if (arg) {
             const x = toVal(arg);
             if (x) {
-                str && (str += ' ');
+                if (str) {
+                    str += ' ';
+                }
                 str += x;
             }
         }
@@ -18608,12 +18615,12 @@ class KolBadge {
     }
     render() {
         const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
-        return (hAsync("span", { key: '9cbe34bd551362c6f631d403b69387255d2725ee', class: clsx('kol-badge', {
+        return (hAsync("span", { key: '52d5943769be151313c36cf4e733e287c17b2d1c', class: clsx('kol-badge', {
                 'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
             }), style: {
                 backgroundColor: this.bgColorStr,
                 color: this.colorStr,
-            } }, hAsync(KolSpanFc, { key: '93b443c1d823a5e440814f05a4b7c7da054caff2', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
+            } }, hAsync(KolSpanFc, { key: '0d12965762f74d81a8ad94fa2e155a762960ec8d', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
     }
     validateIcons(value) {
         validateIcons(this, value);
@@ -18765,7 +18772,7 @@ class KolButton {
         return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
     }
     render() {
-        return (hAsync(KolButtonWcTag, { key: 'da0026c93b776bb768294b66041779e638ee9d45', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '53ac495c38ac5b4f799319cb4304662399b4eca6', name: "expert", slot: "expert" })));
+        return (hAsync(KolButtonWcTag, { key: 'fe6afdaca4a57dc2e7a3e49944231c30cfafe1e4', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '375996d22e09b3068d52eff2d3f833c08732b069', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: defaultStyleCss$H
@@ -18783,7 +18790,6 @@ class KolButton {
             "_disabled": [4],
             "_hideLabel": [4, "_hide-label"],
             "_icons": [1],
-            "_id": [1],
             "_inline": [4],
             "_label": [1],
             "_name": [1],
@@ -18826,7 +18832,7 @@ class KolButtonLink {
         return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
     }
     render() {
-        return (hAsync(KolButtonWcTag, { key: '4f24a85aab00b98b53b93aa18f9050cfd58d37c3', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: '4282c9c9226bc23d50f97a63477354872fa77f42', name: "expert", slot: "expert" })));
+        return (hAsync(KolButtonWcTag, { key: 'a2c848b3dd301fc345b257e472025d598241fd3e', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '35770be517dc2b461efec7c21b1811d6edf3ab91', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: defaultStyleCss$G
@@ -18843,7 +18849,6 @@ class KolButtonLink {
             "_disabled": [4],
             "_hideLabel": [4, "_hide-label"],
             "_icons": [1],
-            "_id": [1],
             "_inline": [4],
             "_label": [1],
             "_name": [1],
@@ -18854,6 +18859,7 @@ class KolButtonLink {
             "_tooltipAlign": [1, "_tooltip-align"],
             "_type": [1],
             "_value": [8],
+            "_variant": [1],
             "getValue": [64],
             "focus": [64]
         },
@@ -18911,7 +18917,7 @@ const propagateResetEventToForm = (options = {}) => {
             setEventTarget(event, KoliBriDevHelper.querySelector('form', form));
             const kolForm = form;
             if (typeof ((_a = kolForm._on) === null || _a === void 0 ? void 0 : _a.onReset) === 'function') {
-                typeof ((_b = kolForm._on) === null || _b === void 0 ? void 0 : _b.onReset(event));
+                (_b = kolForm._on) === null || _b === void 0 ? void 0 : _b.onReset(event);
             }
         }
     }
@@ -19139,14 +19145,14 @@ class KolButtonWc {
         const badgeText = this.state._accessKey || this.state._shortKey;
         const isDisabled = this.state._disabled === true;
         const hideLabel = this.state._hideLabel === true;
-        return (hAsync(Host, { key: '4acaf70bc26886e46e360e49035823cf343d89ef' }, hAsync("button", { key: '9d26032100b9d0c7a8e62c59975db64f42874fd6', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
+        return (hAsync(Host, { key: '9c26b6174fedb3fcc1f1d3cd34e8bb95a78bab7f' }, hAsync("button", { key: 'c28349752715c55e6a340c44bd5cf845b0e28fc7', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
                 'kol-button--disabled': isDisabled,
                 [`kol-button--${this.state._variant}`]: this.state._variant !== 'custom',
                 'kol-button--inline': this.state._inline === true,
                 'kol-button--standalone': this.state._inline === false,
                 'kol-button--hide-label': hideLabel,
                 [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-            }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: 'ab3e331576541fc15d399bd08add5668dec7ac29', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'd92826212d0564e2e1a4b8d123f2a83630ed67ec', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: 'af783d14e3f4014591177acc6fb00b6e0d69b74b', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
+            }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: '451a17c0f75959c08c03da79c47bcdd40c5f78c5', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'f3eeed29378d95c06789f00308321147e222a3e6', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: '7d799a434d077183dc75ffce496ee155301fc7e4', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -19190,7 +19196,6 @@ class KolButtonWc {
         this._inline = false;
         this._tooltipAlign = 'top';
         this._type = 'button';
-        this._variant = 'normal';
         this.state = {
             _icons: {},
             _label: '',
@@ -19270,8 +19275,8 @@ class KolButtonWc {
         setState(this, '_value', value);
         this.controller.setFormAssociatedValue(this.state._value);
     }
-    validateButtonVariant(value) {
-        validateButtonVariant(this, value);
+    validateVariant(value) {
+        validateVariantClassName(this, value);
     }
     componentWillLoad() {
         this.validateAccessKey(this._accessKey);
@@ -19295,7 +19300,7 @@ class KolButtonWc {
         this.validateTooltipAlign(this._tooltipAlign);
         this.validateType(this._type);
         this.validateValue(this._value);
-        this.validateButtonVariant(this._variant);
+        this.validateVariant(this._variant);
         validateAccessAndShortKey(this._accessKey, this._shortKey);
     }
     get host() { return getElement(this); }
@@ -19321,7 +19326,7 @@ class KolButtonWc {
         "_tooltipAlign": ["validateTooltipAlign"],
         "_type": ["validateType"],
         "_value": ["validateValue"],
-        "_variant": ["validateButtonVariant"]
+        "_variant": ["validateVariant"]
     }; }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -19676,8 +19681,7 @@ const CustomSuggestionsOptionFc = ({ disabled, index, ref, selected, onClick, on
             return text;
         const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
         const parts = text.split(regex);
-        parts[1] = hAsync("mark", null, parts[1]);
-        return parts;
+        return parts.map((part, partIndex) => (partIndex % 2 === 1 ? hAsync("mark", null, part) : part));
     };
     return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: ref, "data-index": index, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, "aria-disabled": disabled ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: clsx('kol-custom-suggestions-option', { 'kol-custom-suggestions-option--disabled': disabled }), onKeyDown: onKeyDown }, hAsync("span", null, highlightSearchTerm(String(option), searchTerm || ''))));
 };
@@ -19758,12 +19762,6 @@ class InputController extends ControlledInputController {
     validateHint(value) {
         validateHint(this.component, value);
     }
-    validateId(value) {
-        watchString(this.component, '_id', value, { minLength: 1 });
-        if (value === '' || typeof value === 'undefined') {
-            devHint(`A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.`);
-        }
-    }
     validateLabel(value) {
         validateLabelWithExpertSlot(this.component, value, {
             required: true,
@@ -19803,7 +19801,6 @@ class InputController extends ControlledInputController {
         this.validateHideMsg(this.component._hideMsg);
         this.validateHideLabel(this.component._hideLabel);
         this.validateHint(this.component._hint);
-        this.validateId(this.component._id);
         this.validateLabel(this.component._label);
         this.validateShortKey(this.component._shortKey);
         this.validateSmartButton(this.component._smartButton);
@@ -20070,15 +20067,15 @@ class KolCombobox {
     }
     render() {
         const isDisabled = this.state._disabled === true;
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9f475f1063af21278d7bf528f48e452e381698b5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd95db4eaffa977c1215a3fb5bbf9c144cdecc41a', state: this.state }, hAsync("div", { key: 'ede069e1f41dbc5e1ca2fe4d788f6768b34fed29', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: '91cd146fd875ed6241c54d6284d206b18348d904' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: 'a8324c50d267ec3bc2f42d8408d86dbf30913ecf', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'c8bb3a42b48cf0fce6270aca0b957783faaad8fb' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '3f205b2f94f3a3e54bf00ebb1b734bbc70b24343', state: this.state }, hAsync("div", { key: 'e2725023fb2affbddc40777e99968a829b64501f', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'da9beffc01bc96c5dfe51c28540bfc55ad7d0b23' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '2c143034148a6c58a86e213f1f2e2849b09a90c1', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
                 'kol-combobox__delete--disabled': isDisabled,
             }), _on: {
                 onClick: () => {
                     this.clearSelection();
                 },
-            } })), hAsync(KolIconTag, { key: '3cb2036a8ddee0289391c5a53ffa0b0c9f0641f1', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), hAsync(KolIconTag, { key: '5162eb09c62d31099e4159cdae84b5b0f47dfab6', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: 'fcd7efbffefb3fe128b043e722b98a7e0871ff42', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredSuggestions) &&
+            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '073bc3a3eccb2e5fa42bade96396972ec299b95f', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
                     if (el)
@@ -20263,9 +20260,6 @@ class KolCombobox {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -20343,7 +20337,6 @@ class KolCombobox {
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_msg": ["validateMsg"],
         "_name": ["validateName"],
@@ -20370,7 +20363,6 @@ class KolCombobox {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_msg": [1],
             "_name": [1],
@@ -20710,7 +20702,7 @@ class KolDrawer {
             } }, hAsync("div", { class: "kol-drawer__content" }, hAsync("slot", null))));
     }
     render() {
-        return (hAsync(Host, { key: '1beca595204dc0017f31d21fd66f6f9094bbad1e', class: "kol-drawer" }, hAsync("dialog", { key: '5121d04ad8940c0a0eeab3da9deca52ef853a37b', "aria-label": this.state._label, class: "kol-drawer__dialog", onCancel: handleCancelOverlay, ref: this.getRef }, this.renderDialogContent())));
+        return (hAsync(Host, { key: '55a5a4b9532c8a02329e9b0b67a2183655143fd4', class: "kol-drawer" }, hAsync("dialog", { key: 'fbc41355c0d2c16f0edfae36c8282a3caff5059b', "aria-label": this.state._label, class: "kol-drawer__dialog", onCancel: handleCancelOverlay, ref: this.getRef }, this.renderDialogContent())));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -20998,7 +20990,7 @@ const bem = c();
 const BEM_CLASS_ICON = bem('kol-icon');
 const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
 
-const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1769961101048\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1769961101048#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1769961101048\") format(\"woff2\"), url(\"kolicons.woff?t=1769961101048\") format(\"woff\"), url(\"kolicons.ttf?t=1769961101048\") format(\"truetype\"), url(\"kolicons.svg?t=1769961101048#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-size: inherit;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1a\";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
+const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1770445843981\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1770445843981#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1770445843981\") format(\"woff2\"), url(\"kolicons.woff?t=1770445843981\") format(\"woff\"), url(\"kolicons.ttf?t=1770445843981\") format(\"truetype\"), url(\"kolicons.svg?t=1770445843981#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-size: inherit;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1a\";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
 
 class KolIcon {
     render() {
@@ -21365,7 +21357,7 @@ const FieldControlStateWrapper = (_a, children) => {
     return (hAsync(KolFieldControlFc, Object.assign({}, getFieldControlProps(state), other), children));
 };
 
-const defaultStyleCss$w = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-field-control {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: left;\n    grid-template-areas: \"input label\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-areas: \"input label\" \"hint hint\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-areas: \"label input\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-areas: \"label input\" \"hint hint\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-field-control__label {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    flex-grow: 1;\n    align-items: center;\n    cursor: pointer;\n    grid-area: label;\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__label-text::after {\n    content: \"\";\n  }\n  .kol-field-control__tooltip .span-label::after {\n    content: \"\";\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: \"*\";\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    content: \"*\";\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-checkbox {\n    display: flex;\n    position: relative;\n    align-items: center;\n    cursor: pointer;\n  }\n  .kol-checkbox--disabled {\n    cursor: not-allowed;\n  }\n  .kol-checkbox .kol-input {\n    background-color: #fff;\n    border-style: solid;\n    margin: 0;\n    border-width: 2px;\n    appearance: none;\n    cursor: inherit;\n  }\n  .kol-checkbox .kol-input:before {\n    content: \"\";\n  }\n  /**\n   * Variant: Checkbox\n   */\n  .kol-checkbox--variant-default {\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    justify-content: center;\n  }\n  .kol-checkbox--variant-default .kol-icon {\n    display: flex;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n    pointer-events: none;\n  }\n  .kol-checkbox--variant-default .kol-icon::part(icon) {\n    display: none;\n  }\n  .kol-checkbox--variant-default .kol-input {\n    width: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon::part(icon), .kol-checkbox--variant-default.kol-checkbox--indeterminate .kol-icon::part(icon) {\n    display: block;\n  }\n  /**\n   * Variant: Switch\n   */\n  .kol-checkbox--variant-switch {\n    position: relative;\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: inline-block;\n    position: relative;\n    width: 3.2em;\n    min-width: 3.2em;\n    height: 1.7em;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: #000;\n    position: absolute;\n    top: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n    width: 1.2em;\n    height: 1.2em;\n    transition: 0.5s;\n  }\n  .kol-checkbox--variant-switch .kol-input:checked::before {\n    transform: translateX(1.5em);\n  }\n  .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    transform: translate(0, -50%);\n    color: #000;\n    display: flex;\n    position: absolute;\n    top: 50%;\n    left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    width: 1.2em;\n    height: 1.2em;\n    align-items: center;\n    justify-content: center;\n    transition: 0.5s;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    transform: translate(1.5em, -50%);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n    transform: translate(0.75em, -50%);\n  }\n  /**\n   * Variant: Button\n   */\n  .kol-checkbox--variant-button {\n    min-width: var(--a11y-min-size);\n  }\n  .kol-checkbox--variant-button .kol-icon {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n}";
+const defaultStyleCss$w = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-field-control {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: left;\n    grid-template-areas: \"input label\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-areas: \"input label\" \"hint hint\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-areas: \"label input\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-areas: \"label input\" \"hint hint\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-field-control__label {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    flex-grow: 1;\n    align-items: center;\n    cursor: pointer;\n    grid-area: label;\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: \"*\"/\"\";\n  }\n  .kol-field-control--required .kol-tooltip .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-checkbox {\n    display: flex;\n    position: relative;\n    align-items: center;\n    cursor: pointer;\n  }\n  .kol-checkbox--disabled {\n    cursor: not-allowed;\n  }\n  .kol-checkbox .kol-input {\n    background-color: #fff;\n    border-style: solid;\n    margin: 0;\n    border-width: 2px;\n    appearance: none;\n    cursor: inherit;\n  }\n  .kol-checkbox .kol-input:before {\n    content: \"\";\n  }\n  /**\n   * Variant: Checkbox\n   */\n  .kol-checkbox--variant-default {\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    justify-content: center;\n  }\n  .kol-checkbox--variant-default .kol-icon {\n    display: flex;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n    pointer-events: none;\n  }\n  .kol-checkbox--variant-default .kol-icon::part(icon) {\n    display: none;\n  }\n  .kol-checkbox--variant-default .kol-input {\n    width: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon::part(icon), .kol-checkbox--variant-default.kol-checkbox--indeterminate .kol-icon::part(icon) {\n    display: block;\n  }\n  /**\n   * Variant: Switch\n   */\n  .kol-checkbox--variant-switch {\n    position: relative;\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: inline-block;\n    position: relative;\n    width: 3.2em;\n    min-width: 3.2em;\n    height: 1.7em;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: #000;\n    position: absolute;\n    top: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n    width: 1.2em;\n    height: 1.2em;\n    transition: 0.5s;\n  }\n  .kol-checkbox--variant-switch .kol-input:checked::before {\n    transform: translateX(1.5em);\n  }\n  .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    transform: translate(0, -50%);\n    color: #000;\n    display: flex;\n    position: absolute;\n    top: 50%;\n    left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    width: 1.2em;\n    height: 1.2em;\n    align-items: center;\n    justify-content: center;\n    transition: 0.5s;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    transform: translate(1.5em, -50%);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n    transform: translate(0.75em, -50%);\n  }\n  /**\n   * Variant: Button\n   */\n  .kol-checkbox--variant-button {\n    min-width: var(--a11y-min-size);\n  }\n  .kol-checkbox--variant-button .kol-icon {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n}";
 
 class KolInputCheckbox {
     getModelValue() {
@@ -21425,7 +21417,7 @@ class KolInputCheckbox {
         return this.state._icons.unchecked;
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'b75b6be38c5a5f5ece60043a310897279324cb79' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: 'e955b86b5a036152b65ed91ee9b57646b295921f' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '45ff982187208dfc210d296b7d655661533bd4ba' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9cb4ea4595cbb7011a66123fc074ab279b14059c' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '140717882ed72ed287a076e4bf19a498ffbf841a' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: 'ef6729b2d9c01fe6ff427a810ef23e47e1317da4' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -21502,9 +21494,6 @@ class KolInputCheckbox {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateIndeterminate(value) {
         this.controller.validateIndeterminate(value);
     }
@@ -21554,7 +21543,6 @@ class KolInputCheckbox {
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_indeterminate": ["validateIndeterminate"],
         "_label": ["validateLabel"],
         "_labelAlign": ["validateLabelAlign"],
@@ -21582,7 +21570,6 @@ class KolInputCheckbox {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_indeterminate": [1540],
             "_label": [1],
             "_labelAlign": [1, "_label-align"],
@@ -21659,11 +21646,10 @@ class KolInputColor {
         return Object.assign(Object.assign({}, this.getGenericInputProps()), { ref: this.catchRef, type: 'text', name: this.state._name ? `${this.state._name}-text` : undefined, list: this.hasSuggestions ? `${this.state._id}-list` : undefined, onInput: this.onTextInput });
     }
     getGenericInputProps() {
-        const _a = this.state, other = __rest(_a, ["_suggestions"]);
-        return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
+        return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, this.state), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd7f090923ef2b8df82a290ee833f2df41827e0a5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fb34b66b8a3e2b738126404f243f3e8d8f60518d', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '411e03c780c12cb63d2a8a845d98246dc6e1d988', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '36e1c82a36db19f6c9d099bfa59c9a700bc9e52a', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: 'f78dc8e52058280fd86bc860ce5e5d6156fd2dc2', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '3243bc02f1c0aea966b3db17645a5100498cb6f8' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'c96f156fd9edab34a4eafbea0c88c1ea60a7bffd', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: 'daf3ec033d4065bc5645a59b4ba966e06c8358b8', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: 'a53ae6de8dbc7d87779cd64a6e741bdd9a6f885d', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: '7db1b342cc845b7a58cbe83dcd77d0aff752a033', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -21740,9 +21726,6 @@ class KolInputColor {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -21791,7 +21774,6 @@ class KolInputColor {
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_msg": ["validateMsg"],
         "_name": ["validateName"],
@@ -21817,7 +21799,6 @@ class KolInputColor {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_msg": [1],
             "_name": [1],
@@ -22038,7 +22019,7 @@ class KolInputDate {
         return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '4b4891803eb722dba4574b64911897710577a804' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '7d0134d611937cb79f9364c0a89a54412cad0c37', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '5c1f13a3065f575154b09bb13c1e37b63b8c6158' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '0796ce3b22bda0f3416cb29d0a3170cca7c10fd1' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6702162055e1337792e61069d1eceff3e41ecfcd', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'f7e3fc1329d316eea6f07450236c2b06f5cbd5e0' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22127,9 +22108,6 @@ class KolInputDate {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -22201,7 +22179,6 @@ class KolInputDate {
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_max": ["validateMax"],
         "_min": ["validateMin"],
@@ -22233,7 +22210,6 @@ class KolInputDate {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_max": [1],
             "_min": [1],
@@ -22415,7 +22391,7 @@ class KolInputEmail {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '62800e02fc368b668cb22fe844d11d529d91a02b' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd6b8495cda66ccb5ee38dbbac28af5f97b671092', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'e65b54e8913250a1be9db36e6a074f8129b75e63' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a74d93b511883ac584088468690f5fedbd031608' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '34041ab24cb5e2e3b095e468df4bd8978909803e', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'f34730d39d2fe689e1f9d52576bd5954c538a461' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22484,9 +22460,6 @@ class KolInputEmail {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -22554,7 +22527,6 @@ class KolInputEmail {
         "_hasCounter": ["validateHasCounter"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_maxLength": ["validateMaxLength"],
         "_msg": ["validateMsg"],
@@ -22589,7 +22561,6 @@ class KolInputEmail {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_maxLength": [2, "_max-length"],
             "_msg": [1],
@@ -22677,7 +22648,7 @@ class KolInputFile {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'cfbf75242e0e46066d0026803ab13f2b604a3643' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b5117f2d31a17029aea0e6ed654399566e54f7fe', state: this.state }, hAsync("span", { key: '92a4956b1f0176bc33fa0d91842efd72692a5517', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: 'ae5d084b5b681215ab64aaa3db39ecc3f9294d3b' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '93046b2fa5632567376dfad3c133fb9888b7c52f', class: "kol-input-container__button", _label: this.translateDataBrowseText, _variant: "primary", _disabled: this._disabled }))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '63d343b402d7cfc146a811c39872e5fd587c7c64' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6e01023b3bce319f1a99ba446d17112a711bd190', state: this.state }, hAsync("span", { key: '1e9586a529e89fc73157c89e741330c27d1e5e1f', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: '6c35160f133bbdf31580d2a03201c093d1b2d3cf' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: 'ab5eda8e72de28216d586879b6f6a4bf6480b32e', class: "kol-input-container__button", _label: this.translateDataBrowseText, _variant: "primary", _disabled: this._disabled }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22768,9 +22739,6 @@ class KolInputFile {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -22821,7 +22789,6 @@ class KolInputFile {
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_msg": ["validateMsg"],
         "_multiple": ["validateMultiple"],
@@ -22847,7 +22814,6 @@ class KolInputFile {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_msg": [1],
             "_multiple": [4],
@@ -22996,7 +22962,7 @@ class KolInputNumber {
             }, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-minus", label: "" })));
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd4d4d45365ef9d07b466eba86ca2a5a20fe60fde' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '827646034f19aa8a350576b3e7baf83f8f96bd49', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: '59e265072509f0d824b2a690caee424d0f276f56' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '4ebc0414d323e7d17763b5cd53d039458cabc19d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'cba1c0f8a529eb7a38d423abb530fb5f9ffdad85', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'bc5b9f46f144e5094d891d4b1356b34f30471949' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23066,9 +23032,6 @@ class KolInputNumber {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -23138,7 +23101,6 @@ class KolInputNumber {
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_max": ["validateMax"],
         "_min": ["validateMin"],
@@ -23170,7 +23132,6 @@ class KolInputNumber {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_max": [8],
             "_min": [8],
@@ -23243,7 +23204,7 @@ class KolInputPassword {
             }, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '64186b80f89fdf9a213f6cf9fe72ba7a993c9a43' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '217482a4c81124771e2d80b75f90b320f9dda2d7', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: '581449cc01d0315077ff66172fd05809260a676d' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '57849dd5482b375f12f620e5b0fdc6dcc1856d79' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b24be6351a6e1efdee07100907a4d42a391e33e1', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'e02adcf7654df72cf2a4ce3972829057b7cc306b' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23324,9 +23285,6 @@ class KolInputPassword {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -23387,7 +23345,6 @@ class KolInputPassword {
         "_hasCounter": ["validateHasCounter"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_maxLength": ["validateMaxLength"],
         "_msg": ["validateMsg"],
@@ -23419,7 +23376,6 @@ class KolInputPassword {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_maxLength": [2, "_max-length"],
             "_msg": [1],
@@ -23486,7 +23442,7 @@ const RadioStateWrapper = (_a) => {
     return hAsync(RadioFc, Object.assign({ inputProps: getRadioProps(state, inputProps) }, other));
 };
 
-const defaultStyleCss$p = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: left;\n    grid-template-areas: \"input label\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-areas: \"input label\" \"hint hint\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-areas: \"label input\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-areas: \"label input\" \"hint hint\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-field-control__label {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    flex-grow: 1;\n    align-items: center;\n    cursor: pointer;\n    grid-area: label;\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__label-text::after {\n    content: \"\";\n  }\n  .kol-field-control__tooltip .span-label::after {\n    content: \"\";\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: \"*\";\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    content: \"*\";\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-form-field {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  .kol-form-field__label {\n    display: contents;\n  }\n  .kol-form-field__input {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-form-field__input--orientation-horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: flex-start;\n  }\n  .kol-form-field--disabled {\n    opacity: unset;\n  }\n  .kol-input-radio {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-input-radio__input {\n    border-style: solid;\n    border-radius: 100%;\n    display: flex;\n    width: var(--input-size);\n    min-width: var(--input-size);\n    height: var(--input-size);\n    min-height: var(--input-size);\n    margin: 0;\n    padding: 0;\n    border-width: var(--border-width);\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-input-radio__input:before {\n    border-radius: 100%;\n    width: calc(var(--input-size) / 2);\n    height: calc(var(--input-size) / 2);\n    margin: auto;\n    content: \"\";\n  }\n  .kol-input-radio__input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-input-radio__input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-input-radio__input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-input-radio--disabled {\n    cursor: not-allowed;\n  }\n}";
+const defaultStyleCss$p = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: left;\n    grid-template-areas: \"input label\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-areas: \"input label\" \"hint hint\";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-areas: \"label input\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-areas: \"label input\" \"hint hint\";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-field-control__label {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    flex-grow: 1;\n    align-items: center;\n    cursor: pointer;\n    grid-area: label;\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: \"*\"/\"\";\n  }\n  .kol-field-control--required .kol-tooltip .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-form-field {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  .kol-form-field__label {\n    display: contents;\n  }\n  .kol-form-field__input {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-form-field__input--orientation-horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: flex-start;\n  }\n  .kol-form-field--disabled {\n    opacity: unset;\n  }\n  .kol-input-radio {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-input-radio__input {\n    border-style: solid;\n    border-radius: 100%;\n    display: flex;\n    width: var(--input-size);\n    min-width: var(--input-size);\n    height: var(--input-size);\n    min-height: var(--input-size);\n    margin: 0;\n    padding: 0;\n    border-width: var(--border-width);\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-input-radio__input:before {\n    border-radius: 100%;\n    width: calc(var(--input-size) / 2);\n    height: calc(var(--input-size) / 2);\n    margin: auto;\n    content: \"\";\n  }\n  .kol-input-radio__input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-input-radio__input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-input-radio__input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-input-radio--disabled {\n    cursor: not-allowed;\n  }\n}";
 
 class KolInputRadio {
     async getValue() {
@@ -23531,7 +23487,7 @@ class KolInputRadio {
         };
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '801c017d83686f88baea74405e43bf8b6538321e' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'abaeb85e7c44c82c0c638cd8dae368454e9565e2' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
     }
     calculateDisabled(option) {
         return Boolean(this.state._disabled) || Boolean(option.disabled);
@@ -23646,9 +23602,6 @@ class KolInputRadio {
     validateHint(value) {
         this.controller.validateHint(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -23690,7 +23643,6 @@ class KolInputRadio {
         "_hideLabel": ["validateHideLabel"],
         "_hideMsg": ["validateHideMsg"],
         "_hint": ["validateHint"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_msg": ["validateMsg"],
         "_name": ["validateName"],
@@ -23713,7 +23665,6 @@ class KolInputRadio {
             "_hideMsg": [4, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
-            "_id": [1],
             "_label": [1],
             "_msg": [1],
             "_name": [1],
@@ -23817,8 +23768,7 @@ class KolInputRange {
         };
     }
     getGenericInputProps() {
-        const _a = this.state, other = __rest(_a, ["_suggestions"]);
-        return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onChange: this.onChange, onInput: this.onInput, onFocus: (event) => {
+        return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, this.state), { _suggestions: [] }) }, this.controller.onFacade), { onChange: this.onChange, onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -23847,7 +23797,7 @@ class KolInputRange {
         const inputsWrapperStyle = {
             '--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
         };
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'cc7929159d533db7b190d5e65050fb48aac99ed9' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f786cc8ee3eb115af7c22593c6d4ead1a48c09bd', state: this.state }, hAsync("div", { key: 'aa329e5285e0a9bb3b70453c5e49395b1ea669ca', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: '482690b02083ef04f56ad1608663d847f50e19ae', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: 'cc0077e8b35451502d83e43021ad48b9fb6b2ca5', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: 'c86709bb700c524b536ec80b78813bf1f5b4650c', id: this.state._id, suggestions: this.state._suggestions }))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '59b4f4f600171e6496415ce3dad4400607101f03' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '80aac0e1ac4dab7e88fe7df636c2ee19905d42de', state: this.state }, hAsync("div", { key: '31ff63b9171895a796deff2111fb740a5b6d47f3', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: 'b444084a05e3a905034a2f4da9b3c7ea48277792', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '80433f1e6d5b97cffed870e604df9fcefdb605f0', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: 'eadfc636106eb9aa438b5be71e072547a9054e78', id: this.state._id, suggestions: this.state._suggestions }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23929,9 +23879,6 @@ class KolInputRange {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -23987,7 +23934,6 @@ class KolInputRange {
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_max": ["validateMax"],
         "_min": ["validateMin"],
@@ -24015,7 +23961,6 @@ class KolInputRange {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_max": [8],
             "_min": [8],
@@ -24093,7 +24038,7 @@ class KolInputText {
         return Object.assign(Object.assign({ ref: this.catchRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '2187d319e64d34d12f947f9eba1fc4fc7c48caa6' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'dc0de2b6f377f0260e7a84d5e45e829edef1d3a9', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'fd5102bfae721b3efefdc94764843ac806494a64' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '83e4d9964aa560e3fbbaba462572fee6fa2eae87' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b3a68ff02445b1dc07c08ff4ef14e366ee6785a9', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'd1f60fdb8c4b47a9ead3415cbbf38fee000e27f3' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -24183,9 +24128,6 @@ class KolInputText {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -24256,7 +24198,6 @@ class KolInputText {
         "_hasCounter": ["validateHasCounter"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_maxLength": ["validateMaxLength"],
         "_msg": ["validateMsg"],
@@ -24291,7 +24232,6 @@ class KolInputText {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_maxLength": [2, "_max-length"],
             "_msg": [1],
@@ -24416,7 +24356,7 @@ class KolLink {
         return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
     }
     render() {
-        return (hAsync(KolLinkWcTag, { key: '5e0f4af8177fdafc0ba16a394edc95f5d6893700', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _inline: this._inline, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'c8d72e1786756ae591534397e749430e1c45d875', name: "expert", slot: "expert" })));
+        return (hAsync(KolLinkWcTag, { key: 'be163223b4f8210a4fbd74fb31a31886d88fe6bf', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _inline: this._inline, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, hAsync("slot", { key: 'c5330b14554582d446c547ec8c92371723428175', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: defaultStyleCss$l
@@ -24442,6 +24382,7 @@ class KolLink {
             "_shortKey": [1, "_short-key"],
             "_target": [1],
             "_tooltipAlign": [1, "_tooltip-align"],
+            "_variant": [1],
             "focus": [64]
         },
         "$listeners$": undefined,
@@ -24554,7 +24495,6 @@ class KolLinkWc {
         this._hideLabel = false;
         this._inline = true;
         this._tooltipAlign = 'right';
-        this._variant = 'normal';
         this.state = {
             _ariaCurrentValue: 'page',
             _href: '',
@@ -24570,17 +24510,17 @@ class KolLinkWc {
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
         const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
-        return (hAsync(Host, { key: '298b41cd96f03c37f968b5a44a996e820986e1a4' }, hAsync("a", Object.assign({ key: '3b61582b6b27bc01e723d9305fad4a6e74b82c6b', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
+        return (hAsync(Host, { key: '5bc1c1aed27fafcc28b8f6b1a117a123197c239b' }, hAsync("a", Object.assign({ key: '88edf125ebff91ac26d6a0a4dfd4cc65abcc53ac', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
                 ? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
                 : undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
                 'kol-link--disabled': this.state._disabled === true,
                 'kol-link--external-link': isExternal,
                 'kol-link--hide-label': this.state._hideLabel === true,
-                [`kol-link--${this.state._variant}`]: this.state._variant !== 'custom',
+                [`kol-link--${this.state._variant}`]: this.state._variant !== undefined,
                 'kol-link--inline': this.state._inline === true,
                 'kol-link--standalone': this.state._inline === false,
                 [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-            }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '7bc4ceb150254062c925b9fb3ace49e62019e8cc', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'b2a5ef85b0e0efaf0b7009a356861fd36597b281', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '48f4f73fc0843db70cbb9652b328932d60938d06', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'kolicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '56496c310828d905c04418d8e7c725f0e18b2be5', "aria-hidden": "true", class: "kol-link__tooltip", ref: (ref) => (this.tooltipRef = ref), hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
+            }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: 'a4605feb901b02c7d759047d6d3de3876f1e5eae', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '5452f09a70b82be732f45f4b716b8737fb2885af', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '5e6d38a786d76b1398263521db26aa2d71bfbeec', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'kolicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '6294da5cf66e516298cc40a663963bf28f88bec2', "aria-hidden": "true", class: "kol-link__tooltip", ref: (ref) => (this.tooltipRef = ref), hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -24648,8 +24588,8 @@ class KolLinkWc {
     validateTooltipAlign(value) {
         validateTooltipAlign(this, value);
     }
-    validateButtonVariant(value) {
-        validateButtonVariant(this, value);
+    validateVariantClassName(value) {
+        validateVariantClassName(this, value);
     }
     componentWillLoad() {
         this.validateAccessKey(this._accessKey);
@@ -24672,7 +24612,7 @@ class KolLinkWc {
         this.validateTabIndex(this._tabIndex);
         this.validateTarget(this._target);
         this.validateTooltipAlign(this._tooltipAlign);
-        this.validateButtonVariant(this._variant);
+        this.validateVariantClassName(this._variant);
         this.unsubscribeOnLocationChange = onLocationChange();
         validateAccessAndShortKey(this._accessKey, this._shortKey);
     }
@@ -24703,7 +24643,7 @@ class KolLinkWc {
         "_tabIndex": ["validateTabIndex"],
         "_target": ["validateTarget"],
         "_tooltipAlign": ["validateTooltipAlign"],
-        "_variant": ["validateButtonVariant"]
+        "_variant": ["validateVariantClassName"]
     }; }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -24861,7 +24801,8 @@ class KolNav {
     }
     entry(collapsible, hasChildren, entry, expanded, ariaID) {
         var _a;
-        const icons = this.buildIconObject(collapsible && hasChildren, expanded, (_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString());
+        const leftIcon = typeof entry._icons === 'string' ? entry._icons : typeof ((_a = entry._icons) === null || _a === void 0 ? void 0 : _a.left) === 'string' ? entry._icons.left : undefined;
+        const icons = this.buildIconObject(collapsible && hasChildren, expanded, leftIcon);
         return (hAsync("div", { class: "kol-nav__entry-wrapper" }, entryIsLink(entry) ? (hAsync(KolLinkWcTag, Object.assign({ class: clsx('kol-nav__entry kol-nav__entry--link', {
                 'kol-nav__entry--collapsible': collapsible,
             }) }, entry, { _hideLabel: this.state._hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined }))) : (hAsync(KolButtonWcTag, { class: clsx('kol-nav__entry kol-nav__entry--button', {
@@ -24909,9 +24850,9 @@ class KolNav {
     }
     render() {
         const collapsible = this.state._collapsible === true;
-        return (hAsync("div", { key: '111be4e9864592328f5b08a46d913475f671b825', class: clsx('kol-nav', {
+        return (hAsync("div", { key: 'c852575ff15108d3cd685ce03da6e0184c8eb22d', class: clsx('kol-nav', {
                 'kol-nav--is-compact': this.state._hideLabel,
-            }) }, hAsync("nav", { key: '96316e664f32288b8182fdf02bc86471202cd88d', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '11c51057c5d8e4d0533552976bc275ce7dd41b60', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (hAsync("div", { key: 'ffb0c7f8d2a619b9f8d5d689589ad09c70457a3a', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '730786a202e2801eda69f56ec99a4d9a96d99242', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
+            }) }, hAsync("nav", { key: '1666047385272e4d0059a615a4d6a2fbd5554936', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '48c577561e0853e45a16051586c4e61af0b0df40', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (hAsync("div", { key: 'ca5d9cd6fe73540c3f340367c917e4a7b050c0d9', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: 'f071101090334418db846ad71069f4246ac294fb', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
                 onClick: () => {
                     this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
                 },
@@ -25051,7 +24992,6 @@ const NUMBER_FORMATTER = new Intl.NumberFormat(userLanguage, {
 class KolPaginationWc {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.nonce = nonce();
         this.translatePageFirst = translate('kol-page-first');
         this.translatePageBack = translate('kol-page-back');
         this.translatePageNext = translate('kol-page-next');
@@ -25226,7 +25166,7 @@ class KolPaginationWc {
                 end: this.getPageEnd(),
                 total: this.state._max.toString(),
             },
-        })), hAsync("nav", { class: "kol-pagination__navigation", "aria-label": this.state._label }, hAsync("ul", { class: "kol-pagination__navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: this.translatePageFirst, _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: this.translatePageBack, _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: this.translatePageNext, _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: this.translatePageLast, _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, { class: "kol-pagination__page-size-select", _id: `pagination-size-${this.nonce}`, _label: this.translateEntriesPerSite, _options: this.state._pageSizeOptions, _on: {
+        })), hAsync("nav", { class: "kol-pagination__navigation", "aria-label": this.state._label }, hAsync("ul", { class: "kol-pagination__navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: this.translatePageFirst, _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: this.translatePageBack, _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: this.translatePageNext, _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: this.translatePageLast, _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, { class: "kol-pagination__page-size-select", _label: this.translateEntriesPerSite, _options: this.state._pageSizeOptions, _on: {
                 onChange: this.onChangePageSize,
             }, _value: this.state._pageSize })))));
     }
@@ -27288,7 +27228,7 @@ let KolPopoverButton$1 = class KolPopoverButton {
         return Promise.resolve((_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus());
     }
     render() {
-        return (hAsync(KolPopoverButtonWcTag, { key: '8f5494e308245dc5cf00f3c44e76954dc1ccb8ba', ref: this.catchRef, _accessKey: this._accessKey, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _popoverAlign: this._popoverAlign, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '945bd61cfb5ba388bf76a9aaa44c4640cac733c6', name: "expert", slot: "expert" }), hAsync("slot", { key: '349bf90ff34df330916d1aad0a40c79cce1c32bc' })));
+        return (hAsync(KolPopoverButtonWcTag, { key: '0ac44ca7c1b6c320a470df009ae392ee8c7974ae', ref: this.catchRef, _accessKey: this._accessKey, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _popoverAlign: this._popoverAlign, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: 'db53f74d9def93f7a4f065052e6da644f8761559', name: "expert", slot: "expert" }), hAsync("slot", { key: 'f2a2a0ee7fd8765b8b51fc3b3ce4904a0fe474ee' })));
     }
     static get style() { return {
         default: defaultStyleCss$g
@@ -27304,7 +27244,6 @@ let KolPopoverButton$1 = class KolPopoverButton {
             "_hideLabel": [4, "_hide-label"],
             "_icons": [1],
             "_inline": [4],
-            "_id": [1],
             "_label": [1],
             "_name": [1],
             "_popoverAlign": [1, "_popover-align"],
@@ -27411,11 +27350,11 @@ class KolPopoverButton {
         (_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
     }
     render() {
-        return (hAsync("div", { key: '461c28d3b262ad11fbad960bfbad5f2ec01ac4df', class: clsx('kol-popover-button', {
+        return (hAsync("div", { key: '20a956409478664ea60fe7d2ea494f6b8ccd5759', class: clsx('kol-popover-button', {
                 'kol-popover-button--open': this.popoverOpen,
                 'kol-popover-button--inline': this.state._inline === true,
                 'kol-popover-button--standalone': this.state._inline === false,
-            }) }, hAsync(KolButtonWcTag, { key: '8668f8c9574df5ab1a4a56107dac77f6181a9f76', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element) }, hAsync("slot", { key: 'd6d0dee6d42dfe63e377083b2b948478d5ab850f', name: "expert", slot: "expert" })), hAsync("div", { key: '44304c30e01e933fdcc68df49ac967eccba158d5', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '0b319401e4a2254a3aa8eb053d3c1904ce9fdc3b' }))));
+            }) }, hAsync(KolButtonWcTag, { key: '9d5b8055b14385030279aa062065bfb3b9d74b5d', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element) }, hAsync("slot", { key: '000363d7f06a71ffe5b3287fb90e44d6d51f7e81', name: "expert", slot: "expert" })), hAsync("div", { key: 'c809a2731b0815d126884d6dffa3732d7731b92c', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '7cd06d9b8d84b0703888f54c8492153a84d643b3' }))));
     }
     validateInline(value) {
         validateInline(this, value, {
@@ -27664,7 +27603,7 @@ class KolSelect {
         return Promise.resolve((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.focus());
     }
     render() {
-        return (hAsync(Host, { key: 'a926c7058a8e4d63d2eac02fa4cfb0cc72613117', class: "kol-select" }, hAsync(KolSelectWcTag, { key: 'ecd27ebee8519a944361c7a0184f413f99d3c3ad', ref: this.catchRef, _accessKey: this._accessKey, _disabled: this._disabled, _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: 'eb93d88c9ed9dc97d1d14caac719a4760d7a6571', name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: 'ea64045ea2c60e04aac8fe61dba0eba7746c93f0', class: "kol-select" }, hAsync(KolSelectWcTag, { key: '4f9581cd0c2210eebc8aa35484c51212732458c7', ref: this.catchRef, _accessKey: this._accessKey, _disabled: this._disabled, _hideLabel: this._hideLabel, _hint: this._hint, _icons: this._icons, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value }, hAsync("slot", { key: '6586192c0532339bfb126915db7ef694dff59e2b', name: "expert", slot: "expert" }))));
     }
     static get style() { return {
         default: defaultStyleCss$d
@@ -27679,7 +27618,6 @@ class KolSelect {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_msg": [1],
             "_multiple": [4],
@@ -27923,11 +27861,11 @@ class KolSelectWc {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '0c18fd5bdce033342bb1588f4b71e11751873208' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fe275b9f6d50e23bcbb62dccd4f108c0a15ce6f6', state: this.state }, hAsync("form", { key: 'd3e1661c2d0076a33d5ee6ad5e49607c1c954f55', onSubmit: (event) => {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '783ae8765a903cd7b733dd3b2f616b5a84ce7378' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '9bf4d862876bbf18b40921bd715e025ff1323c3f', state: this.state }, hAsync("form", { key: '06750f56e586430344314031d3a8b25f8669c7ba', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host});
-            } }, hAsync("input", { key: '9add565ab20beee1e8af829754fcb826718968ac', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '8bc60a60e63113b369ba1bc4c473f1b31ec0475f' }, this.getSelectProps()))))));
+            } }, hAsync("input", { key: '761992a87c4638c2a4b7282154cac30c66492331', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '36cbcbbcaef6b39a0a36c42bba3270ad873a244d' }, this.getSelectProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -27975,9 +27913,6 @@ class KolSelectWc {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -28054,7 +27989,6 @@ class KolSelectWc {
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_msg": ["validateMsg"],
         "_multiple": ["validateMultiple"],
@@ -28079,7 +28013,6 @@ class KolSelectWc {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_msg": [1],
             "_multiple": [4],
@@ -28173,11 +28106,11 @@ class KolSingleSelect {
         if (matchingOption) {
             this.selectOption(matchingOption);
         }
-        else if (!this._isOpen) {
+        else if (!this._isOpen && this._value) {
             this._inputValue = (_c = (_b = this.state._options) === null || _b === void 0 ? void 0 : _b.find((option) => option.value === this._value)) === null || _c === void 0 ? void 0 : _c.label;
             this._filteredOptions = [...this.state._options];
         }
-        if (event instanceof FocusEvent && event.view === window) {
+        if (event instanceof FocusEvent && event.view === window && !this.isClearing) {
             this._isOpen = false;
         }
     }
@@ -28197,27 +28130,26 @@ class KolSingleSelect {
         return event;
     }
     clearSelection() {
-        const isDisabled = this.state._disabled === true;
-        if (isDisabled) {
+        this.isClearing = true;
+        if (this.state._disabled) {
             return;
         }
-        else {
-            const emptyValue = null;
-            this._focusedOptionIndex = -1;
-            this._value = emptyValue;
-            this._inputValue = '';
-            this._filteredOptions = [...this.state._options];
-            const inputEvent = this.createEventWithTarget('input', {
-                name: this.state._name,
-                value: emptyValue,
-            });
-            const changeEvent = this.createEventWithTarget('change', {
-                name: this.state._name,
-                value: emptyValue,
-            });
-            this.controller.onFacade.onInput(inputEvent, true, { value: emptyValue });
-            this.controller.onFacade.onChange(changeEvent, { value: emptyValue });
-        }
+        const emptyValue = null;
+        this._focusedOptionIndex = -1;
+        this._value = emptyValue;
+        this._inputValue = '';
+        this._filteredOptions = [...this.state._options];
+        const inputEvent = this.createEventWithTarget('input', {
+            name: this.state._name,
+            value: emptyValue,
+        });
+        const changeEvent = this.createEventWithTarget('change', {
+            name: this.state._name,
+            value: emptyValue,
+        });
+        this.controller.onFacade.onInput(inputEvent, true, { value: emptyValue });
+        this.controller.onFacade.onChange(changeEvent, { value: emptyValue });
+        this.isClearing = false;
     }
     selectOption(option) {
         var _a, _b;
@@ -28338,7 +28270,7 @@ class KolSingleSelect {
     render() {
         var _a;
         const isDisabled = this.state._disabled === true;
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '73ea1344c5d4b02140e5ab603e3e02b9ab6f4127' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '1db8b71a813e584b3eba6fff6bef21019da4aad0', state: this.state }, hAsync("div", { key: 'fba09b0a58a5dbc9204eee8611161a605a7656c5', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'df180cf73b7a4bf5514ba373c11257ac2106954b' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: 'a380a14ad068a60f5f3822d3182cd20cb8e21204', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '010b2e3d283d023a03f02b87c21d4951f6eac70d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '50cbe61571cc331d748c6a9c5a9f91d0633e2b07', state: this.state }, hAsync("div", { key: 'c769c010215b569c4f33ec886ac822aafba13749', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '4a5a9e6221af7252ff307c3592c6e531223fd2b8' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '395e01a4d1ea4355c0db7feeaa10e0421d513e54', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
                 'kol-single-select__delete--disabled': isDisabled,
             }), _on: {
                 onClick: () => {
@@ -28346,9 +28278,9 @@ class KolSingleSelect {
                     this.clearSelection();
                     (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
                 },
-            } })), hAsync(KolIconTag, { key: '3dc2a1f77fcc30dd41702921331cfd4296f69c71', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), hAsync(KolIconTag, { key: '25991f7a780b9e3a987606a8bed5c052f156fcdd', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '0c4db60bb72ed3325453b7b1626c0bde8b0e3cdc', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
+            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: 'd3f0d07878c90554c452c1de165c9c441360d5e0', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
@@ -28483,6 +28415,7 @@ class KolSingleSelect {
         this.refOptions = [];
         this.translateDeleteSelection = translate('kol-delete-selection');
         this.translateNoResultsMessage = translate('kol-no-results-message');
+        this.isClearing = false;
         this.catchRef = (ref) => {
             this.refInput = ref;
         };
@@ -28554,9 +28487,6 @@ class KolSingleSelect {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -28638,7 +28568,6 @@ class KolSingleSelect {
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_msg": ["validateMsg"],
         "_name": ["validateName"],
@@ -28666,7 +28595,6 @@ class KolSingleSelect {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_msg": [1],
             "_name": [1],
@@ -28869,10 +28797,10 @@ class KolSplitButton {
     }
     render() {
         const i18nDropdownLabel = 'kol-split-button-dropdown-label';
-        return (hAsync("div", { key: '5a243be782c854c759a1e649624435137918b698', class: "kol-split-button" }, hAsync("div", { key: '98eae8fe12b95afa454c6b788020f7a56d592425', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '95f25dfbd1205a7aed9a47871840627a9350bd0c', class: clsx('kol-split-button__button', {
+        return (hAsync("div", { key: '5a243be782c854c759a1e649624435137918b698', class: "kol-split-button" }, hAsync("div", { key: '98eae8fe12b95afa454c6b788020f7a56d592425', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: 'af489d5bc7083cd84e4b03e2d04477af977ef083', class: clsx('kol-split-button__button', {
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: 'ca4441f753f5068f6dc766e7c4d4ae192a67e523', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: 'e6607ad89e417102a9e9ad30ca678dc164b0b3d8', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '7641839a0d14c003f4f5134cd6b896d428ffb415', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'd5bca31e7c3ba5159565c9b59bd67efa0f136efd' }))));
+            }), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '598eef5345a99a1dc51b9b33f609d6a12247eb3f', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '2ae8896dee5a8c4964c2212529b278eed1ff2b7b', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: 'fdd23fba124a2206a6d481fe028348fce9f70967', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '8aad3a849b3887bac58ed4f13d01d7563d23ef53' }))));
     }
     async closePopup() {
         this.handleOnClose();
@@ -28894,7 +28822,6 @@ class KolSplitButton {
             "_disabled": [4],
             "_hideLabel": [4, "_hide-label"],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_name": [1],
             "_on": [16],
@@ -29403,7 +29330,7 @@ class KolTableStateful {
             horizontal: (_d = (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _d !== void 0 ? _d : [],
             vertical: (_f = (_e = this.state._headers.vertical) === null || _e === void 0 ? void 0 : _e.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _f !== void 0 ? _f : [],
         };
-        return (hAsync(Host, { key: '9f97cfcace39cc6c8f925c456a022fbfe6ff6a4f', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'bdda6d78fc226f5061ee6a9a8e7766a1b8bdeefc', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
+        return (hAsync(Host, { key: '596ff18dd22ae8a08e83dbaf36db142fe58d971e', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'de0e3900a63bb3c03bce10bb7df6c1cfad6e33cf', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -29675,7 +29602,12 @@ class KolTableStateless {
         let max = 0;
         horizontalHeaders.forEach((row) => {
             let count = 0;
-            Array.isArray(row) && row.forEach((col) => { var _a; return (count += (_a = col.colSpan) !== null && _a !== void 0 ? _a : 1); });
+            if (Array.isArray(row)) {
+                row.forEach((col) => {
+                    var _a;
+                    count += (_a = col.colSpan) !== null && _a !== void 0 ? _a : 1;
+                });
+            }
             if (max < count) {
                 max = count;
             }
@@ -29690,7 +29622,12 @@ class KolTableStateless {
         let max = 0;
         verticalHeaders.forEach((col) => {
             let count = 0;
-            Array.isArray(col) && col.forEach((row) => { var _a; return (count += (_a = row.rowSpan) !== null && _a !== void 0 ? _a : 1); });
+            if (Array.isArray(col)) {
+                col.forEach((row) => {
+                    var _a;
+                    count += (_a = row.rowSpan) !== null && _a !== void 0 ? _a : 1;
+                });
+            }
             if (max < count) {
                 max = count;
             }
@@ -30083,12 +30020,12 @@ class KolTableStateless {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
         this.checkboxRefs = [];
         const horizontalHeaders = this.state._headerCells.horizontal;
-        return (hAsync("div", { key: 'cab30ac867bb4db9b327a55a32502e8015dab18e', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '251de21d5fd51742d5b5dad0079934c2b331a15a', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: '564cb70c02254a73cbbc135a5028fe43c89cc010', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '09c37ff906628759bbee7435d00294af3aba2f49', class: "kol-table__table", style: {
+        return (hAsync("div", { key: 'c0d880b5feeae9b29c7defba7304530deb1f1064', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: 'b7fc12aeb7724aa55f956836f440dbeb44f98ca9', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: 'a6ca943792cbc34770516274022f52c5fc06719f', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '657af42e176079dd1ab4c030f16cc08d534172a9', class: "kol-table__table", style: {
                 minWidth: this.getTableMinWidth(),
-            } }, hAsync("caption", { key: '0b9bc17970b05bf4505662215356e3ef5e3585aa', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '28b137cc33f935696ed984cd01cceab2b4fff3da', class: "kol-table__head" }, [
+            } }, hAsync("caption", { key: 'd55d0041c7ed04e26ccf55203f0f2a42f1652014', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '6c50df582996be2145568ea275007a3e87ba815e', class: "kol-table__head" }, [
             horizontalHeaders.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
             this.renderSpacer('head', horizontalHeaders),
-        ])), hAsync("tbody", { key: '338ffd0ad158f70d1bd1236c86222b8860c321e1', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), hAsync("tbody", { key: '482757151e3bdc7f026a2e924c0c9e1d6ea6714a', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -30554,7 +30491,7 @@ class KolTextarea {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ba389a3e0bd692d39ee646d750591f52c6d04868' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '70769a4d59102818d1297b94bca7be878d756930', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'de2e78d5dd2410b1e9244d879fc55e3c58030972' }, this.getTextAreaProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '40cbd686b73f49706d5e6a56f21ca564cd945056' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd8a3af9b6772dd62e16f30c3f818d45ccdd50d96', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '58e4c06295ec23090d1bc2201ba8c906e317ed0b' }, this.getTextAreaProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -30622,9 +30559,6 @@ class KolTextarea {
     validateIcons(value) {
         this.controller.validateIcons(value);
     }
-    validateId(value) {
-        this.controller.validateId(value);
-    }
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
@@ -30701,7 +30635,6 @@ class KolTextarea {
         "_hasCounter": ["validateHasCounter"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
-        "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_maxLength": ["validateMaxLength"],
         "_maxLengthBehavior": ["validateMaxLengthBehavior"],
@@ -30733,7 +30666,6 @@ class KolTextarea {
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
-            "_id": [1],
             "_label": [1],
             "_maxLength": [2, "_max-length"],
             "_hasCounter": [4, "_has-counter"],
@@ -31052,6 +30984,7 @@ class KolTooltipWc {
         this._align = 'top';
         this.state = {
             _align: 'top',
+            _id: `id-${nonce()}`,
             _label: '',
         };
         this.showOrHideTooltip = () => {
@@ -31122,7 +31055,7 @@ class KolTooltipWc {
         this.showOrHideTooltip();
     }
     render() {
-        return (hAsync(Host, { key: '3ab8a61452a2f1d20be4ecf83a9907e7bd151f6b', class: "kol-tooltip" }, hAsync("div", { key: 'fcb1857d1afd79b764a7d19820703905a3ef24b1', class: "kol-tooltip__floating", hidden: this.state._label.length === 0, ref: this.catchTooltipElement }, hAsync("div", { key: '43a21c5e5b13a0d2134699707d1c0960492343b4', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '9a49f246f58819e2fd1afd8db1d66b4c0dd434f9', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label }))));
+        return (hAsync(Host, { key: '0a9833a1f8db6b94855d8edc6266523716d55da8', class: "kol-tooltip" }, hAsync("div", { key: '647b339c2ada2bcad8181c578f6795d884535b8c', class: "kol-tooltip__floating", hidden: this.state._label.length === 0, ref: this.catchTooltipElement }, hAsync("div", { key: '9d4bd4ae5bd2c90d227ebb0c76c585b4e28c4432', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '1e4917d5c85e607b6eda34978285582d2ea01f27', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label }))));
     }
     validateBadgeText(value) {
         validateBadgeText(this, value);
@@ -31491,7 +31424,9 @@ class KolTreeWc {
                 }
                 else {
                     const parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);
-                    parentIndex !== -1 && (await ((_e = openItems[parentIndex]) === null || _e === void 0 ? void 0 : _e.focus()));
+                    if (parentIndex !== -1) {
+                        await ((_e = openItems[parentIndex]) === null || _e === void 0 ? void 0 : _e.focus());
+                    }
                 }
                 break;
             }