@public-ui/hydrate 4.0.3 → 4.0.4-rc.0

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":"4.0.3"};
+const Env = /* kolibri */ {"kolibriVersion":"4.0.4-rc.0"};
 
 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) {
@@ -642,7 +642,7 @@ const setRuntimeMode = (mode) => {
             throw new Error(`Invalid NODE_ENV value: ${mode}. Expected one of ${MODES.join(', ')}.`);
         }
     }
-    catch (e) {
+    catch (_a) {
         runtimeMode = 'production';
     }
 };
@@ -653,7 +653,7 @@ const getInitialMode = () => {
             return nodeEnv;
         }
     }
-    catch (e) {
+    catch (_a) {
     }
     return 'production';
 };
@@ -1672,7 +1672,7 @@ const watchJsonArrayString = (component, propName, itemValidation, value, arrayV
                 try {
                     value = parseJson(value);
                 }
-                catch (e) {
+                catch (_a) {
                 }
                 if (Array.isArray(value)) {
                     const invalid = value.find((item) => !itemValidation(item));
@@ -1703,7 +1703,7 @@ const stringifyJson = (value) => {
     try {
         return JSON.stringify(value).replace(/"/g, "'");
     }
-    catch (error) {
+    catch (_a) {
         Log.warn(['stringifyJson', value]);
         Log.error(`↑ The JSON could not be converted to a string. A stringifiable JSON is expected.`);
         throw new Error();
@@ -1715,12 +1715,12 @@ const parseJson = (value) => {
         try {
             return JSON.parse(value);
         }
-        catch (error) {
+        catch (_a) {
             if (JSON_CHARS.test(value)) {
                 try {
                     return JSON.parse(value.replace(/'/g, '"'));
                 }
-                catch (error) {
+                catch (_b) {
                     Log.warn(['parseJson', value]);
                     Log.error(`↑ The JSON string could not be parsed. Make sure that single quotes in the text are escaped (&#8216;).`);
                 }
@@ -1928,9 +1928,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;
@@ -2090,9 +2090,9 @@ const validateCollapsible = (component, value) => {
     watchBoolean(component, '_collapsible', value);
 };
 
-const HEX_REGEX = /^#((\d|[a-f]){8}|(\d|[a-f]){6}|(\d|[a-f]){3,4})$/i;
-function isHexString(value) {
-    return HEX_REGEX.test(value);
+const HEX_REGEX$1 = /^#((\d|[a-f]){8}|(\d|[a-f]){6}|(\d|[a-f]){3,4})$/i;
+function isHexString$1(value) {
+    return HEX_REGEX$1.test(value);
 }
 function isColorObjectString(value) {
     if (value.startsWith('{')) {
@@ -2101,7 +2101,7 @@ function isColorObjectString(value) {
             if (isValidColorPair(parsed))
                 return { type: 'ColorPair', value: parsed };
         }
-        catch (error) {
+        catch (_a) {
             return { type: null, value: null };
         }
     }
@@ -2110,7 +2110,7 @@ function isColorObjectString(value) {
 function typeOfColor(value) {
     if (value) {
         if (typeof value === 'string') {
-            if (isHexString(value))
+            if (isHexString$1(value))
                 return { type: 'string', valid: true, value: value };
             else {
                 const colorObject = isColorObjectString(value);
@@ -2127,14 +2127,7 @@ function typeOfColor(value) {
     return { type: null, valid: false, value: '' };
 }
 function isValidColorPair(value) {
-    return !!(typeof value === 'object' &&
-        value &&
-        typeof value.backgroundColor === 'string' &&
-        (typeof value.foregroundColor === 'string' ||
-            (value.foregroundColor &&
-                typeof value.foregroundColor.primary === 'string' &&
-                typeof value.foregroundColor.secondary === 'string' &&
-                typeof value.foregroundColor.neutral === 'string')));
+    return !!(typeof value === 'object' && value && typeof value.backgroundColor === 'string' && typeof value.foregroundColor === 'string');
 }
 function validatorFunction(value) {
     const valueType = typeOfColor(value);
@@ -2150,7 +2143,6 @@ const validateColor = (component, value, options) => {
     watchValidator(component, '_color', validatorFunction, new Set(['rgb in hex', 'ColorPair']), value, options);
 };
 const handleColorChange = (value) => {
-    var _a;
     let colorContrast;
     const valueType = typeOfColor(value);
     switch (valueType.type) {
@@ -2162,8 +2154,6 @@ const handleColorChange = (value) => {
             let foreground = '';
             if (typeof asColorPair.foregroundColor === 'string')
                 foreground = asColorPair.foregroundColor;
-            else if ((_a = asColorPair.foregroundColor) === null || _a === void 0 ? void 0 : _a.primary)
-                foreground = asColorPair.foregroundColor.primary;
             if (!foreground || typeof foreground !== 'string')
                 foreground = '#fff';
             colorContrast = createContrastColorPair({
@@ -2299,7 +2289,7 @@ const validateIcons = (component, value, options = {}) => {
         try {
             value = parseJson(value);
         }
-        catch (e) {
+        catch (_b) {
         }
         watchValidator(component, '_icons', (value) => {
             const valueIsEmptyObject = typeof value === 'object' && value !== null && Object.keys(value).length === 0;
@@ -2435,7 +2425,7 @@ const validateMsg = (component, value) => {
         try {
             value = parseJson(value);
         }
-        catch (e) {
+        catch (_a) {
         }
         watchValidator(component, `_msg`, (value) => {
             if (value === undefined) {
@@ -2460,7 +2450,7 @@ function normalizeMsg(msg) {
         try {
             return parseJson(msg);
         }
-        catch (e) {
+        catch (_a) {
             return { _description: msg, _type: 'error' };
         }
     }
@@ -2607,7 +2597,7 @@ const validateTableData = (component, value, setStateHooks) => {
             try {
                 value = parseJson(value);
             }
-            catch (e) {
+            catch (_a) {
             }
             if (Array.isArray(value) && value.every((data) => typeof data === 'object' && data !== null)) {
                 setState(component, '_data', value, setStateHooks);
@@ -2625,7 +2615,7 @@ const validateTableDataFoot = (component, value, setStateHooks) => {
             try {
                 value = parseJson(value);
             }
-            catch (e) {
+            catch (_a) {
             }
             if (Array.isArray(value) && value.every((data) => typeof data === 'object' && data !== null)) {
                 setState(component, '_dataFoot', value, setStateHooks);
@@ -2661,7 +2651,7 @@ const validateTableSelection = (component, value) => {
         try {
             return parseJson(value);
         }
-        catch (e) {
+        catch (_a) {
             return undefined;
         }
     };
@@ -2683,7 +2673,7 @@ const validateToolbarItems = (component, value) => {
             try {
                 value = parseJson(value);
             }
-            catch (e) {
+            catch (_a) {
             }
             if (Array.isArray(value) && value.every((items) => typeof items === 'object' && items !== null)) {
                 setState(component, '_items', value);
@@ -2773,10 +2763,10 @@ var appGlobalScript = () => {
     setMode((elm) => {
         try {
             if (elm.shadowRoot instanceof ShadowRoot) {
-                ne(elm, b(elm));
+                he(elm, w(elm));
             }
         }
-        catch (error) {
+        catch (_a) {
         }
         return 'default';
     });
@@ -4250,6 +4240,21 @@ var getElement = (ref) => {
   var _a;
   return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
 };
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -5385,7 +5390,7 @@ var Fragment = (_, children) => children;
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
   if (listeners && win.document) {
     listeners.map(([flags, name, method]) => {
-      const target = elm;
+      const target = getHostListenerTarget(win.document, elm, flags) ;
       const handler = hostListenerProxy(hostRef, method);
       const opts = hostListenerOpts(flags);
       plt.ael(target, name, handler, opts);
@@ -5407,6 +5412,12 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
     consoleError(e, hostRef.$hostElement$);
   }
 };
+var getHostListenerTarget = (doc, elm, flags) => {
+  if (flags & 8 /* TargetWindow */) {
+    return win;
+  }
+  return elm;
+};
 var hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
 
 // src/runtime/vdom/vdom-annotations.ts
@@ -6039,7 +6050,6 @@ var needsScopedSSR = () => scopedSSR;
 var scopedSSR = false;
 
 let KolAlertWcTag = 'kol-alert-wc';
-let KolAvatarWcTag = 'kol-avatar-wc';
 let KolBadgeTag = 'kol-badge';
 let KolButtonTag = 'kol-button';
 let KolButtonWcTag = 'kol-button-wc';
@@ -6235,7 +6245,7 @@ const initMeta = () => {
             }
         }
     }
-    catch (error) {
+    catch (_a) {
     }
 };
 const getKoliBri$1 = () => {
@@ -6759,9 +6769,11 @@ var a = /*@__PURE__*/getDefaultExportFromCjs(easyBemExports);
 
 function c(){const e=new Map,n=(t,o,r)=>{try{return e.get(t)(o,r)}catch{return e.set(t,a(t)).get(t)(o,r)}};return n.forBlock=t=>{const o=(r,s)=>n(t,r,s);return o.forElement=r=>s=>n(t,r,s),o},n}
 
+const bem$2 = c();
+
 const bem$1 = c();
-const BEM_CLASS_ALERT__CLOSER = bem$1('kol-alert', 'closer');
-const BEM_CLASS_ALERT__CONTENT = bem$1('kol-alert', 'content');
+bem$1('kol-alert', 'closer');
+bem$1('kol-alert', 'content');
 const BEM_CLASS_ALERT__ICON = bem$1('kol-alert', 'icon');
 
 const translateError = translate('kol-error');
@@ -6787,7 +6799,9 @@ const AlertIcon = ({ type, label }) => {
     }
 };
 
-const translateCloseAlert = translate('kol-close-alert');
+const alertBem = bem$2.forBlock('kol-alert');
+const BEM_CLASS_ALERT__CLOSER = alertBem('closer');
+const BEM_CLASS_ALERT__CONTENT = alertBem('content');
 const vibrateOnError = () => {
     if (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {
         return;
@@ -6808,18 +6822,19 @@ const vibrateOnError = () => {
 };
 const KolAlertFc = (props, children) => {
     const { class: classNames = {}, alert = false, hasCloser = false, label, level = 0, type = 'default', variant = 'msg', onAlertTimeout, onCloserClick } = props, other = __rest(props, ["class", "alert", "hasCloser", "label", "level", "type", "variant", "onAlertTimeout", "onCloserClick"]);
+    const translateCloseAlert = translate('kol-close-alert');
     if (alert) {
         vibrateOnError();
         setTimeout(() => {
             onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();
         }, 10000);
     }
-    const BEM_CLASS_ROOT = bem$1('kol-alert', {
+    const BEM_CLASS_ROOT = alertBem({
         hasCloser: !!hasCloser,
         [`type-${type}`]: true,
         [`variant-${variant}`]: true,
     });
-    const BEM_CLASS__HEADING = bem$1('kol-alert', 'heading', {
+    const BEM_CLASS__HEADING = alertBem('heading', {
         [`h${level}`]: true,
     });
     const rootProps = Object.assign({ class: clsx(classNames, BEM_CLASS_ROOT) }, other);
@@ -6930,109 +6945,215 @@ class KolAlertWc {
     }; }
 }
 
-const defaultStyleCss$K = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-avatar,\n  .kol-avatar__image,\n  .kol-avatar__initials {\n    border-radius: 50%;\n  }\n  .kol-avatar {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-avatar__image, .kol-avatar__initials {\n    width: 100%;\n    height: 100%;\n  }\n  .kol-avatar__initials {\n    background-color: inherit;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+const BEM_BLOCK_AVATAR = 'kol-avatar';
+const BEM_CLASS_AVATAR__IMAGE = bem$2(BEM_BLOCK_AVATAR, 'image');
+const BEM_CLASS_AVATAR__INITIALS = bem$2(BEM_BLOCK_AVATAR, 'initials');
+const AvatarFC = (props) => {
+    const { color, initials, label, src } = props;
+    return (hAsync("div", { "aria-label": translate('kol-avatar-alt', { placeholders: { name: label } }), class: "kol-avatar", role: "img", style: {
+            backgroundColor: color.backgroundColor,
+            color: color.foregroundColor,
+        } }, src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: BEM_CLASS_AVATAR__IMAGE, src: src })) : (hAsync("span", { "aria-hidden": "true", class: BEM_CLASS_AVATAR__INITIALS }, initials))));
+};
 
-class KolAvatar {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this._color = '#d3d3d3';
+function createPropDefinition(normalize, validate) {
+    return {
+        normalize,
+        validate,
+    };
+}
+function withValidPropValue(propDef, value, callback) {
+    try {
+        const normalized = propDef.normalize(value);
+        if (propDef.validate(normalized)) {
+            callback(normalized);
+        }
     }
-    render() {
-        return hAsync(KolAvatarWcTag, { key: 'b50d593f2fcc07fb3a1c8a92786df6ddcbc917cf', _color: this._color, _src: this._src, _label: this._label });
+    catch (e) {
+        Log.debug(e);
     }
-    static get style() { return {
-        default: defaultStyleCss$K
-    }; }
-    static get cmpMeta() { return {
-        "$flags$": 297,
-        "$tagName$": "kol-avatar",
-        "$members$": {
-            "_color": [1],
-            "_src": [1],
-            "_label": [1]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
 }
 
+const HEX_REGEX = /^#((\d|[a-f]){8}|(\d|[a-f]){6}|(\d|[a-f]){3,4})$/i;
+function isHexString(value) {
+    return HEX_REGEX.test(value);
+}
+function normalizer(value) {
+    if (typeof value === 'string' && isHexString(value)) {
+        const colors = createContrastColorPair(value);
+        return {
+            backgroundColor: colors.background,
+            foregroundColor: colors.foreground,
+        };
+    }
+    else if (typeof value === 'object' && value) {
+        const colorPair = value;
+        if (typeof colorPair.backgroundColor === 'string' &&
+            typeof colorPair.foregroundColor === 'string' &&
+            isHexString(colorPair.backgroundColor) &&
+            isHexString(colorPair.foregroundColor)) {
+            const colors = createContrastColorPair({
+                background: colorPair.backgroundColor,
+                foreground: colorPair.foregroundColor,
+            });
+            return {
+                backgroundColor: colors.background,
+                foregroundColor: colors.foreground,
+            };
+        }
+    }
+    throw new Error(`Invalid color ${value}`);
+}
+function validator(value) {
+    return isHexString(value.foregroundColor) && isHexString(value.backgroundColor);
+}
+const colorProp = createPropDefinition(normalizer, validator);
+
+function normalizeString(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+        return String(value);
+    }
+    throw new Error(`Invalid string: ${value}`);
+}
+function normalizeInteger(value) {
+    if (typeof value === 'number') {
+        return Number.isInteger(value) ? value : Math.round(value);
+    }
+    if (typeof value === 'string') {
+        const parsed = parseInt(value, 10);
+        if (!isNaN(parsed)) {
+            return parsed;
+        }
+    }
+    throw new Error(`Invalid integer: ${value}`);
+}
+
+const countProp = createPropDefinition(normalizeInteger, (v) => v >= 0);
+
 const formatNameAsInitial = (name) => {
     if (name.length === 0) {
         return '';
     }
     return name[0].toUpperCase();
 };
-const formatLabelAsInitials = (label) => {
-    const names = label.split(/\s+/);
+const normalizeInitials = (value) => {
+    if (typeof value !== 'string') {
+        throw new Error(`Invalid initials value: ${JSON.stringify(value)}`);
+    }
+    const names = value.trim().split(/\s+/);
     const first = names[0];
     const last = names[names.length - 1];
     if (names.length >= 2 && first && last) {
         return `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;
     }
-    return formatNameAsInitial(label);
+    return formatNameAsInitial(value);
 };
+const initialsProp = createPropDefinition(normalizeInitials, (v) => v.length > 0);
 
-class KolAvatarWc {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bgColorStr = '#d3d3d3';
-        this.colorStr = '#000';
-        this.handleColorChange = (value) => {
-            const colorPair = handleColorChange(value);
-            this.bgColorStr = colorPair.backgroundColor;
-            this.colorStr = colorPair.foregroundColor;
-        };
-        this._color = '#d3d3d3';
-        this.state = {
-            _src: '',
-            _label: '',
-            _color: {
-                backgroundColor: '#d3d3d3',
-                foregroundColor: '#000',
-            },
-        };
+const labelProp = createPropDefinition(normalizeString, (v) => v.length >= 2 && v.length <= 80);
+
+const nameProp = createPropDefinition(normalizeString, () => true);
+
+const srcProp = createPropDefinition(normalizeString, () => true);
+
+class BaseController {
+    constructor(component, props) {
+        this.component = component;
+        this.props = props;
     }
-    render() {
-        return (hAsync("div", { key: '04d0b5653648f532391c0b8f611ef3bd7d4e8bbf', "aria-label": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: "kol-avatar", role: "img", style: {
-                backgroundColor: this.bgColorStr,
-                color: this.colorStr,
-            } }, this.state._src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: "kol-avatar__image", src: this.state._src })) : (hAsync("span", { "aria-hidden": "true", class: "kol-avatar__initials" }, formatLabelAsInitials(this.state._label.trim())))));
+    setProp(key, value) {
+        this.props[key] = value;
     }
-    validateColor(value) {
-        validateColor(this, value, {
-            defaultValue: '#d3d3d3',
-            hooks: {
-                beforePatch: this.handleColorChange,
-            },
+    getProps() {
+        return this.props;
+    }
+    setState(key, value) {
+        this.component[key] = value;
+    }
+}
+
+class AvatarController extends BaseController {
+    constructor(states) {
+        super(states, {
+            color: { backgroundColor: '#d3d3d3', foregroundColor: '#3f3f3f' },
+            label: '',
+            src: '',
         });
     }
-    validateSrc(value) {
-        validateImageSource(this, value);
+    componentWillLoad(props) {
+        const { color, label, src } = props;
+        this.watchColor(color);
+        this.watchLabel(label);
+        this.watchSrc(src);
     }
-    validateLabel(value) {
-        validateLabel(this, value, {
-            required: true,
+    watchColor(value) {
+        withValidPropValue(colorProp, value, (v) => {
+            this.setProp('color', v);
+        });
+    }
+    watchLabel(value) {
+        withValidPropValue(labelProp, value, (v) => {
+            this.setProp('label', v);
+        });
+        withValidPropValue(initialsProp, value, (v) => {
+            this.setState('initials', v);
         });
     }
+    watchSrc(value) {
+        withValidPropValue(srcProp, value, (v) => {
+            this.setProp('src', v);
+        });
+    }
+}
+
+const defaultStyleCss$K = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-avatar,\n  .kol-avatar__image,\n  .kol-avatar__initials {\n    border-radius: 50%;\n  }\n  .kol-avatar {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: flex;\n    width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-avatar__initials {\n    background-color: inherit;\n    margin: auto;\n    font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+class KolAvatar {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ctrl = new AvatarController(this);
+        this.initials = '';
+    }
+    watchColor(value) {
+        this.ctrl.watchColor(value);
+    }
+    watchLabel(value) {
+        this.ctrl.watchLabel(value);
+    }
+    watchSrc(value) {
+        this.ctrl.watchSrc(value);
+    }
     componentWillLoad() {
-        this.validateColor(this._color);
-        this.validateSrc(this._src);
-        this.validateLabel(this._label);
+        this.ctrl.componentWillLoad({
+            color: this._color,
+            label: this._label,
+            src: this._src,
+        });
+    }
+    render() {
+        const { color, label, src } = this.ctrl.getProps();
+        const { initials } = this;
+        return (hAsync(Host, { key: '356e548cb9a73c0fd50b71c01fc8862d08240a96' }, hAsync(AvatarFC, { key: 'c69025eb44ed63b2fd4e5f1e8cd2bace9aa055ac', color: color, label: label, src: src, initials: initials })));
     }
     static get watchers() { return {
-        "_color": ["validateColor"],
-        "_src": ["validateSrc"],
-        "_label": ["validateLabel"]
+        "_color": ["watchColor"],
+        "_label": ["watchLabel"],
+        "_src": ["watchSrc"]
+    }; }
+    static get style() { return {
+        default: defaultStyleCss$K
     }; }
     static get cmpMeta() { return {
-        "$flags$": 256,
-        "$tagName$": "kol-avatar-wc",
+        "$flags$": 297,
+        "$tagName$": "kol-avatar",
         "$members$": {
             "_color": [1],
-            "_src": [1],
             "_label": [1],
-            "state": [32]
+            "_src": [1],
+            "initials": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -15243,7 +15364,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
@@ -18640,7 +18768,7 @@ class KolBadge {
             try {
                 value = parseJson(value);
             }
-            catch (e) {
+            catch (_a) {
             }
             setState(this, '_smartButton', value);
         });
@@ -18894,7 +19022,7 @@ const searchFormElement = (el) => {
                 el = null;
             }
         }
-        catch (error) {
+        catch (_a) {
         }
         if (getExperimentalMode()) {
             Log.debug(el);
@@ -19054,7 +19182,7 @@ class AssociatedInputController {
                     throw new Error(`Invalid value type: ${typeof value}`);
                 }
             }
-            catch (e) {
+            catch (_a) {
                 element === null || element === void 0 ? void 0 : element.removeAttribute(qualifiedName);
             }
         }
@@ -19137,8 +19265,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();
+            });
+        });
     }
     render() {
         var _a;
@@ -19147,14 +19280,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: '9c26b6174fedb3fcc1f1d3cd34e8bb95a78bab7f' }, hAsync("button", { key: 'c28349752715c55e6a340c44bd5cf845b0e28fc7', 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: 'dc1eca07ca0f70563e0429c255badd7a8ea1c54a' }, hAsync("button", { key: '774f57db93456404aeda52dc23e0a99ac57a87c7', 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._variant}`]: this.state._variant !== '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._variant === '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: '451a17c0f75959c08c03da79c47bcdd40c5f78c5', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'f3eeed29378d95c06789f00308321147e222a3e6', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: '7d799a434d077183dc75ffce496ee155301fc7e4', 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: '207058ad84e5fcb90b17a1aa959224144d6478a6', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'f3378730b77da226579b8a11d87672644f9c8bcc', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: 'aae9c27630d3c669f531e2ec794f106721db61a0', 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);
@@ -19420,7 +19553,7 @@ class KolCardWc {
         this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
     }
     render() {
-        return (hAsync(Host, { key: 'de517413c990072e7e7faca2916c0c5243ad9495' }, hAsync("div", { key: '01f98d52d173677f5e314e2dce9425cc19cdaadc', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: 'd2ce693140449135323ff1601af712982aae9325', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '155c2d42406dbb9ba02f6a29ec92f10d93b8c38d', class: "kol-card__content" }, hAsync("slot", { key: 'f3c23f1168273dbfbb515b1d83b7f087d9d019ca' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: 'f22067f09cde9099c29c8b26b0af1cb3229e0b3d', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
+        return (hAsync(Host, { key: '3e7074ef91d24bc6d398fd57c455b56c51977609' }, hAsync("div", { key: '62f46913ae9a90a468dd3a731dfa3f318ac25f82', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: 'f69df4f5bf69cbbabecd468cda9e81294612d1e7', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '5cd3a7173e8a210029f0d4196136382f997b9418', class: "kol-card__content" }, hAsync("slot", { key: '4adda314f9401771df32d1fd5aa071e5c04a393e' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: 'af06b358941c99e6786440cfd224ef5c402192dd', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
                 left: {
                     icon: 'kolicon-cross',
                 },
@@ -19473,6 +19606,74 @@ class KolCardWc {
     }; }
 }
 
+const clickButtonBem = bem$2.forBlock('kol-click-button');
+const BEM_CLASS_CLICK_BUTTON = clickButtonBem();
+const BEM_CLASS_CLICK_BUTTON__LABEL = clickButtonBem('label');
+const ClickButtonFC = ({ label, handleClick, refButton }) => (hAsync("button", { class: BEM_CLASS_CLICK_BUTTON, ref: refButton, onClick: handleClick, onKeyDown: (event) => event.preventDefault() }, hAsync("span", { class: BEM_CLASS_CLICK_BUTTON__LABEL }, label)));
+
+class ClickButtonController extends BaseController {
+    constructor(states = {}) {
+        super(states, {
+            label: '',
+        });
+        this.handleClick = () => {
+            console.log(this, this.buttonRef, 'button clicked');
+        };
+        this.setButtonRef = (element) => {
+            this.buttonRef = element;
+        };
+    }
+    componentWillLoad(props) {
+        const { label } = props;
+        this.watchLabel(label);
+    }
+    watchLabel(value) {
+        withValidPropValue(labelProp, value, (v) => {
+            this.setProp('label', v);
+        });
+    }
+    focus() {
+        var _a;
+        (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+}
+
+class KolClickButton {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ctrl = new ClickButtonController();
+    }
+    watchLabel(value) {
+        this.ctrl.watchLabel(value);
+    }
+    async focus() {
+        return Promise.resolve(this.ctrl.focus());
+    }
+    componentWillLoad() {
+        this.ctrl.componentWillLoad({
+            label: this._label,
+        });
+    }
+    render() {
+        const { label } = this.ctrl.getProps();
+        return (hAsync(Host, { key: 'ad1573dd9fb97876e8663c51e9a8251358a7b642' }, hAsync(ClickButtonFC, { key: '3710ca78ad2789f72e41c0628db0aa5942f273d6', label: label, refButton: this.ctrl.setButtonRef, handleClick: this.ctrl.handleClick })));
+    }
+    static get watchers() { return {
+        "_label": ["watchLabel"]
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "kol-click-button",
+        "$members$": {
+            "_label": [1],
+            "focus": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const getRenderStates = (state) => {
     const msg = state._msg;
     const description = typeof msg === 'string' ? msg : msg === null || msg === void 0 ? void 0 : msg._description;
@@ -19786,7 +19987,7 @@ class InputController extends ControlledInputController {
             try {
                 value = parseJson(value);
             }
-            catch (e) {
+            catch (_a) {
             }
             setState(this.component, '_smartButton', value);
         });
@@ -19954,8 +20155,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();
+            });
+        });
     }
     selectOption(option) {
         var _a;
@@ -20069,15 +20275,13 @@ class KolCombobox {
     }
     render() {
         const isDisabled = this.state._disabled === true;
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'c8bb3a42b48cf0fce6270aca0b957783faaad8fb' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '3f205b2f94f3a3e54bf00ebb1b734bbc70b24343', state: this.state }, hAsync("div", { key: 'e2725023fb2affbddc40777e99968a829b64501f', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'da9beffc01bc96c5dfe51c28540bfc55ad7d0b23' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '2c143034148a6c58a86e213f1f2e2849b09a90c1', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
-                'kol-combobox__delete--disabled': isDisabled,
-            }), _on: {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'c062962774ef7e54e9e03de4356dfe6ca4aed117' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b6a978e5e5096999dec0d258e85513376297fab4', state: this.state }, hAsync("div", { key: '0358e2a7951e151c807d6382f6d050cc3db467cb', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'c519eb30e7c6eee190dc5ad3c810a7dfc88095c0' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '71932cc20284d306a6ac59b5db139f270890ccc0', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
                 onClick: () => {
                     this.clearSelection();
                 },
-            } })), hAsync(KolIconTag, { key: '5162eb09c62d31099e4159cdae84b5b0f47dfab6', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), hAsync(KolIconTag, { key: '936e782f5dfa6cd19abacde645c36a49cdeea47e', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '073bc3a3eccb2e5fa42bade96396972ec299b95f', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredSuggestions) &&
+            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '967f197ca028038ecf7b70276f9d25d9255e7f6a', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled }, 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)
@@ -20992,7 +21196,7 @@ const bem = c();
 const BEM_CLASS_ICON = bem('kol-icon');
 const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
 
-const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1770450415065\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1770450415065#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1770450415065\") format(\"woff2\"), url(\"kolicons.woff?t=1770450415065\") format(\"woff\"), url(\"kolicons.ttf?t=1770450415065\") format(\"truetype\"), url(\"kolicons.svg?t=1770450415065#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-size: inherit;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1a\";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
+const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1772007606600\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1772007606600#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1772007606600\") format(\"woff2\"), url(\"kolicons.woff?t=1772007606600\") format(\"woff\"), url(\"kolicons.ttf?t=1772007606600\") format(\"truetype\"), url(\"kolicons.svg?t=1772007606600#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-size: inherit;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1a\";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
 
 class KolIcon {
     render() {
@@ -21369,8 +21573,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();
+            });
+        });
     }
     getFormFieldProps() {
         return {
@@ -21419,7 +21628,7 @@ class KolInputCheckbox {
         return this.state._icons.unchecked;
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9cb4ea4595cbb7011a66123fc074ab279b14059c' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '140717882ed72ed287a076e4bf19a498ffbf841a' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: 'ef6729b2d9c01fe6ff427a810ef23e47e1317da4' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '2b60714baa0fe44a7b2cdc4b9ba4c15ea06e9e78' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: 'd168e6aa1bb279c0cace1cea064123f438fa43c6' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: 'eade921d7e22e4d342f3c03bdd0fa2e4348f8990' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -21627,8 +21836,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();
+            });
+        });
     }
     get hasSuggestions() {
         return Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
@@ -21651,7 +21865,7 @@ class KolInputColor {
         return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, this.state), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '3243bc02f1c0aea966b3db17645a5100498cb6f8' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'c96f156fd9edab34a4eafbea0c88c1ea60a7bffd', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: 'daf3ec033d4065bc5645a59b4ba966e06c8358b8', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: 'a53ae6de8dbc7d87779cd64a6e741bdd9a6f885d', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: '7db1b342cc845b7a58cbe83dcd77d0aff752a033', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '703b9c89e8825ad094668fa79ff6bdf5f7ea2773' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '86745daac79e2807932c8b4499ee3338dd9abb52', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '0c102ce638e903dec703f1b3dc982fb4a64f1850', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '8bff8759040df63aef9fa1e93d65581ba22f82ab', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: 'def144fa8005025098a567df05832bfc411dcae4', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -21980,8 +22194,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 reset() {
         this.state = Object.assign(Object.assign({}, this.state), { _value: null });
@@ -22021,7 +22240,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: '0796ce3b22bda0f3416cb29d0a3170cca7c10fd1' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6702162055e1337792e61069d1eceff3e41ecfcd', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'f7e3fc1329d316eea6f07450236c2b06f5cbd5e0' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'e30da09025106eec1e068d7c312c17dff2ebfba8' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fe3663fd1ae701bbc67c326eb89bde418d59da64', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '9710cfe488dc01075270dd81b3882464157d178d' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22368,8 +22587,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();
+            });
+        });
     }
     getFormFieldProps() {
         return {
@@ -22393,7 +22617,7 @@ class KolInputEmail {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a74d93b511883ac584088468690f5fedbd031608' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '34041ab24cb5e2e3b095e468df4bd8978909803e', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'f34730d39d2fe689e1f9d52576bd5954c538a461' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'cab521e66e888b933138110984dac2a30c0fa893' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'a659607042aaef2572b3c52fbebaea22085c2095', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '197066107205fe6e91cba9252e937580a4857a3d' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22621,8 +22845,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 reset() {
         this.controller.setFormAssociatedValue('');
@@ -22650,7 +22879,7 @@ class KolInputFile {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '63d343b402d7cfc146a811c39872e5fd587c7c64' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6e01023b3bce319f1a99ba446d17112a711bd190', state: this.state }, hAsync("span", { key: '1e9586a529e89fc73157c89e741330c27d1e5e1f', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: '6c35160f133bbdf31580d2a03201c093d1b2d3cf' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: 'ab5eda8e72de28216d586879b6f6a4bf6480b32e', class: "kol-input-container__button", _label: this.translateDataBrowseText, _variant: "primary", _disabled: this._disabled }))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '56d8b72caa11f9762163eb438df3105ab12488e2' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '91d3b43a0cb7773b9ea971aa6ae4225548dc3c64', state: this.state }, hAsync("span", { key: '9ec16436ae93a69f67591a3950ba6de3628a5c1e', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: '6c4d98db86ce73027d7cb074ad1d9e3e905a9efc' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '12c3f8d02713c249d485adb473da441323149f52', class: "kol-input-container__button", _label: this.translateDataBrowseText, _variant: "primary", _disabled: this._disabled }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -22895,8 +23124,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();
+            });
+        });
     }
     setInitialValueType(value) {
         if (this.controller.isNumberString(value)) {
@@ -22964,7 +23198,7 @@ class KolInputNumber {
             }, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-minus", label: "" })));
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '4ebc0414d323e7d17763b5cd53d039458cabc19d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'cba1c0f8a529eb7a38d423abb530fb5f9ffdad85', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'bc5b9f46f144e5094d891d4b1356b34f30471949' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '7f45c137a6623da514ea4ba90ccc5dd08ab821ca' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'af5a258626972db0214687665a78ae75e4e50a04', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: '70095f30b4cbd6ef9e350e2269ec4be7e3ffc303' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23171,8 +23405,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();
+            });
+        });
     }
     getFormFieldProps() {
         return {
@@ -23206,7 +23445,7 @@ class KolInputPassword {
             }, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '57849dd5482b375f12f620e5b0fdc6dcc1856d79' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b24be6351a6e1efdee07100907a4d42a391e33e1', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'e02adcf7654df72cf2a4ce3972829057b7cc306b' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '36d62354291a7bf6358ff68f12b6a9c6a7ade4f8' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f421cdb521eda94cb3be24dec223ffe3fd411f5a', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'dc06569fc07a474ddf035ec11d449ff9d55b5d70' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23451,8 +23690,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();
+            });
+        });
     }
     getFocusableInput() {
         const options = this.state._options;
@@ -23489,7 +23733,7 @@ class KolInputRadio {
         };
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'abaeb85e7c44c82c0c638cd8dae368454e9565e2' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'f089864837e627816b92febb97f4442ffe064296' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
     }
     calculateDisabled(option) {
         return Boolean(this.state._disabled) || Boolean(option.disabled);
@@ -23729,8 +23973,13 @@ const defaultStyleCss$o = "@charset \"UTF-8\";\n/*\n* This file defines the laye
 
 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();
+            });
+        });
     }
     getSanitizedFloatValue(value) {
         const floatValue = parseFloat(value);
@@ -23799,7 +24048,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: '59b4f4f600171e6496415ce3dad4400607101f03' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '80aac0e1ac4dab7e88fe7df636c2ee19905d42de', state: this.state }, hAsync("div", { key: '31ff63b9171895a796deff2111fb740a5b6d47f3', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: 'b444084a05e3a905034a2f4da9b3c7ea48277792', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '80433f1e6d5b97cffed870e604df9fcefdb605f0', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: 'eadfc636106eb9aa438b5be71e072547a9054e78', id: this.state._id, suggestions: this.state._suggestions }))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'fa6009c92bd326a16075cb0a8f328ecde89a1b0d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4a0b51e44d330991b71c80944894cefab20ea89e', state: this.state }, hAsync("div", { key: 'e7ddf1ce4c09cad830906a611f63f6f56d8466ec', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: 'a4bf095b5442f42ef75e6339fa0bc9131de97a04', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '4a0446cce3a73c3487df549abc24064469d68c26', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: '465bacc9d4ddae28ba87558ba6d5cdb93b27f732', id: this.state._id, suggestions: this.state._suggestions }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23996,8 +24245,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 selectionStart() {
         var _a;
@@ -24040,7 +24294,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: '83e4d9964aa560e3fbbaba462572fee6fa2eae87' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b3a68ff02445b1dc07c08ff4ef14e366ee6785a9', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'd1f60fdb8c4b47a9ead3415cbbf38fee000e27f3' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '5b2f79fc63b889b52f0369be822edeadae218934' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '246837c2083d17b5773efd67081b47ce6f852be2', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '938ed60af361b9227a191433c28f1befe0fd36e8' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -24504,15 +24758,20 @@ class KolLinkWc {
         };
     }
     async focus() {
-        var _a;
-        return Promise.resolve((_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus());
+        return await new Promise((resolve) => {
+            const ref = this.anchorRef;
+            requestAnimationFrame(() => {
+                ref === null || ref === void 0 ? void 0 : ref.focus();
+                resolve();
+            });
+        });
     }
     render() {
         var _a;
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
         const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
-        return (hAsync(Host, { key: '5bc1c1aed27fafcc28b8f6b1a117a123197c239b' }, hAsync("a", Object.assign({ key: '88edf125ebff91ac26d6a0a4dfd4cc65abcc53ac', 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: 'c202c86b81f96025f9ff625b698b8e76630b44f7' }, hAsync("a", Object.assign({ key: '920e43fa27eeac6f56fc9a3a8b80a3a3548a5169', 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,
@@ -24522,7 +24781,7 @@ class KolLinkWc {
                 'kol-link--inline': this.state._inline === true,
                 'kol-link--standalone': this.state._inline === false,
                 [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-            }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: 'a4605feb901b02c7d759047d6d3de3876f1e5eae', 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: '5452f09a70b82be732f45f4b716b8737fb2885af', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '5e6d38a786d76b1398263521db26aa2d71bfbeec', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'kolicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '6294da5cf66e516298cc40a663963bf28f88bec2', "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: '5594d6d55e05f8c41dca31f9500f0db25806efda', 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: '3fb6b66a1390abddadb2c40aa57142a5e6f6e61e', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'f84bdf9e1984fcd1b999e7ead1748f09f8f06a2d', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'kolicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '619ebd8fe524c58b12b28e28c80aa3df0b195939', "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);
@@ -24928,7 +25187,7 @@ class KolNav {
     }; }
 }
 
-const defaultStyleCss$h = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n}";
+const defaultStyleCss$h = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}";
 
 class KolPagination {
     constructor(hostRef) {
@@ -25162,7 +25421,7 @@ class KolPaginationWc {
                 return null;
             }
         });
-        return (hAsync(Host, { class: "kol-pagination" }, hAsync("span", { role: "status", "aria-live": "polite" }, translate('kol-table-visible-range', {
+        return (hAsync(Host, { class: "kol-pagination" }, hAsync("span", { role: "status", "aria-live": "polite", class: "kol-pagination__entries" }, translate('kol-table-visible-range', {
             placeholders: {
                 start: this.getPageStart(),
                 end: this.getPageEnd(),
@@ -25175,7 +25434,7 @@ class KolPaginationWc {
     getUnselectedPageButton(page) {
         const pageText = NUMBER_FORMATTER.format(page);
         const ariaDescription = `${this.translatePage} ${pageText}`;
-        return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { class: "kol-pagination__button", _ariaDescription: ariaDescription, _customClass: this.state._customClass, _label: pageText, _on: {
+        return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--numbers", _ariaDescription: ariaDescription, _customClass: this.state._customClass, _label: pageText, _on: {
                 onClick: (event) => {
                     this.onClick(event, page);
                 },
@@ -25216,7 +25475,7 @@ class KolPaginationWc {
                             try {
                                 nextValue = parseJson(nextValue);
                             }
-                            catch (e) {
+                            catch (_a) {
                                 nextState.delete('_hasButtons');
                             }
                         }
@@ -27154,7 +27413,7 @@ class KolPopover {
                     try {
                         this.popoverElement.showPopover();
                     }
-                    catch (e) {
+                    catch (_a) {
                     }
                 }
             }
@@ -27163,7 +27422,7 @@ class KolPopover {
                     try {
                         this.popoverElement.hidePopover();
                     }
-                    catch (e) {
+                    catch (_b) {
                     }
                 }
             }
@@ -27352,11 +27611,11 @@ class KolPopoverButton {
         (_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
     }
     render() {
-        return (hAsync("div", { key: '20a956409478664ea60fe7d2ea494f6b8ccd5759', class: clsx('kol-popover-button', {
+        return (hAsync("div", { key: '0e7d5b884be9b05c7c94c2e5e7be8c35b0def1d7', class: clsx('kol-popover-button', {
                 'kol-popover-button--open': this.popoverOpen,
                 'kol-popover-button--inline': this.state._inline === true,
                 'kol-popover-button--standalone': this.state._inline === false,
-            }) }, hAsync(KolButtonWcTag, { key: '9d5b8055b14385030279aa062065bfb3b9d74b5d', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element) }, hAsync("slot", { key: '000363d7f06a71ffe5b3287fb90e44d6d51f7e81', name: "expert", slot: "expert" })), hAsync("div", { key: 'c809a2731b0815d126884d6dffa3732d7731b92c', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '7cd06d9b8d84b0703888f54c8492153a84d643b3' }))));
+            }) }, hAsync(KolButtonWcTag, { key: '94ccc86b0c086381c81138687458bc7f24b8daf0', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element) }, hAsync("slot", { key: 'b0fc81b248083132b185e9f675b26a34f536e8da', name: "expert", slot: "expert" })), hAsync("div", { key: '3d97f41b80556b76628c416f655088f5bef5f73b', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '10cf6cdaff42f908b1ed103526d4e92f28493535' }))));
     }
     validateInline(value) {
         validateInline(this, value, {
@@ -27839,8 +28098,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();
+            });
+        });
     }
     getFormFieldProps() {
         return {
@@ -27863,11 +28127,11 @@ class KolSelectWc {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '783ae8765a903cd7b733dd3b2f616b5a84ce7378' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '9bf4d862876bbf18b40921bd715e025ff1323c3f', state: this.state }, hAsync("form", { key: '06750f56e586430344314031d3a8b25f8669c7ba', onSubmit: (event) => {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '44490eb252cf8e389146f5c8bcaa323a9f42c5cc' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '663ac31f77dfa763ef2a1603fd0597211d37edc7', state: this.state }, hAsync("form", { key: 'c16646ed59f3e5788a89f1d92efd1e2707744649', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host});
-            } }, hAsync("input", { key: '761992a87c4638c2a4b7282154cac30c66492331', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '36cbcbbcaef6b39a0a36c42bba3270ad873a244d' }, this.getSelectProps()))))));
+            } }, hAsync("input", { key: 'fe84cdd692d243ac1c017fc8e9cd10cd32a0b2bb', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '27465e961d32dc09fe1a6978140693350f813dc0' }, this.getSelectProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -28099,8 +28363,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();
+            });
+        });
     }
     onBlur(event) {
         var _a, _b, _c;
@@ -28272,17 +28541,15 @@ class KolSingleSelect {
     render() {
         var _a;
         const isDisabled = this.state._disabled === true;
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '010b2e3d283d023a03f02b87c21d4951f6eac70d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '50cbe61571cc331d748c6a9c5a9f91d0633e2b07', state: this.state }, hAsync("div", { key: 'c769c010215b569c4f33ec886ac822aafba13749', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '4a5a9e6221af7252ff307c3592c6e531223fd2b8' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '395e01a4d1ea4355c0db7feeaa10e0421d513e54', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
-                'kol-single-select__delete--disabled': isDisabled,
-            }), _on: {
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9859c88d4eaca7326f1a0db40b320fa88615c429' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '7b7e93ea4fcc87bf11b1b5f513bf5d8d4bb6d0f7', state: this.state }, hAsync("div", { key: '974ffede1255b0cfb8b4b5ec549c766b5a474531', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '30e30746a003b83931011d0837c1d1bfcbff82dd' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '851891399be5cb2289fd8bd650681c2a15212efd', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: "kol-single-select__delete", hidden: isDisabled, _on: {
                 onClick: () => {
                     var _a;
                     this.clearSelection();
                     (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
                 },
-            } })), hAsync(KolIconTag, { key: '25991f7a780b9e3a987606a8bed5c052f156fcdd', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), hAsync(KolIconTag, { key: '22a363bfd1c0d198b9b7f918b7b4c95255da18c6', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: 'd3f0d07878c90554c452c1de165c9c441360d5e0', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled }, 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) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '273e98083d2fdb5ee652c796b32d93103676b957', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled }, 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) => {
@@ -28625,6 +28892,175 @@ class KolSingleSelect {
     }; }
 }
 
+const skeletonBem = bem$2.forBlock('kol-skeleton');
+const BEM_CLASS_SKELETON__ACTIONS = skeletonBem('actions');
+const BEM_CLASS_SKELETON__CONTAINER = skeletonBem('container');
+const BEM_CLASS_SKELETON__COUNTER = skeletonBem('counter');
+const BEM_CLASS_SKELETON__NAME = skeletonBem('name');
+const SkeletonFC = (props) => {
+    const { count, label, name, show, handleClick, refButton } = props;
+    const hasName = !!(show && (name === null || name === void 0 ? void 0 : name.trim()));
+    const BEM_CLASS_ROOT = skeletonBem({
+        'has-name': hasName,
+        'is-hidden': !show,
+    });
+    return (hAsync("div", { class: BEM_CLASS_ROOT }, hAsync("div", { class: BEM_CLASS_SKELETON__CONTAINER }, hasName && hAsync("span", { class: BEM_CLASS_SKELETON__NAME }, name), hAsync("div", { class: BEM_CLASS_SKELETON__COUNTER }, "Count: ", count)), hAsync("div", { class: BEM_CLASS_SKELETON__ACTIONS }, hAsync(ClickButtonFC, { label: label, handleClick: handleClick, refButton: refButton }))));
+};
+
+class SkeletonController extends BaseController {
+    constructor(states) {
+        super(states, {
+            count: 0,
+            name: '',
+        });
+        this.onKeydown = (event) => {
+            if (event.key === 'Escape') {
+                console.log('Show should be toggled');
+                void this.toggle();
+            }
+        };
+        this.handleClick = () => {
+            Log.debug('Button clicked, count should be increased');
+            const { count } = this.getProps();
+            const nextCount = count + 1;
+            this.setProp('count', nextCount);
+            this.setState('count', nextCount);
+        };
+        this.setButtonRef = (element) => {
+            this.clickButtonCtrl.setButtonRef(element);
+        };
+        this.clickButtonCtrl = new ClickButtonController({});
+        this.startLoadedEventInterval();
+    }
+    componentWillLoad(props) {
+        const { count, name } = props;
+        this.watchCount(count);
+        this.watchName(name);
+        this.watchLabel(this.component.label);
+        this.clickButtonCtrl.componentWillLoad({
+            label: this.component.label,
+        });
+    }
+    watchCount(value) {
+        withValidPropValue(countProp, value, (v) => {
+            this.setProp('count', v);
+            this.setState('count', v);
+        });
+    }
+    watchName(value) {
+        withValidPropValue(nameProp, value, (v) => {
+            this.setProp('name', v);
+        });
+    }
+    watchLabel(value) {
+        withValidPropValue(labelProp, value, (v) => {
+            this.setState('label', v);
+            this.clickButtonCtrl.watchLabel(v);
+        });
+    }
+    toggle() {
+        this.setState('show', !this.component.show);
+    }
+    focus() {
+        return this.clickButtonCtrl.focus();
+    }
+    startLoadedEventInterval() {
+        this.intervalId = setInterval(() => {
+            const { count } = this.getProps();
+            this.emitLoaded(count);
+        }, 2000);
+    }
+    emitLoaded(count) {
+        if (this.onLoadedCallback) {
+            this.onLoadedCallback(count);
+        }
+    }
+    setOnLoadedCallback(callback) {
+        this.onLoadedCallback = callback;
+    }
+    destroy() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = undefined;
+        }
+    }
+}
+
+class KolSkeleton {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.loaded = createEvent(this, "loaded");
+        this.rendered = createEvent(this, "rendered");
+        this.ctrl = new SkeletonController(this);
+        this.label = 'Label';
+        this.show = true;
+        this.count = 0;
+    }
+    async focus() {
+        return Promise.resolve(this.ctrl.focus());
+    }
+    async toggle() {
+        return Promise.resolve(this.ctrl.toggle());
+    }
+    watchCount(value) {
+        this.ctrl.watchCount(value);
+    }
+    watchName(value) {
+        this.ctrl.watchName(value);
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            Log.debug('button pressed');
+            this.ctrl.handleClick();
+        }
+    }
+    onKeydown(event) {
+        this.ctrl.onKeydown(event);
+    }
+    componentWillLoad() {
+        this.ctrl.componentWillLoad({
+            count: this._count,
+            name: this._name,
+        });
+        this.ctrl.setOnLoadedCallback((count) => {
+            this.loaded.emit(count);
+        });
+    }
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.rendered.emit();
+        });
+    }
+    disconnectedCallback() {
+        this.ctrl.destroy();
+    }
+    render() {
+        const { count, name } = this.ctrl.getProps();
+        const { label, show } = this;
+        return (hAsync(Host, { key: '225420664e7c4af6153162c67244b7602a9a2f02' }, hAsync(SkeletonFC, { key: '35c0ce0446877a7e58da64c1c6c2a5fff960c4db', count: count, label: label, name: name, handleClick: () => this.ctrl.handleClick(), onLoaded: this.loaded, onRendered: this.rendered, show: show, refButton: (element) => this.ctrl.setButtonRef(element) })));
+    }
+    static get watchers() { return {
+        "_count": ["watchCount"],
+        "_name": ["watchName"]
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "kol-skeleton",
+        "$members$": {
+            "_count": [8],
+            "_name": [1],
+            "label": [32],
+            "show": [32],
+            "count": [32],
+            "focus": [64],
+            "toggle": [64]
+        },
+        "$listeners$": [[0, "keydown", "handleKeyDown"], [8, "keydown", "onKeydown"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const defaultStyleCss$b = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav__list {\n    display: grid;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    position: absolute;\n    left: calc(-99999 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n  }\n}";
 
 class KolSkipNav {
@@ -28943,7 +29379,7 @@ class KolTableSettings {
     }
     render() {
         const columns = this.getPrimaryRow();
-        return (hAsync(KolPopoverButtonWcTag, { key: '65b350799d5422b6500b3ae983f9c7f3c925f3b0', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: '450200fa5d74f6ceb99c0ea589e12aefbfcdc23d', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: '8bd0456ba046beb7a819c978d32dd8e64c294be0', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: 'e0d517d57e57c8e889997e18da3fb3badd0bcebe', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: '34785b3e839f8fcc59d7930c6d8bc1ca82e8d5a7', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: 'a28b130172a530644430aa4c9f52d6afa913522a', class: "kol-table-settings__columns-container" }, hAsync("div", { key: 'd18e531412556d173f9441c462bd3361f829d205', class: "kol-table-settings__columns" }, columns.map((column, index) => (hAsync("div", { key: column.key, class: "kol-table-settings__column" }, hAsync(KolInputCheckboxTag, { _checked: column.visible !== false, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => { var _a; return this.handleVisibilityChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), hAsync("span", { class: "kol-table-settings__column-label" }, column.label), hAsync(KolInputNumberTag, { _hideLabel: true, _value: parseColumnWidth(column.width), _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => { var _a; return this.handleWidthChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), hAsync(KolButtonWcTag, { _icons: "kolicon-chevron-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'up'); } }, _disabled: column.sortable === false || index === 0, "data-testid": "table-settings-move-up" }), hAsync(KolButtonWcTag, { _icons: "kolicon-chevron-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'down'); } }, _disabled: column.sortable === false || index === columns.length - 1, "data-testid": "table-settings-move-down" })))))), hAsync("div", { key: '2d6942cc9f36857cd4299a57330131975e7f979f', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: 'bec8a8be3020bdc1dc2359899963871539bf4d00', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: '9c240d2efeab9b2a6341e5cf817ae84d74c9a667', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
+        return (hAsync(KolPopoverButtonWcTag, { key: '490b82896c50d36d33fa91b3776c810f2d974e91', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: 'f56590905cb406de94819f8dc05dd5b44192f352', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: 'af706ca70d69c6df0e91b3427ac3b82ae9b13500', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: 'ec1b9cdb7fd18d87b11d8bb699d9b8764f9c74d8', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: 'b50a08905d0a39033b2ce95b82a6d456563d114a', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: '1f88fefb1ddf02f2d2b7f5cf31a43f330366d43f', class: "kol-table-settings__columns-container" }, hAsync("div", { key: '8ab029dffd79ce218c2d906585cd21e36ef094a8', class: "kol-table-settings__columns" }, columns.map((column, index) => (hAsync("div", { key: column.key, class: "kol-table-settings__column" }, hAsync(KolInputCheckboxTag, { _checked: column.visible !== false, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => { var _a; return this.handleVisibilityChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), hAsync("span", { class: "kol-table-settings__column-label" }, column.label), hAsync(KolInputNumberTag, { _hideLabel: true, _value: parseColumnWidth(column.width), _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => { var _a; return this.handleWidthChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), hAsync(KolButtonWcTag, { _icons: "kolicon-chevron-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'up'); } }, _disabled: column.sortable === false || index === 0, "data-testid": "table-settings-move-up" }), hAsync(KolButtonWcTag, { _icons: "kolicon-chevron-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'down'); } }, _disabled: column.sortable === false || index === columns.length - 1, "data-testid": "table-settings-move-down" })))))), hAsync("div", { key: 'ae830d3fe07668cf798515158a98cb669690d9ce', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: 'cac77cd375e7e506bec51431989c667210ad78df', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: '40204def6561b97cd9d81f76d53c19d7836bd148', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -29002,7 +29438,7 @@ var KeyboardKey;
     KeyboardKey["Space"] = " ";
 })(KeyboardKey || (KeyboardKey = {}));
 
-const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions {\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n}";
+const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions {\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}";
 
 const PAGINATION_OPTIONS = [10, 20, 50, 100];
 const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
@@ -29148,7 +29584,7 @@ class KolTableStateful {
                 try {
                     value = parseJson(value);
                 }
-                catch (e) {
+                catch (_a) {
                 }
                 watchValidator(this, '_headers', (value) => typeof value === 'object' && value !== null, new Set(['KoliBriTableHeaders']), value, {
                     hooks: {
@@ -29211,7 +29647,7 @@ class KolTableStateful {
         try {
             value = parseJson(value);
         }
-        catch (e) {
+        catch (_a) {
         }
         this.showPagination = paginationValidator(value);
         watchValidator(this, '_pagination', paginationValidator, new Set(['boolean', 'KoliBriTablePagination']), value, {
@@ -29332,7 +29768,7 @@ class KolTableStateful {
             horizontal: (_d = (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _d !== void 0 ? _d : [],
             vertical: (_f = (_e = this.state._headers.vertical) === null || _e === void 0 ? void 0 : _e.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _f !== void 0 ? _f : [],
         };
-        return (hAsync(Host, { key: '596ff18dd22ae8a08e83dbaf36db142fe58d971e', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'de0e3900a63bb3c03bce10bb7df6c1cfad6e33cf', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
+        return (hAsync(Host, { key: 'e1709a711cbb5a5c880a08fe116a1f71cba1eb42', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '8913690e3c5b72ce1a0b405105cfdedd3112d58f', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -29387,7 +29823,7 @@ let KolTableStateless$1 = class KolTableStateless {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(KolTableStatelessWcTag, { key: '4f2c23853dd8f38baeb961bf35cc5f651cd45605', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _on: this._on, _selection: this._selection, _hasSettingsMenu: this._hasSettingsMenu }));
+        return (hAsync(KolTableStatelessWcTag, { key: '804f4c5a9759f8df05272b7c099459411448c59e', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _on: this._on, _selection: this._selection, _hasSettingsMenu: this._hasSettingsMenu }));
     }
     static get style() { return {
         default: defaultStyleCss$7
@@ -30022,12 +30458,12 @@ class KolTableStateless {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
         this.checkboxRefs = [];
         const horizontalHeaders = this.state._headerCells.horizontal;
-        return (hAsync("div", { key: 'c0d880b5feeae9b29c7defba7304530deb1f1064', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: 'b7fc12aeb7724aa55f956836f440dbeb44f98ca9', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: 'a6ca943792cbc34770516274022f52c5fc06719f', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '657af42e176079dd1ab4c030f16cc08d534172a9', class: "kol-table__table", style: {
+        return (hAsync("div", { key: '2426b838c4e5d373231c0b7d8248b33b3190fce4', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: 'b967b09672a41cbac225115d85bd7df3a26c747a', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: '80058544c29bec221fa72701cec3534ae298f519', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'dca5672b8ef6e439d60ea4c5206917c2bd8da036', class: "kol-table__table", style: {
                 minWidth: this.getTableMinWidth(),
-            } }, hAsync("caption", { key: 'd55d0041c7ed04e26ccf55203f0f2a42f1652014', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '6c50df582996be2145568ea275007a3e87ba815e', class: "kol-table__head" }, [
+            } }, hAsync("caption", { key: 'cc730fb3e4c5951b1d0c04b73901b1e1ba4f0181', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: 'ddab33602df5dcc0d266128a06907b0c5fe81769', class: "kol-table__head" }, [
             horizontalHeaders.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
             this.renderSpacer('head', horizontalHeaders),
-        ])), hAsync("tbody", { key: '482757151e3bdc7f026a2e924c0c9e1d6ea6714a', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), hAsync("tbody", { key: '59d6cee5b36e8addebb2fd765cb6aa3f8408cfc2', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -30466,8 +30902,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();
+            });
+        });
     }
     getFormFieldProps() {
         return {
@@ -30493,7 +30934,7 @@ class KolTextarea {
             } });
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '40cbd686b73f49706d5e6a56f21ca564cd945056' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd8a3af9b6772dd62e16f30c3f818d45ccdd50d96', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '58e4c06295ec23090d1bc2201ba8c906e317ed0b' }, this.getTextAreaProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'e1a50de8e844b4b8de8363f40f0398e1464a65a8' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6e6d22422052a45e54cb35054b02853c7ab5d055', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'eadd23eef77edf6963b601582b936d190f455706' }, this.getTextAreaProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -31575,7 +32016,6 @@ registerComponents([
   KolAlert,
   KolAlertWc,
   KolAvatar,
-  KolAvatarWc,
   KolBadge,
   KolBreadcrumb,
   KolButton,
@@ -31583,6 +32023,7 @@ registerComponents([
   KolButtonWc,
   KolCard,
   KolCardWc,
+  KolClickButton,
   KolCombobox,
   KolDetails,
   KolDialog,
@@ -31618,6 +32059,7 @@ registerComponents([
   KolSelect,
   KolSelectWc,
   KolSingleSelect,
+  KolSkeleton,
   KolSkipNav,
   KolSpin,
   KolSplitButton,
@@ -31657,7 +32099,7 @@ function prototypeKoliBri(name, cb) {
             },
         });
     }
-    catch (e) {
+    catch (_a) {
         Log.debug(`KoliBri property ${name} is already bind.`);
     }
 }