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

package/dist/index.js

@@ -5335,11 +5335,9 @@ class KolButton {
         await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
     }
     render() {
-        return (hAsync(Host, { key: '2cac05d30f6702e069cff37e7c5d98ec3051d029', class: "kol-button" }, hAsync(KolButtonWcTag, { key: '66045543c52d960eacd13fbafd78d0afc5a6aa38', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '2cac05d30f6702e069cff37e7c5d98ec3051d029', class: "kol-button" }, hAsync(KolButtonWcTag, { key: 'af027f003e52c388d21a390e9c3757ef253c8cb8', ref: this.catchRef, class: {
                 button: true,
-                [this._variant]: this._variant !== 'custom',
-                [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '2af46572e2480c4b9ce5ec1cf9d57fb7e9ae898b', name: "expert", slot: "expert" }))));
+            }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: 'bb85820948d8ec3f2bcb3229d3ace056dacb9668', name: "expert", slot: "expert" }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return {
@@ -6438,6 +6436,8 @@ class KolCombobox {
                 }, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option ? 'true' : undefined, onClick: () => {
                     this.selectOption(option);
                     this.toggleListbox();
+                    this._isOpen = false;
+                    this._hasOpened = false;
                 }, onMouseOver: () => {
                     if (!this.blockSuggestionMouseOver) {
                         this.focusOption(index);
@@ -6480,7 +6480,7 @@ class KolCombobox {
             }
             case 'Tab':
                 if (this._isOpen) {
-                    this._isOpen = !this._isOpen;
+                    this._isOpen = false;
                     (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
                 }
                 break;
@@ -6488,13 +6488,21 @@ class KolCombobox {
             case 'Escape': {
                 this._hasOpened = false;
                 this._isOpen = false;
-                handleEvent(false);
+                event.preventDefault();
                 (_b = this.refInput) === null || _b === void 0 ? void 0 : _b.focus();
                 break;
             }
             case 'NumpadEnter':
             case 'Enter': {
-                this.toggleListbox();
+                if (this._isOpen && this._focusedOptionIndex >= 0) {
+                    this._filteredSuggestions && this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]);
+                    this._isOpen = false;
+                    this._hasOpened = false;
+                }
+                else {
+                    this.toggleListbox();
+                }
+                event.preventDefault();
                 break;
             }
             case 'Home': {
@@ -10813,11 +10821,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: '43c8c70e85b0bb2ef1db7b643ef0d7e5ee01023d', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '17537a98e3d3e082a833b0fd8970d8ed6d5121f0', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '12115da0c3ed106c7b2954296f5a2529e074897a', ref: this.catchRef, class: {
                 button: true,
-                [this._variant]: this._variant !== 'custom',
-                [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _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: "button", _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'e151c7bb451e3a092885d7a41414084e9ffb58d3', 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: '9fdb0b15c70fa8c22cfe4e5b28893c5d793a6d51', name: "expert", slot: "expert" }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return {
@@ -11009,6 +11015,7 @@ class KolLinkWc {
         this._ariaDescription = undefined;
         this._ariaExpanded = undefined;
         this._ariaOwns = undefined;
+        this._customClass = undefined;
         this._disabled = false;
         this._download = undefined;
         this._hideLabel = false;
@@ -11021,6 +11028,7 @@ class KolLinkWc {
         this._tabIndex = undefined;
         this._target = undefined;
         this._tooltipAlign = 'right';
+        this._variant = 'normal';
         this.state = {
             _ariaCurrentValue: 'page',
             _href: '',
@@ -11036,13 +11044,15 @@ 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: '5da2a89adb469aa00911016bf83da8bc811d6afb', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: '5ba27442fb12021bcd40b2bbea3458ba90319ee7', 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: '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'
                 ? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
                 : undefined, class: {
                 disabled: this.state._disabled === true,
                 'external-link': isExternal,
                 'hide-label': this.state._hideLabel === true,
-            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: 'cff45aabbf830b45a1606d21b310946fc4107c25', _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: 'e1e4856db3aae514a7cfab6221171f64a9ad786e', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '3baff63f0c231d434d7b7b00bd561ce9c4388c44', 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: 'e40f46350a2b28542eddc16bf75378cc66e5eb42', "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: 'da48986516bb270a3077d5c98c5603e55f9a9f42', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
+                [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))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -11060,6 +11070,9 @@ class KolLinkWc {
     validateAriaOwns(value) {
         validateAriaOwns(this, value);
     }
+    validateCustomClass(value) {
+        validateCustomClass(this, value);
+    }
     validateDisabled(value) {
         validateDisabled(this, value);
     }
@@ -11099,12 +11112,16 @@ class KolLinkWc {
     validateTooltipAlign(value) {
         validateTooltipAlign(this, value);
     }
+    validateVariant(value) {
+        validateButtonVariant(this, value);
+    }
     componentWillLoad() {
         this.validateAccessKey(this._accessKey);
         this.validateAriaCurrentValue(this._ariaCurrentValue);
         this.validateAriaDescription(this._ariaDescription);
         this.validateAriaExpanded(this._ariaExpanded);
         this.validateAriaOwns(this._ariaOwns);
+        this.validateCustomClass(this._customClass);
         this.validateDisabled(this._disabled);
         this.validateDownload(this._download);
         this.validateHideLabel(this._hideLabel);
@@ -11117,6 +11134,7 @@ class KolLinkWc {
         this.validateTabIndex(this._tabIndex);
         this.validateTarget(this._target);
         this.validateTooltipAlign(this._tooltipAlign);
+        this.validateVariant(this._variant);
         this.unsubscribeOnLocationChange = onLocationChange((location) => {
             this.state._ariaCurrent = location === this.state._href ? this.state._ariaCurrentValue : undefined;
         });
@@ -11133,6 +11151,7 @@ class KolLinkWc {
         "_ariaDescription": ["validateAriaDescription"],
         "_ariaExpanded": ["validateAriaExpanded"],
         "_ariaOwns": ["validateAriaOwns"],
+        "_customClass": ["validateCustomClass"],
         "_disabled": ["validateDisabled"],
         "_download": ["validateDownload"],
         "_hideLabel": ["validateHideLabel"],
@@ -11144,7 +11163,8 @@ class KolLinkWc {
         "_shortKey": ["validateShortKey"],
         "_tabIndex": ["validateTabIndex"],
         "_target": ["validateTarget"],
-        "_tooltipAlign": ["validateTooltipAlign"]
+        "_tooltipAlign": ["validateTooltipAlign"],
+        "_variant": ["validateVariant"]
     }; }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -11155,6 +11175,7 @@ class KolLinkWc {
             "_ariaDescription": [1, "_aria-description"],
             "_ariaExpanded": [4, "_aria-expanded"],
             "_ariaOwns": [1, "_aria-owns"],
+            "_customClass": [1, "_custom-class"],
             "_disabled": [4],
             "_download": [1],
             "_hideLabel": [4, "_hide-label"],
@@ -11167,6 +11188,7 @@ class KolLinkWc {
             "_tabIndex": [2, "_tab-index"],
             "_target": [1],
             "_tooltipAlign": [1, "_tooltip-align"],
+            "_variant": [1],
             "state": [32],
             "kolFocus": [64]
         },
@@ -14340,13 +14362,11 @@ class KolPopoverButton {
         (_b = this.refPopover) === null || _b === void 0 ? void 0 : _b.removeEventListener('beforetoggle', this.handleBeforeToggle.bind(this));
     }
     render() {
-        return (hAsync("div", { key: 'e37abb8082b4a79421acf0d18d54088af227db75', class: "kol-popover-button" }, hAsync(KolButtonWcTag, { key: 'ce7f7a12aa80b3209a213f96f0798f3342821d00', _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: Object.assign(Object.assign({}, this._on), { onClick: (event, value) => {
+        return (hAsync("div", { key: 'e37abb8082b4a79421acf0d18d54088af227db75', class: "kol-popover-button" }, hAsync(KolButtonWcTag, { key: 'e20b23b48f106137393b3bc47ea49c2d8b75f83a', _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _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', {
-                [this._variant]: this._variant !== 'custom',
-            }), ref: (element) => (this.refButton = element) }, hAsync("slot", { key: 'a5761c899b808a407bc33d45da89bfdc6b5b7c70', name: "expert", slot: "expert" })), hAsync("div", { key: 'ed889b69d3707834aa1e621d94d1889d277d84d3', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '14e8af2ad55b838415564b7a576586435cb54a67' }))));
+                } }), _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: '4d0e91ca18454baa0dbbf215dfef99ab2c6a1884', name: "expert", slot: "expert" })), hAsync("div", { key: 'bc2ec76aa27e820cc1f3ff327a5465b9db402a10', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '8f4c33b71619fd768142be64c928111e04889798' }))));
     }
     validatePopoverAlign(value) {
         validatePopoverAlign(this, value);
@@ -14952,6 +14972,9 @@ class SingleSelectController extends InputIconController {
     validateHideClearButton(value) {
         watchBoolean(this.component, '_hideClearButton', value);
     }
+    validateRows(value) {
+        watchNumber(this.component, '_rows', value);
+    }
     componentWillLoad() {
         super.componentWillLoad();
         this.validateOptions(this.component._options);
@@ -14959,10 +14982,11 @@ class SingleSelectController extends InputIconController {
         this.validateValue(this.component._value);
         this.validatePlaceholder(this.component._placeholder);
         this.validateHideClearButton(this.component._hideClearButton);
+        this.validateRows(this.component._rows);
     }
 }
 
-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     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * 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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n    overflow: hidden;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n    overflow: hidden;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: flex;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__button {\n    height: auto;\n    width: var(--a11y-min-size);\n  }\n  .single-select__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item.highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\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     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * 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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n    overflow: hidden;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n    overflow: hidden;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: flex;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__button {\n    height: auto;\n    width: var(--a11y-min-size);\n  }\n  .single-select__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n  }\n  .single-select__item.highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
 
 class KolSingleSelect {
@@ -15058,19 +15082,20 @@ class KolSingleSelect {
         }
     }
     render() {
+        var _a;
         const hasExpertSlot = showExpertSlot(this.state._label);
         const { ariaDescribedBy } = getRenderStates(this.state);
-        return (hAsync(Host, { key: '56cd55586282dc0300b0cd687e7ed7078b6cc4d1', class: "kol-single-select" }, hAsync("div", { key: '87d876850c5a1a85038155003f69fe5af46aaf16', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: '7a9e20a7496fa29b4ae5d5c68d3f1718374fc8d1', _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: '1f34d388c9286e1f279e7b6ec1b02611ed8837d6', 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: 'ab6f056ebdc865e69f973f836a026b8ac667fb06', slot: "input" }, hAsync("div", { key: 'b02c71d5f4ae92e4ab0bec55a2c7ff757a73975d', class: "single-select__group" }, hAsync("input", Object.assign({ key: 'a5a10c859eb5fa209eae281612e4fbe3dd3fcda5', 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: '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) => {
                 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: '2db487657186cddf0d25df99ce2c8778661db041', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
+            }, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'f566da1880518328039aeafc028be7b06db6c686', _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: '3c4039e574dbec48038ad01ddb49d5618ae92322', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: 'ff271f3d3126f5eb927da86272994cea44b6406c', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'dff2b21212fcd38a10a6194c3d0b3b192fc329c5', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), 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: '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) => {
                 if (el)
                     this.refOptions[index] = el;
             }, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, onClick: (event) => {
@@ -15078,6 +15103,8 @@ class KolSingleSelect {
                 this.selectOption(option);
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
                 this.toggleListbox(event);
+                this._isOpen = false;
+                this._hasOpened = false;
             }, onMouseOver: () => {
                 if (!this.blockSuggestionMouseOver) {
                     this._focusedOptionIndex = index;
@@ -15162,6 +15189,8 @@ class KolSingleSelect {
             case 'NumpadEnter':
             case 'Enter': {
                 this.toggleListbox(event);
+                this._hasOpened = false;
+                this._isOpen = false;
                 break;
             }
             case 'Home': {
@@ -15248,6 +15277,7 @@ class KolSingleSelect {
         this._touched = false;
         this._value = undefined;
         this._hideClearButton = false;
+        this._rows = undefined;
         this.state = {
             _hideError: false,
             _id: `id-${nonce()}`,
@@ -15331,6 +15361,9 @@ class KolSingleSelect {
     validateHideClearButton(value) {
         this.controller.validateHideClearButton(value);
     }
+    validateRows(value) {
+        this.controller.validateRows(value);
+    }
     handleMouseEvent() {
         this.blockSuggestionMouseOver = false;
     }
@@ -15381,7 +15414,8 @@ class KolSingleSelect {
         "_tabIndex": ["validateTabIndex"],
         "_touched": ["validateTouched"],
         "_value": ["validateValue"],
-        "_hideClearButton ": ["validateHideClearButton"]
+        "_hideClearButton ": ["validateHideClearButton"],
+        "_rows": ["validateRows"]
     }; }
     static get style() { return {
         default: KolSingleSelectDefaultStyle0
@@ -15412,6 +15446,7 @@ class KolSingleSelect {
             "_touched": [1540],
             "_value": [1544],
             "_hideClearButton": [4, "_hide-clear-button"],
+            "_rows": [2],
             "_isOpen": [32],
             "_hasOpened": [32],
             "_filteredOptions": [32],
@@ -23996,12 +24031,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: 'bbceebf8897931f5bcfe964fffcd574477265162', class: {
+        return (hAsync(Host, { key: 'bf0b8bbd7c2dc4fc85d7277dd92d16e2ce288d76', class: "kol-split-button" }, hAsync("div", { key: '74daf437028dc1c2add23932d7cd52782ccc1e4c', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: '3bf984a61b273d36574f0846a102bc35700c9caf', class: {
                 'main-button': true,
                 button: true,
-                [this._variant]: this._variant !== 'custom',
-                [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _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: '9108c4d0319dd944bfb2ebd9d9c5cf4b6d08112b', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '310f0b697003718509adfb6b0b702260856a486c', 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: 'f855e820d841dbe82103d882fcd18a904e183a91', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '038addd2ccea0fa2d995957ef34805d715f943d1' }))));
+            }, _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' }))));
     }
     async closePopup() {
         this.handleOnClose();

package/dist/index.mjs

@@ -5331,11 +5331,9 @@ class KolButton {
         await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
     }
     render() {
-        return (hAsync(Host, { key: '2cac05d30f6702e069cff37e7c5d98ec3051d029', class: "kol-button" }, hAsync(KolButtonWcTag, { key: '66045543c52d960eacd13fbafd78d0afc5a6aa38', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '2cac05d30f6702e069cff37e7c5d98ec3051d029', class: "kol-button" }, hAsync(KolButtonWcTag, { key: 'af027f003e52c388d21a390e9c3757ef253c8cb8', ref: this.catchRef, class: {
                 button: true,
-                [this._variant]: this._variant !== 'custom',
-                [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '2af46572e2480c4b9ce5ec1cf9d57fb7e9ae898b', name: "expert", slot: "expert" }))));
+            }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: 'bb85820948d8ec3f2bcb3229d3ace056dacb9668', name: "expert", slot: "expert" }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return {
@@ -6434,6 +6432,8 @@ class KolCombobox {
                 }, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option ? 'true' : undefined, onClick: () => {
                     this.selectOption(option);
                     this.toggleListbox();
+                    this._isOpen = false;
+                    this._hasOpened = false;
                 }, onMouseOver: () => {
                     if (!this.blockSuggestionMouseOver) {
                         this.focusOption(index);
@@ -6476,7 +6476,7 @@ class KolCombobox {
             }
             case 'Tab':
                 if (this._isOpen) {
-                    this._isOpen = !this._isOpen;
+                    this._isOpen = false;
                     (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
                 }
                 break;
@@ -6484,13 +6484,21 @@ class KolCombobox {
             case 'Escape': {
                 this._hasOpened = false;
                 this._isOpen = false;
-                handleEvent(false);
+                event.preventDefault();
                 (_b = this.refInput) === null || _b === void 0 ? void 0 : _b.focus();
                 break;
             }
             case 'NumpadEnter':
             case 'Enter': {
-                this.toggleListbox();
+                if (this._isOpen && this._focusedOptionIndex >= 0) {
+                    this._filteredSuggestions && this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]);
+                    this._isOpen = false;
+                    this._hasOpened = false;
+                }
+                else {
+                    this.toggleListbox();
+                }
+                event.preventDefault();
                 break;
             }
             case 'Home': {
@@ -10809,11 +10817,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: '43c8c70e85b0bb2ef1db7b643ef0d7e5ee01023d', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '17537a98e3d3e082a833b0fd8970d8ed6d5121f0', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '12115da0c3ed106c7b2954296f5a2529e074897a', ref: this.catchRef, class: {
                 button: true,
-                [this._variant]: this._variant !== 'custom',
-                [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _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: "button", _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'e151c7bb451e3a092885d7a41414084e9ffb58d3', 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: '9fdb0b15c70fa8c22cfe4e5b28893c5d793a6d51', name: "expert", slot: "expert" }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return {
@@ -11005,6 +11011,7 @@ class KolLinkWc {
         this._ariaDescription = undefined;
         this._ariaExpanded = undefined;
         this._ariaOwns = undefined;
+        this._customClass = undefined;
         this._disabled = false;
         this._download = undefined;
         this._hideLabel = false;
@@ -11017,6 +11024,7 @@ class KolLinkWc {
         this._tabIndex = undefined;
         this._target = undefined;
         this._tooltipAlign = 'right';
+        this._variant = 'normal';
         this.state = {
             _ariaCurrentValue: 'page',
             _href: '',
@@ -11032,13 +11040,15 @@ 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: '5da2a89adb469aa00911016bf83da8bc811d6afb', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: '5ba27442fb12021bcd40b2bbea3458ba90319ee7', 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: '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'
                 ? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
                 : undefined, class: {
                 disabled: this.state._disabled === true,
                 'external-link': isExternal,
                 'hide-label': this.state._hideLabel === true,
-            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: 'cff45aabbf830b45a1606d21b310946fc4107c25', _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: 'e1e4856db3aae514a7cfab6221171f64a9ad786e', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '3baff63f0c231d434d7b7b00bd561ce9c4388c44', 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: 'e40f46350a2b28542eddc16bf75378cc66e5eb42', "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: 'da48986516bb270a3077d5c98c5603e55f9a9f42', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
+                [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))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -11056,6 +11066,9 @@ class KolLinkWc {
     validateAriaOwns(value) {
         validateAriaOwns(this, value);
     }
+    validateCustomClass(value) {
+        validateCustomClass(this, value);
+    }
     validateDisabled(value) {
         validateDisabled(this, value);
     }
@@ -11095,12 +11108,16 @@ class KolLinkWc {
     validateTooltipAlign(value) {
         validateTooltipAlign(this, value);
     }
+    validateVariant(value) {
+        validateButtonVariant(this, value);
+    }
     componentWillLoad() {
         this.validateAccessKey(this._accessKey);
         this.validateAriaCurrentValue(this._ariaCurrentValue);
         this.validateAriaDescription(this._ariaDescription);
         this.validateAriaExpanded(this._ariaExpanded);
         this.validateAriaOwns(this._ariaOwns);
+        this.validateCustomClass(this._customClass);
         this.validateDisabled(this._disabled);
         this.validateDownload(this._download);
         this.validateHideLabel(this._hideLabel);
@@ -11113,6 +11130,7 @@ class KolLinkWc {
         this.validateTabIndex(this._tabIndex);
         this.validateTarget(this._target);
         this.validateTooltipAlign(this._tooltipAlign);
+        this.validateVariant(this._variant);
         this.unsubscribeOnLocationChange = onLocationChange((location) => {
             this.state._ariaCurrent = location === this.state._href ? this.state._ariaCurrentValue : undefined;
         });
@@ -11129,6 +11147,7 @@ class KolLinkWc {
         "_ariaDescription": ["validateAriaDescription"],
         "_ariaExpanded": ["validateAriaExpanded"],
         "_ariaOwns": ["validateAriaOwns"],
+        "_customClass": ["validateCustomClass"],
         "_disabled": ["validateDisabled"],
         "_download": ["validateDownload"],
         "_hideLabel": ["validateHideLabel"],
@@ -11140,7 +11159,8 @@ class KolLinkWc {
         "_shortKey": ["validateShortKey"],
         "_tabIndex": ["validateTabIndex"],
         "_target": ["validateTarget"],
-        "_tooltipAlign": ["validateTooltipAlign"]
+        "_tooltipAlign": ["validateTooltipAlign"],
+        "_variant": ["validateVariant"]
     }; }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -11151,6 +11171,7 @@ class KolLinkWc {
             "_ariaDescription": [1, "_aria-description"],
             "_ariaExpanded": [4, "_aria-expanded"],
             "_ariaOwns": [1, "_aria-owns"],
+            "_customClass": [1, "_custom-class"],
             "_disabled": [4],
             "_download": [1],
             "_hideLabel": [4, "_hide-label"],
@@ -11163,6 +11184,7 @@ class KolLinkWc {
             "_tabIndex": [2, "_tab-index"],
             "_target": [1],
             "_tooltipAlign": [1, "_tooltip-align"],
+            "_variant": [1],
             "state": [32],
             "kolFocus": [64]
         },
@@ -14336,13 +14358,11 @@ class KolPopoverButton {
         (_b = this.refPopover) === null || _b === void 0 ? void 0 : _b.removeEventListener('beforetoggle', this.handleBeforeToggle.bind(this));
     }
     render() {
-        return (hAsync("div", { key: 'e37abb8082b4a79421acf0d18d54088af227db75', class: "kol-popover-button" }, hAsync(KolButtonWcTag, { key: 'ce7f7a12aa80b3209a213f96f0798f3342821d00', _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: Object.assign(Object.assign({}, this._on), { onClick: (event, value) => {
+        return (hAsync("div", { key: 'e37abb8082b4a79421acf0d18d54088af227db75', class: "kol-popover-button" }, hAsync(KolButtonWcTag, { key: 'e20b23b48f106137393b3bc47ea49c2d8b75f83a', _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _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', {
-                [this._variant]: this._variant !== 'custom',
-            }), ref: (element) => (this.refButton = element) }, hAsync("slot", { key: 'a5761c899b808a407bc33d45da89bfdc6b5b7c70', name: "expert", slot: "expert" })), hAsync("div", { key: 'ed889b69d3707834aa1e621d94d1889d277d84d3', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '14e8af2ad55b838415564b7a576586435cb54a67' }))));
+                } }), _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: '4d0e91ca18454baa0dbbf215dfef99ab2c6a1884', name: "expert", slot: "expert" })), hAsync("div", { key: 'bc2ec76aa27e820cc1f3ff327a5465b9db402a10', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '8f4c33b71619fd768142be64c928111e04889798' }))));
     }
     validatePopoverAlign(value) {
         validatePopoverAlign(this, value);
@@ -14948,6 +14968,9 @@ class SingleSelectController extends InputIconController {
     validateHideClearButton(value) {
         watchBoolean(this.component, '_hideClearButton', value);
     }
+    validateRows(value) {
+        watchNumber(this.component, '_rows', value);
+    }
     componentWillLoad() {
         super.componentWillLoad();
         this.validateOptions(this.component._options);
@@ -14955,10 +14978,11 @@ class SingleSelectController extends InputIconController {
         this.validateValue(this.component._value);
         this.validatePlaceholder(this.component._placeholder);
         this.validateHideClearButton(this.component._hideClearButton);
+        this.validateRows(this.component._rows);
     }
 }
 
-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     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * 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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n    overflow: hidden;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n    overflow: hidden;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: flex;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__button {\n    height: auto;\n    width: var(--a11y-min-size);\n  }\n  .single-select__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item.highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\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     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * 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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n    overflow: hidden;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n    overflow: hidden;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: flex;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__button {\n    height: auto;\n    width: var(--a11y-min-size);\n  }\n  .single-select__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n  }\n  .single-select__item.highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
 
 class KolSingleSelect {
@@ -15054,19 +15078,20 @@ class KolSingleSelect {
         }
     }
     render() {
+        var _a;
         const hasExpertSlot = showExpertSlot(this.state._label);
         const { ariaDescribedBy } = getRenderStates(this.state);
-        return (hAsync(Host, { key: '56cd55586282dc0300b0cd687e7ed7078b6cc4d1', class: "kol-single-select" }, hAsync("div", { key: '87d876850c5a1a85038155003f69fe5af46aaf16', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: '7a9e20a7496fa29b4ae5d5c68d3f1718374fc8d1', _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: '1f34d388c9286e1f279e7b6ec1b02611ed8837d6', 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: 'ab6f056ebdc865e69f973f836a026b8ac667fb06', slot: "input" }, hAsync("div", { key: 'b02c71d5f4ae92e4ab0bec55a2c7ff757a73975d', class: "single-select__group" }, hAsync("input", Object.assign({ key: 'a5a10c859eb5fa209eae281612e4fbe3dd3fcda5', 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: '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) => {
                 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: '2db487657186cddf0d25df99ce2c8778661db041', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
+            }, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'f566da1880518328039aeafc028be7b06db6c686', _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: '3c4039e574dbec48038ad01ddb49d5618ae92322', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: 'ff271f3d3126f5eb927da86272994cea44b6406c', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'dff2b21212fcd38a10a6194c3d0b3b192fc329c5', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), 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: '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) => {
                 if (el)
                     this.refOptions[index] = el;
             }, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, onClick: (event) => {
@@ -15074,6 +15099,8 @@ class KolSingleSelect {
                 this.selectOption(option);
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
                 this.toggleListbox(event);
+                this._isOpen = false;
+                this._hasOpened = false;
             }, onMouseOver: () => {
                 if (!this.blockSuggestionMouseOver) {
                     this._focusedOptionIndex = index;
@@ -15158,6 +15185,8 @@ class KolSingleSelect {
             case 'NumpadEnter':
             case 'Enter': {
                 this.toggleListbox(event);
+                this._hasOpened = false;
+                this._isOpen = false;
                 break;
             }
             case 'Home': {
@@ -15244,6 +15273,7 @@ class KolSingleSelect {
         this._touched = false;
         this._value = undefined;
         this._hideClearButton = false;
+        this._rows = undefined;
         this.state = {
             _hideError: false,
             _id: `id-${nonce()}`,
@@ -15327,6 +15357,9 @@ class KolSingleSelect {
     validateHideClearButton(value) {
         this.controller.validateHideClearButton(value);
     }
+    validateRows(value) {
+        this.controller.validateRows(value);
+    }
     handleMouseEvent() {
         this.blockSuggestionMouseOver = false;
     }
@@ -15377,7 +15410,8 @@ class KolSingleSelect {
         "_tabIndex": ["validateTabIndex"],
         "_touched": ["validateTouched"],
         "_value": ["validateValue"],
-        "_hideClearButton ": ["validateHideClearButton"]
+        "_hideClearButton ": ["validateHideClearButton"],
+        "_rows": ["validateRows"]
     }; }
     static get style() { return {
         default: KolSingleSelectDefaultStyle0
@@ -15408,6 +15442,7 @@ class KolSingleSelect {
             "_touched": [1540],
             "_value": [1544],
             "_hideClearButton": [4, "_hide-clear-button"],
+            "_rows": [2],
             "_isOpen": [32],
             "_hasOpened": [32],
             "_filteredOptions": [32],
@@ -23992,12 +24027,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: 'bbceebf8897931f5bcfe964fffcd574477265162', class: {
+        return (hAsync(Host, { key: 'bf0b8bbd7c2dc4fc85d7277dd92d16e2ce288d76', class: "kol-split-button" }, hAsync("div", { key: '74daf437028dc1c2add23932d7cd52782ccc1e4c', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: '3bf984a61b273d36574f0846a102bc35700c9caf', class: {
                 'main-button': true,
                 button: true,
-                [this._variant]: this._variant !== 'custom',
-                [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _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: '9108c4d0319dd944bfb2ebd9d9c5cf4b6d08112b', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '310f0b697003718509adfb6b0b702260856a486c', 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: 'f855e820d841dbe82103d882fcd18a904e183a91', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '038addd2ccea0fa2d995957ef34805d715f943d1' }))));
+            }, _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' }))));
     }
     async closePopup() {
         this.handleOnClose();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "2.2.11-rc.0",
+  "version": "2.2.11-rc.2",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -46,10 +46,10 @@
   ],
   "devDependencies": {
     "rimraf": "6.0.1",
-    "@public-ui/components": "2.2.11-rc.0"
+    "@public-ui/components": "2.2.11-rc.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.2.11-rc.0"
+    "@public-ui/components": "2.2.11-rc.2"
   },
   "sideEffects": false,
   "type": "commonjs",