@public-ui/hydrate 2.1.3 → 2.1.4

package/dist/index.js

@@ -2745,7 +2745,7 @@ const featureHint = (msg, done = false, options) => {
         });
     }
 };
-devHint(`Wir freuen uns über jedes Feedback, Kommentare, Screenshots oder Demo-Links von einer auf KoliBri-basierenden Anwendung (kolibri@itzbund.de). Vielen Dank!`);
+devHint(`We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!`);
 const uiUxCache = new Set();
 const uiUxHint = (msg, options) => {
     if (uiUxCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
@@ -2758,20 +2758,19 @@ const uiUxHint = (msg, options) => {
     }
 };
 const a11yHintDisabled = () => {
-    a11yHint(`"Disabled" schränkt die Zugänglichkeit und Sichtbarkeit ein. Wir empfehlen aus Sicht der Barrierefreiheit readonly- statt disabled-Attribut zu verwenden.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae`);
+    a11yHint(`"Disabled" limits accessibility and visibility. From an accessibility perspective, we recommend using the readonly attribute instead of disabled.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae`);
 };
 const a11yHintLabelingLandmarks = (value) => {
     if (typeof value !== 'string' || value === '') {
-        a11yHint(`Manche Strukturelemente, wie bspw. der nav-Tag, können mehrfach in einer Webseite verwendet werden. Damit die gleichnamigen Strukturelemente voneinander unterschieden werden können, ist es erforderlich ein Aria-Label zu setzen.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns`);
+        a11yHint(`Some structural elements, such as the nav tag, can be used multiple times on a webpage. To distinguish between similarly named structural elements, it is necessary to set an ARIA label.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns`);
     }
 };
 const uiUxHintMillerscheZahl = (className, length = 8) => {
     if (length > 7) {
-        uiUxHint(`[${className}] Innerhalb von Navigationsstrukturen wird empfohlen nicht mehr als 7 Menüpunkte zu verwenden.
+        uiUxHint(`[${className}] Within navigation structures, it is recommended to use no more than 7 menu items.
 
-Links:
-- https://de.ryte.com/wiki/Millersche_Zahl
-- https://de.wikipedia.org/wiki/Millersche_Zahl`);
+Link:
+- https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two`);
     }
 };
 
@@ -3560,7 +3559,7 @@ const setState = (component, propName, value, hooks = {}) => {
     patchState(component);
 };
 const logWarn = (component, propName, value, requiredGeneric) => {
-    devHint(`[${component.constructor.name}] Der Property-Wert (${value}) für '${propName}' ist nicht valide. Folgende Werte sind erlaubt: ${Array.from(requiredGeneric).join(', ')}`);
+    devHint(`[${component.constructor.name}] The property value: (${value}) for '${propName}' is not valid. Allowed values are: ${Array.from(requiredGeneric).join(', ')}`);
 };
 function watchValidator(component, propName, validationFunction, requiredGeneric, value, options = {}) {
     if (validationFunction(value)) {
@@ -3608,14 +3607,14 @@ const watchJsonArrayString = (component, propName, itemValidation, value, arrayV
                     else {
                         objectObjectHandler(invalid, () => {
                             Log.debug(invalid);
-                            throw new Error(`↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.`);
+                            throw new Error(`↑ The schema for the property (_options) is not valid. The value will not be changed.`);
                         });
                     }
                 }
                 else {
                     objectObjectHandler(value, () => {
                         Log.debug(value);
-                        throw new Error(`↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.`);
+                        throw new Error(`↑ The schema for the property (_options) is not valid. The value will not be changed.`);
                     });
                 }
             }
@@ -3660,7 +3659,7 @@ const stringifyJson = (value) => {
     }
     catch (error) {
         Log.warn(['stringifyJson', value]);
-        Log.error(`↑ Das JSON konnte nicht in einen String umgewandelt werden. Es wird ein stringifizierbares JSON erwartet.`);
+        Log.error(`↑ The JSON could not be converted to a string. A stringifiable JSON is expected.`);
         throw new Error();
     }
 };
@@ -3677,7 +3676,7 @@ const parseJson = (value) => {
                 }
                 catch (error) {
                     Log.warn(['parseJson', value]);
-                    Log.error(`↑ Der JSON-String konnte nicht geparsed werden. Achten Sie darauf, dass einfache Anführungszeichen im Text maskiert werden (‘).`);
+                    Log.error(`↑ The JSON string could not be parsed. Make sure that single quotes in the text are escaped (‘).`);
                 }
             }
         }
@@ -3730,7 +3729,7 @@ const validateInputSelectOptions = (option) => {
             option.disabled = option.disabled === true;
             option.label = `${option.label}`.trim();
             if (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {
-                a11yHint(`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`);
+                a11yHint(`A differing Aria-Label (${option.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`);
             }
             if (Array.isArray(option.options)) {
                 return (option.options.find((item) => {
@@ -3823,6 +3822,12 @@ const validateAriaExpanded = (component, value) => {
     watchBoolean(component, '_ariaExpanded', value);
 };
 
+const validateAriaOwns = (component, value) => {
+    watchString(component, '_ariaOwns', value, {
+        defaultValue: undefined,
+    });
+};
+
 const validateAriaSelected = (component, value) => {
     watchBoolean(component, '_ariaSelected', value);
 };
@@ -4151,6 +4156,10 @@ const validateMax = (component, value, options) => {
     watchNumber(component, '_max', value, options);
 };
 
+const validateModal = (component, value) => {
+    watchBoolean(component, '_modal', value);
+};
+
 const validateMsg = (component, value) => {
     watchValidator(component, `_msg`, (value) => typeof value === 'object', new Set(['Object']), value);
 };
@@ -4354,11 +4363,13 @@ let KolSpanWcTag = 'kol-span-wc';
 let KolTableStatefulTag = 'kol-table-stateful';
 let KolTableStatelessWcTag = 'kol-table-stateless-wc';
 let KolTooltipWcTag = 'kol-tooltip-wc';
+let KolTreeItemTag = 'kol-tree-item';
 let KolTreeItemWcTag = 'kol-tree-item-wc';
+let KolTreeTag = 'kol-tree';
 let KolTreeWcTag = 'kol-tree-wc';
 
-const defaultStyleCss$N = "@layer kol-global {\n  .sc-kol-abbr-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-abbr-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-abbr-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-abbr-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .sc-kol-abbr-default-h > abbr {\n    cursor: help;\n  }\n}";
-var KolAbbrDefaultStyle0 = defaultStyleCss$N;
+const defaultStyleCss$O = "@layer kol-global {\n  .sc-kol-abbr-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-abbr-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-abbr-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-abbr-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .sc-kol-abbr-default-h > abbr {\n    cursor: help;\n  }\n}";
+var KolAbbrDefaultStyle0 = defaultStyleCss$O;
 
 class KolAbbr {
     constructor(hostRef) {
@@ -4416,8 +4427,8 @@ const watchHeadingLevel = (component, value) => {
     });
 };
 
-const defaultStyleCss$M = "@layer kol-global {\n  .sc-kol-accordion-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-accordion-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-accordion-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-accordion-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .sc-kol-accordion-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  \n  .wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .accordion.open .wrapper {\n    grid-template-rows: 1fr;\n  }\n  .animation-wrapper {\n    min-height: 0;\n    transition: visibility 0.3s;\n    \n    visibility: hidden;\n  }\n  .accordion.open .animation-wrapper {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .animation-wrapper,\n    .wrapper {\n      transition-duration: 0s;\n    }\n  }\n  \n  @media print {\n    .accordion:not(.open) .animation-wrapper {\n      display: none;\n    }\n  }\n  \n  .accordion .kol-heading-wc .kol-button-wc button .kol-span-wc {\n    justify-items: start;\n  }\n}";
-var KolAccordionDefaultStyle0 = defaultStyleCss$M;
+const defaultStyleCss$N = "@layer kol-global {\n  .sc-kol-accordion-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-accordion-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-accordion-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-accordion-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .sc-kol-accordion-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  \n  .wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .accordion.open .wrapper {\n    grid-template-rows: 1fr;\n  }\n  .animation-wrapper {\n    min-height: 0;\n    transition: visibility 0.3s;\n    \n    visibility: hidden;\n  }\n  .accordion.open .animation-wrapper {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .animation-wrapper,\n    .wrapper {\n      transition-duration: 0s;\n    }\n  }\n  \n  @media print {\n    .accordion:not(.open) .animation-wrapper {\n      display: none;\n    }\n  }\n  \n  .accordion .kol-heading-wc .kol-button-wc button .kol-span-wc {\n    justify-items: start;\n  }\n}";
+var KolAccordionDefaultStyle0 = defaultStyleCss$N;
 
 featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
 
@@ -4430,7 +4441,7 @@ class KolAccordion {
         registerInstance(this, hostRef);
         this.nonce = nonce();
         this.catchRef = (ref) => {
-            propagateFocus(this.host, ref);
+            this.buttonWcRef = ref;
         };
         this.onClick = (event) => {
             this._open = !this._open;
@@ -4451,12 +4462,19 @@ class KolAccordion {
             _level: 1,
         };
     }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
+    }
     render() {
-        return (hAsync(Host, { key: 'f1672f2cf8b9aa85b1f63ab68d00300b74638dd8', class: "kol-accordion" }, hAsync("div", { key: 'e80bb532a6f148e9608b9d5b4eca382cf8c01e8d', class: {
+        return (hAsync(Host, { key: 'b2662d09c5d6ee4ba7b8775fad1abedb51d55483', class: "kol-accordion" }, hAsync("div", { key: 'c41fb13d7a5b699031edebf8aa88fe2f3e022346', class: {
                 accordion: true,
                 disabled: this.state._disabled === true,
                 open: this.state._open === true,
-            } }, hAsync(KolHeadingWcTag, { key: 'e221fc0ccd86504a3e491a8e32c55da5fa76a365', _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync(KolButtonWcTag, { key: 'f65af86aab71ff029bba8108495477d7be05c2f3', class: "accordion-button", ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _disabled: this.state._disabled, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { key: '5435d015a21707724c7180dbb96e7a0af30f9d42', class: "wrapper" }, hAsync("div", { key: '5a9958a91c49d8b807627f7029ad975e52c6e1ea', class: "animation-wrapper" }, hAsync("div", { key: '367a024dca25373063df9ec0e679161ad26bffb8', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: 'dfbbf47f20297d5f5052d7df8f74bd659ce054fd' })))))));
+            } }, hAsync(KolHeadingWcTag, { key: '10d86a82b4bc84278174a822edc508dd7edc3158', _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync(KolButtonWcTag, { key: '365d163277cbdddfe6e34203e31a3d0ae9a1f602', class: "accordion-button", ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _disabled: this.state._disabled, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { key: '6fca8bd22147df2e556d9cfefb09bb60c705de9a', class: "wrapper" }, hAsync("div", { key: '8fa8ba68f8c2ea8911bdb7c040c4d8bd44469fbf', class: "animation-wrapper" }, hAsync("div", { key: 'dd61af68e1eaeece1f8b5595fae6b97418563cac', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: '6249f6a0ccfd5ed101297d94a52a5311cc4385cf' })))))));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -4484,7 +4502,6 @@ class KolAccordion {
         this.validateOn(this._on);
         this.validateOpen(this._open);
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "_disabled": ["validateDisabled"],
         "_label": ["validateLabel"],
@@ -4504,7 +4521,9 @@ class KolAccordion {
             "_level": [2],
             "_on": [16],
             "_open": [1540],
-            "state": [32]
+            "state": [32],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -4512,8 +4531,8 @@ class KolAccordion {
     }; }
 }
 
-const defaultStyleCss$L = "@layer kol-global {\n  .sc-kol-alert-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-alert-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-alert-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-alert-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .sc-kol-alert-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}";
-var KolAlertDefaultStyle0 = defaultStyleCss$L;
+const defaultStyleCss$M = "@layer kol-global {\n  .sc-kol-alert-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-alert-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-alert-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-alert-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .sc-kol-alert-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}";
+var KolAlertDefaultStyle0 = defaultStyleCss$M;
 
 class KolAlert {
     constructor(hostRef) {
@@ -4850,8 +4869,8 @@ class KolAlertWc {
     }; }
 }
 
-const defaultStyleCss$K = "@layer kol-global {\n  .sc-kol-avatar-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-avatar-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-avatar-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-avatar-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .sc-kol-avatar-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    \n    outline: transparent solid 1px;\n    \n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    background: #d3d3d3;\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n}";
-var KolAvatarDefaultStyle0 = defaultStyleCss$K;
+const defaultStyleCss$L = "@layer kol-global {\n  .sc-kol-avatar-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-avatar-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-avatar-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-avatar-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .sc-kol-avatar-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    \n    outline: transparent solid 1px;\n    \n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    background: #d3d3d3;\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var KolAvatarDefaultStyle0 = defaultStyleCss$L;
 
 class KolAvatar {
     constructor(hostRef) {
@@ -4937,8 +4956,8 @@ class KolAvatarWc {
     }; }
 }
 
-const defaultStyleCss$J = "@layer kol-global {\n  .sc-kol-badge-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-badge-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-badge-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  \n  .sc-kol-badge-default-h > span {\n    display: inline-flex;\n    place-items: center;\n    \n    outline: transparent solid 1px;\n  }\n  .sc-kol-badge-default-h > span > .kol-button-wc button {\n    color: inherit;\n  }\n}";
-var KolBadgeDefaultStyle0 = defaultStyleCss$J;
+const defaultStyleCss$K = "@layer kol-global {\n  .sc-kol-badge-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-badge-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-badge-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  \n  .sc-kol-badge-default-h > span {\n    display: inline-flex;\n    place-items: center;\n    \n    outline: transparent solid 1px;\n  }\n  .sc-kol-badge-default-h > span > .kol-button-wc button {\n    color: inherit;\n  }\n}";
+var KolBadgeDefaultStyle0 = defaultStyleCss$K;
 
 featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
 class KolBadge {
@@ -5038,8 +5057,8 @@ const watchNavLinks = (className, component, value) => {
     uiUxHintMillerscheZahl(className, component.state._links.length);
 };
 
-const defaultStyleCss$I = "@layer kol-global {\n  .sc-kol-breadcrumb-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-breadcrumb-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-breadcrumb-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-breadcrumb-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}";
-var KolBreadcrumbDefaultStyle0 = defaultStyleCss$I;
+const defaultStyleCss$J = "@layer kol-global {\n  .sc-kol-breadcrumb-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-breadcrumb-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-breadcrumb-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-breadcrumb-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}";
+var KolBreadcrumbDefaultStyle0 = defaultStyleCss$J;
 
 class KolBreadcrumb {
     constructor(hostRef) {
@@ -5099,14 +5118,14 @@ class KolBreadcrumb {
     }; }
 }
 
-const defaultStyleCss$H = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-button-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-button-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-button-default-h {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    \n    content: \"​\";\n  }\n  \n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}";
-var KolButtonDefaultStyle0 = defaultStyleCss$H;
+const defaultStyleCss$I = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-button-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-button-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-button-default-h {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    \n    content: \"​\";\n  }\n  \n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}";
+var KolButtonDefaultStyle0 = defaultStyleCss$I;
 
 class KolButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            propagateFocus(this.host, ref);
+            this.buttonWcRef = ref;
         };
         this._accessKey = undefined;
         this._ariaControls = undefined;
@@ -5131,14 +5150,20 @@ class KolButton {
     async getValue() {
         return this._value;
     }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
+    }
     render() {
-        return (hAsync(Host, { key: 'f25b58d924abdc5215b2ec354a57427bed43b001', class: "kol-button" }, hAsync(KolButtonWcTag, { key: 'e9afcf44b454f0a2c22bc1346fe583f697621efb', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '313cc4012293660ff51ed3c3791403b946cea107', class: "kol-button" }, hAsync(KolButtonWcTag, { key: '119bee20af9e0a5b486f491d73678b5f66b7b7b3', 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, _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, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '5b515b5587a2c125450f6b11952ab776bbc41a62', name: "expert", slot: "expert" }))));
+            }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _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, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: 'e2ddd86fb86f7abb60f5501c593cd18eaf1f8177', name: "expert", slot: "expert" }))));
     }
-    get host() { return getElement(this); }
     static get style() { return {
         default: KolButtonDefaultStyle0
     }; }
@@ -5165,7 +5190,9 @@ class KolButton {
             "_type": [1],
             "_value": [8],
             "_variant": [1],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -5173,8 +5200,8 @@ class KolButton {
     }; }
 }
 
-const defaultStyleCss$G = "@layer kol-global {\n  .sc-kol-button-group-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-group-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-button-group-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-button-group-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .sc-kol-button-group-default-h > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}";
-var KolButtonGroupDefaultStyle0 = defaultStyleCss$G;
+const defaultStyleCss$H = "@layer kol-global {\n  .sc-kol-button-group-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-group-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-button-group-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-button-group-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .sc-kol-button-group-default-h > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}";
+var KolButtonGroupDefaultStyle0 = defaultStyleCss$H;
 
 class KolButtonGroup {
     constructor(hostRef) {
@@ -5216,14 +5243,14 @@ class KolButtonGroupWc {
     }; }
 }
 
-const defaultStyleCss$F = "@layer kol-global {\n  .sc-kol-button-link-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-link-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-button-link-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-button-link-default-h {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(a, button) {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  :is(a, button) .kol-span-wc .span-label {\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background-color: #fff;\n    left: unset;\n    padding: 1em;\n    position: unset;\n  }\n  .kol-icon.external-link-icon {\n    display: inline-flex;\n  }\n}";
-var KolButtonLinkDefaultStyle0 = defaultStyleCss$F;
+const defaultStyleCss$G = "@layer kol-global {\n  .sc-kol-button-link-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-link-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-button-link-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-button-link-default-h {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(a, button) {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  :is(a, button) .kol-span-wc .span-label {\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background-color: #fff;\n    left: unset;\n    padding: 1em;\n    position: unset;\n  }\n  .kol-icon.external-link-icon {\n    display: inline-flex;\n  }\n}";
+var KolButtonLinkDefaultStyle0 = defaultStyleCss$G;
 
 class KolButtonLink {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            propagateFocus(this.host, ref);
+            this.buttonWcRef = ref;
         };
         this._accessKey = undefined;
         this._ariaControls = undefined;
@@ -5246,10 +5273,16 @@ class KolButtonLink {
     async getValue() {
         return this._value;
     }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
+    }
     render() {
-        return (hAsync(Host, { key: 'bcca14709dca36d36884f1bda80d249ef151cf03', class: "kol-button-link" }, hAsync(KolButtonWcTag, { key: '1601a8be9c9c8c85cb776f95aa3981ccc388d978', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: 'dd476ba7cf6a6d3b08553cc7490ee51d4f08fff0', name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: '925b960759838064aebb5519d338b0833f4c9b24', class: "kol-button-link" }, hAsync(KolButtonWcTag, { key: '2eb980bbb032ad55772f90bdfba9f94d2f8d1b73', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: '52a25c7c8be71f8286313851b3ecdaa404814557', name: "expert", slot: "expert" }))));
     }
-    get host() { return getElement(this); }
     static get style() { return {
         default: KolButtonLinkDefaultStyle0
     }; }
@@ -5274,7 +5307,9 @@ class KolButtonLink {
             "_tooltipAlign": [1, "_tooltip-align"],
             "_type": [1],
             "_value": [8],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -5379,6 +5414,7 @@ const propagateSubmitEventToForm = (options = {}) => {
 };
 
 const isAssociatedTagName = (name) => name === 'KOL-BUTTON' ||
+    name === 'KOL-COMBOBOX' ||
     name === 'KOL-INPUT-CHECKBOX' ||
     name === 'KOL-INPUT-COLOR' ||
     name === 'KOL-INPUT-DATE' ||
@@ -5529,7 +5565,7 @@ class AssociatedInputController {
             },
         });
         if (typeof value === 'undefined') {
-            devHint(`Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.`);
+            devHint(`A name on input fields or switches is not strictly required, but it might be relevant for the autocomplete function and for the static submission of the input field.`);
         }
     }
     validateSyncValueBySelector(value) {
@@ -5547,34 +5583,37 @@ class AssociatedInputController {
 }
 
 class KolButtonWc {
+    async kolFocus() {
+        var _a;
+        (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'c0d16e55ccda6586451460ed73035afc5094a20c', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '6ee3c6aa4c7eb2870b69369ae303b344f9243615', ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: {
+        return (hAsync(Host, { key: '72f9865e9a27e0f31ff94af66f69ab31adc22dd9', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '88b2d8ed077934acfb1707a7e0c71fc9af4789e1', ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: {
                 button: true,
                 disabled: this.state._disabled === true,
                 [this.state._variant]: this.state._variant !== 'custom',
                 [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
                 'hide-label': this.state._hideLabel === true,
-            }, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync(KolSpanWcTag, { key: '89e898b52482ab8f2b991ee630d3c01eba2c5673', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'c7f11890216223942c6adea500e5904409877564', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '31d7ab91f54a8046442ffdb435f55cb4681d1b32', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
+            }, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync(KolSpanWcTag, { key: '425a6e12a5197db406790410cf382bdf6f3df274', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'a70bb86e9824393e81aaddd59fa1fe6f0ef180e3', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '6f8bc766511dd57a8b9189b1b083e12f43262a32', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.buttonRef = ref;
         };
         this.onClick = (event) => {
             var _a, _b;
             if (this.state._type === 'submit') {
                 propagateSubmitEventToForm({
                     form: this.host,
-                    ref: this.ref,
+                    ref: this.buttonRef,
                 });
             }
             else if (this.state._type === 'reset') {
                 propagateResetEventToForm({
                     form: this.host,
-                    ref: this.ref,
+                    ref: this.buttonRef,
                 });
             }
             else {
@@ -5582,7 +5621,7 @@ class KolButtonWc {
                 tryToDispatchKoliBriEvent('click', this.host, this.state._value);
                 this.controller.setFormAssociatedValue(this.state._value);
                 if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
-                    setEventTarget(event, this.ref);
+                    setEventTarget(event, this.buttonRef);
                     (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onClick(event, this.state._value);
                 }
             }
@@ -5741,7 +5780,8 @@ class KolButtonWc {
             "_type": [1],
             "_value": [8],
             "_variant": [1],
-            "state": [32]
+            "state": [32],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -5749,8 +5789,8 @@ class KolButtonWc {
     }; }
 }
 
-const defaultStyleCss$E = "@layer kol-global {\n  .sc-kol-card-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-card-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-card-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-card-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .sc-kol-card-default-h > div.card {\n    height: 100%;\n    position: relative;\n    \n    outline: transparent solid 1px;\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}";
-var KolCardDefaultStyle0 = defaultStyleCss$E;
+const defaultStyleCss$F = "@layer kol-global {\n  .sc-kol-card-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-card-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-card-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-card-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .sc-kol-card-default-h > div.card {\n    height: 100%;\n    position: relative;\n    \n    outline: transparent solid 1px;\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}";
+var KolCardDefaultStyle0 = defaultStyleCss$F;
 
 class KolCard {
     constructor(hostRef) {
@@ -5876,12 +5916,10 @@ class InputController extends ControlledInputController {
         validateTooltipAlign(this.component, value);
     }
     validateError(value) {
-        const message = value
-            ? {
-                _description: value,
-                _type: 'error',
-            }
-            : undefined;
+        const message = {
+            _description: value || '',
+            _type: 'error',
+        };
         this.validateMsg(message);
     }
     validateHideError(value) {
@@ -5919,7 +5957,7 @@ class InputController extends ControlledInputController {
             minLength: 1,
         });
         if (value === '' || typeof value === 'undefined') {
-            devHint(`Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.`);
+            devHint(`A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.`);
         }
     }
     validateLabel(value) {
@@ -6121,20 +6159,27 @@ const getRenderStates = (state) => {
     return { hasError, hasHint, ariaDescribedBy };
 };
 
-const defaultStyleCss$D = "@layer kol-global {\n  .sc-kol-combobox-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-combobox-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-combobox-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-combobox-default-h {\n    display: block;\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  \n  \n  \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  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \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-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-combobox-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox.disabled, .combobox.disabled * {\n    cursor: not-allowed !important;\n  }\n  .combobox.disabled {\n    opacity: 0.5;\n    outline: none;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .combobox__input {\n    flex-grow: 1;\n  }\n  .combobox__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}";
-var KolComboboxDefaultStyle0 = defaultStyleCss$D;
+const defaultStyleCss$E = "@layer kol-global {\n  .sc-kol-combobox-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-combobox-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-combobox-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-combobox-default-h {\n    display: block;\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  \n  \n  \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  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \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-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-combobox-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox.disabled, .combobox.disabled * {\n    cursor: not-allowed !important;\n  }\n  .combobox.disabled {\n    opacity: 0.5;\n    outline: none;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .combobox__input {\n    flex-grow: 1;\n  }\n  .combobox__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}";
+var KolComboboxDefaultStyle0 = defaultStyleCss$E;
 
 class KolCombobox {
     async getValue() {
-        return this._value;
+        return this.state._value;
     }
-    selectOption(option) {
+    selectOption(event, option) {
+        var _a;
+        this.controller.onFacade.onInput(event, true, option);
+        this.controller.onFacade.onChange(event, option);
+        this.controller.setFormAssociatedValue(option);
         this.state._value = option;
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus();
     }
     onInput(event) {
         const target = event.target;
-        this._value = target.value;
+        this.state._value = target.value;
+        this.controller.onFacade.onInput(event);
         this.setFilteredSuggestionsByQuery(target.value);
+        this._focusedOptionIndex = -1;
     }
     handleKeyDownDropdown(event) {
         if (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {
@@ -6164,14 +6209,13 @@ class KolCombobox {
         if (newIndex < 0) {
             newIndex = this._filteredSuggestions.length - 1;
         }
-        this._focusedOptionIndex = newIndex;
-        this.focusOption(this._focusedOptionIndex);
+        this.focusOption(newIndex);
     }
     focusOption(index) {
+        this._focusedOptionIndex = index;
         if (this.refSuggestions) {
             const optionElement = this.refSuggestions[index];
             optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
-            this._value = optionElement.textContent || '';
         }
     }
     focusSuggestionStartingWith(char) {
@@ -6180,33 +6224,41 @@ class KolCombobox {
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.findIndex((option) => option.toLowerCase().startsWith(charLowerCase));
         if (typeof index === 'number') {
-            this._focusedOptionIndex = index;
             this.focusOption(index);
         }
     }
     render() {
         const hasExpertSlot = showExpertSlot(this.state._label);
         const { ariaDescribedBy } = getRenderStates(this.state);
-        return (hAsync(Host, { key: '704090cd2a268049146c3beb049a6b7c31f20489', class: "kol-combobox" }, hAsync("div", { key: '274df37ac0efd60063add6442119417815237090', class: `combobox ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputWcTag, { key: 'a208f04cd5a3b8a77b3fef2cde01b6ee60c787d9', _accessKey: this.state._accessKey, _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, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '2fe387ffa8d894ecd48e86d3477f3ad0bc5ca8c2', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '52c6eb36e536839e87bce8f2142ecaa99a878619', slot: "input" }, hAsync("div", { key: '40ad24ed304eda6677585902534fc3ffc9a5a6b9', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'c98bee5037381d8fcc85f5f5b2c2f2baa3edf7ee', class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onClick: this.toggleListbox.bind(this), onChange: this.onChange.bind(this), placeholder: this.state._placeholder })), hAsync("span", { key: '0dea84633da8b79af3e5edd65987a57a99ec15d4', class: { combobox__icon: true } }, hAsync(KolIconTag, { key: 'ed839aa136a761c491aef51e8c8ab4770d922824', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown'), onClick: this.toggleListbox.bind(this) }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '7fae643dfa418239be55b2b2f754ce4de38e0cdb', role: "listbox", "aria-label": "", class: { combobox__listbox: true }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
+        return (hAsync(Host, { key: '3b6ed7846711e0f090b07b9c8d974c27e3015d6d', class: "kol-combobox" }, hAsync("div", { key: '6ded0f747452a8c066fee27194719456ab134fd6', class: `combobox ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputWcTag, { key: 'cca6b8e1a21ac3192b42dad594b23268a79b51b7', _accessKey: this.state._accessKey, _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, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '5a58f8567fb84998545b011a2f9683705a26f946', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '6531318b53534dbc7914030aab7bea88cb604fae', slot: "input" }, hAsync("div", { key: '3107f4cf1267d5184f03a9e8c085c885d086c42e', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'ebe2e9259edd9aa94e155c4e31e99163ac5f7b5d', ref: this.catchRef, class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onClick: this.toggleListbox.bind(this), onChange: this.onChange.bind(this), placeholder: this.state._placeholder })), hAsync("span", { key: 'd5e96698996de3a055e52ca678264df8383eb46e', class: { combobox__icon: true } }, hAsync(KolIconTag, { key: 'a505c414eeb12d3cd90d8533231cd76c5006e142', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown'), onClick: this.toggleListbox.bind(this) }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '4ef259e659641ac8bd0d0ae93cd1b1e1743383aa', role: "listbox", "aria-label": "", class: { combobox__listbox: true }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
                     if (el)
                         this.refSuggestions[index] = el;
-                }, "data-index": index, tabIndex: 0, role: "option", "aria-selected": this.state._value === option, onClick: () => {
-                    this.selectOption(option);
+                }, "data-index": index, tabIndex: 0, role: "option", "aria-selected": this.state._value === option, onClick: (e) => {
+                    this.selectOption(e, option);
                     this.toggleListbox();
+                }, onMouseOver: () => {
+                    this.focusOption(index);
+                }, onFocus: () => {
+                    this.focusOption(index);
                 }, class: "combobox__item", onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === 'NumpadEnter') {
-                        this.selectOption(option);
+                        this.selectOption(e, option);
+                        this.toggleListbox();
                         e.preventDefault();
                     }
                 } }, option))))))))));
     }
     handleKeyDown(event) {
         const handleEvent = (isOpen, callback) => {
+            var _a;
             event.preventDefault();
             if (isOpen !== undefined) {
                 this._isOpen = isOpen;
+                if (!isOpen) {
+                    (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus();
+                }
             }
             callback === null || callback === void 0 ? void 0 : callback();
         };
@@ -6234,8 +6286,7 @@ class KolCombobox {
             case 'Home': {
                 handleEvent(undefined, () => {
                     if (this._isOpen) {
-                        this._focusedOptionIndex = 0;
-                        this.focusOption(this._focusedOptionIndex);
+                        this.focusOption(0);
                     }
                 });
                 break;
@@ -6243,18 +6294,17 @@ class KolCombobox {
             case 'End': {
                 handleEvent(undefined, () => {
                     if (this._isOpen) {
-                        this._focusedOptionIndex = this._filteredSuggestions ? this._filteredSuggestions.length - 1 : 0;
-                        this.focusOption(this._focusedOptionIndex);
+                        this.focusOption(this._filteredSuggestions ? this._filteredSuggestions.length - 1 : 0);
                     }
                 });
                 break;
             }
             case 'PageUp': {
-                handleEvent(undefined, () => this._isOpen && this.moveFocus(10));
+                handleEvent(undefined, () => this._isOpen && this.moveFocus(-10));
                 break;
             }
             case 'PageDown': {
-                handleEvent(undefined, () => this._isOpen && this.moveFocus(-10));
+                handleEvent(undefined, () => this._isOpen && this.moveFocus(10));
                 break;
             }
         }
@@ -6267,6 +6317,7 @@ class KolCombobox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.refSuggestions = [];
+        this._focusedOptionIndex = -1;
         this.toggleListbox = () => {
             if (this.state._disabled === true) {
                 this._isOpen = false;
@@ -6274,13 +6325,16 @@ class KolCombobox {
             else {
                 this._isOpen = !this._isOpen;
                 if (this._isOpen && Array.isArray(this._filteredSuggestions) && this._filteredSuggestions.length > 0) {
-                    const selectedIndex = this._filteredSuggestions.findIndex((option) => option === this._value);
+                    const selectedIndex = this._filteredSuggestions.findIndex((option) => option === this.state._value);
                     this._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;
                     this.focusOption(this._focusedOptionIndex);
                 }
             }
         };
-        this._focusedOptionIndex = -1;
+        this.catchRef = (ref) => {
+            this.ref = ref;
+            propagateFocus(this.host, this.ref);
+        };
         this._isOpen = false;
         this._filteredSuggestions = undefined;
         this._accessKey = undefined;
@@ -6370,6 +6424,7 @@ class KolCombobox {
     }
     validateValue(value) {
         this.controller.validateValue(value);
+        this.controller.setFormAssociatedValue(value);
     }
     componentWillLoad() {
         this.refSuggestions = [];
@@ -6385,7 +6440,7 @@ class KolCombobox {
         stopPropagation(event);
         tryToDispatchKoliBriEvent('change', this.host, this._value);
         this.controller.setFormAssociatedValue(this._value);
-        if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
+        if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function' && !this._isOpen) {
             this.state._on.onChange(event, this._value);
         }
     }
@@ -6515,8 +6570,8 @@ class DetailsAnimationController {
     }
 }
 
-const defaultStyleCss$C = "@layer kol-global {\n  .sc-kol-details-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-details-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-details-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-details-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .sc-kol-details-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  details {\n    display: grid;\n  }\n  details > summary {\n    cursor: pointer;\n    display: flex;\n    place-items: center;\n  }\n  details > summary > span {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  details > summary:focus > span,\n  details > summary:hover > span,\n  details[open] > summary > span {\n    border-bottom-color: #000;\n  }\n  .content {\n    overflow: hidden;\n  }\n  details > .kol-indented-text {\n    margin: 0.25em 0 0 0.5em;\n  }\n  .icon.is-open::part(icon) {\n    transform: rotate(90deg);\n  }\n}";
-var KolDetailsDefaultStyle0 = defaultStyleCss$C;
+const defaultStyleCss$D = "@layer kol-global {\n  .sc-kol-details-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-details-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-details-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-details-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .sc-kol-details-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  details {\n    display: grid;\n  }\n  details > summary {\n    cursor: pointer;\n    display: flex;\n    place-items: center;\n  }\n  details > summary > span {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  details > summary:focus > span,\n  details > summary:hover > span,\n  details[open] > summary > span {\n    border-bottom-color: #000;\n  }\n  .content {\n    overflow: hidden;\n  }\n  details > .kol-indented-text {\n    margin: 0.25em 0 0 0.5em;\n  }\n  .icon.is-open::part(icon) {\n    transform: rotate(90deg);\n  }\n}";
+var KolDetailsDefaultStyle0 = defaultStyleCss$D;
 
 class KolDetails {
     constructor(hostRef) {
@@ -6526,7 +6581,6 @@ class KolDetails {
         };
         this.catchSummary = (ref) => {
             this.summaryElement = ref;
-            propagateFocus(this.host, this.summaryElement);
         };
         this.preventToggleIfDisabled = (event) => {
             if (this.state._disabled === true) {
@@ -6556,11 +6610,18 @@ class KolDetails {
             _on: {},
         };
     }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.summaryElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
-        return (hAsync(Host, { key: '4ad8208280a549ec10c547b20ddb003e04e68f01', class: "kol-details" }, hAsync("details", { key: '229ce17a1772bed26309a249a4326152edbe4e6e', ref: this.catchDetails, class: {
+        return (hAsync(Host, { key: 'c81f22ea30774221c48f71dba31670c1a227ff05', class: "kol-details" }, hAsync("details", { key: '1f638cd9c47d989195b15708096a9c2652a3b97a', ref: this.catchDetails, class: {
                 disabled: this.state._disabled === true,
                 open: this.state._open === true,
-            }, onToggle: this.handleToggle }, hAsync("summary", { key: '727bb07a088a3138ff4fc29ee6fe43bcf9543379', ref: this.catchSummary, "aria-disabled": this.state._disabled ? 'true' : undefined, onClick: this.preventToggleIfDisabled, onKeyPress: this.preventToggleIfDisabled, tabIndex: this.state._disabled ? -1 : undefined }, hAsync(KolIconTag, { key: '5ecf957e42408222a4fbd78c2a9974c6c6880bc9', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: '2efa00fd37325648edd0c430db88a1d6f73d270c' }, this.state._label)), hAsync("div", { key: '1d527e8caeb3c9458ecde81c4c779c505ed19dc4', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync(KolIndentedTextTag, { key: '6f57d85524db46b0a381e535b7e280ca92483ce7' }, hAsync("slot", { key: '518dd2d74ae80a0de06efcbd1097aa8e72de5db1' }))))));
+            }, onToggle: this.handleToggle }, hAsync("summary", { key: 'b78004a89667175bf308f0a239780c15b39d313c', ref: this.catchSummary, "aria-disabled": this.state._disabled ? 'true' : undefined, onClick: this.preventToggleIfDisabled, onKeyPress: this.preventToggleIfDisabled, tabIndex: this.state._disabled ? -1 : undefined }, hAsync(KolIconTag, { key: '69310b844d6f1b5feba60fc77aec6b4b3ba3ed3f', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: 'b2cfadced810939b201c79a31051a854a276375a' }, this.state._label)), hAsync("div", { key: '3f237b2a06e1f72f11879d3d96c3557efb14810c', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync(KolIndentedTextTag, { key: '85386e4ed2bd9566df2c2cbea897fc67985b0d3f' }, hAsync("slot", { key: '06ae87dccb0fcc5833d28d56887a7f5eefb82211' }))))));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -6610,7 +6671,9 @@ class KolDetails {
             "_label": [1],
             "_on": [16],
             "_open": [1540],
-            "state": [32]
+            "state": [32],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -6618,6 +6681,138 @@ class KolDetails {
     }; }
 }
 
+const defaultStyleCss$C = "@layer kol-global {\n  .sc-kol-drawer-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-drawer-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-drawer-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .drawer__wrapper {\n    position: fixed;\n    width: auto;\n    overflow: auto;\n    background: white;\n  }\n  .drawer__wrapper--left {\n    top: 0;\n    left: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--right {\n    top: 0;\n    right: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--top {\n    left: 0;\n    top: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__wrapper--bottom {\n    left: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var KolDrawerDefaultStyle0 = defaultStyleCss$C;
+
+class KolDrawer {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.getWrapperRef = (el) => (this.dialogWrapperElement = el);
+        this.getRef = (el) => (this.dialogElement = el);
+        this._open = undefined;
+        this._align = undefined;
+        this._label = undefined;
+        this._modal = undefined;
+        this._on = undefined;
+        this.state = {
+            _label: '',
+            _open: false,
+            _align: 'left',
+        };
+    }
+    async open() {
+        var _a, _b;
+        this.state = Object.assign(Object.assign({}, this.state), { _open: true });
+        if (this.state._modal) {
+            (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
+        }
+        else {
+            (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.show();
+        }
+    }
+    async close() {
+        this.state = Object.assign(Object.assign({}, this.state), { _open: false });
+        const wrapper = this.dialogWrapperElement;
+        if (!wrapper)
+            return;
+        const computedStyle = window.getComputedStyle(wrapper);
+        if (computedStyle.animationName === 'none') {
+            this.handleCloseDialog();
+        }
+    }
+    renderDialogContent() {
+        const align = this.state._align;
+        return (hAsync("div", { ref: this.getWrapperRef, class: `drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`, "aria-label": this.state._label }, hAsync("div", { class: "drawer__content" }, hAsync("slot", null))));
+    }
+    render() {
+        const isModal = this.state._modal;
+        return (hAsync(Host, { key: '002834bc0b77fb80001f8a7c5b565b9e45c8de03', class: `kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: '5d27b28c355b4eb6ab1c3e3d21f4c3a6746a7fbf', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
+    }
+    validateLabel(value) {
+        validateLabel(this, value, {
+            required: true,
+        });
+    }
+    validateAlign(value) {
+        validateAlign(this, value);
+    }
+    validateModal(value) {
+        validateModal(this, value);
+    }
+    async validateOpen(value) {
+        if (typeof value === 'boolean') {
+            validateOpen(this, value);
+            value ? await this.open() : await this.close();
+        }
+    }
+    validateOn(value) {
+        if (typeof value === 'object' && value !== null) {
+            const callbacks = {};
+            if (typeof value.onClose === 'function') {
+                callbacks.onClose = value.onClose;
+            }
+            setState(this, '_on', callbacks);
+        }
+    }
+    handleCloseDialog() {
+        var _a, _b, _c;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close();
+        (_c = (_b = this._on) === null || _b === void 0 ? void 0 : _b.onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
+    }
+    handleClose() {
+    }
+    handleAnimationEnd(e) {
+        const animationEvent = e;
+        if (animationEvent.animationName.includes('slideOut')) {
+            this.handleCloseDialog();
+        }
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.addEventListener('animationend', this.handleAnimationEnd.bind(this));
+        (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.addEventListener('close', this.handleClose.bind(this));
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('animationend', this.handleAnimationEnd.bind(this));
+        (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('close', this.handleClose.bind(this));
+    }
+    async componentWillLoad() {
+        this.validateLabel(this._label);
+        await this.validateOpen(this._open);
+        this.validateAlign(this._align);
+        this.validateModal(this._modal);
+        this.validateOn(this._on);
+    }
+    static get watchers() { return {
+        "_label": ["validateLabel"],
+        "_align": ["validateAlign"],
+        "_modal": ["validateModal"],
+        "_open": ["validateOpen"],
+        "_on": ["validateOn"]
+    }; }
+    static get style() { return {
+        default: KolDrawerDefaultStyle0
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 41,
+        "$tagName$": "kol-drawer",
+        "$members$": {
+            "_open": [4],
+            "_align": [1],
+            "_label": [1],
+            "_modal": [4],
+            "_on": [16],
+            "state": [32],
+            "open": [64],
+            "close": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 class KolForm {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -6655,10 +6850,10 @@ class KolForm {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, { key: 'c2f978944c0da89b0c1f721e48e62c20897c6e84', class: "kol-form" }, this._errorList && this._errorList.length > 0 && (hAsync(KolAlertTag, { key: '89cc664c87a2aa777ff084d447f16cebf36d33ae', _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { key: '1720c956e40dd31ebbc4e97aef78f8e1f8c204ae', "aria-label": translate('kol-error-list') }, hAsync("ul", { key: 'f99ca1869fdc217c7ebca978c2f92bf1467e19a7' }, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkTag, { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
+        return (hAsync(Host, { key: '005270f9d4c739b5f2b399546d91dc8559bb45db', class: "kol-form" }, this._errorList && this._errorList.length > 0 && (hAsync(KolAlertTag, { key: '7acdf57b3f0954ee26df575334f7521d1898a597', _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { key: 'f16799bcbb7f60baec798674acb9f38c28424ce0', "aria-label": translate('kol-error-list') }, hAsync("ul", { key: '8c86a5fa750031073142d383d1806bcae7a9eec6' }, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkTag, { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
                 if (index === 0)
                     this.errorListElement = el;
-            } })))))))), hAsync("form", { key: '9076849c5f027e66ca37da072ac15271b19ae464', method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, this.state._requiredText))) : null, hAsync("slot", { key: 'c94ae6cfb941c2a73196cb77361fb74bcaff9d0f' }))));
+            } })))))))), hAsync("form", { key: 'a626ea1dc80b465abfc4153b4c2217a462e3faf0', method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, this.state._requiredText))) : null, hAsync("slot", { key: '05b129e368edc5151a8e3b19bc696b749be3db2a' }))));
     }
     async focusErrorList() {
         setTimeout(() => {
@@ -6723,7 +6918,7 @@ class KolHeading {
         this._variant = undefined;
     }
     render() {
-        return (hAsync(KolHeadingWcTag, { key: 'd18d1a32f3a8872e62fe7d6c7d9743679bf013ad', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant, class: "kol-heading" }, hAsync("slot", { key: '33dbca9444ebac88573e83027076aca06a2bcfd4', name: "expert", slot: "expert" })));
+        return (hAsync(KolHeadingWcTag, { key: '6ad0f63801b30d55ce6a1c5c5bafc2c9ec623752', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant, class: "kol-heading" }, hAsync("slot", { key: '38aed341a23661c627cd84fa0f16f3d424541713', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolHeadingDefaultStyle0
@@ -6801,7 +6996,7 @@ class KolHeadingWc {
         this.validateVariant(this._variant);
     }
     render() {
-        return (hAsync(Host, { key: '0486dd8c673554b08b07640dace2e2a63d5e8d7a', class: "kol-heading-wc" }, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
+        return (hAsync(Host, { key: '16152887a63517d019bee1e1aa4669c32a581a37', class: "kol-heading-wc" }, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -6840,7 +7035,7 @@ class KolIcon {
     }
     render() {
         const ariaShow = this.state._label.length > 0;
-        return (hAsync(Host, { key: '6f3cb974496a4f84a7e5c0712af1df89e8d09ced', exportparts: "icon", class: "kol-icon" }, hAsync("i", { key: '988ccb3b3521fedb0c39d141cb3e1865b5cfc603', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
+        return (hAsync(Host, { key: '3083ab3b7dfac62823b415deed2a943624e3d3d7', exportparts: "icon", class: "kol-icon" }, hAsync("i", { key: '197b0e98fa4672a91bd6f7e8836c99b26c62eeaf', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
     }
     validateIcons(value) {
         watchString(this, '_icons', value, {
@@ -6921,7 +7116,7 @@ class KolImage {
         this.validateSrcset(this._srcset);
     }
     render() {
-        return (hAsync(Host, { key: '976da0c35e4cfec6f956185740885cee765fc2d5', class: "kol-image" }, hAsync("img", { key: 'd9aab0d1ff56a0a63acd16d130a9703fd2fb2d2e', alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset })));
+        return (hAsync(Host, { key: 'eea8ad6a0b03687005b477fec030de58aa049891', class: "kol-image" }, hAsync("img", { key: 'd00475bd0c8df6a965ae402879910a430231b4a1', alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset })));
     }
     static get watchers() { return {
         "_alt": ["validateAlt"],
@@ -6959,7 +7154,7 @@ class KolIndentedText {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, { key: '6097077f44baffeaab91669a12c8e3897f83e46a', class: "kol-indented-text-wc" }, hAsync("div", { key: 'b534e57df62b8714e6bed627268ce784a67490f8' }, hAsync("slot", { key: '99d0151973c297b5f23acfb2217b4c41b58327b6' }))));
+        return (hAsync(Host, { key: '674c96016710a7da20d2818387457838785b3356', class: "kol-indented-text-wc" }, hAsync("div", { key: 'b8f4bc81340ef597d42df3ab5e997a4eacb12267' }, hAsync("slot", { key: '29084aadeed639db76fed6a9a3bdf46facf5ef52' }))));
     }
     static get style() { return {
         default: KolIndentedTextDefaultStyle0
@@ -7108,21 +7303,28 @@ class KolInputCheckbox {
     async getValue() {
         return this.getModelValue();
     }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'aed716bac17c685fbd79f290fdcc3868b9784dca', class: "kol-input-checkbox" }, hAsync(KolInputWcTag, { key: 'f88257815bcfa3753fb1402fbc15bc49d1804c15', class: {
+        return (hAsync(Host, { key: 'dc370837af55af47703a694a130c8741c33486cb', class: "kol-input-checkbox" }, hAsync(KolInputWcTag, { key: '3ca714b19dac1f42d3e64c8476b128b972cfdca1', class: {
                 checkbox: true,
                 [this.state._variant]: true,
                 'hide-label': !!this.state._hideLabel,
                 checked: this.state._checked,
                 indeterminate: this.state._indeterminate,
-            }, "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'c008345d6def4c27b8b406e11c971541d9984da6', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: '2d063454eb5b6aa66120d1ad823a35d7c5fb0d42', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: 'a615d25cce7fddf080c5c791999e8ecf427ed988', class: "icon", _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ key: '9dce2ac8d1c015eacfad3b643e92449bd7fdfd96', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onInput: this.onInput, onChange: this.onChange, onClick: undefined }))))));
+            }, "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '2bff685d8c0317cacc948f0c805fef10fb653636', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: '635658a3307d58a6070e1111897b8f0b283edb89', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '860eaaaa13aadbb5611270163afebe8cbb2a6781', class: "icon", _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ key: 'a5490285924abde52bfb7270b05d0cff4e4cbcbd', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onInput: this.onInput, onChange: this.onChange, onClick: undefined }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            propagateFocus(this.host, ref);
+            this.inputRef = ref;
         };
         this.onInput = (event) => {
             var _a;
@@ -7303,7 +7505,9 @@ class KolInputCheckbox {
             "_value": [8],
             "_variant": [1],
             "state": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7340,22 +7544,28 @@ var KolInputColorDefaultStyle0 = defaultStyleCss$w;
 class KolInputColor {
     async getValue() {
         var _a;
-        return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+        return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '236a1b5e4ec18f10272356ddb6167cb816cec96d', class: "kol-input-color" }, hAsync(KolInputWcTag, { key: 'bcca91780753ead2f2bfb342c88ef7d40cbc21df', class: {
+        return (hAsync(Host, { key: '0601ac4b0fdf10104660b9aa870d2d5a37eb4736', class: "kol-input-color" }, hAsync(KolInputWcTag, { key: 'd3978aa4d5259d0a038eb447125dcc0ed0ce36a6', class: {
                 color: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'f4250f502019fdadef6ca4f41a7793d96ba538c7', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '2b11ba5a7d60071b15d8755212da09c1492bec70', slot: "input" }, hAsync("input", Object.assign({ key: '526740f4519d785ca3b6e69f37c2580127e06c45', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '3cbb005bec96cc06d5585f1003132876742cac8d', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '846984d2e32be62a683f385f9a1bece68c5433a9', slot: "input" }, hAsync("input", Object.assign({ key: 'd104710211564ef526169b0e8759f72fc7c3bec5', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.inputRef = ref;
         };
         this._accessKey = undefined;
         this._alert = true;
@@ -7504,7 +7714,9 @@ class KolInputColor {
             "_touched": [1540],
             "_value": [1],
             "state": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7652,28 +7864,34 @@ var KolInputDateDefaultStyle0 = defaultStyleCss$v;
 class KolInputDate {
     async getValue() {
         var _a;
-        return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+        return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '56751cc0874f2b8e390e8cd70bd99423167c6128', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: '3ad1ef63b44e0a401e57c701301d3dc913784543', class: {
+        return (hAsync(Host, { key: 'daab68fe9c408f419920ae17ceacbf4736e664f6', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: '91d0b22db597525310d4005382b6f38230dcf6cf', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'c9bd40209ea14ce71ffbdde3dda11a1a53c36c22', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'e3e8137926507497293f47faea700c0265908f27', slot: "input" }, hAsync("input", Object.assign({ key: '0e25f89ffcffe7e47303c9fe72914090003bd02c', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '20cd23c9007a82222dac1cb1bae9e145c296776a', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '13ac81690d7da38f475c2b168127787971753355', slot: "input" }, hAsync("input", Object.assign({ key: '8712bdce4139bb032ee75e199a1a27327602bd88', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.inputRef = ref;
         };
         this.onKeyDown = (event) => {
             if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 propagateSubmitEventToForm({
                     form: this.host,
-                    ref: this.ref,
+                    ref: this.inputRef,
                 });
             }
         };
@@ -7795,8 +8013,8 @@ class KolInputDate {
             deprecatedHint('Date type will be removed in v3. Use `Iso8601` instead.');
         }
         this.controller.validateValueEx(value, (v) => {
-            if (v === '' && this.ref) {
-                this.ref.value = '';
+            if (v === '' && this.inputRef) {
+                this.inputRef.value = '';
             }
         });
     }
@@ -7871,7 +8089,9 @@ class KolInputDate {
             "_type": [1],
             "_value": [1025],
             "state": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7985,28 +8205,34 @@ var KolInputEmailDefaultStyle0 = defaultStyleCss$u;
 class KolInputEmail {
     async getValue() {
         var _a;
-        return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+        return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '2046120e1c2a9df246d740cd795513e46303a670', class: {
+        return (hAsync(Host, { key: 'd4e3a5c2235fc4137588243b268c85bc5e7b51b2', class: {
                 'kol-input-email': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputWcTag, { key: 'f288b65f86b8e85e429816421b943f6e73a940b7', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '18f7cc60e9c13e694b55d3223d860dbb674fc514', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '8ad2f9567d7f267bf2f8b0240785b11752eb9186', slot: "input" }, hAsync("input", Object.assign({ key: 'de2adaf7cf3dbc360291eeba35a523f81675f8d3', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
+            } }, hAsync(KolInputWcTag, { key: '97c2a33930427a5327e952f2395e90f1baf6fee6', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e9565f30fab66dcc9305563ad87d61cac7b7c4b8', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '05509dbf1c0714c37dbe290b7f6aefe220a145a4', slot: "input" }, hAsync("input", Object.assign({ key: 'f6b839c5eda669a550bb88869e102998633b2941', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.inputRef = ref;
         };
         this.onKeyDown = (event) => {
             if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 propagateSubmitEventToForm({
                     form: this.host,
-                    ref: this.ref,
+                    ref: this.inputRef,
                 });
             }
         };
@@ -8207,7 +8433,9 @@ class KolInputEmail {
             "_touched": [1540],
             "_value": [1],
             "state": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8248,32 +8476,38 @@ var KolInputFileDefaultStyle0 = defaultStyleCss$t;
 class KolInputFile {
     async getValue() {
         var _a;
-        return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.files;
+        return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.files;
+    }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'dd3a3ca3ba28791bbcf5e59128036e2d96559016', class: "kol-input-file" }, hAsync(KolInputWcTag, { key: 'b870ea9fd720c5965acae1de5d135d57aa3a349b', class: {
+        return (hAsync(Host, { key: 'fa0f78010ec1df49894b271222ba045b5c573a95', class: "kol-input-file" }, hAsync(KolInputWcTag, { key: '154a0ec4b9cf82ee08df555b1a7525a87ace464f', class: {
                 file: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '2c2ad89a96a026f8852fd514805c2f90aba7f5c3', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '0dced025189279f63f6adb0086418c6ae40e7367', slot: "input" }, hAsync("input", Object.assign({ key: 'b7d95cdfb529231976abd9a44c11ef559bda3f5c', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput }))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '2b748c9df894b193366c2cea888103ef332d63ee', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '75d594fdcd6687fec4cbdaa0c73c47a22a8ed68c', slot: "input" }, hAsync("input", Object.assign({ key: '170d880e0d0647461c31853770fad9fa0b0931f0', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.inputRef = ref;
         };
         this.onChange = (event) => {
-            if (this.ref instanceof HTMLInputElement && this.ref.type === 'file') {
-                const value = this.ref.files;
+            if (this.inputRef instanceof HTMLInputElement && this.inputRef.type === 'file') {
+                const value = this.inputRef.files;
                 this.controller.onFacade.onChange(event, value);
                 this.controller.setFormAssociatedValue(value);
             }
         };
         this.onInput = (event) => {
-            if (this.ref instanceof HTMLInputElement && this.ref.type === 'file') {
-                const value = this.ref.files;
+            if (this.inputRef instanceof HTMLInputElement && this.inputRef.type === 'file') {
+                const value = this.inputRef.files;
                 this.controller.onFacade.onInput(event, false, value);
             }
         };
@@ -8428,7 +8662,9 @@ class KolInputFile {
             "_touched": [1540],
             "_value": [1],
             "state": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8524,31 +8760,37 @@ var KolInputNumberDefaultStyle0 = defaultStyleCss$s;
 class KolInputNumber {
     async getValue() {
         var _a;
-        return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+        return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '12a1ad10dfa78c9c2b2555d5c9c4fe1087f1dc80', class: {
+        return (hAsync(Host, { key: '928e98acc94e293d83ccea1abd9ec50c5d4e9611', class: {
                 'kol-input-number': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputWcTag, { key: '27898a9e7d0b9c87ac279dd65dbad8f410ffd2e3', class: {
+            } }, hAsync(KolInputWcTag, { key: '94fbd2ee29c9f9f496e4a78f34f1579cae0a5e00', class: {
                 number: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '24338a5e5fea9b88352e47680ef18160f52e9ee2', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'b770a2335c7f888d51b424c24eba5c8c92ea7536', slot: "input" }, hAsync("input", Object.assign({ key: '5bf1cc6188a34d0b66006c153dd817879f7de00f', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '3d47df9f65976fda204d73c224a1d1abe45f612f', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '7193bdb324f427916f147c3b53c911bd6e30d3c9', slot: "input" }, hAsync("input", Object.assign({ key: '698465728000a66f8baba7e9a9b59b2a04279e1e', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.inputRef = ref;
         };
         this.onKeyDown = (event) => {
             if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 propagateSubmitEventToForm({
                     form: this.host,
-                    ref: this.ref,
+                    ref: this.inputRef,
                 });
             }
         };
@@ -8666,8 +8908,8 @@ class KolInputNumber {
     }
     validateValue(value) {
         this.controller.validateValueEx(value, (v) => {
-            if (v === '' && this.ref) {
-                this.ref.value = '';
+            if (v === '' && this.inputRef) {
+                this.inputRef.value = '';
             }
         });
     }
@@ -8742,7 +8984,9 @@ class KolInputNumber {
             "_touched": [1540],
             "_value": [1032],
             "state": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8756,19 +9000,26 @@ var KolInputPasswordDefaultStyle0 = defaultStyleCss$r;
 class KolInputPassword {
     async getValue() {
         var _a;
-        return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+        return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
         var _a;
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '26322a6ef323c064bb80228b4517ab49317d760a', class: {
+        return (hAsync(Host, { key: 'f42af042b4decf3ba72495b01c0bef56404bd190', class: {
                 'kol-input-password': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputWcTag, { key: '555b632f09d92f90797b8dd704051d4dbc106c54', class: {
+            } }, hAsync(KolInputWcTag, { key: '52b73e97081fdd53eb6ef29eba36a61c45f653b1', class: {
                 'hide-label': !!this.state._hideLabel,
                 password: true,
-            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '566c91288e1e25f8e2f725cd4faf5e73d7f77f18', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '10bb7667d0de5eae685e66d9009bb46b0aeaa0af', slot: "input" }, hAsync("input", Object.assign({ key: 'be00937b0caaecf61bb4b2b6ea83688c192e189d', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput })), this._variant === 'visibility-toggle' && this.ref && ((_a = this.ref.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync(KolButtonWcTag, { class: "password-toggle-button", _label: this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password'), _variant: "ghost", _on: {
+            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '5f403205a336bd8f3ae638a460c7009afacc1cd1', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '8d34cc0ff526d6bc9b64a46ddfb64a393699a13a', slot: "input" }, hAsync("input", Object.assign({ key: 'b515bcb0625bca3c960b94cb3d7f6e24a672028a', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput })), this._variant === 'visibility-toggle' && this.inputRef && ((_a = this.inputRef.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync(KolButtonWcTag, { class: "password-toggle-button", _label: this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password'), _variant: "ghost", _on: {
                 onClick: () => {
                     this._passwordVisible = !this._passwordVisible;
                 },
@@ -8777,14 +9028,13 @@ class KolInputPassword {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.inputRef = ref;
         };
         this.onKeyDown = (event) => {
             if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 propagateSubmitEventToForm({
                     form: this.host,
-                    ref: this.ref,
+                    ref: this.inputRef,
                 });
             }
         };
@@ -8840,7 +9090,7 @@ class KolInputPassword {
     validateAutoComplete(value) {
         this.controller.validateAutoComplete(value);
         if (value === 'on') {
-            devHint(`[KolInputPassword] Die Option 'autocomplete' sollte bei einem Passwort-Eingabefeld nicht auf "on" gesetzt werden.`);
+            devHint(`[KolInputPassword] The 'autocomplete' option should not be set to "on" for a password input field`);
         }
     }
     validateDisabled(value) {
@@ -8984,7 +9234,9 @@ class KolInputPassword {
             "_variant": [1],
             "state": [32],
             "_passwordVisible": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9004,17 +9256,24 @@ class KolInputRadio {
     async getValue() {
         return this.currentValue;
     }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
         const { ariaDescribedBy, hasError } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'dc19a19da83ae3ffccc837a267a2fe423d27be0d', class: "kol-input-radio" }, hAsync("fieldset", { key: '337fa81ae7fa85cbb7fc2b44d5027857240ba311', class: {
+        return (hAsync(Host, { key: '0f10e4e0a1357ba44f89dad147e2f208d2087207', class: "kol-input-radio" }, hAsync("fieldset", { key: '3a3d3a1e4b0074f90a9bbab43b1a647cf08c0ad1', class: {
                 fieldset: true,
                 disabled: this.state._disabled === true,
                 error: hasError === true,
                 required: this.state._required === true,
                 'hidden-error': this._hideError === true,
                 [this.state._orientation]: true,
-            } }, hAsync("legend", { key: '8a53c6ed784cd1132b97e5cc13c1ff7c7c1d7525', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '88742ed2d353ea338fdf6946472e39fa3d59889d' }, hAsync("span", { key: 'f78f94e8263d72325462a980d6e01b378f6ef507', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this._accessKey === 'string' ? (hAsync(InternalUnderlinedAccessKey, { accessKey: this._accessKey, label: this._label })) : (this._label)))), this.state._options.map((option, index) => {
+            } }, hAsync("legend", { key: '3832c99aa5f0ac8393a3f7f69cbcc6ce3a57f146', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '417ad846060749b18ad3eb36a27f39437f457795' }, hAsync("span", { key: '9145ec26a65972f48f226f0fe50c99985517f6e7', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this._accessKey === 'string' ? (hAsync(InternalUnderlinedAccessKey, { accessKey: this._accessKey, label: this._label })) : (this._label)))), this.state._options.map((option, index) => {
             const customId = `${this.state._id}-${index}`;
             const slotName = `radio-${index}`;
             const selected = this.state._value === option.value;
@@ -9027,13 +9286,12 @@ class KolInputRadio {
                     padding: this.state._hideLabel ? '0' : undefined,
                     visibility: this.state._hideLabel ? 'hidden' : undefined,
                 } }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
-        }), hasError && hAsync(FormFieldMsg, { key: '7d00d6ffde6ed693bdf763c63c56cf1c0e930126', _alert: this.state._alert, _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }))));
+        }), hasError && hAsync(FormFieldMsg, { key: '4154a3766b3ae6ce7b8f94a8464745c4e3a23bb1', _alert: this.state._alert, _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, ref);
+            this.inputRef = ref;
         };
         this.onInput = (event) => {
             var _a;
@@ -9066,7 +9324,7 @@ class KolInputRadio {
             if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 propagateSubmitEventToForm({
                     form: this.host,
-                    ref: this.ref,
+                    ref: this.inputRef,
                 });
             }
         };
@@ -9216,7 +9474,9 @@ class KolInputRadio {
             "_touched": [1540],
             "_value": [8],
             "state": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9263,6 +9523,13 @@ const defaultStyleCss$p = "@layer kol-global {\n  .sc-kol-input-range-default-h
 var KolInputRangeDefaultStyle0 = defaultStyleCss$p;
 
 class KolInputRange {
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     getSanitizedFloatValue(value) {
         const floatValue = parseFloat(value);
         if (this.state._max && floatValue > this.state._max) {
@@ -9289,13 +9556,13 @@ class KolInputRange {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '7b64631487a3803774d80e3e70370c94490a9857', class: "kol-input-range" }, hAsync(KolInputWcTag, { key: '85101ed185396991337d173ce303ba75f2074c06', class: {
+        return (hAsync(Host, { key: '6a12597433b0c41b717aa0aaa81a9f5c57d92f2f', class: "kol-input-range" }, hAsync(KolInputWcTag, { key: '3e17d575888bc78e7c04fbecac6bfc8d2a5691fd', class: {
                 range: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '3e171dbf810c32a19e852a04744f247168803238', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '9d600093cff9813f86c7da0462412bc7defd99b0', slot: "input" }, hAsync("div", { key: 'f57c4c85cb9922268eb0690a4a5fbc1fd39ddbcc', class: "inputs-wrapper", style: {
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '07466ef3c13f1f5dd56c5792df4abe9f000d07a2', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '08323eed3a26469f76f22bd20e71739b4e9739cc', slot: "input" }, hAsync("div", { key: 'a5cf4ac0102cefec7876027b2afa768d14818a5b', class: "inputs-wrapper", style: {
                 '--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
-            } }, hAsync("input", Object.assign({ key: '733e6dfef18d2999fb242016b22f514e5569d2a6', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ key: '76d774a129cb72c84f9ec4af991c9d26ff5b5099', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange }))), hasSuggestions && [
-            hAsync("datalist", { key: 'b1c6c238050830f943300523363a08eae7c7d4d9', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
+            } }, hAsync("input", Object.assign({ key: 'e30999603fa946265dffdb06777557a6e6063322', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ key: '42a99192be12c94c6da5737c1e3485c4e95a8eef', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange }))), hasSuggestions && [
+            hAsync("datalist", { key: '7f6ded306407b8584c13a02f35da1f2cb77f522f', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
         ]))));
     }
     constructor(hostRef) {
@@ -9304,7 +9571,6 @@ class KolInputRange {
             var _a;
             if (element) {
                 this.refInputNumber = element;
-                propagateFocus(this.host, element);
                 if (!this._value && ((_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.value)) {
                     this.validateValue(parseFloat(this.refInputNumber.value));
                 }
@@ -9491,6 +9757,8 @@ class KolInputRange {
             "_touched": [1540],
             "_value": [2],
             "state": [32],
+            "focus": [64],
+            "kolFocus": [64],
             "getValue": [64]
         },
         "$listeners$": undefined,
@@ -9505,30 +9773,36 @@ var KolInputTextDefaultStyle0 = defaultStyleCss$o;
 class KolInputText {
     async getValue() {
         var _a;
-        return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+        return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'ea9f9abca63361bc717bf89136fa8a2c1c553049', class: {
+        return (hAsync(Host, { key: '1973f5a8a6d20c8b4c07de5fbdaf8f05fb8ddc95', class: {
                 'has-value': this.state._hasValue,
                 'kol-input-text': true,
-            } }, hAsync(KolInputWcTag, { key: '44fd33f9032e44f0a61bedbe738a0f860cb0032b', class: {
+            } }, hAsync(KolInputWcTag, { key: '642a6e78297dce3f00041f8f95204f6348271ea1', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '488ce488455f6c022f631c837fadcfc2aa9d393e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '76f322bd018ab156ad318a193683bb93b60777e7', slot: "input" }, hAsync("input", Object.assign({ key: 'ddb3e11880fb8106fe62765f6aa0f72e1e29f303', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown }))))));
+            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'ab9bcd054c175f7c220bb67a8e3a195135a9afd7', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'e7fdb05ff787d0df9d6224f041223ea8fc86d82c', slot: "input" }, hAsync("input", Object.assign({ key: 'ce9cc2b5b1fec48eb426fce9b599638c321d6ae4', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.inputRef = ref;
         };
         this.onChange = (event) => {
             var _a, _b;
-            if (this.oldValue !== ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.value)) {
-                this.oldValue = (_b = this.ref) === null || _b === void 0 ? void 0 : _b.value;
+            if (this.oldValue !== ((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value)) {
+                this.oldValue = (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.value;
                 this.controller.onFacade.onChange(event);
             }
         };
@@ -9540,7 +9814,7 @@ class KolInputText {
             if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 propagateSubmitEventToForm({
                     form: this.host,
-                    ref: this.ref,
+                    ref: this.inputRef,
                 });
             }
         };
@@ -9740,7 +10014,9 @@ class KolInputText {
             "_type": [1],
             "_value": [1025],
             "state": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9793,18 +10069,18 @@ class KolInputWc {
         const hasExpertSlot = showExpertSlot(this._label);
         const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
         const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
-        return (hAsync(Host, { key: '9c06a3c09f115feeb894dc7591756ec10667eca5', class: clsx('kol-input', this.getModifierClassNameByMsgType(), {
+        return (hAsync(Host, { key: '8f4ba7be771e2794dba0bbea4c93de58237f2b02', class: clsx('kol-input', this.getModifierClassNameByMsgType(), {
                 disabled: this._disabled === true,
                 error: hasError === true,
                 'read-only': this._readOnly === true,
                 required: this._required === true,
                 touched: this._touched === true,
                 'hidden-error': this._hideError === true,
-            }) }, hAsync("label", { key: '1422b4945c13e4b88d284dfae59e969cb080f3e4', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'de58719c55353655e34db3a85443f4b3063201e4', class: "input-label-span" }, hAsync("slot", { key: '558aa3c075ef092de6d192beb325f2defd406aca', name: "label" }))), hasHint && (hAsync("span", { key: 'c29aeeabea1c1c48ebc8c060ee5f085a65582f95', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '77a150ca760d8b26ec7e2a2cb2ebb6190ed3c748', class: {
+            }) }, hAsync("label", { key: 'c4397e40e8d492187c1bae3bbe4be1b6449bc9d9', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: '543c3749b69fdde2ebc88ae7a342143f352b4e01', class: "input-label-span" }, hAsync("slot", { key: 'f1c24dabbbd1d75dbe37ee774b3ad52567bbefbf', name: "label" }))), hasHint && (hAsync("span", { key: 'adb87f975d975a866e22a55838eafb409f362729', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '38f52cdf606c001800b0f93a9e48542b3c0d59e3', class: {
                 input: true,
                 'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
                 'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
-            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '91485bd06330be0fbf6de460773b9bf2e4e8c1ba', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '00f88767c05428529c9d1ce274ae6c8a03f2e259', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '4ca328a780e2a95dd18ab0fb8f57654e6ee9f43b', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '4daf4db4e8a669cdd8c749b7296ab1b2da1e4a06', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '2abc09595c2b383aa48b9af5f73f77ea3ea48169', "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showFormFieldMsg && hAsync(FormFieldMsg, { key: '682d59034d314a11bc1fa39940f5f9457e5f8ef8', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '5f06bd47b6d135c9154412f1c3f8a4f2cf2b13ee', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: '8baec4fa545909af2598ec851451b34fbaefafb7', class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '56d16164763271aac8302a6063bcdd675f679191', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: 'cb75b8e24b69db57c8536185ad287024f732ec28' }, translate('kol-characters'))))));
+            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '5af1b04137afa941269af05dd35a684c21384d46', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: 'a32419d39395a44a61ee9abd6d3b3f785345c6ab', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: 'f09aecd73a43a2452a83b31badc9a9d8a48e202a', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '49140be539ede37df384be1dce9f3db2d4f774d9', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '9192e8e543ade06f365baacc1c7e5012d48e6d94', "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showFormFieldMsg && hAsync(FormFieldMsg, { key: 'cc846ab34c1aa368b16a135a40dd59ae03268a5d', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '015c7ff9403fc46bcbd3056e6ec757af46044418', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: 'b558e392516d0ed5fbb41a327b467f9e330a4980', class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '9ea2c55e5a88a3ea87f295b76b88540fd004ebe0', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: '613f73ee31fb7fada22737c9a2172bb17d37264f' }, translate('kol-characters'))))));
     }
     getModifierClassNameByMsgType() {
         var _a, _b;
@@ -9883,7 +10159,7 @@ class KolKolibri {
     }
     render() {
         const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
-        return (hAsync(Host, { key: '5fa07f54481e954f3ada11dde5d42b88350932d0', class: "kol-kolibri" }, hAsync("svg", { key: '84d3c6b420079d3a8d26bc0eb6a33f5b09471ec6', role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'e64b0df6ca04f01f4b428f04f665bc73fc984f24', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: 'eab9abfd4ff3d50bbd87fbdbf5386be5f7918eb1', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: 'bf7dbd997df13f831cd93c0bd74203ad58a400c6', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: 'b92bc28b3225115e6167ccd64d536c6503516c43', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '4c5eadac3cf237a08d978bd47275a98b75bee325', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '0affb05d6011a26a8323c3e45bd40abdbd1cc5af', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '08b76cb8e49176c705da4f2f3b0e0c7ba7110f97', x: "250", y: "525", fill: fillColor }, "KoliBri")))));
+        return (hAsync(Host, { key: '848156de9170117ffdedde1a12f72b2c24fb2a11', class: "kol-kolibri" }, hAsync("svg", { key: '7cde143186c9d70d2b62759e0b8682b66ca55338', role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'a544b4892fce5dae895546901452dad04acbc72a', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '73ad3de5b24cf887e7b5791ba5d449eae04226e3', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: 'a0585763be4aff3f61ecc1d3534bddac28d976a4', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: '8138d7a57e0230ea9699e9f5d19fc54f8d095bf1', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '3cc8481cf01928f0f39bcc45e6de53e90398ad40', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: 'c4a97edf0bf361a5bf34f6a468daf984eda0736e', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: 'cdb74da516faf671d98402d5f83352c07086ae37', x: "250", y: "525", fill: fillColor }, "KoliBri")))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -9930,7 +10206,7 @@ class KolLink {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            propagateFocus(this.host, ref);
+            this.linkWcRef = ref;
         };
         this._accessKey = undefined;
         this._ariaCurrentValue = undefined;
@@ -9946,10 +10222,16 @@ class KolLink {
         this._target = undefined;
         this._tooltipAlign = 'right';
     }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
+    }
     render() {
-        return (hAsync(Host, { key: '8a381f4c68eeb1a70ab27f86dcca9328cc98c50f', class: "kol-link" }, hAsync(KolLinkWcTag, { key: '67b91c5efc3478cf0682711554f9ba8932375667', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '2e275aa4ead87791588f79f80b49b39390ab9c70', name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: 'a690eef605f9fc1e4a3a5e99c4ba78cb20904223', class: "kol-link" }, hAsync(KolLinkWcTag, { key: 'b9d2706ce44ba0d3ac121e771496a0ad34979629', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '52b67bd3e03adb56e85ae0bd90bff99befaa16af', name: "expert", slot: "expert" }))));
     }
-    get host() { return getElement(this); }
     static get style() { return {
         default: KolLinkDefaultStyle0
     }; }
@@ -9969,7 +10251,9 @@ class KolLink {
             "_role": [1],
             "_tabIndex": [2, "_tab-index"],
             "_target": [1],
-            "_tooltipAlign": [1, "_tooltip-align"]
+            "_tooltipAlign": [1, "_tooltip-align"],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9984,7 +10268,7 @@ class KolLinkButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            propagateFocus(this.host, ref);
+            this.linkWcRef = ref;
         };
         this._accessKey = undefined;
         this._ariaCurrentValue = undefined;
@@ -10002,14 +10286,20 @@ class KolLinkButton {
         this._tooltipAlign = 'right';
         this._variant = 'normal';
     }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
+    }
     render() {
-        return (hAsync(Host, { key: '48b7c1ddbc5bf67ffcd240f66344f2726421e504', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '3c5dd469e4c56704f1b2965d835e6b8062f51830', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: 'e6ab08377be0ad810ea3d7c0f690231663aa790d', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: 'dd6e0237ef4fa62c42f8c4ce51efa5f3dbfcd49d', 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, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '55d4e4041b79de0efc434b0effea997c85a0958c', name: "expert", slot: "expert" }))));
+            }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'de5b3af7fb665c288e9cffa7da4f59dcd57e9093', name: "expert", slot: "expert" }))));
     }
-    get host() { return getElement(this); }
     static get style() { return {
         default: KolLinkButtonDefaultStyle0
     }; }
@@ -10031,7 +10321,9 @@ class KolLinkButton {
             "_tabIndex": [2, "_tab-index"],
             "_target": [1],
             "_tooltipAlign": [1, "_tooltip-align"],
-            "_variant": [1]
+            "_variant": [1],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -10070,10 +10362,10 @@ class KolLinkGroup {
     }
     render() {
         const ListTag = this.isUl ? 'ul' : 'ol';
-        return (hAsync(Host, { key: '153895c9059653467587b4f6c8f2282b5ebc8bb3', class: "kol-link-group" }, hAsync(ListTag, { key: '4c6d27071580b94e66bd3a3f59b67e940d1d24c6', "aria-label": this.state._label, class: {
+        return (hAsync(Host, { key: 'e1358fcd3cf6415d8847992ee32d90bbcada6e35', class: "kol-link-group" }, hAsync(ListTag, { key: '5f7747dae40ab94612914e94a5aa126acb644f75', "aria-label": this.state._label, class: {
                 vertical: this.state._orientation === 'vertical',
                 horizontal: this.state._orientation === 'horizontal',
-            } }, hAsync(ListItem, { key: '42e740e727f5a1d92131ef08f4102b35c1a1a105', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
+            } }, hAsync(ListItem, { key: '9a5b36776720a38d0476f2f5fd34dd734e3aeab5', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
     }
     validateLabel(value, _oldValue, initial = false) {
         if (!initial && this.state._label) {
@@ -10162,8 +10454,7 @@ class KolLinkWc {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.anchorRef = ref;
         };
         this.onClick = (event) => {
             var _a, _b;
@@ -10173,7 +10464,7 @@ class KolLinkWc {
             else if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
                 event.preventDefault();
                 event.stopPropagation();
-                setEventTarget(event, this.ref);
+                setEventTarget(event, this.anchorRef);
                 (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onClick(event, this.state._href);
             }
         };
@@ -10186,12 +10477,14 @@ class KolLinkWc {
                 download: typeof this.state._download === 'string' ? this.state._download : undefined,
             };
             if (this.state._hideLabel === true && !this.state._label) {
-                devHint(`[KolLink] Es muss ein Aria-Label gesetzt werden, wenn _hide-label gesetzt ist.`);
+                devHint(`[KolLink] An aria-label must be set when _hide-label is set.`);
             }
             return { isExternal, tagAttrs };
         };
         this._accessKey = undefined;
         this._ariaCurrentValue = undefined;
+        this._ariaExpanded = undefined;
+        this._ariaOwns = undefined;
         this._disabled = false;
         this._download = undefined;
         this._hideLabel = false;
@@ -10209,16 +10502,20 @@ class KolLinkWc {
             _icons: {},
         };
     }
+    async kolFocus() {
+        var _a;
+        (_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '82f9f5d0f689c25163bd6136ca5c34dcb1fd692b', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: 'b7db13f7744362450d778d707e5540558d997ecb', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
+        return (hAsync(Host, { key: 'bceb6e1bb9b3314ea1ed597aa5254f5dff33f350', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: '234f8304ea72e23c337c5f8049c71f6e3d1dd0e0', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": this.state._ariaExpanded ? 'true' : 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: '74e96d85bcef160e5cb9c0d5676981b32e5abaaf', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'e6f537ca1733bf45673369cb51f9cd0a5ed8d349', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'b41fee1ddbffadab9c2371ff336fadb3ce7abe74', 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: 'c6e48539bc159d804fd5cff1983a1a652f16a312', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
+            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '199d2afb7615f7654674ea33284de0e376da713c', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '341e514c5974572683e1c29852e33e686efc85e4', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'abf9e01ab96cc7b418430cbc39746659c50bf60f', 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: 'd9501a785b3f27bafd87e8b0dc622588fd17d251', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -10226,6 +10523,12 @@ class KolLinkWc {
     validateAriaCurrentValue(value) {
         validateAriaCurrentValue(this, value);
     }
+    validateAriaExpanded(value) {
+        validateAriaExpanded(this, value);
+    }
+    validateAriaOwns(value) {
+        validateAriaOwns(this, value);
+    }
     validateDisabled(value) {
         validateDisabled(this, value);
     }
@@ -10264,6 +10567,8 @@ class KolLinkWc {
     componentWillLoad() {
         this.validateAccessKey(this._accessKey);
         this.validateAriaCurrentValue(this._ariaCurrentValue);
+        this.validateAriaExpanded(this._ariaExpanded);
+        this.validateAriaOwns(this._ariaOwns);
         this.validateDisabled(this._disabled);
         this.validateDownload(this._download);
         this.validateHideLabel(this._hideLabel);
@@ -10284,10 +10589,11 @@ class KolLinkWc {
             this.unsubscribeOnLocationChange();
         }
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "_accessKey": ["validateAccessKey"],
         "_ariaCurrentValue": ["validateAriaCurrentValue"],
+        "_ariaExpanded": ["validateAriaExpanded"],
+        "_ariaOwns": ["validateAriaOwns"],
         "_disabled": ["validateDisabled"],
         "_download": ["validateDownload"],
         "_hideLabel": ["validateHideLabel"],
@@ -10306,6 +10612,8 @@ class KolLinkWc {
         "$members$": {
             "_accessKey": [1, "_access-key"],
             "_ariaCurrentValue": [1, "_aria-current-value"],
+            "_ariaExpanded": [4, "_aria-expanded"],
+            "_ariaOwns": [1, "_aria-owns"],
             "_disabled": [4],
             "_download": [1],
             "_hideLabel": [4, "_hide-label"],
@@ -10317,7 +10625,8 @@ class KolLinkWc {
             "_tabIndex": [2, "_tab-index"],
             "_target": [1],
             "_tooltipAlign": [1, "_tooltip-align"],
-            "state": [32]
+            "state": [32],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -10524,7 +10833,7 @@ class KolLogo {
             setState(this, '_org', value);
         }
         else {
-            devHint(`Die verwendete Abkürzung (${value}) ist nicht definiert!`);
+            devHint(`The abbreviation (${value}) used is not defined!`);
         }
     }
     componentWillLoad() {
@@ -10532,7 +10841,7 @@ class KolLogo {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '3c7c0dc0aa7c7b865de632947b6f2281693e24bd', class: "kol-logo" }, hAsync("svg", { key: '26883724d1241d49b2f661a3099a1499f38d57a9', "aria-label": translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } }), role: "img", viewBox: "0 0 225 100" }, hAsync("rect", { key: '19fce76e4e0f9f870a5cfab9c426f11e597fe061', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: 'e621c94a38af641ea9b41815416f7fbeb6dfc90c', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '4b5ea19a76938b6801559ba34b95dfda70c5bb30' })), hAsync("svg", { key: 'badafa356694ae0ac8b26891f60f3908dbe42704', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: '67782b342a2b1b91c0dbf4183dde12785deaffda', width: "5", height: "30" }), hAsync("rect", { key: '10c7b555e4794719f230f4a07d3e54954b19266d', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: '7d472417a5db59f8ebe0c083ae1d65234f623644', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '4966ce1f8e6c03e9107686d27df4013cebdbb34f', x: "50", y: "0" }, hAsync("text", { key: '98b6e18bd84800af4c23af9e3aca693a8c27fedd', x: "0", y: "-0.05em", "font-family": "BundesSans Web", style: { backgroundColor: 'white', color: 'black' } }, BUND_LOGO_TEXT_MAP.has(this.state._org) ? (hAsync("tspan", null, (_a = BUND_LOGO_TEXT_MAP.get(this.state._org)) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
+        return (hAsync(Host, { key: 'eb43c9514719417f729a1c73826c19a0a92e2c9f', class: "kol-logo" }, hAsync("svg", { key: '840038582973d0c4b49a8db280684e1946527afa', "aria-label": translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } }), role: "img", viewBox: "0 0 225 100" }, hAsync("rect", { key: 'cd8095e12985f67a4e7b267716898e6fff8add07', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: '537fcddc64e406319c6af1703cde8f61dd49ba7e', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '8987c99b9a13c2a627b2442af58b39aad06c7842' })), hAsync("svg", { key: '9acb90fbb65c4c75d850e3fa91881c4481a3c8c7', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: 'b8a4e853d12cb71016b6b16138198a7a1f8035a4', width: "5", height: "30" }), hAsync("rect", { key: '7190ab2cb4c32823d1cd49335f51aa731b183250', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: '2b1d9740b8690c731b37be6407c314cd677d7d6e', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '9ce09f41d0797e663f18b49ff699ca645bb38693', x: "50", y: "0" }, hAsync("text", { key: '2a6146524db3b04d7f56efc6749a9b15c95e1418', x: "0", y: "-0.05em", "font-family": "BundesSans Web", style: { backgroundColor: 'white', color: 'black' } }, BUND_LOGO_TEXT_MAP.has(this.state._org) ? (hAsync("tspan", null, (_a = BUND_LOGO_TEXT_MAP.get(this.state._org)) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
             return (hAsync("tspan", { x: "0", dy: "1.1em", key: `kol-logo-text-${index}` }, text));
         }))) : (hAsync("tspan", { fill: "red" }, hAsync("tspan", { x: "0", dy: "1.1em" }, "Der Schl\u00FCsselwert"), hAsync("tspan", { x: "0", dy: "1.1em", "font-weight": "bold" }, "'", this.state._org, "'"), hAsync("tspan", { x: "0", dy: "1.1em" }, "ist nicht definiert."), hAsync("tspan", { x: "0", dy: "1.1em" }, "oder freigegeben."))))))));
     }
@@ -10644,7 +10953,7 @@ class ModalService {
     }
     openModal(modalRef, activeElement) {
         if (modalRef instanceof HTMLElement === false) {
-            Log.warn(`[KolModalService] Die DOM-Referenz des Modals ist nicht valide.`);
+            Log.warn(`[KolModalService] The DOM reference of the modal is not valid.`);
         }
         else {
             this.modalStack.set(modalRef, {
@@ -10656,7 +10965,7 @@ class ModalService {
     closeModal(modalRef) {
         var _a;
         if (modalRef instanceof HTMLElement === false) {
-            Log.warn(`[KolModalService] Die DOM-Referenz des Modals ist nicht valide.`);
+            Log.warn(`[KolModalService] The DOM reference of the modal is not valid.`);
         }
         else {
             const activeElement = (_a = this.modalStack.get(modalRef)) === null || _a === void 0 ? void 0 : _a.activeElement;
@@ -10704,16 +11013,16 @@ class KolModal {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'cdf90127b1e3a6494acc2cd6f9e70245f0e78327', class: "kol-modal", ref: (el) => {
+        return (hAsync(Host, { key: '8dcce275d7ded560756ed8fa4bef54ee4d3a20e2', class: "kol-modal", ref: (el) => {
                 this.hostElement = el;
-            } }, this.state._activeElement && (hAsync("div", { key: '786de2516f2d40b3d31fa8fd89e905bf4d05c35f', class: "overlay" }, hAsync("div", { key: '22425204eaa3a2a133c8ea8e272356d0ffcb4aee', class: "modal", style: {
+            } }, this.state._activeElement && (hAsync("div", { key: '7706d586dcddf9cf5a23040d01aa318e8dd460ba', class: "overlay" }, hAsync("div", { key: '5d32e1415e11d4f598035f68a6353bf4516174df', class: "modal", style: {
                 width: this.state._width,
             }, "aria-label": this.state._label, "aria-modal": "true", role: "dialog", onKeyDown: this.onKeyDown, ref: (el) => {
                 if (el) {
                     el.setAttribute('tabindex', '0');
                     setTimeout(() => el.focus(), 250);
                 }
-            } }, hAsync("slot", { key: '9762249853efc9159e664ff78bbb503fe7165d4e' }))))));
+            } }, hAsync("slot", { key: 'cbd31db78f6c1070fad845022b3efd6f247ead54' }))))));
     }
     validateActiveElement(value) {
         watchValidator(this, '_activeElement', (value) => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
@@ -10888,11 +11197,11 @@ class KolNav {
         const collapsible = this.state._collapsible === true;
         const hideLabel = this.state._hideLabel === true;
         const orientation = this.state._orientation;
-        return (hAsync(Host, { key: '4951b63a418b6fc0123a31a2fb476dde8e21473d', class: "kol-nav" }, hAsync("div", { key: 'dc600fafad6b24fe459eded63de61813c46d0ac5', class: {
+        return (hAsync(Host, { key: 'ad305888a9a44b97ab2c5c17ecb746bedfc29ea0', class: "kol-nav" }, hAsync("div", { key: '347730ba86f73875ed8aec6de6c0d0e5bd98bd66', class: {
                 nav: true,
                 [orientation]: true,
                 'is-compact': this.state._hideLabel,
-            } }, hAsync("nav", { key: 'd0f33bd11c7983a92255d6ddb8edb406c9e12626', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '5e495bac9ebb8bb5d61e51a3ebdb75460da152fc', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: '32542c1fce11f62447a47b258db708798b31dabd', class: "compact" }, hAsync(KolButtonTag, { key: 'c654ae9be921c674f7dd499c9e4ca282fd2be804', _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
+            } }, hAsync("nav", { key: '9e80ad4e14e09fb5cd268802d06ae72d47cae9ad', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '9806875ae93b0320bbf82979c8ed4a5a0466f630', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: '26e0048f9c260311519592828553e34fdb9b51fe', class: "compact" }, hAsync(KolButtonTag, { key: '23dee1535d08bede377ee8add4d5ea31e7d7e3b3', _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
                 onClick: () => {
                     this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
                 },
@@ -10922,7 +11231,7 @@ class KolNav {
     }
     validateLinks(value) {
         watchNavLinks('KolNav', this, value);
-        devHint(`[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.`);
+        devHint(`[KolNav] The navigation structure is not yet validated recursively.`);
     }
     validateOrientation(value) {
         watchValidator(this, '_orientation', (value) => value === 'horizontal' || value === 'vertical', new Set(['Orientation {horizontal, vertical}']), value, {
@@ -11643,9 +11952,10 @@ async function detectOverflow(state, options) {
     strategy
   }));
   const rect = elementContext === 'floating' ? {
-    ...rects.floating,
     x,
-    y
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
   } : rects.reference;
   const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
   const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -11895,10 +12205,12 @@ const flip$1 = function (options) {
         return {};
       }
       const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
       const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
@@ -11944,8 +12256,17 @@ const flip$1 = function (options) {
           switch (fallbackStrategy) {
             case 'bestFit':
               {
-                var _overflowsData$map$so;
-                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
                 if (placement) {
                   resetPlacement = placement;
                 }
@@ -12185,6 +12506,8 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -12435,16 +12758,16 @@ const size = function (options) {
         widthSide = side;
         heightSide = alignment === 'end' ? 'top' : 'bottom';
       }
-      const overflowAvailableHeight = height - overflow[heightSide];
-      const overflowAvailableWidth = width - overflow[widthSide];
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
       const noShift = !state.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
       if (isYAxis) {
-        const maximumClippingWidth = width - overflow.left - overflow.right;
         availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
       } else {
-        const maximumClippingHeight = height - overflow.top - overflow.bottom;
         availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
       }
       if (noShift && !alignment) {
@@ -12568,8 +12891,8 @@ function getNodeScroll(element) {
     };
   }
   return {
-    scrollLeft: element.pageXOffset,
-    scrollTop: element.pageYOffset
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
   };
 }
 function getParentNode(node) {
@@ -13411,7 +13734,7 @@ class KolPopover {
         });
     }
     render() {
-        return (hAsync(Host, { key: '300c5938b894d91a742353f79f6a96da6f4fc59f', ref: this.catchHostAndTriggerElement, class: "kol-popover-wc" }, hAsync("div", { key: 'f1141877e7fe0cf9118e32012dcbaccf443d6067', class: { popover: true, show: this.state._visible }, ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: 'a4d43160414c7a0ed78edd1c7a04b88446c77e63', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '8a65a9097d526128e6b548133f98eb7578314944' }))));
+        return (hAsync(Host, { key: 'dcd0715b7b5ecee1797490a75861bb3660964c20', ref: this.catchHostAndTriggerElement, class: "kol-popover-wc" }, hAsync("div", { key: 'e5808e300a3b8a0382209c2d1e08e9d8b5628c5a', class: { popover: true, show: this.state._visible }, ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: '57c5027c81f48377698c2e83a0437f7096e3f2b2', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '4a353c9f9ff9dad823e92b583be96c6fe45b3eb6' }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -13487,7 +13810,7 @@ class KolProcess {
         };
     }
     render() {
-        return (hAsync(Host, { key: '1b2fd8a4d1aa5c22458d9bdfc9a4e5dd445fad4b', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: '7bae4af9ebda7668022a90cc52706b849618c03f', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: 'c9195793cc06eac202d9e760d7613a7441492e0f', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
+        return (hAsync(Host, { key: '17d27a543723ef58650e2a409b3c2933517cebee', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: 'cce18c631b55e1819f0ab6605e431c3b7f558a0c', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '8a1f04ddde885c765637d56a18c5b631e1dd318b', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -13596,9 +13919,9 @@ class KolQuote {
     }
     render() {
         const hasExpertSlot = showExpertSlot(this.state._quote);
-        return (hAsync(Host, { key: '06071e4062c3dad31dc54678b3809cda9d97bec3', class: "kol-quote" }, hAsync("figure", { key: 'a1ddfd8830f510be2acb2511e142168e9c57435a', class: {
+        return (hAsync(Host, { key: '9b9860e687b3cec1527f758dcd362f8687a66f44', class: "kol-quote" }, hAsync("figure", { key: '1f3197be1bcbc754cd1ad3eb96186f6c7fd495f3', class: {
                 [this.state._variant]: true,
-            } }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '27b79e60e46de28765eefaf8859bf54ab2cc0596' }, hAsync("cite", { key: '3522b8bdb372c71e24d1bed45616326f535e7a4f' }, hAsync(KolLinkTag, { key: '3a5fb98869d14d343a7b184d887d057ae6e6cc2b', _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
+            } }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '5274e285aa6e13b3888b95d901c396ad99b952d2' }, hAsync("cite", { key: '2be67c626d0f904b40da9005362dbad7a0058775' }, hAsync(KolLinkTag, { key: '60b247245e6f7ad8377dd6d106495eaf4157ca67', _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -13714,6 +14037,13 @@ class KolSelect {
     async getValue() {
         return this.state._value;
     }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     renderOptgroup(optgroup, preKey) {
         var _a;
         return (hAsync("optgroup", { disabled: optgroup.disabled, label: optgroup.label }, (_a = optgroup.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
@@ -13729,16 +14059,16 @@ class KolSelect {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '65b5ee84c611259722a5415b805d72fadf5b53ec', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: '84d19130e20defa5b3b17d3c8dc9194fb2232e23', class: {
+        return (hAsync(Host, { key: 'e0bca5648369f513a867c3b2020d03b688469075', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: 'da1083003cc59ed15a0bd0c0508037dacb1b335e', class: {
                 'hide-label': !!this.state._hideLabel,
                 select: true,
-            }, _accessKey: this.state._accessKey, _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, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '63ee212512a01afcc0a00646c185d30ffc23687b', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'e7ecb8083cf08b51f5e7eea5bfc3eee1da136572', slot: "input" }, hAsync("form", { key: '9fa41d0d4c0002a07fc05f8cae048d3cf8a01836', onSubmit: (event) => {
+            }, _accessKey: this.state._accessKey, _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, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '6be051315c2f5bffb2ecad1746dec86614aeea62', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '8556b2827302863bc76190e40dc559b1adf5e940', slot: "input" }, hAsync("form", { key: '3d67a53db81bb5ecc74c65d50019470908ff4298', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host,
-                    ref: this.ref,
+                    ref: this.selectRef,
                 });
-            } }, hAsync("input", { key: '36dd034e02964ffb50633d41c68a9dc99abb6d17', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '5347918577e14377098b0af7ad660a34de649442', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this) }), this.state._options.map((option, index) => {
+            } }, hAsync("input", { key: '2f48e602ebcb11cb5dd33055d3c8f75d2894244b', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: 'c68ab3da9afd5022a7f146655767f0141d591781', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this) }), this.state._options.map((option, index) => {
             const key = `-${index}`;
             if (Array.isArray(option.options)) {
                 return this.renderOptgroup(option, key);
@@ -13751,8 +14081,7 @@ class KolSelect {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.selectRef = ref;
         };
         this._accessKey = undefined;
         this._alert = true;
@@ -13859,7 +14188,7 @@ class KolSelect {
     }
     onInput(event) {
         var _a, _b, _c;
-        this._value = Array.from(((_a = this.ref) === null || _a === void 0 ? void 0 : _a.options) || [])
+        this._value = Array.from(((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.options) || [])
             .filter((option) => option.selected === true)
             .map((option) => { var _a; return (_a = this.controller.getOptionByKey(option.value)) === null || _a === void 0 ? void 0 : _a.value; });
         tryToDispatchKoliBriEvent('input', this.host, this._value);
@@ -13926,7 +14255,9 @@ class KolSelect {
             "_touched": [1540],
             "_value": [1025],
             "state": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -13948,7 +14279,7 @@ class KolSkipNav {
         };
     }
     render() {
-        return (hAsync(Host, { key: '1ff6c993f8e851d2e997c9d78377a5f4c02d7a85', class: "kol-skip-nav" }, hAsync("nav", { key: '2f59205bc491fff6bda289bf56e107387a1cd5be', "aria-label": this.state._label }, hAsync("ul", { key: '2ebea122741869cfc14de515e212c96706728022' }, this.state._links.map((link, index) => {
+        return (hAsync(Host, { key: '9eb245b91aa6124e6116c653b249536af5b5cde0', class: "kol-skip-nav" }, hAsync("nav", { key: '4ebc5267976efdc13374fe16475cd1faad237916', "aria-label": this.state._label }, hAsync("ul", { key: '6ba51aa3395bae954992a4ba71068136da3b3b82' }, this.state._links.map((link, index) => {
             return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
         })))));
     }
@@ -14004,7 +14335,7 @@ class KolSpan {
         this._label = undefined;
     }
     render() {
-        return (hAsync(KolSpanWcTag, { key: 'aa8c68dc9fc5c921ea83934e3345b9aa93c9dab9', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey, class: "kol-span" }, hAsync("slot", { key: '623ac84ad57ea1f411ea530e40957a36f29f7125', name: "expert", slot: "expert" })));
+        return (hAsync(KolSpanWcTag, { key: '8fb014c28ff509a829798007f239eff09badb7fa', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey, class: "kol-span" }, hAsync("slot", { key: '8ac9ed04dcf44846dbb8624687746c1ac34708a5', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolSpanDefaultStyle0
@@ -22368,10 +22699,10 @@ class KolSpanWc {
     render() {
         var _a, _b, _c, _d, _e;
         const hideExpertSlot = !showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '00efc90d808c99015dae7704e43f5b3b78214c3c', class: {
+        return (hAsync(Host, { key: '0a15150866920a51833e591397e7ff1624c89fc7', class: {
                 'kol-span-wc': true,
                 'hide-label': !!this.state._hideLabel,
-            } }, this.state._icons.top && (hAsync(KolIconTag, { key: 'c59edfd6604b68665b84be0e08443d7070dbadff', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: '1781c6eb6ef23195111967101b0a4237704fbff8' }, this.state._icons.left && (hAsync(KolIconTag, { key: 'a6394a77571e4f0ee2343b07be1454754206c812', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._accessKey && this.state._label.length ? (hAsync(InternalUnderlinedAccessKey, { label: this.state._label, accessKey: this.state._accessKey })) : ((_c = this.state._label) !== null && _c !== void 0 ? _c : '')))) : (''), hAsync("span", { key: '92b0a7e5e3d1228727fa445f6b084f0aadf2c1be', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '921c8fa6caeea1239d8b429b61efa4da26d97e27', name: "expert" })), this.state._accessKey && (hAsync("span", { key: 'f498d141a17c29802688cf0a65d0e748e5766819', class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync(KolIconTag, { key: '670c2aa14ce83b25ca7e9484c032705716ac4537', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: '1a7ff7c6cd4c2949e86029e35b0481519215ab72', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
+            } }, this.state._icons.top && (hAsync(KolIconTag, { key: 'a13817ec7df7d39bbe765123bd36bbb1f58aa237', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: '6f86eba44456d1ab64d17a679c5c6e124dc1e66c' }, this.state._icons.left && (hAsync(KolIconTag, { key: 'd08648696cbde3838c671d1166bd216faf4a5bd4', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._accessKey && this.state._label.length ? (hAsync(InternalUnderlinedAccessKey, { label: this.state._label, accessKey: this.state._accessKey })) : ((_c = this.state._label) !== null && _c !== void 0 ? _c : '')))) : (''), hAsync("span", { key: '9aa519bb4c73ac14bdcf3296374c838478f34f50', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: 'b4c670498ef4074f0a04d45e4e384860144d6a37', name: "expert" })), this.state._accessKey && (hAsync("span", { key: '7a5fcc6fc5937789164c2382906232df5d788151', class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync(KolIconTag, { key: '786f8ddd5168addd92a9dd12ca85dc1925bb30ac', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: '5897ff2924688326e318d2f3a910f4ee2f3a333a', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -22449,7 +22780,7 @@ class KolSpin {
         };
     }
     render() {
-        return (hAsync(Host, { key: '6974287d918166c7f954447289a132cd48605222', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
+        return (hAsync(Host, { key: '1341f6f7b72ff1c95f3a73f163364342172d5cad', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
                 spin: true,
                 [this.state._variant]: true,
             }, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
@@ -22555,12 +22886,12 @@ class KolSplitButton {
     }
     render() {
         const i18nDropdownLabel = 'kol-split-button-dropdown-label';
-        return (hAsync(Host, { key: '5a64a4a751b51c8852063bc917c1bbf986bca867', class: "kol-split-button" }, hAsync(KolButtonWcTag, { key: 'ab8baa7f5a5f4de4d0bf79c8d8d5376640cdb516', class: {
+        return (hAsync(Host, { key: 'a527306b3af651544bf317a61dee2398c1390034', class: "kol-split-button" }, hAsync(KolButtonWcTag, { key: '8b72ca7871e344472433e3e63cbcc3282ae653b7', 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: '246e21fea2320d7a1c6e53ed54d17515a53ba8c8', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: 'ca5f0ba735ac3638cc7256c7a7cd8fc7ab9d3fc6', class: "secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler }), hAsync("div", { key: '9855493347ef418b84ba215bcb7f32170a09f140', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: 'f476df593c9956b8262510944c57c99f1bead60d', class: "popover-content" }, hAsync("slot", { key: '7021bef08ce563c515e416b35f8f84b6a7acd05c' })))));
+            }, _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: '40a3ce6bc755a453d9823706b89bed3638aa7608', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '4ad3cc5acdb289695cc73edc65b285aed4b7aa94', class: "secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler }), hAsync("div", { key: '056b57cd9712ef379f49c894f749c32d43404986', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: '814797a3e331a3e0352da52e82dfa33b3f27eddf', class: "popover-content" }, hAsync("slot", { key: '3ba6188d4b04dac4703cbe3d486d487c983a3324' })))));
     }
     static get style() { return {
         default: KolSplitButtonDefaultStyle0
@@ -22606,7 +22937,7 @@ class KolSymbol {
         };
     }
     render() {
-        return (hAsync(Host, { key: '34b75c8f44124c57103e84e6f4f33ed6df1fe998', class: "kol-symbol" }, hAsync("span", { key: '57a61aba5a3b316f0ef65a4685ac2e7eed690c28', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
+        return (hAsync(Host, { key: '5a17cb366a4268e6010c15c5a82f72a53313ecad', class: "kol-symbol" }, hAsync("span", { key: '00ac2ef03b17992d53ee2975ba2513b0e857fd1f', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -22655,7 +22986,7 @@ class KolTable {
         this._on = undefined;
     }
     render() {
-        return (hAsync(KolTableStatefulTag, { key: 'ac73413e2fcad74426a8f3c55e4c587235f249d7', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
+        return (hAsync(KolTableStatefulTag, { key: 'c65b251dc7c47eda8c7fa491a83608370dd0da2a', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -23048,7 +23379,7 @@ class KolTableStateful {
             horizontal: (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
             vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
         };
-        return (hAsync(Host, { key: '1b708cf8d4e845cbd3da29af7168797551384fb9', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'd637bc683f7424ee753d43fe37dd557706fccf53', _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
+        return (hAsync(Host, { key: 'bdce96077b735bf0a23e6bd2de10e79a55e244c6', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '0306216fc6f81b985e95f4178213e1a11f23f9bc', _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -23111,7 +23442,7 @@ class KolTableStateless$1 {
         this._selection = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '341cf6e82f6052f6a8d2117438760a0b0b331a60', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: 'f92acdfc7fead14f05cabb0f68abba8ecd7d60a8', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
+        return (hAsync(Host, { key: 'd8c2f6eed229d8b9d475dfdb9678a3ed3055cecd', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: 'f0b6f632885da05dd020af5318c287cacb117f3c', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
     }
     static get style() { return {
         default: KolTableStatelessDefaultStyle0
@@ -23490,9 +23821,9 @@ class KolTableStateless {
     }
     render() {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
-        return (hAsync(Host, { key: '33fc600ca5f34f725c8a8ac2317f05439340af2b', class: "kol-table-stateless-wc" }, hAsync("div", { key: '1d5dd8a0550ff4f8f5866993b93b76e4e924f701', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '97a3816305dd524228c9c28643304d5e917fb534', style: {
+        return (hAsync(Host, { key: '6ff227efb6562cc4802f7f3cdcc07da9b15f6144', class: "kol-table-stateless-wc" }, hAsync("div", { key: 'f85881b7a6221b40b72d938398111391b6d1a66e', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '855e72ca4c4770fda2cedd5c894ec81c9207405f', style: {
                 minWidth: this.state._minWidth,
-            } }, hAsync("div", { key: '522d0e75341549acd73f030214c11414de84a503', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'f347a07003b51573ba371bc0c2f3263bcf100ed9', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '883c146a5a9125831c017b2c379d4ee48d468028' }, this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && hAsync("td", { key: "thead-selection", class: "selection-header-cell" }), cols.map((cell, colIndex) => {
+            } }, hAsync("div", { key: 'a793e72c2157d6a857111b2fe96e0463d43e18ba', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'cb84389391bcaa93093d86d7b96e41265befad1c', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '887ede1cde2c05062e7279143e75cf76c5e30f4a' }, this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && hAsync("td", { key: "thead-selection", class: "selection-header-cell" }), cols.map((cell, colIndex) => {
             if (cell.asTd === true) {
                 return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
                         [cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
@@ -23508,7 +23839,7 @@ class KolTableStateless {
             else {
                 return this.renderHeadingCell(cell, rowIndex, colIndex);
             }
-        })))))), hAsync("tbody", { key: '8a377a47f856dc735014473c4f321873a40a6d5c' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
+        })))))), hAsync("tbody", { key: '87c7b41c699b02f2fe8802befd7f5d5013b2d4be' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -23628,7 +23959,7 @@ class KolTabs {
                             return this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);
                         }
                         else {
-                            devHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);
+                            devHint(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`);
                         }
                     }
                 }
@@ -23699,11 +24030,11 @@ class KolTabs {
             } }))));
     }
     render() {
-        return (hAsync(Host, { key: '668b8fe78f5053ce356e685104518338aa9f73b9', class: "kol-tabs" }, hAsync("div", { key: '5845ac11d2ebf8abe1e515aea9f9c68c56ee9a57', ref: (el) => {
+        return (hAsync(Host, { key: '1092ece9e1623621dcd253ff8d32eb1470471993', class: "kol-tabs" }, hAsync("div", { key: '42c75328542b14057998aaa615c692e15870e5ce', ref: (el) => {
                 this.tabPanelsElement = el;
             }, class: {
                 [`tabs-align-${this.state._align}`]: true,
-            } }, this.renderButtonGroup(), hAsync("div", { key: '67ef993b870a8ff374c2cc4f750de970d578edea', class: "tabs-content", ref: this.catchTabPanelHost }))));
+            } }, this.renderButtonGroup(), hAsync("div", { key: '89eb64ffefa3234cb2ba93532a775cc2e1cf0968', class: "tabs-content", ref: this.catchTabPanelHost }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -23723,23 +24054,23 @@ class KolTabs {
                         this.onCreateLabel = value.onCreate.label;
                     }
                     else {
-                        Log.debug(`[KolTabs] Der Label-Text für Neu in {
+                        Log.debug(`[KolTabs] The label text for New in {
   onCreate: {
     label: string (!),
     callback: Function
   }
-} ist nicht korrekt gesetzt.`);
+} is not set correctly.`);
                     }
                     if (typeof value.onCreate.callback === 'function') {
                         callbacks.onCreate = value.onCreate.callback;
                     }
                     else {
-                        Log.debug(`[KolTabs] Die onCreate-Callback-Funktion für Neu in {
+                        Log.debug(`[KolTabs] The onCreate callback function for New in {
   onCreate: {
     label: string,
     callback: Function (!)
   }
-} ist nicht korrekt gesetzt.`);
+} is not set correctly.`);
                     }
                 }
                 else {
@@ -23903,26 +24234,32 @@ const increaseTextareaHeight = (el) => {
 class KolTextarea {
     async getValue() {
         var _a;
-        return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+        return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    async focus() {
+        await this.kolFocus();
+    }
+    async kolFocus() {
+        var _a;
+        (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '7cb15c2d57dc4eebfc0313970df31c77591b3330', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: '50f876f99fadc4f519b09508ce3448d6ec1220d2', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'da39fb9ef3b2a001c98574681acb31b82f015463', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'ec1e3ec583281b6ff59e964a57ab405defbf97e1', slot: "input" }, hAsync("textarea", Object.assign({ key: 'ffe328cbb651a1018012eeded0f30995f0f23e34', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput, style: {
+        return (hAsync(Host, { key: 'db199ad3fd9fae0a23f3de8b54b15a20c04a3c95', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: '2ef6815d8e956d0ff94b19e40bc754cb19223152', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'cdcb791763a07b2c04bd152cb02d0a3750a19420', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '04e8f1b97df661b5fd0b7c20f48e1ae165995223', slot: "input" }, hAsync("textarea", Object.assign({ key: '0ad4e21fe58c68fb9a5007738ecc0f378cfbd08c', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput, style: {
                 resize: this.state._resize,
             }, value: this.state._value }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            this.ref = ref;
-            propagateFocus(this.host, this.ref);
+            this.textareaRef = ref;
         };
         this.onInput = (event) => {
-            if (this.ref instanceof HTMLTextAreaElement) {
-                setState(this, '_currentLength', this.ref.value.length);
+            if (this.textareaRef instanceof HTMLTextAreaElement) {
+                setState(this, '_currentLength', this.textareaRef.value.length);
                 if (this.state._adjustHeight) {
-                    this._rows = increaseTextareaHeight(this.ref);
+                    this._rows = increaseTextareaHeight(this.textareaRef);
                 }
                 this.controller.onFacade.onInput(event);
             }
@@ -24045,8 +24382,9 @@ class KolTextarea {
     componentDidLoad() {
         setTimeout(() => {
             var _a;
-            if (this._adjustHeight === true && this.ref) {
-                this._rows = ((_a = this.state) === null || _a === void 0 ? void 0 : _a._rows) && this.state._rows > increaseTextareaHeight(this.ref) ? this.state._rows : increaseTextareaHeight(this.ref);
+            if (this._adjustHeight === true && this.textareaRef) {
+                this._rows =
+                    ((_a = this.state) === null || _a === void 0 ? void 0 : _a._rows) && this.state._rows > increaseTextareaHeight(this.textareaRef) ? this.state._rows : increaseTextareaHeight(this.textareaRef);
             }
             else if (!this._rows) {
                 this._rows = 1;
@@ -24122,7 +24460,9 @@ class KolTextarea {
             "_touched": [1540],
             "_value": [1],
             "state": [32],
-            "getValue": [64]
+            "getValue": [64],
+            "focus": [64],
+            "kolFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -24193,7 +24533,7 @@ class KolToastContainer {
         }
     }
     render() {
-        return (hAsync(Host, { key: '4d7752f9c0213f4f307f79934a7c36ed0dc62087', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '8837aeb34d2d0185e7c69997da07eeb95119177a', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
+        return (hAsync(Host, { key: '36c5561666fee5691aa7f732dcd90f5e4fe75457', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'fe4187d5afff3547776ba89b695386bef8e05c93', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
                 onClick: () => {
                     void this.closeAll();
                 },
@@ -24216,7 +24556,7 @@ class KolToastContainer {
     }; }
 }
 
-const defaultStyleCss$3 = "@layer kol-global {\n  .sc-kol-toolbar-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-toolbar-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-toolbar-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-toolbar-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .toolbar {\n    display: flex;\n    align-items: center;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}";
+const defaultStyleCss$3 = "@layer kol-global {\n  .sc-kol-toolbar-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-toolbar-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-toolbar-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-toolbar-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .toolbar {\n    display: flex;\n    align-items: center;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n  }\n  .toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}";
 var KolToolbarDefaultStyle0 = defaultStyleCss$3;
 
 const TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';
@@ -24245,7 +24585,7 @@ class KolToolbar {
         this._items = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '29b8b51a8b11f85689af5dbfe31df4dca1507ae1', class: "kol-toolbar" }, hAsync("div", { key: '2023765a0433e6666e82e79c9c33b59bb741ea2a', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
+        return (hAsync(Host, { key: '9f6ed1dc6f76f186fb82cf82c06560692ff3e170', class: "kol-toolbar" }, hAsync("div", { key: '0a90aa25fa7522291ebc34adfdd21ac09152bea2', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -24281,7 +24621,7 @@ class KolToolbar {
         if (currentIndex === nextIndex)
             return;
         this.currentIndex = nextIndex;
-        (_b = this.getCurrentToolbarItem(nextIndex)) === null || _b === void 0 ? void 0 : _b.focus();
+        void ((_b = this.getCurrentToolbarItem(nextIndex)) === null || _b === void 0 ? void 0 : _b.kolFocus());
     }
     handleBlur(event) {
         if (event.target === this.host)
@@ -24446,7 +24786,7 @@ class KolTooltipWc {
         this.showOrHideTooltip();
     }
     render() {
-        return (hAsync(Host, { key: '7ca9fb689361a6f851c60354e6b95fe3cff62024', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: '3a3e7ff629cbcb27527a59e56d69eea8e3820c6b', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: 'f76d6505b8e5355079f70c4ab78c13b8d028d0fb', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: '2ad56a436ed23f2b07a2c277b1de2d58794b897e', class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
+        return (hAsync(Host, { key: '1c7cc2feefe8a7c96cd7b018295299ecefcedbe4', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: 'f6bb8c33a660b5748eb14dfa4a2398da38e9be39', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: '900eb0ed9b258c432dd0662dd4f93eb9f894df50', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: '60ccad7c22d86c8d168212223e59ba6790a546c0', class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -24516,7 +24856,7 @@ class KolTooltipWc {
     }; }
 }
 
-const defaultStyleCss$2 = "@layer kol-global {\n  .sc-kol-tree-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-tree-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-tree-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-tree-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}";
+const defaultStyleCss$2 = "@layer kol-global {\n  .sc-kol-tree-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \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  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    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-tree-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-tree-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \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}\n@layer kol-component {\n  .sc-kol-tree-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}";
 var KolTreeDefaultStyle0 = defaultStyleCss$2;
 
 class KolTree {
@@ -24525,7 +24865,7 @@ class KolTree {
         this._label = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '4eb697e204b62a16ee5b3fd17e78e8b9c5c0c211', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'f13e3b2c6a86533d55fc2108a6eff0087f43b790', _label: this._label }, hAsync("slot", { key: '593f174a800c7cc805eca14f8ef28e886415c8a4' }))));
+        return (hAsync(Host, { key: 'dcecaa4251615a78aaa446af89fbdfdd81cc8029', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'ccf2f97fab1be1ea608ac67ed358bc8211ed390f', _label: this._label }, hAsync("slot", { key: '891e12670a8bcacc1c219544bbf915705ae6f963' }))));
     }
     static get style() { return {
         default: KolTreeDefaultStyle0
@@ -24542,7 +24882,7 @@ class KolTree {
     }; }
 }
 
-const defaultStyleCss$1 = "@layer kol-component {\n  .sc-kol-tree-item-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+const defaultStyleCss$1 = "@layer kol-component {\n  .sc-kol-tree-item-default-h {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree-link.first-level > a {\n    padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-link > a {\n    padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(1.4rem * var(--level));\n    padding-top: calc(6.4rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  a .kol-span-wc {\n    display: block;\n  }\n}";
 var KolTreeItemDefaultStyle0 = defaultStyleCss$1;
 
 class KolTreeItem {
@@ -24573,7 +24913,7 @@ class KolTreeItem {
         return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
     }
     render() {
-        return (hAsync(KolTreeItemWcTag, { key: 'fd5558fc8ed9c498766b0db58544dd8d730448ab', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '7adb4e2c137ce675c2608e58794ab52646153405' })));
+        return (hAsync(KolTreeItemWcTag, { key: 'ef6ed03ba5870a8becbb286898a5911b5525a21c', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'f51d43a0a36cfd224a53324068d5ed28e4d9d079' })));
     }
     static get style() { return {
         default: KolTreeItemDefaultStyle0
@@ -24600,6 +24940,11 @@ class KolTreeItem {
 class KolTreeItemWc {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.groupId = `tree-group-${nonce()}`;
+        this.renderIcon = (props) => {
+            return hAsync(KolIconTag, { class: "toggle-button-icon", _label: props.label, _icons: props.icon });
+        };
+        this.level = undefined;
         this.state = {
             _active: false,
             _hasChildren: false,
@@ -24613,11 +24958,17 @@ class KolTreeItemWc {
         this._href = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '922aae251164d4c84619633d0b031bb6019792a6', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '412a8470bea6b4b738bd156b3b0c94b2207b7759', class: "tree-item" }, hAsync(KolLinkTag, { key: '849beb0ce827da5e662308ce704f7db6b7ffbe80', class: {
+        const { _href, _active, _hasChildren, _open, _label } = this.state;
+        return (hAsync(Host, { key: 'a7478410c633314ba5b7a9e8588b5b9484efeb94', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '6c3ad7b0e013ec83d92f0d05a222d0696aa98729', class: "tree-item", style: {
+                '--level': `${this.level}`,
+            } }, hAsync(KolLinkWcTag, { key: 'fbd0b31027e032f6df61652df29a0b37ef67a104', class: {
                 'tree-link': true,
-                active: Boolean(this.state._active),
-            }, _label: "", _href: this.state._href, ref: (element) => (this.linkElement = element), _tabIndex: this.state._active ? 0 : -1 }, hAsync("span", { key: '1fe521b37ce81b3a681b7692ebe530d19928182d', slot: "expert" }, this.state._hasChildren &&
-            (this.state._open ? (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleCollapseClick(event) }, "-")) : (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleExpandClick(event) }, "+"))), ' ', this.state._label)), hAsync("ul", { key: '0c81c08973ef493345311d8f7f4eb880c248b5d5', hidden: !this.state._hasChildren || !this.state._open, role: "group" }, hAsync("slot", { key: '94c3615e5b2a3892f7e72ce90290afbc965a1528' })))));
+                'first-level': this.level === 0,
+                active: Boolean(_active),
+            }, _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _open, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '361d16b78885085be82c83e6fe4b8bd83e8274d7', slot: "expert" }, _hasChildren && (hAsync("span", { key: '3a742c6ea9fa940854cb21f1607ab0490c091558', class: "toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, this.renderIcon({
+            icon: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`,
+            label: _open ? 'Vorschläge öffnen' : 'Vorschläge schließen',
+        }))), ' ', _label)), hAsync("ul", { key: '087a87f28d8f06d72cee95f9ab553f7f79e16496', hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '8e286b2265806859a9bd61809c6387331df607f3' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);
@@ -24637,20 +24988,30 @@ class KolTreeItemWc {
         this.validateOpen(this._open);
         this.validateHref(this._href);
         this.checkForChildren();
+        this.determineTreeItemDepth();
+    }
+    determineTreeItemDepth() {
+        let level = 0;
+        let traverseItem = this.host.parentNode.host.parentNode;
+        while (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {
+            traverseItem = traverseItem.parentElement;
+            level += 1;
+        }
+        this.level = level;
     }
     handleSlotchange() {
         this.checkForChildren();
     }
     checkForChildren() {
-        var _a;
-        this.state = Object.assign(Object.assign({}, this.state), { _hasChildren: Boolean((_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements().length) });
+        var _a, _b;
+        this.state = Object.assign(Object.assign({}, this.state), { _hasChildren: Boolean((_b = (_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).length) });
     }
     async focusLink() {
-        this.linkElement.focus();
+        await this.linkElement.kolFocus();
     }
     async handleExpandClick(event) {
         event.preventDefault();
-        this.linkElement.focus();
+        await this.linkElement.kolFocus();
         await this.expand();
     }
     async expand() {
@@ -24687,6 +25048,7 @@ class KolTreeItemWc {
             "_label": [1],
             "_open": [4],
             "_href": [1],
+            "level": [32],
             "state": [32],
             "focusLink": [64],
             "expand": [64],
@@ -24699,8 +25061,6 @@ class KolTreeItemWc {
     }; }
 }
 
-const TREE_ITEM_TAG_NAME = 'kol-tree-item';
-
 class KolTreeWc {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -24713,10 +25073,10 @@ class KolTreeWc {
         validateLabel(this, value);
     }
     render() {
-        return (hAsync(Host, { key: '7c9d73edb4c812b2dbb0c14fd7d23d74d8bfea7b', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'b52bf9bda7e966e098509d135b9ea6ae80e5f530', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '2a9f9e5f0bf2dfa56d41bf5d371c18bdc60e0da9', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'c114c9fab49fb6298c97851e2d08a800d54e06b2' })))));
+        return (hAsync(Host, { key: 'd8edad29edf6c40702763ed84d2eff012c17c511', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'f35ee92ece4bdb6375c016cbabba84d8cfa6be25', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '0c2d424ec9f9dcb9d2a115f445cc2aff5dff5864', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '5caf2660158c816c84caacc9301a8ce1b22910e3' })))));
     }
     static isTreeItem(element) {
-        return (element === null || element === void 0 ? void 0 : element.tagName) === TREE_ITEM_TAG_NAME.toUpperCase();
+        return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
     }
     componentWillLoad() {
         this.validateLabel(this._label);
@@ -24736,22 +25096,24 @@ class KolTreeWc {
         this.handleTreeChange();
     }
     observeTopLevelItems() {
-        this.getTopLevelTreeItems().forEach((treeItem) => {
+        var _a;
+        (_a = this.getTopLevelTreeItems()) === null || _a === void 0 ? void 0 : _a.forEach((treeItem) => {
             var _a;
             (_a = this.observer) === null || _a === void 0 ? void 0 : _a.observe(treeItem, { childList: true, subtree: true });
         });
     }
     getTopLevelTreeItems() {
-        var _a;
-        return ((_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedNodes()).filter(KolTreeWc.isTreeItem);
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedNodes) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.filter(KolTreeWc.isTreeItem);
     }
     handleTreeChange() {
         this.treeItemElements = this.getTreeItemElements();
         void this.ensureActiveItemVisibility();
     }
     getTreeItemElements() {
-        return this.getTopLevelTreeItems().reduce((accumulator, currentValue) => {
-            const children = currentValue.querySelectorAll(TREE_ITEM_TAG_NAME);
+        var _a;
+        return (_a = this.getTopLevelTreeItems()) === null || _a === void 0 ? void 0 : _a.reduce((accumulator, currentValue) => {
+            const children = currentValue.querySelectorAll(KolTreeItemTag);
             return [...accumulator, currentValue, ...children];
         }, []);
     }
@@ -24776,7 +25138,7 @@ class KolTreeWc {
     async handleKeyDown(event) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const openItems = await this.getOpenTreeItemElements();
-        const currentTreeItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(TREE_ITEM_TAG_NAME);
+        const currentTreeItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(KolTreeItemTag);
         if (!openItems || !currentTreeItem) {
             return;
         }
@@ -24839,7 +25201,7 @@ class KolTreeWc {
                 break;
             }
             case '*': {
-                const siblings = (_j = currentTreeItem.parentElement) === null || _j === void 0 ? void 0 : _j.querySelectorAll(TREE_ITEM_TAG_NAME);
+                const siblings = (_j = currentTreeItem.parentElement) === null || _j === void 0 ? void 0 : _j.querySelectorAll(KolTreeItemTag);
                 siblings === null || siblings === void 0 ? void 0 : siblings.forEach((element) => {
                     void element.expand();
                 });
@@ -24848,19 +25210,19 @@ class KolTreeWc {
         }
     }
     async handleFocusOut(event) {
-        if (event.relatedTarget && !event.relatedTarget.closest('kol-tree')) {
+        if (event.relatedTarget && !event.relatedTarget.closest(KolTreeTag)) {
             await this.ensureActiveItemVisibility();
         }
     }
     async ensureActiveItemVisibility() {
         const findActiveItem = () => {
-            var _a;
-            const rootNodes = ((_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedNodes()).filter(KolTreeWc.isTreeItem);
+            var _a, _b, _c, _d;
+            const rootNodes = (_d = (_c = (_b = (_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedNodes) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.filter(KolTreeWc.isTreeItem)) !== null && _d !== void 0 ? _d : [];
             for (const rootNode of rootNodes) {
                 if (rootNode._active) {
                     return rootNode;
                 }
-                const childMatch = rootNode.querySelector('kol-tree-item[_active="true"]');
+                const childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active="true"]`);
                 if (childMatch && childMatch._active) {
                     return childMatch;
                 }
@@ -24906,7 +25268,7 @@ class KolVersion {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'a4c3e7f9b27e9839b0d55418532cdbf2eebed285', class: "kol-version" }, hAsync(KolBadgeTag, { key: 'b22098b308a2b0513068a25ff758368c116efdde', _color: "#bec5c9", _icons: {
+        return (hAsync(Host, { key: '51981d335a1e807d075a5547cb3f1e52b9ce80cc', class: "kol-version" }, hAsync(KolBadgeTag, { key: 'f2441045e818b8da85adad32303a1a9a289c26c3', _color: "#bec5c9", _icons: {
                 left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
             }, _label: this.state._label })));
     }
@@ -24954,6 +25316,7 @@ registerComponents([
   KolCard,
   KolCombobox,
   KolDetails,
+  KolDrawer,
   KolForm,
   KolHeading,
   KolHeadingWc,