@public-ui/hydrate 2.2.20-rc.2 → 2.2.21-rc.0

package/dist/index.js

@@ -2660,7 +2660,7 @@ var loglevel = {exports: {}};
 
 var h = loglevel.exports;
 
-const I=(t,e)=>s=>s(t,e),P$1=(t,e)=>s=>s(t,e,{append:!1}),$=()=>{const t=typeof process<"u"&&process.env?process.env:{},e=t.NODE_ENV==="test",s="VITEST"in t,a="JEST_WORKER_ID"in t,o="PLAYWRIGHT_TEST_BASE_URL"in t,r=t.CI==="true",i=t.TEST==="true"||t.IS_TEST==="true",c=typeof navigator<"u"&&navigator.webdriver===!0,m=typeof navigator<"u"&&/playwright|puppeteer|webdriver|selenium|testcafe/i.test(navigator.userAgent);return e||s||a||o||r||i||c||m},n$1={A11yUi:{CSS_STYLE_CACHE:new Map,IS_TEST_ENVIRONMENT:$(),PERFORMANCE_MEASURES:new Map,STYLING_TASK_QUEUE:new Map,THEMES:new Map,showAverageTimes:()=>{const t={};for(const[s,a]of n$1.A11yUi.PERFORMANCE_MEASURES.entries())t[s]=[a.totalTime/a.count,a.count];const e=Object.entries(t).sort((s,a)=>a[1][0]-s[1][0]);return console.table(Object.fromEntries(e.map(([s,[a,o]])=>[s,{"avg (ms)":parseFloat(a.toFixed(2)),count:o}]))),t}}};let f=!1;const j=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,F=t=>typeof t=="string"&&j.test(t),E=t=>{if(!F(t))throw new Error(`[Theming] The theme identifier "${typeof t=="string"?t:""}" (Type: ${typeof t}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},g=t=>t.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\s*([{},;])\s*/g,"$1").replace(/:\s+/g,":").replace(/\s+/g," ").replace(/;\}/g,"}").trim(),Y=(t,e,s,a)=>u$1(t,e,s,a),u$1=(t,e,s,a)=>{a=a??{},a.append=a.append??!1,E(t),!f&&(f=!0,h.warn(`[Theming] The theme process is locked. This means that the theme "${t}" should not be patched.
+const j=(t,e)=>s=>s(t,e),F=(t,e)=>s=>s(t,e,{append:!1}),Y=()=>{const t=typeof process<"u"&&process.env?process.env:{},e=t.NODE_ENV==="test",s="VITEST"in t,o="JEST_WORKER_ID"in t,a="PLAYWRIGHT_TEST_BASE_URL"in t,r=t.CI==="true",i=t.TEST==="true"||t.IS_TEST==="true",c=typeof navigator<"u"&&navigator.webdriver===!0,y=typeof navigator<"u"&&/playwright|puppeteer|webdriver|selenium|testcafe/i.test(navigator.userAgent);return e||s||o||a||r||i||c||y},n$1={A11yUi:{CSS_STYLE_CACHE:new Map,IS_TEST_ENVIRONMENT:Y(),PERFORMANCE_MEASURES:new Map,STYLING_TASK_QUEUE:new Map,THEMES:new Map,showAverageTimes:()=>{const t={};for(const[s,o]of n$1.A11yUi.PERFORMANCE_MEASURES.entries())t[s]=[o.totalTime/o.count,o.count];const e=Object.entries(t).sort((s,o)=>o[1][0]-s[1][0]);return console.table(Object.fromEntries(e.map(([s,[o,a]])=>[s,{"avg (ms)":parseFloat(o.toFixed(2)),count:a}]))),t}}};let f=!1;const k=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,G=t=>typeof t=="string"&&k.test(t),S=t=>{if(!G(t))throw new Error(`[Theming] The theme identifier "${typeof t=="string"?t:""}" (Type: ${typeof t}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},A=t=>t.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\s*([{},;])\s*/g,"$1").replace(/:\s+/g,":").replace(/\s+/g," ").replace(/;\}/g,"}").trim(),x=(t,e,s,o)=>T(t,e,s,o),T=(t,e,s,o)=>{o=o??{},o.append=o.append??!1,S(t),!f&&(f=!0,h.warn(`[Theming] The theme process is locked. This means that the theme "${t}" should not be patched.
 
     import { register } from 'adopted-style-sheets';
     import { defineCustomElements } from '...';
@@ -2670,7 +2670,7 @@ const I=(t,e)=>s=>s(t,e),P$1=(t,e)=>s=>s(t,e,{append:!1}),$=()=>{const t=typeof
     .then(() => {
         // run your app or website
     })
-    .catch(console.warn);`));let o=n$1.A11yUi.THEMES.get(t);if(o||(o=new Map,n$1.A11yUi.THEMES.set(t,o)),a.append&&o.has(e)){const r=o.get(e);o.set(e,g(`${r}${s}`));}else o.set(e,g(s));},k=(t,e,s,a)=>p(t,e,s,a),p=(t,e,s,a)=>(E(t),typeof e=="object"&&e!==null&&Object.getOwnPropertyNames(e).forEach(o=>{const r=e[o],i=o.toLowerCase(),c=typeof a?.transformTagName=="function"&&!["GLOBAL","PROPERTIES"].includes(o)?a.transformTagName(i):o;typeof r=="string"&&r.length>0&&u$1(t,c.toUpperCase(),r,s);}),t);const w=new Set,W=/--[^;]+/g,q=/:/,J=typeof MutationObserver<"u";let N=()=>{};const X=(t,e)=>{let s=e.match(W);if(Array.isArray(s)){s=s.filter(o=>q.test(o));const a=document.createElement("style");a.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}w.add(t);},y=(t,e)=>{const s=n$1.A11yUi.THEMES.get(t);return s instanceof Map&&s.has(e)?s.get(e):""},Z$1=t=>{for(const e of Array.from(t.childNodes))if(e instanceof HTMLStyleElement&&e.tagName==="STYLE"&&e.dataset.themingFallback===void 0)t.removeChild(e);else break},ee=(t,e)=>{try{if(n$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];e.forEach(a=>{const o=new CSSStyleSheet;o.replaceSync(a),s.push(o);}),t.adoptedStyleSheets=s;}catch{[...e].reverse().forEach((a,o)=>{if(typeof a!="string"||a.length===0)return;const r=document.createElement("style");switch(r.dataset.themingFallback="",o){case 4:r.dataset.themingBaseA11y="";break;case 3:r.dataset.themingBaseGlobal="";break;case 2:r.dataset.themingBaseComponent="";break;case 1:r.dataset.themingCustomGlobal="";break;case 0:r.dataset.themingCustomComponent="";break;default:r.dataset.themingUnknown="";break}r.innerHTML=a,t.insertBefore(r,t.firstChild);});}},te=(t,e,s)=>{if(s!==!1){const a=[...Array.from(t.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE")];let o;try{o=[...Array.from(t.adoptedStyleSheets)];}catch{o=[];}s?.mode==="before"?(a.reverse().forEach(r=>e.unshift(r.innerHTML)),o.reverse().forEach(r=>e.unshift(Array.from(r.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(r=>e.push(r.innerHTML)),o.forEach(r=>e.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},se=(t,e,s)=>{const a=e.name||"default";let o;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");o=t.shadowRoot;}catch{o=t;}if(n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.has(t.tagName))v(t,o,n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.get(t.tagName),s);else {const r=y(a,"PROPERTIES"),i=y(a,"GLOBAL"),c=y(a,t.tagName);w.has(a)===!1&&X(a,i);const m=[r,i,c];te(o,m,e.encroachCss),e.cache===!0&&(n$1.A11yUi.CSS_STYLE_CACHE.has(a)===!1&&n$1.A11yUi.CSS_STYLE_CACHE.set(a,new Map),n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.set(t.tagName,m)),v(t,o,m,s);}},v=(t,e,s,a)=>{const o=performance.now();if(Z$1(e),ee(e,s),H(t),a(),n$1.A11yUi.PERFORMANCE_MEASURES.has(t.tagName)){const r=n$1.A11yUi.PERFORMANCE_MEASURES.get(t.tagName);r.count+=1,r.totalTime+=performance.now()-o;}else n$1.A11yUi.PERFORMANCE_MEASURES.set(t.tagName,{count:1,totalTime:performance.now()-o});},L=t=>{const e=n$1.A11yUi.STYLING_TASK_QUEUE.get(t);if(e){const{resetCss:s,themeDetails:a}=e;se(t,a,s),H(t);}};const oe={attributes:!0,attributeFilter:[],childList:!1,subtree:!1},R=J?new MutationObserver((t,e)=>{for(const s of t){const a=s.target;a.classList.contains("hydrated")&&(L(a),e.observe(a,oe));}}):null;R&&(N=()=>{});const H=t=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(t),N();};class ie{Prefix;Key;Tag;createTheme=(e,s)=>P$1(e,s);createTranslation=(e,s)=>I(e,s);constructor(e,s,a){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
+    .catch(console.warn);`));let a=n$1.A11yUi.THEMES.get(t);if(a||(a=new Map,n$1.A11yUi.THEMES.set(t,a)),o.append&&a.has(e)){const r=a.get(e);a.set(e,A(`${r}${s}`));}else a.set(e,A(s));},K=(t,e,s,o)=>g(t,e,s,o),g=(t,e,s,o)=>(S(t),typeof e=="object"&&e!==null&&Object.getOwnPropertyNames(e).forEach(a=>{const r=e[a],i=a.toLowerCase(),c=typeof o?.transformTagName=="function"&&!["GLOBAL","PROPERTIES"].includes(a)?o.transformTagName(i):a;typeof r=="string"&&r.length>0&&T(t,c.toUpperCase(),r,s);}),t);const v=new Set,N=new Map,X=/--[^;]+/g,Z$1=/:/,ee=typeof MutationObserver<"u";let R=()=>{};const te=(t,e)=>{let s=e.match(X);if(Array.isArray(s)){s=s.filter(a=>Z$1.test(a));const o=document.createElement("style");o.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(o);}v.add(t);},d=(t,e)=>{const s=n$1.A11yUi.THEMES.get(t);if(s instanceof Map){const o=s.get(e);if(o!==void 0)return o}return ""},se=t=>{const e=t.firstChild;if(!(!(e instanceof HTMLStyleElement)||e.dataset.themingFallback!==void 0))for(const s of Array.from(t.childNodes))if(s instanceof HTMLStyleElement&&s.tagName==="STYLE"&&s.dataset.themingFallback===void 0)t.removeChild(s);else break},oe=(t,e)=>{try{if(n$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=e.filter(o=>typeof o=="string"&&o.length>0).map(o=>{let a=N.get(o);return a||(a=new CSSStyleSheet,a.replaceSync(o),N.set(o,a)),a});t.adoptedStyleSheets=s;}catch{for(let o=e.length-1;o>=0;o--){const a=e[o];if(typeof a!="string"||a.length===0)continue;const r=e.length-1-o,i=document.createElement("style");switch(i.dataset.themingFallback="",r){case 4:i.dataset.themingBaseA11y="";break;case 3:i.dataset.themingBaseGlobal="";break;case 2:i.dataset.themingBaseComponent="";break;case 1:i.dataset.themingCustomGlobal="";break;case 0:i.dataset.themingCustomComponent="";break;default:i.dataset.themingUnknown="";break}i.innerHTML=a,t.insertBefore(i,t.firstChild);}}},ae=(t,e,s)=>{if(s===!1||s?.mode!=="before"&&s?.mode!=="after")return;const o=Array.from(t.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE");let a;try{a=Array.from(t.adoptedStyleSheets);}catch{a=[];}if(!(o.length===0&&a.length===0))if(s.mode==="before"){const r=[...a.map(i=>Array.from(i.cssRules).map(c=>c.cssText).join("")),...o.map(i=>i.innerHTML)];e.unshift(...r);}else o.forEach(r=>e.push(r.innerHTML)),a.forEach(r=>e.push(Array.from(r.cssRules).map(i=>i.cssText).join("")));},ne=(t,e,s)=>{const o=e.name||"default";let a;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");a=t.shadowRoot;}catch{a=t;}const r=n$1.A11yUi.CSS_STYLE_CACHE.get(o)?.get(t.tagName);if(r)_(t,a,r,s);else {const i=d(o,"PROPERTIES"),c=d(o,"GLOBAL"),y=d(o,t.tagName);v.has(o)===!1&&te(o,c);const u=[i,c,y];if(ae(a,u,e.encroachCss),e.cache===!0){let m=n$1.A11yUi.CSS_STYLE_CACHE.get(o);m||(m=new Map,n$1.A11yUi.CSS_STYLE_CACHE.set(o,m)),m.set(t.tagName,u);}_(t,a,u,s);}},_=(t,e,s,o)=>{const a=n$1.A11yUi.Theme?.loglevel==="debug",r=a?performance.now():0;if(se(e),oe(e,s),me(t),requestAnimationFrame(o),a){const i=performance.now()-r,c=n$1.A11yUi.PERFORMANCE_MEASURES.get(t.tagName);c?(c.count+=1,c.totalTime+=i):n$1.A11yUi.PERFORMANCE_MEASURES.set(t.tagName,{count:1,totalTime:i});}},O=t=>{const e=n$1.A11yUi.STYLING_TASK_QUEUE.get(t);if(e){const{resetCss:s,themeDetails:o}=e;ne(t,o,s);}};const ce={attributes:!0,attributeFilter:[],childList:!1,subtree:!1},I=ee?new MutationObserver((t,e)=>{const s=[];for(const o of t){const a=o.target;a.classList.contains("hydrated")&&n$1.A11yUi.STYLING_TASK_QUEUE.has(a)&&(O(a),s.push(a));}for(const o of s)e.observe(o,ce);}):null;I&&(R=()=>{});const me=t=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(t),R();};class fe{Prefix;Key;Tag;createTheme=(e,s)=>F(e,s);createTranslation=(e,s)=>j(e,s);constructor(e,s,o){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(o);}}
 
 var KeyEnum;
 (function (KeyEnum) {
@@ -3802,9 +3802,9 @@ const koliBriQuerySelector = (selector, node) => querySelector(selector, node ||
 const koliBriQuerySelectorAll = (selector, node) => querySelectorAll(selector, node || getDocument());
 class KoliBriDevHelper {
 }
-KoliBriDevHelper.getCssStyle = y;
-KoliBriDevHelper.patchTheme = k;
-KoliBriDevHelper.patchThemeTag = Y;
+KoliBriDevHelper.getCssStyle = d;
+KoliBriDevHelper.patchTheme = K;
+KoliBriDevHelper.patchThemeTag = x;
 KoliBriDevHelper.querySelector = koliBriQuerySelector;
 KoliBriDevHelper.querySelectorAll = koliBriQuerySelectorAll;
 KoliBriDevHelper.stringifyJson = stringifyJson;
@@ -4501,7 +4501,7 @@ var KoliBriProgressVariantEnum;
     KoliBriProgressVariantEnum["cycle"] = "cycle";
 })(KoliBriProgressVariantEnum || (KoliBriProgressVariantEnum = {}));
 
-new ie('kol', KeyEnum, TagEnum);
+new fe('kol', KeyEnum, TagEnum);
 
 let nonce = () => Math.floor(Math.random() * 16777215).toString(16);
 if (processEnv === 'test') {
@@ -5861,20 +5861,25 @@ class AssociatedInputController {
 
 class KolButtonWc {
     async kolFocus() {
-        var _a;
-        (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     render() {
         var _a;
         const hasExpertSlot = showExpertSlot(this.state._label);
         const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
-        return (hAsync(Host, { key: 'f7d28ae66eba095181dd66f022820b39b4ba70ac', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '8203a3fabc4b1c63d49729a5540df42afd464f4f', ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), "aria-keyshortcuts": this.state._shortKey, class: {
+        return (hAsync(Host, { key: '72b39aeae02832173cc71325c24868e6a644e76f', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '399d111ec92384c05a358e2454f94a83395b9b50', ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), "aria-keyshortcuts": this.state._shortKey, 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: '9153591170a775ea44dea040929bc5dc448624f4', class: "button-inner", _badgeText: this.state._accessKey || this.state._shortKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'ee5def8877b5021d283b8903524d1540e720b36c', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: 'db67f875e50942b5759096dc64bb09b4835554f1', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _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: '3b3833d08213db84d1f2bc2be033c1865627b62f', class: "button-inner", _badgeText: this.state._accessKey || this.state._shortKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '0e720bf8fd610c4592411e0890dd883d638de66c', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: 'f9d29f9d7ecff5576cb0eb32fc8011fc107573f0', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -6453,8 +6458,13 @@ class KolCombobox {
         return this.state._value;
     }
     async kolFocus() {
-        var _a;
-        (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     selectOption(option) {
         var _a;
@@ -6524,13 +6534,13 @@ class KolCombobox {
     render() {
         const hasExpertSlot = showExpertSlot(this.state._label);
         const { ariaDescribedBy } = getRenderStates(this.state);
-        return (hAsync(Host, { key: '97a196e850aa5d2eecbef98e95f2e7e43d481398', class: "kol-combobox" }, hAsync("div", { key: '3fec9fecdfcec185d5ac6de5ead3c06c64e85bbf', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: 'fc0f9af4e64f5cd208f5e0a95b50690cacff8495', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'faa146b80f0a24891c09eb553e30295f0dcd09a5', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '25c253a2ef6ac43e452ab1bde1ad144778d9e52b', slot: "input" }, hAsync("div", { key: '07aae6b31ec2f4828c76b9477d9bfe1f07236d8e', class: "combobox__group" }, hAsync("input", Object.assign({ key: '27228351b431301f16a14990ee797fc44ce5b20b', 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-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
+        return (hAsync(Host, { key: '1de35d10edaef706615095d3323f0f6101b3c404', class: "kol-combobox" }, hAsync("div", { key: '224bf9bf096eb4203abf33fce2ad23c2390f9918', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: 'b30dbc59a547b0dfb40ac84307b72b70255742bd', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '12dcb1c35fae997d044d3b1051458147919c1adb', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '0b725fff09d7b7a88f9e91c7fbb52b292f9c92e1', slot: "input" }, hAsync("div", { key: 'e0c4c6229acc738f894d33939251f4484fc1f1b6', class: "combobox__group" }, hAsync("input", Object.assign({ key: '8025fe21ffe146f4abb046a977bdee335868a957', 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-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            }, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: 'cfab4ec401f29992d16d55e516303764c0ef1255', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '8842c4f1659ba773b426b4777b21c98fbdb4806d', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '3a3e973a85b5a3a72090b3051dfd0f7c721a2e1e', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
+            }, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '7e3a5739fe56902a9861e841ca47796b31dc11b0', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '108ff74063106085f9f5ab1ca207b5636d77fc3d', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '18b9105b2a475b4c7e4187567b2b9ea6b8331c51', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
                     if (el)
@@ -7634,19 +7644,24 @@ class KolInputCheckbox {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '54314ab8aa4fdf3473ff8aef59cd6bf4325e4264', class: "kol-input-checkbox" }, hAsync(KolInputTag, { key: 'c1de0e605fcbd71a3b798f5ae3a780f4956cfa5f', class: {
+        return (hAsync(Host, { key: '4cadc5a62e5a1ea876f3a1b4aee4dfd25d4a8f64', class: "kol-input-checkbox" }, hAsync(KolInputTag, { key: '0066a35b63781caf20487e561dadeec425023d5e', class: {
                 checkbox: true,
                 [this.state._variant]: true,
                 'hide-label': !!this.state._hideLabel,
                 checked: this.state._checked,
                 indeterminate: this.state._indeterminate,
-            }, "data-label-align": this.state._labelAlign || 'right', "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'f1893052b26a18936dc0a89a23488ee8b420f766', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: 'b8f26a59b4b6906e3fee27424d59be38808d8613', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '2bf8c73a611fc024e2386da1240e87e436bcfff5', 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: '30ea99a1843b978361be16c136f7e90427570dbc', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, 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, onKeyDown: this.onKeyDown.bind(this), onFocus: (event) => {
+            }, "data-label-align": this.state._labelAlign || 'right', "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '6f573626553adacd6aee5ffe842808c3c0512cc1', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: '2d3921dd12084a11bfa45c816a72d9ef533aeeb6', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '1579ae9ba28afb9224aae21b9bd0d9cec4947fb2', 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: '47dba5d60adc6f3d5b11e4da162ba2f7768b205f', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, 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, onKeyDown: this.onKeyDown.bind(this), onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -7912,17 +7927,22 @@ class KolInputColor {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     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: 'f51b0ef9c80cc4c4e4269b0a740456fb6f732970', class: "kol-input-color" }, hAsync(KolInputTag, { key: 'cfa830bccbb38aeca961f0464bfbb1bc5fe3cc86', class: {
+        return (hAsync(Host, { key: '14802386cf0adc1cc1817c249c55e2e4b6f3c4d8', class: "kol-input-color" }, hAsync(KolInputTag, { key: 'b4560179abffdb5ee068cbd55b4772d4f2fb358a', class: {
                 color: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _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: 'e8b9c07c11e608f35350f048dd1954f0816cd255', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '0436f72bcbfc2038e4c1702ab03f9de29f05a632', slot: "input" }, hAsync("input", Object.assign({ key: '1e0d72f2f8603147903c44684b6f77127ccc20fc', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", 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", type: "color", value: this.state._value }, this.controller.onFacade, { onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _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: '515bf88ae4da7e9ee9a81da42b3d432b57d9d41a', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '32c80e95114d947549cd9dba6aecfffe94f0450a', slot: "input" }, hAsync("input", Object.assign({ key: '783413ec677c8325d35570674c361210eee5397f', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", 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", type: "color", value: this.state._value }, this.controller.onFacade, { onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -8267,8 +8287,13 @@ class KolInputDate {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     async reset() {
         this.state = Object.assign(Object.assign({}, this.state), { _value: null });
@@ -8295,10 +8320,10 @@ class KolInputDate {
         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: '93a52554eed96378874b23f733dbfa90b6b2690e', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '8f7095710635d668bb98fb64858848d368141e3e', class: {
+        return (hAsync(Host, { key: '7e608a0da873bcf10d9b86be7fad4ad28fb2e219', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'ab411d3ae02fe92c8791e84db7e4b9eef1a6b6c8', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '81a03a1c6fcfc2d8d10c4e064b08159f3845661d', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '4fe71eae4be0f17cad1fe1b7bf0bb403423644dc', slot: "input" }, hAsync("input", Object.assign({ key: 'c3db6eda3830887bf9b9a632304899c8efd19ebb', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", 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, type: this.state._type, value: this.state._value || undefined }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onBlur: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '5730c3b2fd4a4515171edf5b75dc1711a8e6ea94', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '5abee0db0e6d0b78f22f60b0cb333d40a0075aae', slot: "input" }, hAsync("input", Object.assign({ key: '09f3aa26a9a7f8e5697db6fe38f9cb5a61a66431', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", 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, type: this.state._type, value: this.state._value || undefined }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
             }, onFocus: (event) => {
@@ -8702,17 +8727,22 @@ class KolInputEmail {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     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: '87b54144ba2372f1bf1e855e5f1a8d4988cc8ed1', class: {
+        return (hAsync(Host, { key: '1697bbe3f8d64a3cadb6b483ac94d4d0d6343539', class: {
                 'kol-input-email': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputTag, { key: '76421869fc331ea42ce957b9d7d77a9623b2552c', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '955a3404eb55137e26cd2c0bd93a4bd23be029e6', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '9af04c94e57dc47890cc141a1afce5219d00125c', slot: "input" }, hAsync("input", Object.assign({ key: '5cef4946b376abf0cff496cc3d57833f8fb1e552', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
+            } }, hAsync(KolInputTag, { key: '61c5c52d2f4dd6f5ee6574a71683d81c872cfe70', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'eccf5d623456062a3f60841f1fd59bb2064d3e31', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '8e37b9a6be99a8fb203865efc6f296d638bb9395', slot: "input" }, hAsync("input", Object.assign({ key: 'd40837383b7acbc6cce00b003190dd138fc6f90f', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -8995,16 +9025,21 @@ class KolInputFile {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '4a4aaf8af5bb433bf8be93ac3413d85de11240b3', class: "kol-input-file" }, hAsync(KolInputTag, { key: '9227fd90c2084e48b807c0f66e411a36f3aeffac', class: {
+        return (hAsync(Host, { key: '24b411d3c604d89b04631615d10ecb3cb6a03ffc', class: "kol-input-file" }, hAsync(KolInputTag, { key: 'ccf43e4a304839702ae0d76d33780377ff384cc7', class: {
                 file: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '0aeb1a3826413dfb213157ef7f62a0f587a000ae', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '17e47805e0a9d398dc9f989822ac9ce0739bdef2', slot: "input" }, hAsync("input", Object.assign({ key: 'e2704075485bf16386a701b8462a9670d954051f', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'f8097c605adcabb3adf462f322019d658d0f2b21', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '69aae8136317eeb3d7523cbc52bbcaf5c65041b8', slot: "input" }, hAsync("input", Object.assign({ key: '11830ba3a0567d4255d359f451efe534b8920be4', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -9299,20 +9334,25 @@ class KolInputNumber {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     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: 'eb1d37f4967a30d942d32a21433e01d026bb50b8', class: {
+        return (hAsync(Host, { key: 'a01b3ae7dbe3a123d460766bf9ce8c919cffb616', class: {
                 'kol-input-number': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputTag, { key: '1d172dfddec108f8f93b33a34de38aef48ff27d4', class: {
+            } }, hAsync(KolInputTag, { key: 'aa1b4422efcb0b7c8a3338db6e97421eee91a8f3', class: {
                 number: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '05497182c6cf9f5c58770c169bb2a55123fa42dd', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '426e5d151a8bf0ad0c1b5eb199050ca748241f6a', slot: "input" }, hAsync("input", Object.assign({ key: 'a4f0165273f1a4a72b66887453b4bd75b3a17148', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", 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, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '0d478c7411dc5b4b4138486369c3e1e70575931a', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f005eb5e009b8ae5f545172dba4604588ae7a4bb', slot: "input" }, hAsync("input", Object.assign({ key: '247f599bae4a0797970119064981bfd10b1fefde', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", 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, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -9555,19 +9595,24 @@ class KolInputPassword {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '15b7197b5618c538cc35327526fa2166d0a51191', class: {
+        return (hAsync(Host, { key: '053e1f02a90d4f37adb592296fcc55db16bbc325', class: {
                 'kol-input-password': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputTag, { key: '26f3feba5eba32326edec95c8554ebfd24a21df4', class: {
+            } }, hAsync(KolInputTag, { key: '9e9036e569c8073886d2329c21056bb4df3eeb36', class: {
                 'hide-label': !!this.state._hideLabel,
                 password: true,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '5ccc5da3301d1d8268556d1e0e95a728c5ff0dd2', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '25b20ac4c7f901599865fce0ce80c377cc98e30f', slot: "input" }, hAsync("input", Object.assign({ key: 'd18718282ace5965d2eb22aee8a440fa0f5155be', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '9a6e60ce548c6e07c621956ad3adfa555f4ea7a1', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '514fec85beb2176ee2cca2fc80e739ad9def4ae4', slot: "input" }, hAsync("input", Object.assign({ key: '0b408dad8716e91d2fae64fa93a5b40634e7ffd6', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -9840,20 +9885,25 @@ class KolInputRadio {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     render() {
         const { ariaDescribedBy, hasError, hasHint } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '0ace03e6b8caeac0abb1577ac3baac3dcd5a26ff', class: "kol-input-radio" }, hAsync("fieldset", { key: '94c25cd781f26aa3dc2938c2fd2b6d068b22117e', "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, class: {
+        return (hAsync(Host, { key: 'aacd43f73967156ee1ffd5452d05d554e9011d53', class: "kol-input-radio" }, hAsync("fieldset", { key: '55b6be289684f3d28474fb465d89d7756b577c97', "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, class: {
                 fieldset: true,
                 disabled: this.state._disabled === true,
                 error: hasError === true,
                 required: this.state._required === true,
                 'hidden-error': this._hideError === true,
                 [this.state._orientation]: true,
-            } }, hAsync("legend", { key: '92887a844b031ccdb7550e55550d3d528f851c40', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '6a28e88daa688a56ca2f8a453f77b7d55a3bd237' }, hAsync("span", { key: '6acfe8d22beff0105bec6f203e29bfde5f2c4ba5', slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : this._label))), this.state._options.map((option, index) => {
+            } }, hAsync("legend", { key: '7ddc271483f90f25372c6a5ddba259f18bb6df04', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: 'b34e2b42ec642bf033a7c58e905992258295f4ca' }, hAsync("span", { key: 'fdd91949f409e495b6ba8a027cd7959cf23af153', slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : this._label))), this.state._options.map((option, index) => {
             const customId = `${this.state._id}-${index}`;
             const slotName = `radio-${index}`;
             const selected = this.state._value === option.value;
@@ -9872,7 +9922,7 @@ class KolInputRadio {
                     padding: this.state._hideLabel ? '0' : undefined,
                     visibility: this.state._hideLabel ? 'hidden' : undefined,
                 } }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
-        }), hasError && hAsync(FormFieldMsgFc, { key: '2b39bf4d20435ee90359429bebfe12766d383b94', _alert: this.showAsAlert(), _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }), hasHint && (hAsync("span", { key: '9a18f783fa05aac61ac49475eb1f2bb1a83e4e63', class: "hint", id: `${this.state._id}-hint` }, this.state._hint)))));
+        }), hasError && hAsync(FormFieldMsgFc, { key: '5ec08b6bdaf01d265a24a3f61c8306f94f3e4645', _alert: this.showAsAlert(), _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }), hasHint && (hAsync("span", { key: '2a023220b8f779bed5c706a200086a6893c7f49e', class: "hint", id: `${this.state._id}-hint` }, this.state._hint)))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -10115,8 +10165,13 @@ class KolInputRange {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     getSanitizedFloatValue(value) {
         const floatValue = parseFloat(value);
@@ -10145,25 +10200,25 @@ 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: '4320eb6c533de3bfbaf8c2256c827615df36c414', class: "kol-input-range" }, hAsync(KolInputTag, { key: '60104e7233e3e88413d060f543479d8d05c56ef4', class: {
+        return (hAsync(Host, { key: 'b924053d094a0d8049c0988816401cc5107a2f40', class: "kol-input-range" }, hAsync(KolInputTag, { key: '198352572b8d5647ef7df99c447222fe732d5fdd', class: {
                 range: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'b38742b2e2438cfbc0814678638c1995733d693c', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '2b53f4e3222a7662a406c8adb9cc390c1b0117ed', slot: "input" }, hAsync("div", { key: '489aa83fbdd28b507ec2e6d06210928c3454a139', class: "inputs-wrapper", style: {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '48d7ee984cc30b0d3d7d367e25ec52b005254eee', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '6d7ff7ec22eb0570a4c02aa4c6ad8c9b3826c5da', slot: "input" }, hAsync("div", { key: '10af6000f2844496db597b737568d86b4faecab5', class: "inputs-wrapper", style: {
                 '--kolibri-input-range--input-number--width': `calc(${String((_a = this.state._max) !== null && _a !== void 0 ? _a : 100).length}ch + 2em)`,
-            } }, hAsync("input", Object.assign({ key: 'b5699432166b662b9414c4406a7a842e5676497e', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "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, step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onFocus: (event) => {
+            } }, hAsync("input", Object.assign({ key: '9cb81aac50fa96e641b1f36f7aeb02c49b1938e4', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "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, step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            } })), hAsync("input", Object.assign({ key: '8e4be9d94d12ed6931dcdf315db054b3158d4614', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", 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, onFocus: (event) => {
+            } })), hAsync("input", Object.assign({ key: '04838adc2b606a129cd6f80a6b9e6ae71e0a9b89', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", 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, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
             } }))), hasSuggestions && [
-            hAsync("datalist", { key: '05ab7a9b3a3f7c68f16db917cc057b635aacb25f', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: JSON.stringify(option) })))),
+            hAsync("datalist", { key: 'a0cba3e8afc7e3901b3da6207fc918415677c90f', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: JSON.stringify(option) })))),
         ]))));
     }
     constructor(hostRef) {
@@ -10394,20 +10449,25 @@ class KolInputText {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     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: '5da9e7f9dd1e1c68205fd2ab22809598a0297179', class: {
+        return (hAsync(Host, { key: '1955f330e0ca93d6bae951877f44e26f1d4ff5c5', class: {
                 'has-value': this.state._hasValue,
                 'kol-input-text': true,
-            } }, hAsync(KolInputTag, { key: 'da74a82740773df41e46feb174a67af46cc63927', class: {
+            } }, hAsync(KolInputTag, { key: '80808142f2a05e3cb8cf8a9d305c0e2e19eab272', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '0c57bff1a9346c6fa4949096599b5f90fff40764', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '71b08b97f5fdeeb9f795bd15b85fd66582636ee0', slot: "input" }, hAsync("input", Object.assign({ key: 'e1a154d67974795ffaeaf37a3650cdb99684d6d1', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: this.state._spellCheck, type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown, onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '8b53ff880493ad5a5ef84663a6c40bfb2d51ba22', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '322c980c568568156fc22c126d010a37f78e3af3', slot: "input" }, hAsync("input", Object.assign({ key: '4bb71629ce134aa44e5a31c7723e19374e5274c8', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: this.state._spellCheck, type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -11159,15 +11219,20 @@ class KolLinkWc {
         };
     }
     async kolFocus() {
-        var _a;
-        (_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     render() {
         var _a;
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
         const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
-        return (hAsync(Host, { key: '752d246e5db431390af4a412de3b2154c6383170', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: 'cbe35252e82cc685ff7d08d54add95041cc27f89', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-keyshortcuts": this.state._shortKey, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
+        return (hAsync(Host, { key: '1b4ad1db2c1923366c875f58f97b65ac601ef019', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: 'cf97afab9924d108a47cccb13b9e8fe1408e7fca', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-keyshortcuts": this.state._shortKey, "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,
@@ -11175,7 +11240,7 @@ class KolLinkWc {
                 'hide-label': this.state._hideLabel === true,
                 [this.state._variant]: this.state._variant !== 'custom',
                 [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '3cb0cba0583af89173219946bbe8960025ce8bdd', _badgeText: this.state._accessKey || this.state._shortKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '394b1414eeea1b7ffb100240fac135f9f25ba2fa', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '614456689378fbadc2f8b9e3c909f34703daf2ae', 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: '5219a49bb235c503b68b58b60dd6fa3018a27803', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
+            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '2c747fd94e2a4559bb0637a88b93216309d8d905', _badgeText: this.state._accessKey || this.state._shortKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'd8fb91207af9cb4a49f9959459d58490c42f2da4', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '175464f02c1f332bf524366d7eaef141eb2f3821', 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: 'fe892b69044d673e8968c4eed71a15555811a8d5', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -14961,8 +15026,13 @@ class KolSelectWc {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     renderOptgroup(optgroup, preKey) {
         var _a;
@@ -14979,16 +15049,16 @@ class KolSelectWc {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'e288741d37fc2ca2e5c564a407131d8b5ecf2adc', class: { 'kol-select-wc': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'd3147a036af9eb978a60ee11d9d7cda8dc381014', class: {
+        return (hAsync(Host, { key: '09e79a47288a7aa9e25f6ffc1dd9f94c4c356771', class: { 'kol-select-wc': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'c120d6f9c4450323d5349df62954450013e1196d', class: {
                 'hide-label': !!this.state._hideLabel,
                 select: true,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'fb57e39e787ef8a7ee9bab245e577110c021a5fe', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'df6a0065a951a902b6853920f1d58e32fa64cf5c', slot: "input" }, hAsync("form", { key: '50d669aecf8b82849fcb8a1ba91ae2188388dc39', onSubmit: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '2d1e99d9539fb6a239f03694558f7992dea8d97a', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a2b5f39e922a441f6001581a7ea256f1b205dcae', slot: "input" }, hAsync("form", { key: '64f29549c34e181faf036a196cee91df451d5db2', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host,
                     ref: this.selectRef,
                 });
-            } }, hAsync("input", { key: 'ffabe700b7e7b0cf0b8f28fc44155ef47d3e2b56', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '24a253ce002d6ad9095c718a85dfdf56c84da58a', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
+            } }, hAsync("input", { key: '14d371502ddda3858350b5f3bd349991f3d6dde2', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '229b5f7667f560f57dde321158faab9ea5499261', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -15262,8 +15332,13 @@ class KolSingleSelect {
         return this._value;
     }
     async kolFocus() {
-        var _a;
-        (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     onBlur() {
         var _a, _b, _c;
@@ -15409,17 +15484,17 @@ class KolSingleSelect {
         var _a;
         const hasExpertSlot = showExpertSlot(this.state._label);
         const { ariaDescribedBy } = getRenderStates(this.state);
-        return (hAsync(Host, { key: '7180098d193a24c598e7a5d994e0faa7de779b40', class: "kol-single-select" }, hAsync("div", { key: '9fa7035c951a732dac6cf834b6d3a7fb210aa2e3', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: '7a387335c227a1c72112c05d052247f4122b3618', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '2f47e4f853340ab4710bebce19cc65b9234509c3', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '9d7cec91578868224a7a91198345f8d4da5f21fa', slot: "input" }, hAsync("div", { key: '14e28f986822de92d05622eae4d3b12f64168d89', class: "single-select__group" }, hAsync("input", Object.assign({ key: 'e4f8f97dc7212cb34ddccff893bbfd04743602e9', ref: this.catchRef, class: "single-select__input", "data-testid": "single-select-input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
+        return (hAsync(Host, { key: '1433f20a2defed480cdfb50a04a1dd13360f86b3', class: "kol-single-select" }, hAsync("div", { key: '18159815f75153c0959f7a65872f6c34d81083d2', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: '0ecb14e3f2e3df4d90530a8599d08f4e16a6bbe0', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '434babd783c914627c145e8659f0efca36034207', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'cded78e21aa33713865bf7e6a9f0c109258beb44', slot: "input" }, hAsync("div", { key: '323464b7c5c34f86561464efe7b8f2042020bd16', class: "single-select__group" }, hAsync("input", Object.assign({ key: 'd31aad3b8a7c79de4d2766a54f7a80b76208de85', ref: this.catchRef, class: "single-select__input", "data-testid": "single-select-input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            }, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '56f9c3f1ed3773092b83a8d025ebfa9ca6f71cd9', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
+            }, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'ee1817f5169b0c40bd6324c633e147072df33a6e', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
                 var _a;
                 this.clearSelection();
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
-            }, class: "single-select__delete" })), hAsync("button", { key: '120d09eccca8b3b8555e185ef2380edc7a402da1', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '59dff271a5219a84e3e8e0a18d3bf7e9e8b7fa5c', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'e4101ba05c1af934d188a1508c81cb14ef26d75e', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => {
+            }, class: "single-select__delete" })), hAsync("button", { key: '4747536e16e8e8eadd11b708fe3d1697fde076b1', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '39fcfc3b9d0b88ae1374711e72419f0af9f465f5', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '2292d17fe22bd94fc768f189a9a20d4ec70f26f2', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => {
             var _a;
             return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
                     if (el)
@@ -20925,7 +21000,14 @@ function linkify (state, silent) {
   if (url.length <= proto.length) return false
 
   // disallow '*' at the end of the link (conflicts with emphasis)
-  url = url.replace(/\*+$/, '');
+  // do manual backsearch to avoid perf issues with regex /\*+$/ on "****...****a".
+  let urlEnd = url.length;
+  while (urlEnd > 0 && url.charCodeAt(urlEnd - 1) === 0x2A/* * */) {
+    urlEnd--;
+  }
+  if (urlEnd !== url.length) {
+    url = url.slice(0, urlEnd);
+  }
 
   const fullUrl = state.md.normalizeLink(url);
   if (!state.md.validateLink(fullUrl)) return false
@@ -25908,13 +25990,18 @@ class KolTextarea {
         await this.kolFocus();
     }
     async kolFocus() {
-        var _a;
-        (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus();
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '4521e94fa842252253c31ad6d38caa55ce4e87b0', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'b8d0fae4561631325e7c15e477247984732d7d40', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '7eb733a2b2bbe891a40ab079f6993a1622b309c4', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a2d0026e436995ab17e5fdad9ae43f69fcd0719e', slot: "input" }, hAsync("textarea", Object.assign({ key: '5d998e4bd5290b4c549271338245867882150c51', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: this.state._spellCheck }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
+        return (hAsync(Host, { key: '70acb2ec2b7dd8d28320e65090c3e15452448fa1', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '176ce932be5d9a89a3fe5da487687181d940e087', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '1b2f9d092a70701807304d95b2e929931e34efec', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '3dcc46aa1f82a7a2d609f0e248934147b27b2377', slot: "input" }, hAsync("textarea", Object.assign({ key: '46331241584d26d0b8e8a87d66834674c59a1659', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: this.state._spellCheck }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {