@public-ui/hydrate 3.1.2 → 3.1.3

package/dist/index.js

@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
 
 const NAMESPACE = 'kolibri';
 const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
-const Env = /* kolibri */ {"kolibriVersion":"3.1.2"};
+const Env = /* kolibri */ {"kolibriVersion":"3.1.3"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -522,7 +522,7 @@ function requireLoglevel () {
 var loglevelExports = requireLoglevel();
 var h$1 = /*@__PURE__*/getDefaultExportFromCjs(loglevelExports);
 
-const $=()=>{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===true,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}};let f$1=false;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??false,E(t),!f$1&&(f$1=true,h$1.warn(`[Theming] The theme process is locked. This means that the theme "${t}" should not be patched.
+const 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===true,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}};let f$1=false;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??false,S(t),!f$1&&(f$1=true,h$1.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 '...';
@@ -532,7 +532,7 @@ const $=()=>{const t=typeof process<"u"&&process.env?process.env:{},e=t.NODE_ENV
     .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),S=t=>{if(t instanceof HTMLElement){if(typeof t.dataset.theme=="string")return t;{let e=t.parentNode;for(;e instanceof ShadowRoot;)e=e.host;return S(e)}}else return null},A=(t={})=>t.themeEncroachCss==="false"||t.themeReset==="true"?false:{mode:t.themeEncroachCssMode==="after"||t.themeEncroachCssMode==="before"?t.themeEncroachCssMode:"before"},C=()=>typeof n$1.A11yUi.Theme=="object"&&n$1.A11yUi.Theme!==null&&typeof n$1.A11yUi.Theme.cache=="boolean"&&typeof n$1.A11yUi.Theme.encroachCss=="object"&&n$1.A11yUi.Theme.encroachCss!==null&&typeof n$1.A11yUi.Theme.encroachCss.mode=="string"&&typeof n$1.A11yUi.Theme.name=="string",b=t=>{if(C())return n$1.A11yUi.Theme;{const e={cache:true,encroachCss:A(),loglevel:"silent",mode:"csr",name:null},s=S(t);return s instanceof HTMLElement&&(e.cache=s.dataset.themeCache!=="false",e.encroachCss=A(s.dataset),e.loglevel=s.dataset.themeLoglevel==="debug"?s.dataset.themeLoglevel:"silent",e.mode=s.dataset.themeMode==="ssr"?s.dataset.themeMode:"csr",e.name=s.dataset.theme||null),e}};const w=new Set,W=/--[^;]+/g,q=/:/,J=typeof MutationObserver<"u";let M=25,N=()=>{M=Math.min(25+Math.log2(n$1.A11yUi.STYLING_TASK_QUEUE.size+1)*20,250);};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=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!==false){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)===false&&X(a,i);const m=[r,i,c];te(o,m,e.encroachCss),e.cache===true&&(n$1.A11yUi.CSS_STYLE_CACHE.has(a)===false&&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(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);}};let T=t=>{const e=setTimeout(()=>{clearTimeout(e),t.classList.contains("hydrated")?L(t):T(t);},M);};const ae={attributes:true,attributeFilter:["class"],childList:false,subtree:false},oe={attributes:true,attributeFilter:[],childList:false,subtree:false},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&&(T=t=>R.observe(t,ae),N=()=>{});let _=t=>{const e=getComputedStyle(t).getPropertyValue("--theme-visibility-delay").trim();if(e.endsWith("ms"))return parseFloat(e);if(e.endsWith("s"))return parseFloat(e)*1e3;{const s=parseFloat(e);return isNaN(s)?0:s}};n$1.A11yUi.IS_TEST_ENVIRONMENT&&(_=()=>0);const O=(t,e)=>{t.style.setProperty("visibility",e),t.dataset.themed="";},re=(t,e)=>{const s=t.style.visibility||null;n$1.A11yUi.STYLING_TASK_QUEUE.set(t,{resetCss:()=>{const a=_(t);a>0?setTimeout(()=>{O(t,s);},a):O(t,s);},themeDetails:e}),t.style.setProperty("visibility","hidden","important"),T(t);},H=t=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(t),N();},ne=(t,e)=>{re(t,{...n$1.A11yUi.Theme,...e});};
+    .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),b=t=>{if(t instanceof HTMLElement){if(typeof t.dataset.theme=="string")return t;{let e=t.parentNode;for(;e instanceof ShadowRoot;)e=e.host;return b(e)}}else return null},C=(t={})=>t.themeEncroachCss==="false"||t.themeReset==="true"?false:{mode:t.themeEncroachCssMode==="after"||t.themeEncroachCssMode==="before"?t.themeEncroachCssMode:"before"},U=()=>typeof n$1.A11yUi.Theme=="object"&&n$1.A11yUi.Theme!==null&&typeof n$1.A11yUi.Theme.cache=="boolean"&&typeof n$1.A11yUi.Theme.encroachCss=="object"&&n$1.A11yUi.Theme.encroachCss!==null&&typeof n$1.A11yUi.Theme.encroachCss.mode=="string"&&typeof n$1.A11yUi.Theme.name=="string",w=t=>{if(U())return n$1.A11yUi.Theme;{const e={cache:true,encroachCss:C(),loglevel:"silent",mode:"csr",name:null},s=b(t);return s instanceof HTMLElement&&(e.cache=s.dataset.themeCache!=="false",e.encroachCss=C(s.dataset),e.loglevel=s.dataset.themeLoglevel==="debug"?s.dataset.themeLoglevel:"silent",e.mode=s.dataset.themeMode==="ssr"?s.dataset.themeMode:"csr",e.name=s.dataset.theme||null),e}};const v=new Set,N=new Map,X=/--[^;]+/g,Z=/:/,ee=typeof MutationObserver<"u";let L=25,R=()=>{L=Math.min(25+Math.log2(n$1.A11yUi.STYLING_TASK_QUEUE.size+1)*20,250);};const te=(t,e)=>{let s=e.match(X);if(Array.isArray(s)){s=s.filter(a=>Z.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===false||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)===false&&te(o,c);const u=[i,c,y];if(ae(a,u,e.encroachCss),e.cache===true){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);}},re=100;let E=(t,e=0)=>{if(e>=re)return;const s=setTimeout(()=>{clearTimeout(s),t.classList.contains("hydrated")?O(t):E(t,e+1);},L);};const ie={attributes:true,attributeFilter:["class"],childList:false,subtree:false},ce={attributes:true,attributeFilter:[],childList:false,subtree:false},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&&(E=t=>I.observe(t,ie),R=()=>{});const H=new Map;let P=(t,e)=>{if(e){const a=H.get(e);if(a!==void 0)return a}const s=getComputedStyle(t).getPropertyValue("--theme-visibility-delay").trim();let o;if(s.endsWith("ms"))o=parseFloat(s);else if(s.endsWith("s"))o=parseFloat(s)*1e3;else {const a=parseFloat(s);o=isNaN(a)?0:a;}return e&&H.set(e,o),o};n$1.A11yUi.IS_TEST_ENVIRONMENT&&(P=()=>0);const $=(t,e)=>{t.style.setProperty("visibility",e),t.dataset.themed="";},le=(t,e)=>{const s=t.style.visibility||null,o=e.name||"default";n$1.A11yUi.STYLING_TASK_QUEUE.set(t,{resetCss:()=>{const a=P(t,o);a>0?setTimeout(()=>{$(t,s);},a):$(t,s);},themeDetails:e}),t.style.setProperty("visibility","hidden","important"),E(t);},me=t=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(t),R();},he=(t,e)=>{le(t,{...n$1.A11yUi.Theme,...e});};
 
 var KeyEnum;
 (function (KeyEnum) {
@@ -1953,9 +1953,9 @@ KoliBriUtils.executionLock = false;
 KoliBriUtils.cache = new Map();
 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;
@@ -2792,7 +2792,7 @@ var appGlobalScript = () => {
     setMode((elm) => {
         try {
             if (elm.shadowRoot instanceof ShadowRoot) {
-                ne(elm, b(elm));
+                he(elm, w(elm));
             }
         }
         catch (error) {
@@ -15230,7 +15230,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
@@ -19139,8 +19146,13 @@ class AssociatedInputController {
 
 class KolButtonWc {
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -19152,14 +19164,14 @@ class KolButtonWc {
         const badgeText = this.state._accessKey || this.state._shortKey;
         const isDisabled = this.state._disabled === true;
         const hideLabel = this.state._hideLabel === true;
-        return (hAsync(Host, { key: '0d3d25815145b6edb52f339e7c856fd562a9d8c4' }, hAsync("button", { key: '8645454cf97c128e930ddb3968e1a4ec8865664e', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
+        return (hAsync(Host, { key: '0603a5a5e4c11a0fd65217ab5c631e70e0d3a558' }, hAsync("button", { key: '3d4b6d488067c3e0c1c1c5b275697826b2edad84', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
                 'kol-button--disabled': isDisabled,
                 [`kol-button--${this.state._buttonVariant}`]: this.state._buttonVariant !== 'custom',
                 'kol-button--inline': this.state._inline === true,
                 'kol-button--standalone': this.state._inline === false,
                 'kol-button--hide-label': hideLabel,
                 [this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-            }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: '5c9c0d4b1128b1c693f20efd92b3a6ee85a78a23', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '3c30ccb15fe9026b96e1e606be9c5d5566ef875f', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: '9bd70dbe2ca962b34cb59c2a1dd32055a854b286', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
+            }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: '4e114c9fd123888eb7d62a4fb9f052a563661ae3', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'cac7750b3da0c8903c4376eea62cdd4d2887f578', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: '97fc211fdcfc11ae33a75cfcf423b923d67fe937', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -19960,8 +19972,13 @@ class KolCombobox {
         return this.state._value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -20071,15 +20088,15 @@ class KolCombobox {
     }
     render() {
         const isDisabled = this.state._disabled === true;
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'c5afe28a1d16ea7880bf51e27eea443ce569a8ff' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'dbccf31419288c4bec6e081c5a4c7dcf56c42f9c', state: this.state }, hAsync("div", { key: '99e682a31fdc8dbbcb92621b6618108c433f321e', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'c9da0b608dabe6adc24221722287fe373273ece4' }, this.getInputProps())), this.state._value && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: '58e6def1c6e17c1e0e7ad8540700de3576164eef', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'dd543c0596376f0d7402c6f0cd26ecb7f71dd866' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '8398ee5c49f193b11395e90c5b5594383ee465df', state: this.state }, hAsync("div", { key: '918b0b96efac30bd25ec3e9f104e796afbcbe4c2', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: '2a2f79a79a893d9746ebc87b4d0920327ffbf869' }, this.getInputProps())), this.state._value && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: '6f014f249a8c5e14ee23d8cdbc4dd340f04e354c', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
                 'kol-combobox__delete--disabled': isDisabled,
             }), _on: {
                 onClick: () => {
                     this.clearSelection();
                 },
-            } })), hAsync(KolIconTag, { key: 'e6b4d8abc7b46bcf94c6abdd3b3929a655cdda11', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), hAsync(KolIconTag, { key: 'c6392bc4eaf93734e5b780620396c2b5d53cd3e7', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'e6fb48734b7c3e4f0abc466a9be4ba4fcedd5c36', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
+            }), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'e2463b8e629b89b2e6df370baa3a891d58e4ea4f', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
                     if (el)
@@ -21241,8 +21258,13 @@ class KolInputCheckbox {
         return this.getModelValue();
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -21294,7 +21316,7 @@ class KolInputCheckbox {
         return this.state._icons.unchecked;
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'cc0ffae3ec39155469c69de197ded8237de408ba' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '44e9e3efa2ead54cac40be2247c5a01c29927f74' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: 'add2135c5daca032c59c192cb59c45422c453914' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '4268d6bce4ad454f831dd34cada27bec0c302526' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: 'ef7419fdb98eb000a1de3892ce83319e4107ee17' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '0319e3e14fc8928ecd44550743daced7882f41e5' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -21508,8 +21530,13 @@ class KolInputColor {
         return (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus());
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -21536,7 +21563,7 @@ class KolInputColor {
         return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '07425efeb1819802cf6d4d5ac80ec66805c3181b' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '12e13d63cfbcc8281439d1138b7c1701f58da5a2', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '03daa1de5b4457d4a6dcea7f625733c5220272c5', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '3f02cb3c793566c942368e31ed4bb243ac94b9a3', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: 'bcdec98b332975ef3513976a81d97cfe472060bb', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '672197313371115a6306029c88b29dc8e94ec645' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '98707f16f8a99696c03f8d9ed1034696f446a079', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: 'b948f6db30e660bf1faa942e1dbd50187ac08e03', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '674beab3684a322f0c6551f4ea2b5c84a5865f14', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: '539570c3626d77a92cf1bd5dfa892383fb8b4bc5', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -21871,8 +21898,13 @@ class KolInputDate {
         return this.inputRef && this.remapValue((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value);
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -21915,7 +21947,7 @@ class KolInputDate {
         return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '1e8bc172c374000fe352895606f9eec87bb21e92' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'c03c72257382a9e1282e933fc175d55c156d8db8', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '0a6b0bcadcc0bd107ddf7fd67f3250b5ccb21701' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '15b456fa5727b49ccca3b06aa3de5dce287ceb8f' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '0837919570d566a2df16b179502a1727f63553e7', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '8767a38e1e34071fa56b2afc946be5a9ebec8c31' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22268,8 +22300,13 @@ class KolInputEmail {
         return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -22296,7 +22333,7 @@ class KolInputEmail {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'bcd5bb2ce1dc31c18614a9d956577ba9c3517b6e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fc088e01b4d3341fb870e5d0a13898aaf1a7b287', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'b204fe11a8858f3d8146c9f689cdad19d8d16b9a' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '18fb0c72a47561c4bd4c45c22f4c9a164f833ac6' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '2d8455068646dfed505af87cb9df3dc5573dd3d9', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '1334f6149ca17291faaa9214a554fba27c0b0619' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22530,8 +22567,13 @@ class KolInputFile {
         return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.files;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -22562,7 +22604,7 @@ class KolInputFile {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '7deee0c8c3bf1f1c01672bcce64738117081422f' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '43825237a7bf2b2d56da97790c1b544241ebad2d', state: this.state }, hAsync("span", { key: 'e2c2d541070fdf8607d2ddfeb9a806cdf3730d61', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: 'ba08af270d798fc274d85176c5aaa880540a321d' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '48746427ef21a0e1d0ea5c907ccbb53beec85f7d', class: "kol-input-container__button", _label: this.translateDataBrowseText, _buttonVariant: "primary", _disabled: this._disabled }))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'e7621093635ee921fe24c98ddc1963962cf89452' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '407ff4acd442b830664f56bc4df510c80f82e838', state: this.state }, hAsync("span", { key: '6ef22f2d6b15b6d21bd532fd67be7a4b1494004c', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: '9f282e6becdc610eb99e9f5707972d29e2e73ae4' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '73260188bdbfcb59014dc37a37a045d59ef8bbbd', class: "kol-input-container__button", _label: this.translateDataBrowseText, _buttonVariant: "primary", _disabled: this._disabled }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22813,8 +22855,13 @@ class KolInputNumber {
         return this.remapValue(this.state._value);
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -22859,7 +22906,7 @@ class KolInputNumber {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '60f3ab5d10c2382ed837f5a1b7b872141bcae69e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '818c2e4227f8a27231c17d9971187522938d8e3f', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'd42c7b5454f2282771436f736f1f1a78e614b6c4' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'f38e4daff34b058ea4bcffda58e6c3f1f66de411' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b3ba66d15346c2fcd360685b9f31f8a9bf90714f', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'cce4533cbdaed4610d0a6b914aaf5c903808b150' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23072,8 +23119,13 @@ class KolInputPassword {
         return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -23110,7 +23162,7 @@ class KolInputPassword {
             }, icon: `codicon codicon-eye-${this._passwordVisible ? 'closed' : 'watch'}`, disabled: this._disabled }));
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'dfecc1fc1f5b43297449e1e705fa110119e6d509' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '0ac3083a7ab3c671656745de60c2275d76748a2e', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'a68a8e309aa062a8e2b7270aafaa352442147790' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd629ea1ee66f1ac0eff7f99f10f1d4ba328b70a5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'ff4ca8d3671d67bd031dceae50626de077643418', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: '575982bdf26e29442e3da2f7fc0ed4993ee5d06f' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23364,8 +23416,13 @@ class KolInputRadio {
         return this._value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus());
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -23405,7 +23462,7 @@ class KolInputRadio {
         };
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '1a5ada4341373c623af39a98c98c71de59b89bb4' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '91141792ff67d13fc9f6b97fed09f42eb61ee71e' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
     }
     calculateDisabled(option) {
         return Boolean(this.state._disabled) || Boolean(option.disabled);
@@ -23651,8 +23708,13 @@ const defaultStyleCss$o = "/*\n* This file defines the layer order for all CSS l
 
 class KolInputRange {
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -23725,7 +23787,7 @@ class KolInputRange {
         const inputsWrapperStyle = {
             '--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
         };
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a910d0bb8de191e293db17e94c60583f4c2c77d8' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'da96a03aa89386f355fcfbba0cf2d57bbd234a95', state: this.state }, hAsync("div", { key: 'c24b4097a08283a425c5304bbdf57ff898528495', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: '600e5633f2e19b187da6f0159f72dd4e2dd45672', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: 'ead61404d1106e6a7beac4847b05f88e452f5edd', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: 'f07c941fe69b6d31ccba62af4d3a567ce5e456e7', id: this.state._id, suggestions: this.state._suggestions }))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9e37892c3ed46883b5b076a64b20dc836e5dac8b' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f272f84c1e5c19c7457b3cbd675cfb830264fed0', state: this.state }, hAsync("div", { key: '22611684e2fcf405392058b2a088ba8d77104187', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: '8b674517d5b2b2257b8af08c5ba24b0e734eee6e', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '41fd849aaa744937a6d9e5c3aa4d4ae5457d51ea', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: 'e87b033beb0cd5bcd9f5e896834292e08183f16b', id: this.state._id, suggestions: this.state._suggestions }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23928,8 +23990,13 @@ class KolInputText {
         return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -23975,7 +24042,7 @@ class KolInputText {
         return Object.assign(Object.assign({ ref: this.catchRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd86ef7efc8ffb8893f60c3f5d129a1bf368f39d3' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '7038d9b03bedb83fa603ec889404c9aa2f376543', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'ea63bc12e147832944b1f450d9d65bed39989dd0' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'caaae8e149786397007b743af103bd6bebb611d4' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '494061b43d60bf4893f91fbfaa84a9835c05829b', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '2168499c5a3bf3f63aa459d9ac69e4bb7a1068db' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -24455,8 +24522,13 @@ class KolLinkWc {
         };
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -24466,7 +24538,7 @@ class KolLinkWc {
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
         const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
-        return (hAsync(Host, { key: 'ee0556d521befa51a659f1094aaf5ac1865a791d' }, hAsync("a", Object.assign({ key: '667457adb4151768c5c06492d8c5123436021cea', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
+        return (hAsync(Host, { key: '95cb568bb3eff8d366c9add6680e8ef55ff13b37' }, hAsync("a", Object.assign({ key: 'da620b1a780bf191333ab07aefc79dcb17059279', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
                 ? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
                 : undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
                 'kol-link--disabled': this.state._disabled === true,
@@ -24476,7 +24548,7 @@ class KolLinkWc {
                 'kol-link--inline': this.state._inline === true,
                 'kol-link--standalone': this.state._inline === false,
                 [this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-            }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '61ee7232a2c97863f71b98637c1f0026ba695d36', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '58ddc8b7ade66d1c6f2a203716e904955ba0ea29', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '43951151785257140a4328b45b418e185b0e1b71', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '1417866df9586f4c670f6cb2bdf60851818a11e4', "aria-hidden": "true", class: "kol-link__tooltip", ref: (ref) => (this.tooltipRef = ref), hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
+            }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: 'db460a4feeeedc6814f05baa13f9617af4fd7472', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'be6d382efe304b98ab1f0005dd02284db06f0714', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '1dc8d91a26164254e0156191568cc227b5852074', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '5d9c344ad0a30f44c762bf1b3b4ecadab9b66595', "aria-hidden": "true", class: "kol-link__tooltip", ref: (ref) => (this.tooltipRef = ref), hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -27884,8 +27956,13 @@ class KolSelectWc {
         }
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -27911,11 +27988,11 @@ class KolSelectWc {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '809e5c7953715be68d2b22a5ff1c5a031951c733' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'cf898096d4ff2695e4d6065828c9349b383a645b', state: this.state }, hAsync("form", { key: 'a9c6f5786c3a62c2d4285c8087f1cc1131f178fe', onSubmit: (event) => {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '6035493b06940cc2dd07937fb3a3723184397c0d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'c3e3301e5e3c2ee55b2fb6d8c18dea1028a48f52', state: this.state }, hAsync("form", { key: '9db82379bd81278b03baaba699316631b8374ff4', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host});
-            } }, hAsync("input", { key: '76d68fa0755e7770a5fea3dbfdcf22a244cd808d', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: 'c81b30d32fbcecd2202511bd0e9834d9b7c5190d' }, this.getSelectProps()))))));
+            } }, hAsync("input", { key: 'fb33e29c11e295241f99bacebcbe94c1275f5c5f', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '1dc3a556b861525d96b38eaefc1643d6cc7c80a1' }, this.getSelectProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -28153,8 +28230,13 @@ class KolSingleSelect {
         return this._value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -28321,7 +28403,7 @@ class KolSingleSelect {
     render() {
         var _a;
         const isDisabled = this.state._disabled === true;
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a8f37dd81bcd050534fe3171b330483cc13914b5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'a699579be7c019859cc6166169e1c9a801bb443c', state: this.state }, hAsync("div", { key: 'c5340be07f80de622cf6fccdfc0f55d9bf232e27', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '8f9b7377e48d004661acbf5f0f2bbe36c9298fd7' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: 'cef3caacc0bb51c0b4760ac6f734ee44087b25d1', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _buttonVariant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'f19360b9684abe5c1ecef23424e6d8fd1fb7d550' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f0905bdd7596b0e640758968d73f02baf0838af1', state: this.state }, hAsync("div", { key: '178f328d1fb98e96f0ab27d59f6a8f24282ac970', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '1372ab304b762b817e21d91d3537e430a2cac03d' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: '0de9417090e7d48e3463aa1df24323c16120dac6', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _buttonVariant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
                 'kol-single-select__delete--disabled': isDisabled,
             }), _on: {
                 onClick: () => {
@@ -28329,9 +28411,9 @@ class KolSingleSelect {
                     this.clearSelection();
                     (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
                 },
-            } })), hAsync(KolIconTag, { key: '4ca81413133d6ad53061ab833255ae48c37fd85a', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), hAsync(KolIconTag, { key: 'fae151a9238323aa9a547a0f90e84920811da22e', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '410bb602f1a0c347f69dce17ce1b7b7e0f1ddc94', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
+            }), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'ac5c9cbbd66a6f7f06c19ee953b15c9744e5c0dc', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
@@ -30510,8 +30592,13 @@ class KolTextarea {
         return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -30540,7 +30627,7 @@ class KolTextarea {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '8c0e36e0f3518438ad47719a0487838b50458bfa' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '46550d2a7fe6d389b92205e55da49cd30e525fb3', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '95bfd7318945abbd30a807e2f705946d8e2dabf1' }, this.getTextAreaProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'af782a83effd3abe8ea1aa7ca3bf5d5c71b71bd6' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '70669a7491695fb801e89aa22a877cc31d3b2012', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'c999297e55a476ebbf394ff15e5ba52a398410f5' }, this.getTextAreaProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);

package/dist/index.mjs

@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
 
 const NAMESPACE = 'kolibri';
 const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
-const Env = /* kolibri */ {"kolibriVersion":"3.1.2"};
+const Env = /* kolibri */ {"kolibriVersion":"3.1.3"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -520,7 +520,7 @@ function requireLoglevel () {
 var loglevelExports = requireLoglevel();
 var h$1 = /*@__PURE__*/getDefaultExportFromCjs(loglevelExports);
 
-const $=()=>{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===true,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}};let f$1=false;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??false,E(t),!f$1&&(f$1=true,h$1.warn(`[Theming] The theme process is locked. This means that the theme "${t}" should not be patched.
+const 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===true,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}};let f$1=false;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??false,S(t),!f$1&&(f$1=true,h$1.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 '...';
@@ -530,7 +530,7 @@ const $=()=>{const t=typeof process<"u"&&process.env?process.env:{},e=t.NODE_ENV
     .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),S=t=>{if(t instanceof HTMLElement){if(typeof t.dataset.theme=="string")return t;{let e=t.parentNode;for(;e instanceof ShadowRoot;)e=e.host;return S(e)}}else return null},A=(t={})=>t.themeEncroachCss==="false"||t.themeReset==="true"?false:{mode:t.themeEncroachCssMode==="after"||t.themeEncroachCssMode==="before"?t.themeEncroachCssMode:"before"},C=()=>typeof n$1.A11yUi.Theme=="object"&&n$1.A11yUi.Theme!==null&&typeof n$1.A11yUi.Theme.cache=="boolean"&&typeof n$1.A11yUi.Theme.encroachCss=="object"&&n$1.A11yUi.Theme.encroachCss!==null&&typeof n$1.A11yUi.Theme.encroachCss.mode=="string"&&typeof n$1.A11yUi.Theme.name=="string",b=t=>{if(C())return n$1.A11yUi.Theme;{const e={cache:true,encroachCss:A(),loglevel:"silent",mode:"csr",name:null},s=S(t);return s instanceof HTMLElement&&(e.cache=s.dataset.themeCache!=="false",e.encroachCss=A(s.dataset),e.loglevel=s.dataset.themeLoglevel==="debug"?s.dataset.themeLoglevel:"silent",e.mode=s.dataset.themeMode==="ssr"?s.dataset.themeMode:"csr",e.name=s.dataset.theme||null),e}};const w=new Set,W=/--[^;]+/g,q=/:/,J=typeof MutationObserver<"u";let M=25,N=()=>{M=Math.min(25+Math.log2(n$1.A11yUi.STYLING_TASK_QUEUE.size+1)*20,250);};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=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!==false){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)===false&&X(a,i);const m=[r,i,c];te(o,m,e.encroachCss),e.cache===true&&(n$1.A11yUi.CSS_STYLE_CACHE.has(a)===false&&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(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);}};let T=t=>{const e=setTimeout(()=>{clearTimeout(e),t.classList.contains("hydrated")?L(t):T(t);},M);};const ae={attributes:true,attributeFilter:["class"],childList:false,subtree:false},oe={attributes:true,attributeFilter:[],childList:false,subtree:false},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&&(T=t=>R.observe(t,ae),N=()=>{});let _=t=>{const e=getComputedStyle(t).getPropertyValue("--theme-visibility-delay").trim();if(e.endsWith("ms"))return parseFloat(e);if(e.endsWith("s"))return parseFloat(e)*1e3;{const s=parseFloat(e);return isNaN(s)?0:s}};n$1.A11yUi.IS_TEST_ENVIRONMENT&&(_=()=>0);const O=(t,e)=>{t.style.setProperty("visibility",e),t.dataset.themed="";},re=(t,e)=>{const s=t.style.visibility||null;n$1.A11yUi.STYLING_TASK_QUEUE.set(t,{resetCss:()=>{const a=_(t);a>0?setTimeout(()=>{O(t,s);},a):O(t,s);},themeDetails:e}),t.style.setProperty("visibility","hidden","important"),T(t);},H=t=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(t),N();},ne=(t,e)=>{re(t,{...n$1.A11yUi.Theme,...e});};
+    .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),b=t=>{if(t instanceof HTMLElement){if(typeof t.dataset.theme=="string")return t;{let e=t.parentNode;for(;e instanceof ShadowRoot;)e=e.host;return b(e)}}else return null},C=(t={})=>t.themeEncroachCss==="false"||t.themeReset==="true"?false:{mode:t.themeEncroachCssMode==="after"||t.themeEncroachCssMode==="before"?t.themeEncroachCssMode:"before"},U=()=>typeof n$1.A11yUi.Theme=="object"&&n$1.A11yUi.Theme!==null&&typeof n$1.A11yUi.Theme.cache=="boolean"&&typeof n$1.A11yUi.Theme.encroachCss=="object"&&n$1.A11yUi.Theme.encroachCss!==null&&typeof n$1.A11yUi.Theme.encroachCss.mode=="string"&&typeof n$1.A11yUi.Theme.name=="string",w=t=>{if(U())return n$1.A11yUi.Theme;{const e={cache:true,encroachCss:C(),loglevel:"silent",mode:"csr",name:null},s=b(t);return s instanceof HTMLElement&&(e.cache=s.dataset.themeCache!=="false",e.encroachCss=C(s.dataset),e.loglevel=s.dataset.themeLoglevel==="debug"?s.dataset.themeLoglevel:"silent",e.mode=s.dataset.themeMode==="ssr"?s.dataset.themeMode:"csr",e.name=s.dataset.theme||null),e}};const v=new Set,N=new Map,X=/--[^;]+/g,Z=/:/,ee=typeof MutationObserver<"u";let L=25,R=()=>{L=Math.min(25+Math.log2(n$1.A11yUi.STYLING_TASK_QUEUE.size+1)*20,250);};const te=(t,e)=>{let s=e.match(X);if(Array.isArray(s)){s=s.filter(a=>Z.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===false||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)===false&&te(o,c);const u=[i,c,y];if(ae(a,u,e.encroachCss),e.cache===true){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);}},re=100;let E=(t,e=0)=>{if(e>=re)return;const s=setTimeout(()=>{clearTimeout(s),t.classList.contains("hydrated")?O(t):E(t,e+1);},L);};const ie={attributes:true,attributeFilter:["class"],childList:false,subtree:false},ce={attributes:true,attributeFilter:[],childList:false,subtree:false},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&&(E=t=>I.observe(t,ie),R=()=>{});const H=new Map;let P=(t,e)=>{if(e){const a=H.get(e);if(a!==void 0)return a}const s=getComputedStyle(t).getPropertyValue("--theme-visibility-delay").trim();let o;if(s.endsWith("ms"))o=parseFloat(s);else if(s.endsWith("s"))o=parseFloat(s)*1e3;else {const a=parseFloat(s);o=isNaN(a)?0:a;}return e&&H.set(e,o),o};n$1.A11yUi.IS_TEST_ENVIRONMENT&&(P=()=>0);const $=(t,e)=>{t.style.setProperty("visibility",e),t.dataset.themed="";},le=(t,e)=>{const s=t.style.visibility||null,o=e.name||"default";n$1.A11yUi.STYLING_TASK_QUEUE.set(t,{resetCss:()=>{const a=P(t,o);a>0?setTimeout(()=>{$(t,s);},a):$(t,s);},themeDetails:e}),t.style.setProperty("visibility","hidden","important"),E(t);},me=t=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(t),R();},he=(t,e)=>{le(t,{...n$1.A11yUi.Theme,...e});};
 
 var KeyEnum;
 (function (KeyEnum) {
@@ -1951,9 +1951,9 @@ KoliBriUtils.executionLock = false;
 KoliBriUtils.cache = new Map();
 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;
@@ -2790,7 +2790,7 @@ var appGlobalScript = () => {
     setMode((elm) => {
         try {
             if (elm.shadowRoot instanceof ShadowRoot) {
-                ne(elm, b(elm));
+                he(elm, w(elm));
             }
         }
         catch (error) {
@@ -15228,7 +15228,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
@@ -19137,8 +19144,13 @@ class AssociatedInputController {
 
 class KolButtonWc {
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -19150,14 +19162,14 @@ class KolButtonWc {
         const badgeText = this.state._accessKey || this.state._shortKey;
         const isDisabled = this.state._disabled === true;
         const hideLabel = this.state._hideLabel === true;
-        return (hAsync(Host, { key: '0d3d25815145b6edb52f339e7c856fd562a9d8c4' }, hAsync("button", { key: '8645454cf97c128e930ddb3968e1a4ec8865664e', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
+        return (hAsync(Host, { key: '0603a5a5e4c11a0fd65217ab5c631e70e0d3a558' }, hAsync("button", { key: '3d4b6d488067c3e0c1c1c5b275697826b2edad84', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
                 'kol-button--disabled': isDisabled,
                 [`kol-button--${this.state._buttonVariant}`]: this.state._buttonVariant !== 'custom',
                 'kol-button--inline': this.state._inline === true,
                 'kol-button--standalone': this.state._inline === false,
                 'kol-button--hide-label': hideLabel,
                 [this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-            }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: '5c9c0d4b1128b1c693f20efd92b3a6ee85a78a23', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '3c30ccb15fe9026b96e1e606be9c5d5566ef875f', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: '9bd70dbe2ca962b34cb59c2a1dd32055a854b286', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
+            }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: '4e114c9fd123888eb7d62a4fb9f052a563661ae3', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'cac7750b3da0c8903c4376eea62cdd4d2887f578', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: '97fc211fdcfc11ae33a75cfcf423b923d67fe937', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -19958,8 +19970,13 @@ class KolCombobox {
         return this.state._value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -20069,15 +20086,15 @@ class KolCombobox {
     }
     render() {
         const isDisabled = this.state._disabled === true;
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'c5afe28a1d16ea7880bf51e27eea443ce569a8ff' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'dbccf31419288c4bec6e081c5a4c7dcf56c42f9c', state: this.state }, hAsync("div", { key: '99e682a31fdc8dbbcb92621b6618108c433f321e', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'c9da0b608dabe6adc24221722287fe373273ece4' }, this.getInputProps())), this.state._value && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: '58e6def1c6e17c1e0e7ad8540700de3576164eef', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'dd543c0596376f0d7402c6f0cd26ecb7f71dd866' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '8398ee5c49f193b11395e90c5b5594383ee465df', state: this.state }, hAsync("div", { key: '918b0b96efac30bd25ec3e9f104e796afbcbe4c2', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: '2a2f79a79a893d9746ebc87b4d0920327ffbf869' }, this.getInputProps())), this.state._value && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: '6f014f249a8c5e14ee23d8cdbc4dd340f04e354c', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
                 'kol-combobox__delete--disabled': isDisabled,
             }), _on: {
                 onClick: () => {
                     this.clearSelection();
                 },
-            } })), hAsync(KolIconTag, { key: 'e6b4d8abc7b46bcf94c6abdd3b3929a655cdda11', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), hAsync(KolIconTag, { key: 'c6392bc4eaf93734e5b780620396c2b5d53cd3e7', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'e6fb48734b7c3e4f0abc466a9be4ba4fcedd5c36', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
+            }), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'e2463b8e629b89b2e6df370baa3a891d58e4ea4f', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
                     if (el)
@@ -21239,8 +21256,13 @@ class KolInputCheckbox {
         return this.getModelValue();
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -21292,7 +21314,7 @@ class KolInputCheckbox {
         return this.state._icons.unchecked;
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'cc0ffae3ec39155469c69de197ded8237de408ba' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '44e9e3efa2ead54cac40be2247c5a01c29927f74' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: 'add2135c5daca032c59c192cb59c45422c453914' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '4268d6bce4ad454f831dd34cada27bec0c302526' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: 'ef7419fdb98eb000a1de3892ce83319e4107ee17' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '0319e3e14fc8928ecd44550743daced7882f41e5' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -21506,8 +21528,13 @@ class KolInputColor {
         return (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus());
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -21534,7 +21561,7 @@ class KolInputColor {
         return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '07425efeb1819802cf6d4d5ac80ec66805c3181b' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '12e13d63cfbcc8281439d1138b7c1701f58da5a2', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '03daa1de5b4457d4a6dcea7f625733c5220272c5', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '3f02cb3c793566c942368e31ed4bb243ac94b9a3', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: 'bcdec98b332975ef3513976a81d97cfe472060bb', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '672197313371115a6306029c88b29dc8e94ec645' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '98707f16f8a99696c03f8d9ed1034696f446a079', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: 'b948f6db30e660bf1faa942e1dbd50187ac08e03', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '674beab3684a322f0c6551f4ea2b5c84a5865f14', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: '539570c3626d77a92cf1bd5dfa892383fb8b4bc5', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -21869,8 +21896,13 @@ class KolInputDate {
         return this.inputRef && this.remapValue((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value);
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -21913,7 +21945,7 @@ class KolInputDate {
         return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '1e8bc172c374000fe352895606f9eec87bb21e92' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'c03c72257382a9e1282e933fc175d55c156d8db8', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '0a6b0bcadcc0bd107ddf7fd67f3250b5ccb21701' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '15b456fa5727b49ccca3b06aa3de5dce287ceb8f' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '0837919570d566a2df16b179502a1727f63553e7', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '8767a38e1e34071fa56b2afc946be5a9ebec8c31' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22266,8 +22298,13 @@ class KolInputEmail {
         return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -22294,7 +22331,7 @@ class KolInputEmail {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'bcd5bb2ce1dc31c18614a9d956577ba9c3517b6e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fc088e01b4d3341fb870e5d0a13898aaf1a7b287', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'b204fe11a8858f3d8146c9f689cdad19d8d16b9a' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '18fb0c72a47561c4bd4c45c22f4c9a164f833ac6' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '2d8455068646dfed505af87cb9df3dc5573dd3d9', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '1334f6149ca17291faaa9214a554fba27c0b0619' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22528,8 +22565,13 @@ class KolInputFile {
         return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.files;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -22560,7 +22602,7 @@ class KolInputFile {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '7deee0c8c3bf1f1c01672bcce64738117081422f' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '43825237a7bf2b2d56da97790c1b544241ebad2d', state: this.state }, hAsync("span", { key: 'e2c2d541070fdf8607d2ddfeb9a806cdf3730d61', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: 'ba08af270d798fc274d85176c5aaa880540a321d' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '48746427ef21a0e1d0ea5c907ccbb53beec85f7d', class: "kol-input-container__button", _label: this.translateDataBrowseText, _buttonVariant: "primary", _disabled: this._disabled }))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'e7621093635ee921fe24c98ddc1963962cf89452' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '407ff4acd442b830664f56bc4df510c80f82e838', state: this.state }, hAsync("span", { key: '6ef22f2d6b15b6d21bd532fd67be7a4b1494004c', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: '9f282e6becdc610eb99e9f5707972d29e2e73ae4' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '73260188bdbfcb59014dc37a37a045d59ef8bbbd', class: "kol-input-container__button", _label: this.translateDataBrowseText, _buttonVariant: "primary", _disabled: this._disabled }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22811,8 +22853,13 @@ class KolInputNumber {
         return this.remapValue(this.state._value);
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -22857,7 +22904,7 @@ class KolInputNumber {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '60f3ab5d10c2382ed837f5a1b7b872141bcae69e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '818c2e4227f8a27231c17d9971187522938d8e3f', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'd42c7b5454f2282771436f736f1f1a78e614b6c4' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'f38e4daff34b058ea4bcffda58e6c3f1f66de411' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b3ba66d15346c2fcd360685b9f31f8a9bf90714f', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'cce4533cbdaed4610d0a6b914aaf5c903808b150' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23070,8 +23117,13 @@ class KolInputPassword {
         return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -23108,7 +23160,7 @@ class KolInputPassword {
             }, icon: `codicon codicon-eye-${this._passwordVisible ? 'closed' : 'watch'}`, disabled: this._disabled }));
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'dfecc1fc1f5b43297449e1e705fa110119e6d509' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '0ac3083a7ab3c671656745de60c2275d76748a2e', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'a68a8e309aa062a8e2b7270aafaa352442147790' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd629ea1ee66f1ac0eff7f99f10f1d4ba328b70a5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'ff4ca8d3671d67bd031dceae50626de077643418', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: '575982bdf26e29442e3da2f7fc0ed4993ee5d06f' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23362,8 +23414,13 @@ class KolInputRadio {
         return this._value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus());
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
+                resolve();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -23403,7 +23460,7 @@ class KolInputRadio {
         };
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '1a5ada4341373c623af39a98c98c71de59b89bb4' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '91141792ff67d13fc9f6b97fed09f42eb61ee71e' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
     }
     calculateDisabled(option) {
         return Boolean(this.state._disabled) || Boolean(option.disabled);
@@ -23649,8 +23706,13 @@ const defaultStyleCss$o = "/*\n* This file defines the layer order for all CSS l
 
 class KolInputRange {
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -23723,7 +23785,7 @@ class KolInputRange {
         const inputsWrapperStyle = {
             '--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
         };
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a910d0bb8de191e293db17e94c60583f4c2c77d8' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'da96a03aa89386f355fcfbba0cf2d57bbd234a95', state: this.state }, hAsync("div", { key: 'c24b4097a08283a425c5304bbdf57ff898528495', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: '600e5633f2e19b187da6f0159f72dd4e2dd45672', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: 'ead61404d1106e6a7beac4847b05f88e452f5edd', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: 'f07c941fe69b6d31ccba62af4d3a567ce5e456e7', id: this.state._id, suggestions: this.state._suggestions }))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9e37892c3ed46883b5b076a64b20dc836e5dac8b' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f272f84c1e5c19c7457b3cbd675cfb830264fed0', state: this.state }, hAsync("div", { key: '22611684e2fcf405392058b2a088ba8d77104187', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: '8b674517d5b2b2257b8af08c5ba24b0e734eee6e', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '41fd849aaa744937a6d9e5c3aa4d4ae5457d51ea', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: 'e87b033beb0cd5bcd9f5e896834292e08183f16b', id: this.state._id, suggestions: this.state._suggestions }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23926,8 +23988,13 @@ class KolInputText {
         return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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 kolFocus() {
         return this.focus();
@@ -23973,7 +24040,7 @@ class KolInputText {
         return Object.assign(Object.assign({ ref: this.catchRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd86ef7efc8ffb8893f60c3f5d129a1bf368f39d3' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '7038d9b03bedb83fa603ec889404c9aa2f376543', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'ea63bc12e147832944b1f450d9d65bed39989dd0' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'caaae8e149786397007b743af103bd6bebb611d4' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '494061b43d60bf4893f91fbfaa84a9835c05829b', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '2168499c5a3bf3f63aa459d9ac69e4bb7a1068db' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -24453,8 +24520,13 @@ class KolLinkWc {
         };
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -24464,7 +24536,7 @@ class KolLinkWc {
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
         const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
-        return (hAsync(Host, { key: 'ee0556d521befa51a659f1094aaf5ac1865a791d' }, hAsync("a", Object.assign({ key: '667457adb4151768c5c06492d8c5123436021cea', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
+        return (hAsync(Host, { key: '95cb568bb3eff8d366c9add6680e8ef55ff13b37' }, hAsync("a", Object.assign({ key: 'da620b1a780bf191333ab07aefc79dcb17059279', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
                 ? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
                 : undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
                 'kol-link--disabled': this.state._disabled === true,
@@ -24474,7 +24546,7 @@ class KolLinkWc {
                 'kol-link--inline': this.state._inline === true,
                 'kol-link--standalone': this.state._inline === false,
                 [this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-            }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '61ee7232a2c97863f71b98637c1f0026ba695d36', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '58ddc8b7ade66d1c6f2a203716e904955ba0ea29', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '43951151785257140a4328b45b418e185b0e1b71', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '1417866df9586f4c670f6cb2bdf60851818a11e4', "aria-hidden": "true", class: "kol-link__tooltip", ref: (ref) => (this.tooltipRef = ref), hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
+            }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: 'db460a4feeeedc6814f05baa13f9617af4fd7472', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'be6d382efe304b98ab1f0005dd02284db06f0714', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '1dc8d91a26164254e0156191568cc227b5852074', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '5d9c344ad0a30f44c762bf1b3b4ecadab9b66595', "aria-hidden": "true", class: "kol-link__tooltip", ref: (ref) => (this.tooltipRef = ref), hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -27882,8 +27954,13 @@ class KolSelectWc {
         }
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -27909,11 +27986,11 @@ class KolSelectWc {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '809e5c7953715be68d2b22a5ff1c5a031951c733' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'cf898096d4ff2695e4d6065828c9349b383a645b', state: this.state }, hAsync("form", { key: 'a9c6f5786c3a62c2d4285c8087f1cc1131f178fe', onSubmit: (event) => {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '6035493b06940cc2dd07937fb3a3723184397c0d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'c3e3301e5e3c2ee55b2fb6d8c18dea1028a48f52', state: this.state }, hAsync("form", { key: '9db82379bd81278b03baaba699316631b8374ff4', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host});
-            } }, hAsync("input", { key: '76d68fa0755e7770a5fea3dbfdcf22a244cd808d', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: 'c81b30d32fbcecd2202511bd0e9834d9b7c5190d' }, this.getSelectProps()))))));
+            } }, hAsync("input", { key: 'fb33e29c11e295241f99bacebcbe94c1275f5c5f', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '1dc3a556b861525d96b38eaefc1643d6cc7c80a1' }, this.getSelectProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -28151,8 +28228,13 @@ class KolSingleSelect {
         return this._value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -28319,7 +28401,7 @@ class KolSingleSelect {
     render() {
         var _a;
         const isDisabled = this.state._disabled === true;
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a8f37dd81bcd050534fe3171b330483cc13914b5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'a699579be7c019859cc6166169e1c9a801bb443c', state: this.state }, hAsync("div", { key: 'c5340be07f80de622cf6fccdfc0f55d9bf232e27', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '8f9b7377e48d004661acbf5f0f2bbe36c9298fd7' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: 'cef3caacc0bb51c0b4760ac6f734ee44087b25d1', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _buttonVariant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'f19360b9684abe5c1ecef23424e6d8fd1fb7d550' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f0905bdd7596b0e640758968d73f02baf0838af1', state: this.state }, hAsync("div", { key: '178f328d1fb98e96f0ab27d59f6a8f24282ac970', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '1372ab304b762b817e21d91d3537e430a2cac03d' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: '0de9417090e7d48e3463aa1df24323c16120dac6', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _buttonVariant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
                 'kol-single-select__delete--disabled': isDisabled,
             }), _on: {
                 onClick: () => {
@@ -28327,9 +28409,9 @@ class KolSingleSelect {
                     this.clearSelection();
                     (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
                 },
-            } })), hAsync(KolIconTag, { key: '4ca81413133d6ad53061ab833255ae48c37fd85a', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), hAsync(KolIconTag, { key: 'fae151a9238323aa9a547a0f90e84920811da22e', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '410bb602f1a0c347f69dce17ce1b7b7e0f1ddc94', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
+            }), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'ac5c9cbbd66a6f7f06c19ee953b15c9744e5c0dc', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
@@ -30508,8 +30590,13 @@ class KolTextarea {
         return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.value;
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_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();
+            });
+        });
     }
     async kolFocus() {
         return this.focus();
@@ -30538,7 +30625,7 @@ class KolTextarea {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '8c0e36e0f3518438ad47719a0487838b50458bfa' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '46550d2a7fe6d389b92205e55da49cd30e525fb3', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '95bfd7318945abbd30a807e2f705946d8e2dabf1' }, this.getTextAreaProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'af782a83effd3abe8ea1aa7ca3bf5d5c71b71bd6' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '70669a7491695fb801e89aa22a877cc31d3b2012', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'c999297e55a476ebbf394ff15e5ba52a398410f5' }, this.getTextAreaProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -51,8 +51,8 @@
     "mocha-snapshots": "4.2.0",
     "prettier": "3.8.1",
     "prettier-plugin-organize-imports": "4.3.0",
-    "rimraf": "6.1.2",
-    "@public-ui/components": "3.1.2"
+    "rimraf": "6.1.3",
+    "@public-ui/components": "3.1.3"
   },
   "sideEffects": false,
   "type": "commonjs",