@public-ui/hydrate 2.2.13-rc.0 → 2.2.13-rc.2

package/dist/index.js

@@ -3834,29 +3834,13 @@ const validateAccessKey = (component, value) => {
     watchString(component, '_accessKey', value);
 };
 
-const validateAccordionCallbacks = (component, value) => {
-    watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['AccordionCallbacksPropType {Events.onClick}']), value);
-};
-
-const validateActive = (component, value, options) => {
-    watchBoolean(component, '_active', value, options);
-};
-
-const validateAdjustHeight = (component, value) => {
-    watchBoolean(component, '_adjustHeight', value);
-};
-
-const validateAlert = (component, value) => {
-    watchBoolean(component, '_alert', value);
-};
-
 const validateAlignment = (component, propName, value) => {
     watchValidator(component, propName, (value) => typeof value === 'string' && alignPropTypeOptions.includes(value), new Set(alignPropTypeOptions), value, {
         defaultValue: 'top',
     });
 };
 
-const isObject$1 = (value) => typeof value === 'object' && value !== null;
+const isObject$2 = (value) => typeof value === 'object' && value !== null;
 const isString$2 = (value, minLength = 0) => typeof value === 'string' && value.length >= minLength;
 const isStyle = (style) => {
     if (typeof style === 'object' && style !== null) {
@@ -3908,6 +3892,22 @@ const validateTabIndex = (component, value) => {
     watchNumber(component, '_tabIndex', value, options);
 };
 
+const validateAccordionCallbacks = (component, value) => {
+    watchValidator(component, `_on`, (value) => isObject$2(value), new Set(['AccordionCallbacksPropType {Events.onClick}']), value);
+};
+
+const validateActive = (component, value, options) => {
+    watchBoolean(component, '_active', value, options);
+};
+
+const validateAdjustHeight = (component, value) => {
+    watchBoolean(component, '_adjustHeight', value);
+};
+
+const validateAlert = (component, value) => {
+    watchBoolean(component, '_alert', value);
+};
+
 const horizontalAlignOptions = ['left', 'right'];
 const verticalAlignOptions = ['top', 'bottom'];
 const alignPropTypeOptions = [...horizontalAlignOptions, ...verticalAlignOptions];
@@ -3954,7 +3954,7 @@ const validateBadgeText = (component, value) => {
 };
 
 const validateButtonCallbacks = (component, value) => {
-    watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']), value);
+    watchValidator(component, `_on`, (value) => isObject$2(value), new Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']), value);
 };
 
 const buttonTypePropTypeOptions = ['button', 'reset', 'submit'];
@@ -4082,7 +4082,7 @@ const validateCustomClass = (component, value) => {
 };
 
 const validateDetailsCallbacks = (component, value) => {
-    watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['DetailsCallbacksPropType {Events.onToggle}']), value);
+    watchValidator(component, `_on`, (value) => isObject$2(value), new Set(['DetailsCallbacksPropType {Events.onToggle}']), value);
 };
 
 const validateDisabled = (component, value) => {
@@ -4139,7 +4139,7 @@ const validateHref = (component, value, options = {}) => {
 };
 
 const mapCustomIcon = (state, alignment, icon) => {
-    if (isObject$1(icon)) {
+    if (isObject$2(icon)) {
         state[alignment] = icon;
     }
     else if (isString$2(icon, 1)) {
@@ -4157,11 +4157,12 @@ const mapIconProp2State = (icon) => {
             },
         };
     }
-    else if (typeof icon === 'object' && icon !== null) {
-        mapCustomIcon(state, 'top', icon.top);
-        mapCustomIcon(state, 'right', icon.right);
-        mapCustomIcon(state, 'bottom', icon.bottom);
-        mapCustomIcon(state, 'left', icon.left);
+    else if (isObject$2(icon)) {
+        const icons = icon;
+        mapCustomIcon(state, 'top', icons.top);
+        mapCustomIcon(state, 'right', icons.right);
+        mapCustomIcon(state, 'bottom', icons.bottom);
+        mapCustomIcon(state, 'left', icons.left);
     }
     return state;
 };
@@ -4172,8 +4173,7 @@ const beforePatchIcon = (component) => {
         (_c = component.nextState) === null || _c === void 0 ? void 0 : _c.set('_icons', mapIconProp2State(icons));
     }
 };
-const isIcon = (value) => typeof value === 'object' &&
-    value !== null &&
+const isIcon = (value) => isObject$2(value) &&
     (typeof value.style === 'undefined' || isStyle(value.style)) &&
     (typeof value.label === 'undefined' || isString$2(value.label)) &&
     isString$2(value.icon, 1);
@@ -4186,12 +4186,11 @@ const validateIcons = (component, value, options = {}) => {
         catch (e) {
         }
         watchValidator(component, '_icons', (value) => {
-            const valueIsEmptyObject = typeof value === 'object' && value !== null && Object.keys(value).length === 0;
+            const valueIsEmptyObject = isObject$2(value) && Object.keys(value).length === 0;
             return (value === null ||
                 valueIsEmptyObject ||
                 isString$2(value, 1) ||
-                (typeof value === 'object' &&
-                    value !== null &&
+                (isObject$2(value) &&
                     (isString$2(value.left, 1) ||
                         isIcon(value.left) ||
                         isString$2(value.right, 1) ||
@@ -4293,7 +4292,7 @@ const validateMsg = (component, value) => {
         }
         catch (e) {
         }
-        watchValidator(component, `_msg`, (value) => isObject$1(value) && typeof (value === null || value === void 0 ? void 0 : value._description) === 'string', new Set(['MsgPropType']), value, {
+        watchValidator(component, `_msg`, (value) => isObject$2(value) && typeof (value === null || value === void 0 ? void 0 : value._description) === 'string', new Set(['MsgPropType']), value, {
             defaultValue: {
                 _description: '',
                 _type: 'error',
@@ -4315,7 +4314,7 @@ const validateOpen = (component, value, options) => {
 };
 
 const validateOptions = (component, value, options = {}) => {
-    watchJsonArrayString(component, '_options', (item) => typeof item === 'object' && item !== null && typeof item.label === 'string' && item.label.length > 0, value, undefined, options);
+    watchJsonArrayString(component, '_options', (item) => isObject$2(item) && typeof item.label === 'string' && item.label.length > 0, value, undefined, options);
 };
 const validateOptionsWithOptgroup = (component, value, options = {}) => {
     watchJsonArrayString(component, '_options', validateInputSelectOptions, value, undefined, options);
@@ -4333,7 +4332,7 @@ const validatePopoverAlign = (component, value) => {
 };
 
 const validatePopoverCallbacks = (component, value) => {
-    watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);
+    watchValidator(component, `_on`, (value) => isObject$2(value), new Set(['PopoverCallbacksPropType {Events.onClose}']), value);
 };
 
 const validateReadOnly = (component, value) => {
@@ -4380,10 +4379,10 @@ const validateTabBehavior = (component, value) => {
 };
 
 const validateTableCallbacks = (component, value) => {
-    watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['TableCallbacksPropType {Events.onSort, Events.onSelectionChange}']), value);
+    watchValidator(component, `_on`, (value) => isObject$2(value), new Set(['TableCallbacksPropType {Events.onSort, Events.onSelectionChange}']), value);
 };
 const validateTableStatefulCallbacks = (component, value) => {
-    watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['TableStatefulCallbacksPropType {Events.onSelectionChange}']), value);
+    watchValidator(component, `_on`, (value) => isObject$2(value), new Set(['TableStatefulCallbacksPropType {Events.onSelectionChange}']), value);
 };
 
 const validateTableData = (component, value, setStateHooks) => {
@@ -4397,7 +4396,7 @@ const validateTableData = (component, value, setStateHooks) => {
             }
             catch (e) {
             }
-            if (Array.isArray(value) && value.every((data) => typeof data === 'object' && data !== null)) {
+            if (Array.isArray(value) && value.every((data) => isObject$2(data))) {
                 setState(component, '_data', value, setStateHooks);
             }
         });
@@ -4415,7 +4414,7 @@ const validateTableDataFoot = (component, value, setStateHooks) => {
             }
             catch (e) {
             }
-            if (Array.isArray(value) && value.every((data) => typeof data === 'object' && data !== null)) {
+            if (Array.isArray(value) && value.every((data) => isObject$2(data))) {
                 setState(component, '_dataFoot', value, setStateHooks);
             }
         });
@@ -4450,7 +4449,7 @@ const validateTableSelection = (component, value) => {
         }
     };
     const validateObject = (value) => {
-        return value && isObject$1(value) && typeof value.label === 'function' && (!value.selectedKeys || Array.isArray(value.selectedKeys));
+        return value && isObject$2(value) && typeof value.label === 'function' && (!value.selectedKeys || Array.isArray(value.selectedKeys));
     };
     const objectValue = typeof value === 'string' ? parseSerializedValue() : value;
     if (validateObject(objectValue)) {
@@ -4469,7 +4468,7 @@ const validateToolbarItems = (component, value) => {
             }
             catch (e) {
             }
-            if (Array.isArray(value) && value.every((items) => typeof items === 'object' && items !== null)) {
+            if (Array.isArray(value) && value.every((items) => isObject$2(items))) {
                 setState(component, '_items', value);
             }
         });
@@ -6510,13 +6509,13 @@ class KolCombobox {
     render() {
         const hasExpertSlot = showExpertSlot(this.state._label);
         const { ariaDescribedBy } = getRenderStates(this.state);
-        return (hAsync(Host, { key: 'cf7083a921cfc2e9d888e92475ec43b5ad0d976f', class: "kol-combobox" }, hAsync("div", { key: '917e314a61bedb601cf02437f7041c7fcbb54995', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '2ddc4e2327d66e32290ea22a8c051eedfdf543f3', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'b598b5ed2c21fd212b231c79bf9ee2cff24b96cd', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a2ac90571622a9c093018ff83be3469f26d66592', slot: "input" }, hAsync("div", { key: '5eb0f614f2b433081181e29917398eeb6c358e3a', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'ba40565bac97c517259541d1345c9a775d25b01a', ref: this.catchRef, class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
+        return (hAsync(Host, { key: 'cf7083a921cfc2e9d888e92475ec43b5ad0d976f', class: "kol-combobox" }, hAsync("div", { key: '917e314a61bedb601cf02437f7041c7fcbb54995', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '2ddc4e2327d66e32290ea22a8c051eedfdf543f3', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'b598b5ed2c21fd212b231c79bf9ee2cff24b96cd', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a2ac90571622a9c093018ff83be3469f26d66592', slot: "input" }, hAsync("div", { key: '5eb0f614f2b433081181e29917398eeb6c358e3a', class: "combobox__group" }, hAsync("input", Object.assign({ key: '6d6d57e07299e5fbd4b64135ee1364087d1112e3', ref: this.catchRef, class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            }, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '0f172cc82a5ac89d5932d18bc4e8d0e8111128fd', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '061a7bf97a0d947d9c736e55efc0e13eb697da21', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'b9d2d7af576c6fbd2b7e683c2cfcce876a8b7e9b', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
+            }, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '7377de41e82a84d309e09cf962bc7a35b8edb7c9', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '1b3210da573ae33e86e91c9d18c56c1f3b1ad255', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '9f56e7ced7caadb47658754f04fed6779fad0fe6', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
                     if (el)
@@ -7138,11 +7137,11 @@ class KolForm {
         return (hAsync(KolAlertFc, { ref: this.setBlockElement, type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: index === 0 ? this.setFirstLinkElement : undefined }))))))));
     }
     renderFormElement() {
-        return (hAsync("form", { method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync("div", { class: "mandatory-fields-hint" }, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync("div", { class: "mandatory-fields-hint" }, this.state._requiredText))) : null, hAsync("slot", null)));
+        return (hAsync("form", { autoComplete: "off", method: "post", onSubmit: this.onSubmit, onReset: this.onReset, noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync("div", { class: "mandatory-fields-hint" }, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync("div", { class: "mandatory-fields-hint" }, this.state._requiredText))) : null, hAsync("slot", null)));
     }
     render() {
         const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
-        return (hAsync(Host, { key: '20703d687770ba2cf51eadd6a7a91de1c4dd7fa6', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
+        return (hAsync(Host, { key: 'f8faff3a737be164f14bc26a0efbf081399c73f0', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
     }
     scrollToErrorList() {
         var _a;
@@ -7204,7 +7203,7 @@ class KolForm {
     }; }
 }
 
-const defaultStyleCss$C = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\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     * 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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 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}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}";
+const defaultStyleCss$C = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\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     * 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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 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}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n.secondary-headline {\n  margin: 0;\n}";
 var KolHeadingDefaultStyle0 = defaultStyleCss$C;
 
 class KolHeading {
@@ -7248,24 +7247,6 @@ class KolHeadingWc {
                     [`headline-${variant}`]: true,
                 } }, headline, hAsync("slot", { name: "expert" })));
         };
-        this.renderSecondaryHeadline = (headline, level) => {
-            switch (level) {
-                case 1:
-                    return hAsync("span", { class: "secondary-headline" }, headline);
-                case 2:
-                    return hAsync("h2", { class: "secondary-headline" }, headline);
-                case 3:
-                    return hAsync("h3", { class: "secondary-headline" }, headline);
-                case 4:
-                    return hAsync("h4", { class: "secondary-headline" }, headline);
-                case 5:
-                    return hAsync("h5", { class: "secondary-headline" }, headline);
-                case 6:
-                    return hAsync("h6", { class: "secondary-headline" }, headline);
-                default:
-                    return hAsync("strong", { class: "secondary-headline" }, headline);
-            }
-        };
         this._label = undefined;
         this._level = 1;
         this._secondaryHeadline = undefined;
@@ -7294,7 +7275,7 @@ class KolHeadingWc {
         this.validateVariant(this._variant);
     }
     render() {
-        return (hAsync(Host, { key: 'e7bbeab369d3089ea0c1e7ca52e8bb97720ec061', class: "kol-heading-wc" }, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
+        return (hAsync(Host, { key: '32478d3aa42ca01b63611be036146eefa0f35f90', class: "kol-heading-wc" }, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), hAsync("p", { class: "secondary-headline" }, this.state._secondaryHeadline))) : (this.renderHeadline(this.state._label, this.state._level))));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -7472,7 +7453,7 @@ class KolIndentedTextWc {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, { key: '0250f19fa465ca6b14f7396746fe7d0ed0354758', class: "kol-indented-text-wc" }, hAsync("div", { key: 'b8108cc41843ad18171b3678449718b3c3635eff' }, hAsync("slot", { key: '8346127058df62e86002dec6714e9accd407cf46' }))));
+        return (hAsync(Host, { key: '9d055cf1199950842de282faaccd67e05d2495ba', class: "kol-indented-text-wc" }, hAsync("div", { key: '4409c9619ccf102b58f796aa41e9f533813cd69b' }, hAsync("slot", { key: '691be16bd16b4a88c02f978905c5a35a2c2154c9' }))));
     }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -8538,14 +8519,507 @@ const validatePasswordVariant = (component, value) => {
     watchValidator(component, '_variant', (value) => typeof value === 'string' && PasswordVariantPropTypeOptions.includes(value), new Set(PasswordVariantPropTypeOptions), value);
 };
 
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
+
+var freeGlobal$1 = freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal$1 || freeSelf || Function('return this')();
+
+var root$1 = root;
+
+/** Built-in value references. */
+var Symbol = root$1.Symbol;
+
+var Symbol$1 = Symbol;
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$1.toString;
+
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
+
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString(value) {
+  return nativeObjectToString.call(value);
+}
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return value != null && typeof value == 'object';
+}
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && baseGetTag(value) == symbolTag);
+}
+
+/** Used to match a single whitespace character. */
+var reWhitespace = /\s/;
+
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject$1(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject$1(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject$1(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now = function() {
+  return root$1.Date.now();
+};
+
+var now$1 = now;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject$1(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now$1();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now$1());
+  }
+
+  function debounced() {
+    var time = now$1(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
 class InputPasswordController extends InputIconController {
     constructor(component, name, host) {
         super(component, name, host);
         this.afterSyncCharCounter = () => {
             if (typeof this.component._value === 'string' && this.component._value.length > 0) {
                 this.component.state._currentLength = this.component._value.length;
+                this.component.state._currentLengthDebounced = this.component._value.length;
             }
         };
+        this.updateCurrentLengthDebounced = debounce((length) => {
+            setState(this.component, '_currentLengthDebounced', length);
+        }, 500);
         this.component = component;
     }
     validateAutoComplete(value) {
@@ -8668,10 +9142,10 @@ class KolInputEmail {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '8aa99a7d0e5bcd082bfe69e15a2af1baa4930e3a', class: {
+        return (hAsync(Host, { key: '6c57a606b7ba37bb861b6fae65b328859d1a968b', class: {
                 'kol-input-email': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputTag, { key: '5f40ebaaf7f21fdc57f91799c09cda27761bc7d2', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '36833ee25609592540e74c9e33cc25920efc15a2', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'dab8496d81ea470b45764ed73d0ef35c6f28d35f', slot: "input" }, hAsync("input", Object.assign({ key: '97336fa3e7c726523d54cb485c782d0bda6f3ddb', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
+            } }, hAsync(KolInputTag, { key: '31bbb733888e56936c23eb578200731616fc0973', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'c7c4225185caaa7294da2381cbf7f46207592016', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a907065779945e16431309c4cc32d34bdb18934a', slot: "input" }, hAsync("input", Object.assign({ key: '790659497ef8a240a8184e65c6118330d29a2c24', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -8694,6 +9168,7 @@ class KolInputEmail {
         };
         this.onInput = (event) => {
             setState(this, '_currentLength', event.target.value.length);
+            this.controller.updateCurrentLengthDebounced(event.target.value.length);
             this.controller.onFacade.onInput(event);
         };
         this._accessKey = undefined;
@@ -8728,6 +9203,7 @@ class KolInputEmail {
         this.state = {
             _autoComplete: 'off',
             _currentLength: 0,
+            _currentLengthDebounced: 0,
             _hasValue: false,
             _hideError: false,
             _id: `id-${nonce()}`,
@@ -9518,13 +9994,13 @@ class KolInputPassword {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'c1cf1ec5f4bc25a045f556eee5540b1c42d47717', class: {
+        return (hAsync(Host, { key: 'd53cee1707ec75ae565309eab98ce749fc94f95d', class: {
                 'kol-input-password': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputTag, { key: 'af9008130708841c3410d96c2c0b4eb9e2087dbe', class: {
+            } }, hAsync(KolInputTag, { key: '7b5d974cdc73afe036cbe424c27a866e07ce1400', class: {
                 'hide-label': !!this.state._hideLabel,
                 password: true,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '5e5d1989a5fb45d6810674b9065eefbfeb6f3bcd', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '0b43142ced49cfa12c9d05eae0c07c3a8b1ac5ae', slot: "input" }, hAsync("input", Object.assign({ key: 'de88c3ba5ea7f6f5df596ff045e7a1ab1e992711', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e9aa043946a8ad3068b8f600a30900cc287f9bd6', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '89bf6715146d2ff426547ec26fd8496d7086fe28', slot: "input" }, hAsync("input", Object.assign({ key: '0f6f2bb633a21e1da59af31374040dc3c67c6aa6', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -9551,6 +10027,7 @@ class KolInputPassword {
         };
         this.onInput = (event) => {
             setState(this, '_currentLength', event.target.value.length);
+            this.controller.updateCurrentLengthDebounced(event.target.value.length);
             this.controller.onFacade.onInput(event);
         };
         this._accessKey = undefined;
@@ -9584,6 +10061,7 @@ class KolInputPassword {
         this.state = {
             _autoComplete: 'off',
             _currentLength: 0,
+            _currentLengthDebounced: 0,
             _hasValue: false,
             _hideError: false,
             _id: `id-${nonce()}`,
@@ -10356,13 +10834,13 @@ class KolInputText {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '727cf67342a485f44aabd47a66ef7c0b014e13d6', class: {
+        return (hAsync(Host, { key: 'b17b30056c0636149b29724ac95b958684f9637e', class: {
                 'has-value': this.state._hasValue,
                 'kol-input-text': true,
-            } }, hAsync(KolInputTag, { key: 'b139ab0e80ef9b24de81461a6530c642582cf20e', class: {
+            } }, hAsync(KolInputTag, { key: '0440727702a29ba67e89d426e6401d2c6836d706', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '696714aebfc9d399b5a651fca0a29d65b7b6228e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '5cd093503bc6b05c892befce6ff09b3cda8fde4a', slot: "input" }, hAsync("input", Object.assign({ key: 'cbfc8a07c95d791bad53a1d09bc11ee69369228a', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: this.state._spellCheck, type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown, onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'a6ea0437c1769c35e4ce410b2f14b3ad86967fdb', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'cca6b100296d52d0be1cef69a0eb0b7bb4743c56', slot: "input" }, hAsync("input", Object.assign({ key: '2187a5c6d8ae47524f2541153c6fd793bb888224', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: this.state._spellCheck, type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -10384,6 +10862,7 @@ class KolInputText {
         };
         this.onInput = (event) => {
             setState(this, '_currentLength', event.target.value.length);
+            this.controller.updateCurrentLengthDebounced(event.target.value.length);
             this.controller.onFacade.onInput(event);
         };
         this.onKeyDown = (event) => {
@@ -10427,6 +10906,7 @@ class KolInputText {
         this.state = {
             _autoComplete: 'off',
             _currentLength: 0,
+            _currentLengthDebounced: 0,
             _hasValue: false,
             _hideError: false,
             _id: `id-${nonce()}`,
@@ -10630,6 +11110,7 @@ class KolInputWc {
         this._accessKey = undefined;
         this._alert = true;
         this._currentLength = undefined;
+        this._currentLengthDebounced = undefined;
         this._disabled = false;
         this._hasCounter = false;
         this._hideError = false;
@@ -10674,7 +11155,7 @@ class KolInputWc {
                 input: true,
                 'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
                 'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
-            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: 'e7f0db71fab21ae736a66dc02f0c78357e18bf91', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '9669a185c1451fc77642c5e062a4c153e70abaca', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: 'a3d9e730f5e6b026990e697d02d8cf945af5c11c', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: 'f6e6042d20148fb236129588c14cbca5b19dd873', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: 'e08bdf1c1ea0f363e3f3824809ee30d75a7868cc', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(FormFieldMsgFc, { key: '4d82ed833659163c1315cd84d644f4022d2fb0ad', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: 'bf391ca45c04582bc9e1d1083a3b0777c5ef433c', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: 'f6a3f6d6a14dddc4963c9a9f862899a0d7c3a9ab', class: "counter", "aria-atomic": "true", "aria-live": "polite", "data-testid": "input-counter" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '6d407c7b633fcb3f2c0fcb6901b37f8659abb808', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: 'c1fa9f7a068669b0802b3ad69fb1f4c7927869f1' }, translate('kol-characters'))))));
+            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: 'e7f0db71fab21ae736a66dc02f0c78357e18bf91', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '9669a185c1451fc77642c5e062a4c153e70abaca', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: 'a3d9e730f5e6b026990e697d02d8cf945af5c11c', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: 'f6e6042d20148fb236129588c14cbca5b19dd873', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: 'e08bdf1c1ea0f363e3f3824809ee30d75a7868cc', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(FormFieldMsgFc, { key: '4d82ed833659163c1315cd84d644f4022d2fb0ad', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: 'bf391ca45c04582bc9e1d1083a3b0777c5ef433c', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync(Fragment, null, hAsync("span", { key: '6ca742ce2019bfa752590249a3c369418a561de4', class: "counter", "aria-hidden": "true", "data-testid": "input-counter" }, this._currentLength, this._maxLength && `/${this._maxLength}`, " ", translate('kol-characters')), hAsync("span", { key: 'b26bbe2c1389911e90c709a270a83258f979acbf', "aria-live": "polite", "aria-atomic": "true", class: "visually-hidden", "data-testid": "input-counter-aria" }, this._currentLengthDebounced, this._maxLength && ` ${translate('kol-of')} ${this._maxLength}`, " ", translate('kol-characters'))))));
     }
     getModifierClassNameByMsgType(showMsg) {
         var _a, _b;
@@ -10696,6 +11177,7 @@ class KolInputWc {
             "_accessKey": [1, "_access-key"],
             "_alert": [4],
             "_currentLength": [2, "_current-length"],
+            "_currentLengthDebounced": [2, "_current-length-debounced"],
             "_disabled": [4],
             "_hasCounter": [4, "_has-counter"],
             "_hideError": [4, "_hide-error"],
@@ -10754,7 +11236,7 @@ class KolKolibri {
     }
     render() {
         const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
-        return (hAsync(Host, { key: '121ff52acc3463c30aa52b4c8a668bc288b60d7a', class: "kol-kolibri" }, hAsync("svg", { key: 'c162ca80478f3968931aa6bc17110ae3417bbe11', role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'bb693c5feebfd80684441fbf10cc17cd6c39a377', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: 'c5956d3944b8ecc474e1ec319cdff95d0616b357', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: 'fadeaf7e185a41101bd8c4d52980c4dc02f97c1c', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: '434ef9b4942da225534aee67609a05eeaa218692', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '457463be25eeb2eba85d867f3925340caf52a2db', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '2b2814cabf36d6d377e7e9dac18e873fc63dee9d', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '001a0cc4bd4eda5f17a808ff4a709fea8a97fab5', x: "250", y: "525", fill: fillColor }, "KoliBri")))));
+        return (hAsync(Host, { key: 'f1f56e7011ff6ae4db1c8ad52a3343c9531b7cd6', class: "kol-kolibri" }, hAsync("svg", { key: '180fad6a6044a602eb0aac1cba1b3645fea614e5', role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'ab5b4f2f2f818b2dede111c3cfba335c13a24bd5', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '71b9f18444c07790a82c05f5aa0def051c5ea4c6', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: '8f4d8749d0686252c46141fd09e77149d7789f55', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: 'f23d3bc36245dadf71238f0ae7a3979950c30759', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '4d1e985c40a089f8321445cbcb0fe5b56112cb2f', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '23f639be684138f56f5cf193f03e6bb29a5a2b9f', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '41b52159554e1254e76024d40aa489bb3ed0a844', x: "250", y: "525", fill: fillColor }, "KoliBri")))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -10827,7 +11309,7 @@ class KolLink {
         await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
     }
     render() {
-        return (hAsync(Host, { key: '6b3f8dd9d9322e31bd85fd4529d320350b0eeccc', class: "kol-link" }, hAsync(KolLinkWcTag, { key: '1422cf7d8a14bc995a02c50bdd30ce8b9266108f', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '90491037eccc9ef4e8b4591f48e5d1dd51b5ad9d', name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: '140a0fe730de5d61f443eec6192789817f2bdb9c', class: "kol-link" }, hAsync(KolLinkWcTag, { key: 'b595a76bf792422f310fa75184b02df17f2cd141', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '6d15e069807d719d577d60f7c44d3e0beaecb81b', name: "expert", slot: "expert" }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return {
@@ -10896,9 +11378,9 @@ class KolLinkButton {
         await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
     }
     render() {
-        return (hAsync(Host, { key: '17537a98e3d3e082a833b0fd8970d8ed6d5121f0', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '12115da0c3ed106c7b2954296f5a2529e074897a', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '2060e9972d3e35203f8f2a64db28edfd5934886f', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: 'c773d23014fcd4f364e419f24f06e307d25324d4', ref: this.catchRef, class: {
                 button: true,
-            }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, hAsync("slot", { key: '9fdb0b15c70fa8c22cfe4e5b28893c5d793a6d51', name: "expert", slot: "expert" }))));
+            }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, hAsync("slot", { key: 'e2b8a2c96c15a39a737b1df04689833884ee0ee8', name: "expert", slot: "expert" }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return {
@@ -10965,10 +11447,10 @@ class KolLinkGroup {
     }
     render() {
         const ListTag = this.isUl ? 'ul' : 'ol';
-        return (hAsync(Host, { key: 'ea982de293f5bee2612983d6ab31ef2d48f339e1', class: "kol-link-group" }, hAsync(ListTag, { key: '6b492cc8d79207dc7d79d57aa3ada8f11d9f5165', "aria-label": this.state._label, class: {
+        return (hAsync(Host, { key: 'f022377c671dd28a32301b5b70a6f99e5e695a95', class: "kol-link-group" }, hAsync(ListTag, { key: 'daee992a78bd6bf425c211fdde871de3a487f994', "aria-label": this.state._label, class: {
                 vertical: this.state._orientation === 'vertical',
                 horizontal: this.state._orientation === 'horizontal',
-            } }, hAsync(ListItem, { key: '6bf5f89ac660dae44cfb7a72625be5310d695263', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
+            } }, hAsync(ListItem, { key: 'd1b2ef6b3af0b8d7c96f006cf0020ba82b97ae37', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
     }
     validateLabel(value, _oldValue, initial = false) {
         if (!initial && this.state._label) {
@@ -11119,7 +11601,7 @@ class KolLinkWc {
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
         const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
-        return (hAsync(Host, { key: '1d30bedcd820dec1c26c0eff106acc80bedb5cb3', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: 'efc2b3393b67b4744cec4ea94b95014324d899f3', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : 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: '93e81c49ed733028ed9187679814d22d7d955bdc', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: '9ae167f7dc634a1e09182b35bda6c4cefbd91350', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : 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 ? ` (${translate('kol-open-link-in-tab')})` : ''}`
                 : undefined, class: {
                 disabled: this.state._disabled === true,
@@ -11127,7 +11609,7 @@ class KolLinkWc {
                 'hide-label': this.state._hideLabel === true,
                 [this.state._variant]: this.state._variant !== 'custom',
                 [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(KolSpanWcTag, { key: '02c28b7d44741668ee5847e454769195810a0958', _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: '14536938fdd95503bdfdc0bec1e56221a6e075f7', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '6624f9d9590bedd38e696d322f988a7ab0d0a6e6', class: "external-link-icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: 'c4aea7ed08c840b8352626122c7f5a2c44dbe01a', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }), hasAriaDescription && (hAsync("span", { key: 'c2481878f8b0801390a63af0f33ce30ed9024f5e', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
+            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '84ce5c2d3aed1ef85c6e3214a81e292d4f34f3d2', _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: 'e6085382173ef3cc4e3c0ac785327036e1673a45', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '7cb094c767fad5e4e9d47acbc559e2bec4104ebf', class: "external-link-icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: '1bc8bf9b6fad3051f71cfb7e42a259f007e3fc65', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }), hasAriaDescription && (hAsync("span", { key: '347cb67dd0512baeddf94d8b542809cbbb38ed12', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -11480,7 +11962,7 @@ class KolLogo {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '73568c22249afeaaec8eff34b73ed5a0aa1b35ce', class: "kol-logo" }, hAsync("svg", { key: '2c93429b3415ad8fd6f9bfca169b3b59d93464a7', "aria-label": translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } }), role: "img", viewBox: "0 0 225 100" }, hAsync("rect", { key: 'afa387b1cb4dedf6c98e74604ba27c307ac668a0', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: '11495901647abd0e5bf2dce88f27b5bc0ca1fbc1', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: 'eaf6054d70ba44934318b3380b8c125b4dad7be8' })), hAsync("svg", { key: '4995e7294a73013083cb365719f9bf5dc6a1cee0', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: 'dfa2a7e939e77223b27b102f8f782420fad46991', width: "5", height: "30" }), hAsync("rect", { key: 'bc4622b48cf08e9ba3873e0c346e9867ebc8a4d2', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: '65338af55afe0b21872769f14d4561a31ce473a6', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '08f614b7b0fab077df70711b4be30b66f9f137bc', x: "50", y: "0" }, hAsync("text", { key: 'ee989f745edb20fa1d426b0e8a16f3f739307513', x: "0", y: "-0.05em", "font-family": "Verdana", style: { backgroundColor: 'white', color: 'black' } }, BUND_LOGO_TEXT_MAP.has(this.state._org) ? (hAsync("tspan", null, (_a = BUND_LOGO_TEXT_MAP.get(this.state._org)) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
+        return (hAsync(Host, { key: '701f1123b81445ce2af6d02bf219764194e1e2a7', class: "kol-logo" }, hAsync("svg", { key: '3d4797d01fc963abadb8a5d332a737a79b2ea867', "aria-label": translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } }), role: "img", viewBox: "0 0 225 100" }, hAsync("rect", { key: 'cfcccfc45402855a450e698bae2302c48281c286', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: 'c2c5d6ff786f393eefa59298a6cf97e0c010bf47', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: 'cd5db6b3158a8a5360491f509a5e139ca8f5e90a' })), hAsync("svg", { key: '185d01bb49ae03f4d9d6f2b2dbae5f833269faa0', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: 'aad04cf215f0e2049f4874bb411cc2929c761a5a', width: "5", height: "30" }), hAsync("rect", { key: '786b939ae9c7f36825c34c500dad51660a43e458', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: '61cff4501b965aa83a819a6b351af0ddfad23915', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '4018effbe3e5c0958bcaf09fea18dafb309ea7e0', x: "50", y: "0" }, hAsync("text", { key: 'b7eaeea560a0a0531caa6b0c6740686f711e2863', x: "0", y: "-0.05em", "font-family": "Verdana", style: { backgroundColor: 'white', color: 'black' } }, BUND_LOGO_TEXT_MAP.has(this.state._org) ? (hAsync("tspan", null, (_a = BUND_LOGO_TEXT_MAP.get(this.state._org)) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
             return (hAsync("tspan", { x: "0", dy: "1.1em", key: `kol-logo-text-${index}` }, text));
         }))) : (hAsync("tspan", { fill: "red" }, hAsync("tspan", { x: "0", dy: "1.1em" }, "Der Schl\u00FCsselwert"), hAsync("tspan", { x: "0", dy: "1.1em", "font-weight": "bold" }, "'", this.state._org, "'"), hAsync("tspan", { x: "0", dy: "1.1em" }, "ist nicht definiert."), hAsync("tspan", { x: "0", dy: "1.1em" }, "oder freigegeben."))))))));
     }
@@ -11542,11 +12024,11 @@ class KolModal {
         (_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (hAsync("dialog", { key: '60cb0446cef2f09e240cf1c726c291b9ed7d236d', class: "kol-modal", ref: (el) => {
+        return (hAsync("dialog", { key: '894ddd0ad3ca225cc54cbbe10bc4c70b1170aaac', class: "kol-modal", ref: (el) => {
                 this.refDialog = el;
             }, style: {
                 width: this.state._width,
-            }, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: '58dab73678e09f898a432f3a22879a1f150a98a5' }, hAsync("slot", { key: 'ea74a2c036fd070e2ed21731888a24b4846174fe' }))));
+            }, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: 'bd71fa9c01bd98b6fc0ab783554d50e3f5d5d05b' }, hAsync("slot", { key: 'aa88fbc590eb357d4d760741515fefe01aa656b6' }))));
     }
     validateActiveElement(value) {
         watchValidator(this, '_activeElement', (value) => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
@@ -11696,6 +12178,7 @@ class KolNav {
             }, key: index }, this.entry(collapsible, hideLabel, hasChildren, link, expanded), expanded && hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: deep + 1, links: link._children || [], orientation: orientation })));
     }
     initializeExpandedChildren() {
+        this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: [] });
         const handleBranch = (branch) => {
             if (branch._active) {
                 if (branch._children) {
@@ -11724,11 +12207,11 @@ class KolNav {
         const collapsible = this.state._collapsible === true;
         const hideLabel = this.state._hideLabel === true;
         const orientation = this.state._orientation;
-        return (hAsync(Host, { key: 'd9108ec054086cf2f6b65cce95822b3b63c4db4a', class: "kol-nav" }, hAsync("div", { key: 'cb1f7e7c6b19cab07c80c72cd2cc7de3a1a12d51', class: {
+        return (hAsync(Host, { key: 'bcd3d3425423a241def22c80072236a0ca1af502', class: "kol-nav" }, hAsync("div", { key: '4847c97f6b9d13332a0e3823a4c2e65ee92b2f67', class: {
                 nav: true,
                 [orientation]: true,
                 'is-compact': this.state._hideLabel,
-            } }, hAsync("nav", { key: '5105b5b852a1d61bfa0cfc0a81ddc9144010b453', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'e022de29606bd54b3052f28f6eac2b0fe069548f', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: 'f8efb0785c1f2ad67c5f1779813c1c6c42953244', class: "compact" }, hAsync(KolButtonWcTag, { key: 'c71f67af07946aea47527f3b1e95ace6293e276c', class: "toggle-button", _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
+            } }, hAsync("nav", { key: '62a1e0c73ae617723ffa47078f0970e1779e9376', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '1e7d0b1c1ba67dd33d8587997dc410e1f2afadec', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: 'df53af8d571541c905ae1fff63dceaf56aba5c96', class: "compact" }, hAsync(KolButtonWcTag, { key: 'c9de4df6c78c2ba07eea38b6137573144ca883a1', class: "toggle-button", _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
                 onClick: () => {
                     this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
                 },
@@ -11759,6 +12242,7 @@ class KolNav {
     validateLinks(value) {
         watchNavLinks('KolNav', this, value);
         devHint(`[KolNav] The navigation structure is not yet validated recursively.`);
+        this.initializeExpandedChildren();
     }
     validateOrientation(value) {
         watchValidator(this, '_orientation', (value) => value === 'horizontal' || value === 'vertical', new Set(['Orientation {horizontal, vertical}']), value, {
@@ -11995,14 +12479,16 @@ class KolPagination {
             }, _value: [this.state._pageSize] }))));
     }
     getUnselectedPageButton(page) {
-        return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { exportparts: "icon", _customClass: this.state._customClass, _label: "", _on: {
+        const pageText = NUMBER_FORMATTER.format(page);
+        return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { _ariaDescription: `${translate('kol-page')} ${pageText}`, _customClass: this.state._customClass, _label: pageText, _on: {
                 onClick: (event) => {
                     this.onClick(event, page);
                 },
-            } }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, translate('kol-page')), " ", NUMBER_FORMATTER.format(page)))));
+            } })));
     }
     getSelectedPageButton(page) {
-        return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { class: "selected", _customClass: this.state._customClass, _disabled: true, _label: "" }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, translate('kol-page')), " ", NUMBER_FORMATTER.format(page)))));
+        const pageText = NUMBER_FORMATTER.format(page);
+        return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { "aria-current": "page", class: "selected", _ariaDescription: `${translate('kol-page')} ${pageText}`, _customClass: this.state._customClass, _disabled: true, _label: pageText })));
     }
     validateBoundaryCount(value) {
         watchNumber(this, '_boundaryCount', Math.max(0, value !== null && value !== void 0 ? value : 1));
@@ -14342,7 +14828,7 @@ class KolPopover {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'bbde2554587c05790d6d369bea98302967e5a65e', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: 'a398217c3b11d0a5e7c5b5175b2107b85c61b7fc', class: { popover: true, show: this.state._visible }, ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: '85e4736b72df4491f16b87e55e40cf1d88537eae', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '3af2ff3203688dbbb0421a6b87c6b3e471a00ee9' }))));
+        return (hAsync(Host, { key: '302be9c67fc8e124f88c5c414064c5799b6b642e', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: '37f22c12ea19e242f18b7c624f48bf34fd1d3ee2', class: { popover: true, show: this.state._visible }, ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: 'cf4249d4d09c113553a824395508f973b5826b9a', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '9adfa8cec79eb49976240674643e4470e4b2b37f' }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -14465,11 +14951,11 @@ class KolPopoverButton {
         (_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
     }
     render() {
-        return (hAsync("div", { key: 'eaefebc99d61dc7db91cf08111bdf50b49c214d7', class: "kol-popover-button" }, hAsync(KolButtonWcTag, { key: '2886d52e671e3d4c1666e879d4b240c0e98a4f10', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: Object.assign(Object.assign({}, this._on), { onClick: (event, value) => {
+        return (hAsync("div", { key: 'c8d363ad3ece07f32124b3972e52ed0cb411f134', class: "kol-popover-button" }, hAsync(KolButtonWcTag, { key: '30ae967556a043fc93a20d03661178caed87c8f3', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: Object.assign(Object.assign({}, this._on), { onClick: (event, value) => {
                     var _a, _b;
                     this.handleButtonClick();
                     (_b = (_a = this._on) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event, value);
-                } }), _role: this._role, _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: clsx('kol-popover-button__button'), ref: (element) => (this.refButton = element) }, hAsync("slot", { key: '87e545c18b1a68f802050068d6f90ed0af65eb10', name: "expert", slot: "expert" })), hAsync("div", { key: '9c29819349a7f2fabb5439f1d7c672aef8aa7954', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: 'd123a0bc1d41772fa88b52d94838105f1b6e2b84' }))));
+                } }), _role: this._role, _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: clsx('kol-popover-button__button'), ref: (element) => (this.refButton = element) }, hAsync("slot", { key: '6523e6e6dc16bb2eb1b49e1006e7be63ee75af9d', name: "expert", slot: "expert" })), hAsync("div", { key: '5415b73f5e25227769a62cf48cc655855efcc14f', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '1e0d6428d87a8e1b0dd46f2bee613f8ece1f6534' }))));
     }
     validatePopoverAlign(value) {
         validatePopoverAlign(this, value);
@@ -14560,10 +15046,10 @@ class KolProgress {
         const isPercentage = this.state._unit === '%';
         const liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}%` : this.state._liveValue;
         const displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;
-        return (hAsync(Host, { key: 'c7038d1d330d5c4bdf6960549ae7c6d952553e51', class: "kol-progress" }, hAsync("div", { key: '15be68272d0e03b68443739aab91ae6daeb465d8', "aria-hidden": "true", class: {
+        return (hAsync(Host, { key: 'acccccbfd2ceb0afc154e059df308e31b4ed506e', class: "kol-progress" }, hAsync("div", { key: 'df5526c148f6da0bab6a6f9b4b5b70eeabdb821e', "aria-hidden": "true", class: {
                 cycle: this.state._variant === 'cycle',
                 bar: this.state._variant === 'bar',
-            } }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '05c419229cff39beefc7005694cdc1d748234b46', class: "label" }, this.state._label), createProgressSVG(this.state), this.state._variant === 'cycle' && (hAsync("div", { key: 'd3bb030af209c921ddeba4515de15c87fc0bcbcd', class: "text" }, this.state._label && hAsync("div", { key: '0a10bc8a5d17d579049cde9eb85cc333781749d9', class: "label" }, this.state._label), hAsync("div", { key: '836c015ecba9c6f225fcb84e5d6fd3ad6fee8dc0', class: "value" }, `${displayValue} ${this.state._unit}`))), this.state._variant === 'bar' && (hAsync("div", { key: 'b26f619a8489f648b007394f5592c0ce9ae45045', class: "value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant === 'bar' && hAsync("div", { key: '7728703795c3ac3bb35f8de79954e87407aced75', class: "unit" }, this.state._unit)), hAsync("progress", { key: '13bbf0fdc8eeca082cc298051a6497588f5f74f9', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', class: "visually-hidden", max: this.state._max, value: this.state._value }), hAsync("span", { key: 'ec9503790da414eb4ed19e3cbdf28d1a511b7679', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
+            } }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: 'afa3d67874533d734fa520385f85e513ede2781b', class: "label" }, this.state._label), createProgressSVG(this.state), this.state._variant === 'cycle' && (hAsync("div", { key: '166fe80b6f643881dde073ba85d0e35e797e54d3', class: "text" }, this.state._label && hAsync("div", { key: 'bf8d102124835d9a5379623ab2f4ed950871f941', class: "label" }, this.state._label), hAsync("div", { key: '8f9df4a04f460f6f2d548c4ca421da6f5c0f26c5', class: "value" }, `${displayValue} ${this.state._unit}`))), this.state._variant === 'bar' && (hAsync("div", { key: '11b9eb51798c751cedc8e316711037ff3df95740', class: "value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant === 'bar' && hAsync("div", { key: '33fbc9bd2fe885381fe3b609f595a0ae1c61b08c', class: "unit" }, this.state._unit)), hAsync("progress", { key: '106caebed2251566f5fd7fc843442234c6666be6', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', class: "visually-hidden", max: this.state._max, value: this.state._value }), hAsync("span", { key: '21dae4bd2d07926b9a952b23e7a2cfa58977690f', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -14672,9 +15158,9 @@ class KolQuote {
     }
     render() {
         const hasExpertSlot = showExpertSlot(this.state._quote);
-        return (hAsync(Host, { key: '08232b44e1ee7d5f3acfc4fcd846fa85a9731b0f', class: "kol-quote" }, hAsync("figure", { key: '23b315c6c5b6ca342fa0c88b08c8d335ffb032d6', class: {
+        return (hAsync(Host, { key: '8f2cbdcdf70ca047200e7db9534c84e127c39a93', class: "kol-quote" }, hAsync("figure", { key: '7e1caffee8775084765a592ac547ab3efd7d04fe', class: {
                 [this.state._variant]: true,
-            } }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '5c5b876fb1ec7230f478e3283e056ae72dfba220' }, hAsync("cite", { key: 'b264ba94846f2b895d6d400b7d4f642445111cbf' }, hAsync(KolLinkTag, { key: 'b32b9d1716549f5a3b3d9b96ac74e534eb03cf60', _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
+            } }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '8f7a70d0dcc187573756568706074b87b3889e0e' }, hAsync("cite", { key: 'ff89fe32a45e65c130bb69fe85be49609356ae39' }, hAsync(KolLinkTag, { key: 'd228fa76b62b65771be55f062539fb867267b702', _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -14812,16 +15298,16 @@ class KolSelect {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '7bb492332be80be000956f1bf41b52899c728ca5', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'b66fca1f0855a92d56986491975dee6922e8fb27', class: {
+        return (hAsync(Host, { key: '138f37117db51c51d5ce73df3bf2274357f67238', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'efe6a56a163014598d4d9239bf4e9b7747fd0601', class: {
                 'hide-label': !!this.state._hideLabel,
                 select: true,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'b30ed343e39c6cb52ba2b45c985a9c09cce0776e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '07cb61e5927c945ac0ef3285c8f7b8522e7d67b0', slot: "input" }, hAsync("form", { key: '5f808e9a56cc66ce7f6bbf44921851eaee225d47', onSubmit: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e442a86559ffd63774505a04348573c3760b7cb5', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '1fce5a88d76f88c3031f4d9386a5b67254766f3d', slot: "input" }, hAsync("form", { key: '3cf145d6cab02bc76962dd8405ac0e3cabf1d2e0', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host,
                     ref: this.selectRef,
                 });
-            } }, hAsync("input", { key: '853cb5de54e7337fd13a844b4a541063164fa9bf', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: 'e5ca87a564dc30134987f4f544b630ce6238a8d2', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
+            } }, hAsync("input", { key: 'eef3a716b2cd40380281baa02719048d7dbe9402', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: 'ad5753d53c6168ab1233a3476b2c7bb0de38ee0b', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -15101,9 +15587,13 @@ class KolSingleSelect {
         (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
     }
     onBlur() {
-        var _a;
-        if (Array.isArray(this.state._options) && this.state._options.length > 0 && !this.state._options.some((option) => option.label === this._inputValue)) {
-            this._inputValue = (_a = this.state._options.find((option) => option.value === this._value)) === null || _a === void 0 ? void 0 : _a.label;
+        var _a, _b, _c;
+        const matchingOption = (_a = this.state._options) === null || _a === void 0 ? void 0 : _a.find((option) => { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = this._inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
+        if (matchingOption) {
+            this.selectOption(matchingOption);
+        }
+        else {
+            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];
         }
         this._isOpen = false;
@@ -15114,13 +15604,13 @@ class KolSingleSelect {
             return;
         }
         else {
-            const emptyValue = '';
+            const emptyValue = null;
             this._focusedOptionIndex = -1;
             this._value = emptyValue;
-            this._inputValue = emptyValue;
+            this._inputValue = '';
             this._filteredOptions = [...this.state._options];
-            this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, emptyValue);
-            this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), emptyValue);
+            this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, { value: emptyValue });
+            this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), { value: emptyValue });
         }
     }
     selectOption(option) {
@@ -15188,17 +15678,17 @@ class KolSingleSelect {
         var _a;
         const hasExpertSlot = showExpertSlot(this.state._label);
         const { ariaDescribedBy } = getRenderStates(this.state);
-        return (hAsync(Host, { key: 'cc3133a2f097fab6e9c082d6f91d8fa1e74c21bf', class: "kol-single-select" }, hAsync("div", { key: '55ff97af5cbbe984e8400e844b6e5097b9f5235b', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'e879c998480f468b8b35c345085518665665d3c4', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: 'd54ea356639f88482b0552b0358a81acb05039c5', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '63be6784d1c397d03d9587cd6d47b485333b171f', slot: "input" }, hAsync("div", { key: '5af3aef92dbf40921e10717bcf33bf6a76a65695', class: "single-select__group" }, hAsync("input", Object.assign({ key: 'e6c9f147ed7d121354832108cedc992c9cdec92a', ref: this.catchRef, class: "single-select__input", "data-testid": "single-select-input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
+        return (hAsync(Host, { key: 'cc1f3cfb10d9a89336dd37f635eb9494874206bd', class: "kol-single-select" }, hAsync("div", { key: '760f7abe608a369d289cf7a5728763cd74a9bc91', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'a61e64e8f57ae222c2ea6833ea6bd21c547a64c3', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: 'ac6c289b2091cea9cadc3ebb588536cb0c721af0', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'c22e2c4f84de347b5c295dc9e50f0ff9d14e251b', slot: "input" }, hAsync("div", { key: '89906c776e1b7b6b7c05b6b23c6987f28fb44b86', class: "single-select__group" }, hAsync("input", Object.assign({ key: '9cbe8cabf6b89a408292dcf1ed8717db2a4b971e', ref: this.catchRef, class: "single-select__input", "data-testid": "single-select-input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            }, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'f566da1880518328039aeafc028be7b06db6c686', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
+            }, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'bb693e6367410321d3039f1e51bd6e330906e713', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
                 var _a;
                 this.clearSelection();
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
-            }, class: "single-select__delete" })), hAsync("button", { key: 'ab50e96d8427167d4e0c9c8a636c5c8b3cd352cc', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '42a1c2428ef79014282cc40fd937bd22a482a052', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'dce5f46ed13d22f036c53ae5c0d73278d59ba91f', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
+            }, class: "single-select__delete" })), hAsync("button", { key: 'baf27c00461f39ce7fa736f1ae67345c54a20387', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '03b9d8c1e091a389736fc5aa1c4dd3d101cbf53f', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'd5c7591ecdb8409f7cdcdb6f0ac78d088cc04a9a', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, onClick: (event) => {
@@ -15580,7 +16070,7 @@ class KolSkipNav {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'fa1a4c48e12e2def09995bb61ec37142d176ce9a', class: "kol-skip-nav" }, hAsync("nav", { key: '0e3c41fdc5783b33b853ba5d601bedc38ec06466', "aria-label": this.state._label }, hAsync("ul", { key: '74efc0e132cbb788e0013dff9d6124c486a84966' }, this.state._links.map((link, index) => {
+        return (hAsync(Host, { key: '0cf5bfae60f90e65d475324e1c3b12445b0581a3', class: "kol-skip-nav" }, hAsync("nav", { key: 'e055b8aa4dfe75ab84a82d3848a69910e8681b58', "aria-label": this.state._label }, hAsync("ul", { key: 'acdbfbc60b9bbe2f265145dc3a0819d17c44b3c4' }, this.state._links.map((link, index) => {
             return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
         })))));
     }
@@ -23968,10 +24458,10 @@ class KolSpanWc {
     render() {
         var _a, _b, _c, _d, _e;
         const hideExpertSlot = !showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'ae5826781bfe169b3553ce13b6d0cf7f1a1991b6', class: {
+        return (hAsync(Host, { key: '61c2a5584c2099d943d708443fbc4b6d5dd287f2', class: {
                 'kol-span-wc': true,
                 'hide-label': !!this.state._hideLabel,
-            } }, this.state._icons.top && (hAsync(KolIconTag, { key: '89883f312842a6fa1ca12cbfc5f8d71d60da4240', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: 'daabfb74eb08998af16b9e23d73b9456423f4095' }, this.state._icons.left && (hAsync(KolIconTag, { key: '5383b1067949de3bbbe5924f57e9dee81968a838', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._badgeText && this.state._label.length ? (hAsync(InternalUnderlinedBadgeText, { label: this.state._label, badgeText: this.state._badgeText })) : (((_c = this.state._label) !== null && _c !== void 0 ? _c : ''))))) : (''), hAsync("span", { key: 'a9172b7b7c5406d9e24612d03af783c528a4f7a9', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '375ef8e259e6f4572930012988bcc4ad382b72b7', name: "expert" })), this.state._badgeText && (hAsync("span", { key: '816796a63b12b674eacb5a5c7e7211e490e54246', class: "badge-text-hint", "aria-hidden": "true" }, this.state._badgeText)), this.state._icons.right && (hAsync(KolIconTag, { key: '702cffc3a7e6f04f7624792a00e88bee1a3b8d0f', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: '8ed67dd73bdc5e5d6cadbad34b6daf6b229741c9', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
+            } }, this.state._icons.top && (hAsync(KolIconTag, { key: '8dddfc14a28ee32bf4831ce85d34c7da8e0f2516', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: 'e18f60ad9b46fa2ec694b316d9dd678637cc94ef' }, this.state._icons.left && (hAsync(KolIconTag, { key: '09eac87a482884d79f32ea4d0cb57ad2a5cb7881', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._badgeText && this.state._label.length ? (hAsync(InternalUnderlinedBadgeText, { label: this.state._label, badgeText: this.state._badgeText })) : (((_c = this.state._label) !== null && _c !== void 0 ? _c : ''))))) : (''), hAsync("span", { key: 'c83600685031e8b75ba7d68a96e85379225802dd', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '8d215e01ad9fefe4903f089398a110e54b4be298', name: "expert" })), this.state._badgeText && (hAsync("span", { key: '487289fed5350d8eb14ee3b2150ed65f437a71ed', class: "badge-text-hint", "aria-hidden": "true" }, this.state._badgeText)), this.state._icons.right && (hAsync(KolIconTag, { key: 'fe647311fa6b5e6d2b52cbc76b0b9852f48b494b', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: '626d2437d28382cd014795f431458a0252f51541', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
     }
     validateBadgeText(value) {
         validateBadgeText(this, value);
@@ -24049,7 +24539,7 @@ class KolSpin {
         };
     }
     render() {
-        return (hAsync(Host, { key: '08f76fb91740319251ee423d4fc5296da7d1fc2d', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
+        return (hAsync(Host, { key: '0733583d9a2ed6b865f91f218af816881991a661', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
                 spin: true,
                 [this.state._variant]: true,
             }, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
@@ -24134,10 +24624,10 @@ class KolSplitButton {
     }
     render() {
         const i18nDropdownLabel = 'kol-split-button-dropdown-label';
-        return (hAsync(Host, { key: 'bf0b8bbd7c2dc4fc85d7277dd92d16e2ce288d76', class: "kol-split-button" }, hAsync("div", { key: '74daf437028dc1c2add23932d7cd52782ccc1e4c', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: '3bf984a61b273d36574f0846a102bc35700c9caf', class: {
+        return (hAsync(Host, { key: 'cf6ac525bf85bfb0fe16d7275808b1c2466be185', class: "kol-split-button" }, hAsync("div", { key: 'e508675a55f10001239c47362c569e7ce3991dd5', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: '59b44b060c2e949191e3da275e11b1e67c34159a', class: {
                 'main-button': true,
                 button: true,
-            }, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: 'a3f4b6dbd1a16d95024ab0825dcc5012b5ccd0af', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: 'd046ecef26cc8872fd17271258fd98b1daafa342', class: { 'secondary-button': true, [this._variant]: this._variant !== 'custom' }, _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler, _variant: this._variant })), hAsync(KolPopoverWcTag, { key: '2b0eeafd1d2f2ef8960b932adb6a34315bce0910', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'f5eba083e4760144334a4ad225086781782f3809' }))));
+            }, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '077e67c07b03f786f02d14e1f5d99c5aa2362721', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '98af91aba2eb06c3d637b983386c0bc46c1259de', class: { 'secondary-button': true, [this._variant]: this._variant !== 'custom' }, _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler, _variant: this._variant })), hAsync(KolPopoverWcTag, { key: '9546540b0ca474b3b8d8d6582a8eb9863d33289c', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'a92e0ad1f9f2bf6f95f013f4e2ead60d432d7285' }))));
     }
     async closePopup() {
         this.handleOnClose();
@@ -24189,7 +24679,7 @@ class KolSymbol {
         };
     }
     render() {
-        return (hAsync(Host, { key: '0cf724ad64920f8a2a9818302ad4ec9d428c52b2', class: "kol-symbol" }, hAsync("span", { key: '46cacaa73fc9b86e9f008d69216dd4b14ca58210', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
+        return (hAsync(Host, { key: '09195f2f3abd530937a2f1fb5a879f0cb38d7657', class: "kol-symbol" }, hAsync("span", { key: '597e49d33699b0f4ea2918e685bdd3f6e2ca5dab', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -24238,7 +24728,7 @@ class KolTable {
         this._on = undefined;
     }
     render() {
-        return (hAsync(KolTableStatefulTag, { key: '2a0229eb463970a0b26a500059e5ca20fe665dd4', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
+        return (hAsync(KolTableStatefulTag, { key: 'd91c3a2f2757e4541d2b79c9d7df62371001accd', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -24667,7 +25157,7 @@ class KolTableStateful {
             horizontal: (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
             vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
         };
-        return (hAsync(Host, { key: '9b994032721744c0fcd6cf2026b48cf56f599a39', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '5dab2eddc6c11d6d31f41c88139c246a4b18b60d', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
+        return (hAsync(Host, { key: 'bdf890a8b0523d9fc59fbb3088ceaf65d4b2f561', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '3d08e2ff669bcccce000650155ad9436d11ae1a2', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -24730,7 +25220,7 @@ class KolTableStateless$1 {
         this._selection = undefined;
     }
     render() {
-        return (hAsync(Host, { key: 'ca6a12ebf0f5e0d90586e3128ea55b001449e024', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: 'a58a5f21f2f33194313c1ab7840475c8cc6c016c', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
+        return (hAsync(Host, { key: 'c63276bd072d52154e5c8e55a114c5b4b2d3f86b', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: '3a65f488e2b4d9820e12a31a2fd1e16e2f6e26f6', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
     }
     static get style() { return {
         default: KolTableStatelessDefaultStyle0
@@ -24933,28 +25423,28 @@ class KolTableStateless {
         }
         return max;
     }
-    getThePrimaryHeadersWithKeysIfExists(headers) {
-        const primaryHeadersWithKeys = [];
+    getThePrimaryHeadersWithKeyOrRenderFunction(headers) {
+        const primaryHeaders = [];
         headers.forEach((cells) => {
             cells.forEach((cell) => {
-                if (typeof cell.key === 'string') {
-                    primaryHeadersWithKeys.push(cell);
+                if (typeof cell.key === 'string' || typeof cell.render === 'function') {
+                    primaryHeaders.push(cell);
                 }
             });
         });
-        return primaryHeadersWithKeys;
+        return primaryHeaders;
     }
     getPrimaryHeaders(headers) {
         var _a, _b;
-        let primaryHeadersWithKeys = this.getThePrimaryHeadersWithKeysIfExists((_a = headers.horizontal) !== null && _a !== void 0 ? _a : []);
+        let primaryHeaders = this.getThePrimaryHeadersWithKeyOrRenderFunction((_a = headers.horizontal) !== null && _a !== void 0 ? _a : []);
         this.horizontal = true;
-        if (primaryHeadersWithKeys.length === 0) {
-            primaryHeadersWithKeys = this.getThePrimaryHeadersWithKeysIfExists((_b = headers.vertical) !== null && _b !== void 0 ? _b : []);
-            if (primaryHeadersWithKeys.length > 0) {
+        if (primaryHeaders.length === 0) {
+            primaryHeaders = this.getThePrimaryHeadersWithKeyOrRenderFunction((_b = headers.vertical) !== null && _b !== void 0 ? _b : []);
+            if (primaryHeaders.length > 0) {
                 this.horizontal = false;
             }
         }
-        return primaryHeadersWithKeys;
+        return primaryHeaders;
     }
     createDataField(data, headers, isFoot) {
         var _a;
@@ -25003,18 +25493,18 @@ class KolTableStateless {
                     const row = isFoot && this.state._dataFoot ? this.state._dataFoot[i - startRow] : data[i];
                     if (typeof primaryHeader[j] === 'object' &&
                         primaryHeader[j] !== null &&
-                        typeof primaryHeader[j].key === 'string' &&
                         typeof row === 'object' &&
-                        row !== null) {
+                        row !== null &&
+                        (typeof primaryHeader[j].key === 'string' || typeof primaryHeader[j].render === 'function')) {
                         dataRow.push(Object.assign(Object.assign({}, primaryHeader[j]), { colSpan: undefined, data: row, label: row[primaryHeader[j].key], rowSpan: undefined }));
                     }
                 }
                 else {
                     if (typeof primaryHeader[i] === 'object' &&
                         primaryHeader[i] !== null &&
-                        typeof primaryHeader[i].key === 'string' &&
                         typeof data[j] === 'object' &&
-                        data[j] !== null) {
+                        data[j] !== null &&
+                        (typeof primaryHeader[i].key === 'string' || typeof primaryHeader[i].render === 'function')) {
                         dataRow.push(Object.assign(Object.assign({}, primaryHeader[i]), { colSpan: undefined, data: data[j], label: data[j][primaryHeader[i].key], rowSpan: undefined }));
                     }
                 }
@@ -25130,7 +25620,7 @@ class KolTableStateless {
             Array.isArray(this.state._headerCells.horizontal) && (hAsync("td", { "aria-hidden": "true", colSpan: this.state._headerCells.vertical.length, rowSpan: this.state._headerCells.horizontal.length }))));
     }
     renderHeadingCell(cell, rowIndex, colIndex, isVertical) {
-        let ariaSort = undefined;
+        let ariaSort = 'none';
         let sortButtonIcon = 'codicon codicon-fold';
         if (cell.sortDirection) {
             switch (cell.sortDirection) {
@@ -25142,6 +25632,8 @@ class KolTableStateless {
                     sortButtonIcon = 'codicon codicon-chevron-down';
                     ariaSort = 'descending';
                     break;
+                default:
+                    ariaSort = 'none';
             }
         }
         const scope = isVertical ? 'row' : typeof cell.colSpan === 'number' && cell.colSpan > 1 ? 'colgroup' : 'col';
@@ -25179,9 +25671,9 @@ class KolTableStateless {
     render() {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
         this.checkboxRefs = [];
-        return (hAsync(Host, { key: '01a57844bc49085127ceca2271007c571ce96251', class: "kol-table-stateless-wc" }, hAsync("div", { key: 'd9cee7a9008ed96b16b212587768532920ac8f78', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'f223823a1d01d12c492b34d1f8f613ab10e7d6b0', style: {
+        return (hAsync(Host, { key: '068ddbbaca91639a2370e2acaa01b0f823742861', class: "kol-table-stateless-wc" }, hAsync("div", { key: '7a84456ce3e37d5bea0ad34569c56979d74883f9', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '882e63a7cebc2c2a26688f934b44291b2966e1c0', style: {
                 minWidth: this.state._deprecatedMinWidth || this.state._minWidth,
-            } }, hAsync("div", { key: 'a95ff09d5a9c4cfd4bf668de15f8d47e8f04aca3', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'd64984dac3ad59df1b72eb6c12ad26686719a5fd', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '50e7c4f3f082048ccd4bf5006e282da18dfde1e2' }, [
+            } }, hAsync("div", { key: '9227d8ec493d1b7239e3ab69ab0fd16aad7c03b7', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: '40d14efc932bc915a2d5e4bc2f6af9e89f6e45ad', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'dc926c6e1b7cdd58d41e1db1c46fb1356904d91d' }, [
             this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
                 cols.map((cell, colIndex) => {
                     if (cell.asTd === true) {
@@ -25201,7 +25693,7 @@ class KolTableStateless {
                     }
                 })))),
             this.renderSpacer('head', this.state._headerCells.horizontal),
-        ])), hAsync("tbody", { key: '735e65d968125058ad93a7334394bff87025757a' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), hAsync("tbody", { key: '9d11add32fd084710d56c029262646a724e4bafe' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -25439,11 +25931,11 @@ class KolTabs {
             } }))));
     }
     render() {
-        return (hAsync(Host, { key: 'c8a57c143bad6f393f32b5dabb73aa4b85283678', class: "kol-tabs" }, hAsync("div", { key: '4bf7d0d4d05cd9978838cd19fefd308426b41ffd', ref: (el) => {
+        return (hAsync(Host, { key: '0742bb2f0a3ac2ccb77c42b5205311d68b55900d', class: "kol-tabs" }, hAsync("div", { key: '51fa48d177a1d5f460953d271eb446d65e7a32e7', ref: (el) => {
                 this.tabPanelsElement = el;
             }, class: {
                 [`tabs-align-${this.state._align}`]: true,
-            } }, this.renderButtonGroup(), hAsync("div", { key: '5b5b9731a0523296c14429e8f636e6898d8f6400', class: "tabs-content", ref: this.catchTabPanelHost }))));
+            } }, this.renderButtonGroup(), hAsync("div", { key: '01d820886238951d95a70969023c28f8888c76d1', class: "tabs-content", ref: this.catchTabPanelHost }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -25570,8 +26062,12 @@ class TextareaController extends InputIconController {
         this.afterSyncCharCounter = () => {
             if (typeof this.component._value === 'string' && this.component._value.length > 0) {
                 this.component.state._currentLength = this.component._value.length;
+                this.component.state._currentLengthDebounced = this.component._value.length;
             }
         };
+        this.updateCurrentLengthDebounced = debounce((length) => {
+            setState(this.component, '_currentLengthDebounced', length);
+        }, 500);
         this.component = component;
     }
     validateHasCounter(value) {
@@ -25656,7 +26152,7 @@ class KolTextarea {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '0d58a76b293ab2f240639779f244195f1927392a', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '9feb383f7a1f0ddb6ec4b253237ef7429bd20228', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'f66a8c3bf1545a49de67901f48d634585bea97da', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '972aac69bd2408b7cd601733406253d2b3e72748', slot: "input" }, hAsync("textarea", Object.assign({ key: '2cc63f47c854207d92b3510e3081ceb93c819df2', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: this.state._spellCheck }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
+        return (hAsync(Host, { key: 'ebb2f8a99cc6a61b6ae445c9b9f6dbfa5421d0b4', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'c16e2c38b2669a12dafb3fdff5a8397e65693c9e', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '2f4aeb447eae55708e92814c83d6dc67b2904a1d', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '0b81749ba92b653b2b64d27fda0eb88d89fdc06b', slot: "input" }, hAsync("textarea", Object.assign({ key: 'b7c374f2d8f8c0aae106324ff76a9aaf75b60162', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: this.state._spellCheck }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -25674,6 +26170,7 @@ class KolTextarea {
         this.onInput = (event) => {
             if (this.textareaRef instanceof HTMLTextAreaElement) {
                 setState(this, '_currentLength', this.textareaRef.value.length);
+                this.controller.updateCurrentLengthDebounced(this.textareaRef.value.length);
                 if (this.state._adjustHeight) {
                     this._rows = increaseTextareaHeight(this.textareaRef);
                 }
@@ -25711,6 +26208,7 @@ class KolTextarea {
         this.state = {
             _adjustHeight: false,
             _currentLength: 0,
+            _currentLengthDebounced: 0,
             _hasValue: false,
             _hideError: false,
             _id: `id-${nonce()}`,
@@ -25947,7 +26445,9 @@ class KolToastContainer {
                 return localToastState;
             }) });
         setTimeout(() => {
+            var _a, _b;
             this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id) });
+            (_b = (_a = toastState.toast).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
         }, TRANSITION_TIMEOUT);
     }
     async closeAll(immediate = false) {
@@ -25959,6 +26459,10 @@ class KolToastContainer {
             this.state = Object.assign(Object.assign({}, this.state), { _toastStates: toastsToClose.map((localToastState) => (Object.assign(Object.assign({}, localToastState), { status: 'removing' }))) });
             setTimeout(() => {
                 this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.filter((toastState) => toastsToClose.every((toastToClose) => toastToClose.id !== toastState.id)) });
+                toastsToClose.forEach((toastState) => {
+                    var _a, _b;
+                    (_b = (_a = toastState.toast).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+                });
             }, TRANSITION_TIMEOUT);
         }
     }
@@ -25969,7 +26473,7 @@ class KolToastContainer {
         }
     }
     render() {
-        return (hAsync(Host, { key: '69ede64a0d0e5bfcd817e943d5a7cb4512c4deb4', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'a05a1e8f4e8f3609ea815dfce9110f59791fa82e', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
+        return (hAsync(Host, { key: 'b2a11e7791b6695e94c87c5193619a783c2ca97a', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '4c544267d5e87ac933866a405c8e088a35a85749', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
                 onClick: () => {
                     void this.closeAll();
                 },
@@ -26021,7 +26525,7 @@ class KolToolbar {
         this._items = undefined;
     }
     render() {
-        return (hAsync(Host, { key: 'e0c42751378fb1569c13d2de6e56e11cde90c3a9', class: "kol-toolbar" }, hAsync("div", { key: '6d3c878e5546133858a7d6f5fa71275388186971', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
+        return (hAsync(Host, { key: '8bd34089dc8655de9101eae21466eb3969a8020d', class: "kol-toolbar" }, hAsync("div", { key: 'aaed4e6d8f8ea9fbb3dc1ef938345810910080c3', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -26219,7 +26723,7 @@ class KolTooltipWc {
         this.showOrHideTooltip();
     }
     render() {
-        return (hAsync(Host, { key: '1c451d0dd4961d747400c009d047fee03ff0ec59', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: '6879df2a08610759e1cfadf6421d4eba1e8c9e5a', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: 'ea902b518257361bd6dffe53806177097383707c', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: 'a54da5c444f87328dc15acce24d429412c405595', class: "tooltip-area tooltip-content", id: this.state._id, _badgeText: this._badgeText, _label: this.state._label })))));
+        return (hAsync(Host, { key: 'd60367ed981845e374fee0c11b73fffca885b499', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: '416722ecf35625dab57d1500afd6bc036a2d5f92', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: '44a31ec9dd9e2c1680714a8133a17932998a07ce', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: '3a6ca810afa481968ad59e912f2d7987d52df8f6', class: "tooltip-area tooltip-content", id: this.state._id, _badgeText: this._badgeText, _label: this.state._label })))));
     }
     validateBadgeText(value) {
         validateBadgeText(this, value);
@@ -26297,7 +26801,7 @@ class KolTree {
         this._label = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '6430c90de00f6f06970d9abfcb0040bb765a2a12', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'fcb3d3174feec3a8ae2127fecaf3d5d373d1ee11', _label: this._label }, hAsync("slot", { key: '25dd947e8b94534ac4bb63e53e7f66dec9c517bf' }))));
+        return (hAsync(Host, { key: 'c4ed1423c782d5cb19c9a5165db2ba5ca71b1528', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'd00b2ffc0c8757cb81b38c72164491603ec9d914', _label: this._label }, hAsync("slot", { key: '7a8fe91aacdeb5362126c23bdc5527c94aa5f4f8' }))));
     }
     static get style() { return {
         default: KolTreeDefaultStyle0
@@ -26345,7 +26849,7 @@ class KolTreeItem {
         return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
     }
     render() {
-        return (hAsync(KolTreeItemWcTag, { key: '6d8b7de1a3d8ecf617fb066631fd87c37c042a91', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '3bf19da6a7cd918c5159f7adb363d77237bb8bad' })));
+        return (hAsync(KolTreeItemWcTag, { key: 'ff893e8200b5a881347b2197ac5798264113c7b9', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '200a7bd7cd7b4f9dd141b7d455fe8154a3d89a05' })));
     }
     static get style() { return {
         default: KolTreeItemDefaultStyle0
@@ -26388,13 +26892,13 @@ class KolTreeItemWc {
     }
     render() {
         const { _href, _active, _hasChildren, _open, _label } = this.state;
-        return (hAsync(Host, { key: 'ceb601f2530ae6d55fe0a136905b084acb3a58c4', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: 'cf961136786ddbf84b69485240b2ad564fdd3344', class: "tree-item", style: {
+        return (hAsync(Host, { key: '1843323af44293bc49f4b6d1817ec223a6aedd96', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '2cf5dc604a8055687d594ca692cdd99e3df28c57', class: "tree-item", style: {
                 '--level': `${this.level}`,
-            } }, hAsync(KolLinkWcTag, { key: '6b2fef9321edbacad56337a59ff24e7f00faa02c', class: {
+            } }, hAsync(KolLinkWcTag, { key: '8406ef31760965e3aa784acfc814261ed09589ec', class: {
                 'tree-link': true,
                 'first-level': this.level === 0,
                 active: Boolean(_active),
-            }, _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '3d1e9682b93daf10ce9f39708af6ab3651e61fa5', class: "tree-link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "toggle-button-placeholder" })), hAsync("span", { key: '3372295b8f1da04ce7d985d1c9d40188450d808f', class: "text" }, _label))), hAsync("ul", { key: 'c1d6ff3d02c3414cb2d9500c83c17b9869f9d637', hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '254166f7813cd1cb26c15e5334e6688e02b85b87' })))));
+            }, _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '6489ca48987ea2aadacb8570168fe73295d1ed2c', class: "tree-link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "toggle-button-placeholder" })), hAsync("span", { key: '253fbef72524a838699df235cdefd6c693c25b73', class: "text" }, _label))), hAsync("ul", { key: 'fb1a01d5d77588761a8beaac5cd3c37a0cdc3c6f', hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '324a7bc467cc87903185ca06e8b7984eb8c932d3' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);
@@ -26499,7 +27003,7 @@ class KolTreeWc {
         validateLabel(this, value);
     }
     render() {
-        return (hAsync(Host, { key: '87bb07435a32099310d375c4b31e2ad6a18b14d7', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: '67bdfb5d267557d9755747638d2a975d113123fc', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '0ea5d150fc9dc6a81518b89735bd617d20f5f930', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '2540559f4e0afafb361e7e643f4b0b43721ebbb7' })))));
+        return (hAsync(Host, { key: 'ead6fadb4d72531bc2e02f25a59944c186fb1b74', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: '902fc0e6cf604b4d26fba2009fe45ddebcd8f06b', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: 'f33fa82c53c0f3b0e165a70e00508c3267a83412', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '8b1d7f476d18299b7ca8b3dfc671d496e52e25d1' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
@@ -26697,7 +27201,7 @@ class KolVersion {
         };
     }
     render() {
-        return (hAsync(Host, { key: '52c047c6155afc6cfcf189fd6689057a9ec1c6df', class: "kol-version" }, hAsync(KolBadgeTag, { key: 'eddaf7d1ba9a2f8caa5c904a06fe3a6947df0624', _color: "#bec5c9", _icons: {
+        return (hAsync(Host, { key: 'd082e433c111125d91e503c35226f140b6025ffc', class: "kol-version" }, hAsync(KolBadgeTag, { key: '43d7c7f0c2ffdfcffbb22a3889c64ab2e44fcaf7', _color: "#bec5c9", _icons: {
                 left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
             }, _label: this.state._label })));
     }