@public-ui/hydrate 2.0.15 → 2.1.0

package/dist/index.js

@@ -12548,7 +12548,7 @@ var loglevel = {exports: {}};
 
 var f = loglevel.exports;
 
-const H=(e,t)=>s=>s(e,t),P$1=(e,t)=>s=>s(e,t,{append:!1}),o$1={};let A=!1;const D=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,I=e=>typeof e=="string"&&D.test(e),g=e=>{if(I(e)===!1)throw new Error(`[Theming] The theme identifier "${typeof e=="string"?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},b=(e,t,s,a)=>{a=a??{},a.append=a.append??!1,g(e),A===!1&&(A=!0,f.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.
+const o$1={};let A=!1;const D=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,I=e=>typeof e=="string"&&D.test(e),g=e=>{if(I(e)===!1)throw new Error(`[Theming] The theme identifier "${typeof e=="string"?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},b=(e,t,s,a)=>{a=a??{},a.append=a.append??!1,g(e),A===!1&&(A=!0,f.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.
 
 	import { register } from 'adopted-style-sheets';
 	import { defineCustomElements } from '...';
@@ -12558,294 +12558,153 @@ const H=(e,t)=>s=>s(e,t),P$1=(e,t)=>s=>s(e,t,{append:!1}),o$1={};let A=!1;const
 	.then(() => {
 		// run your app or website
 	})
-	.catch(console.warn);`)),(typeof o$1.A11yUi!="object"||o$1.A11yUi===null)&&(o$1.A11yUi={}),typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&(typeof o$1.A11yUi.Themes!="object"||o$1.A11yUi.Themes===null)&&(o$1.A11yUi.Themes={}),typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&(typeof o$1.A11yUi.Themes[e]!="object"||o$1.A11yUi.Themes[e]===null)&&(o$1.A11yUi.Themes[e]={}),typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&typeof o$1.A11yUi.Themes[e]=="object"&&o$1.A11yUi.Themes[e]!==null&&(a.append&&typeof o$1.A11yUi.Themes[e][t]=="string"?o$1.A11yUi.Themes[e][t]+=s:o$1.A11yUi.Themes[e][t]=s);},U=(e,t,s,a)=>(g(e),typeof t=="object"&&t!==null&&Object.getOwnPropertyNames(t).forEach(r=>{const n=t[r],i=r.toLowerCase(),m=typeof a?.transformTagName=="function"&&!["GLOBAL","PROPERTIES"].includes(r)?a.transformTagName(i):r;typeof n=="string"&&n.length>0&&b(e,m.toUpperCase(),n,s);}),e);const c$1=new Map,v=[],L=new Set,h=new Map,B=/--[^;]+/g,G=/:/;(typeof o$1.A11yUi!="object"||o$1.A11yUi===null)&&(o$1.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:v,STYLING_TASK_QUEUE:c$1});const K=(e,t)=>{let s=t.match(B);if(Array.isArray(s)){s=s.filter(r=>G.test(r));const a=document.createElement("style");a.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}L.add(e);},T=(e,t)=>typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&typeof o$1.A11yUi.Themes[e]=="object"&&o$1.A11yUi.Themes[e]!==null&&typeof o$1.A11yUi.Themes[e][t]=="string"?o$1.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",q=e=>{for(const t of Array.from(e.childNodes))if(t instanceof HTMLStyleElement&&t.tagName==="STYLE")e.removeChild(t);else break},F=(e,t)=>{try{const s=[];t.forEach(a=>{const r=new CSSStyleSheet;r.replaceSync(a),s.push(r);}),e.adoptedStyleSheets=s;}catch{t.reverse().forEach(s=>{const a=document.createElement("style");a.innerHTML=s,e.insertBefore(a,e.firstChild);});}},Q=(e,t,s)=>{if(s!==!1){const a=[...Array.from(e.childNodes).filter(n=>n instanceof HTMLStyleElement&&n.tagName==="STYLE")];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch{r=[];}s?.mode==="before"?(a.reverse().forEach(n=>t.unshift(n.innerHTML)),r.reverse().forEach(n=>t.unshift(Array.from(n.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(n=>t.push(n.innerHTML)),r.forEach(n=>t.push(Array.from(n.cssRules).map(i=>i.cssText).join(""))));}},M=(e,t,s)=>{const a=t.name||"default";let r;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch{r=e;}if(h.get(a)?.has(e.tagName))$(e,r,h.get(a)?.get(e.tagName),s);else {const n=T(a,"PROPERTIES"),i=T(a,"GLOBAL"),m=T(a,e.tagName);L.has(a)===!1&&K(a,i);const y=[n,i,m];Q(r,y,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,y),t.cache===!0&&(h.has(a)===!1&&h.set(a,new Map),h.get(a)?.set(e.tagName,y)),$(e,r,y,s);}},$=(e,t,s,a)=>{q(t),F(t,s),e.style.display=a;},O=e=>{e.loglevel==="debug"&&v.push({timestamp:Date.now(),numberOfTasks:c$1.size});},W=e=>{c$1.delete(e);},R=(e,t)=>{W(e),O(t);},X=e=>{for(const t of e)if(c$1.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:a}=c$1.get(t.target);M(t.target,a,s),R(t.target,a);}};try{new MutationObserver(X);}catch{}class te{constructor(t,s,a){this.createTheme=(r,n)=>P$1(r,n),this.createTranslation=(r,n)=>H(r,n),this.Prefix=t,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
+	.catch(console.warn);`)),(typeof o$1.A11yUi!="object"||o$1.A11yUi===null)&&(o$1.A11yUi={}),typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&(typeof o$1.A11yUi.Themes!="object"||o$1.A11yUi.Themes===null)&&(o$1.A11yUi.Themes={}),typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&(typeof o$1.A11yUi.Themes[e]!="object"||o$1.A11yUi.Themes[e]===null)&&(o$1.A11yUi.Themes[e]={}),typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&typeof o$1.A11yUi.Themes[e]=="object"&&o$1.A11yUi.Themes[e]!==null&&(a.append&&typeof o$1.A11yUi.Themes[e][t]=="string"?o$1.A11yUi.Themes[e][t]+=s:o$1.A11yUi.Themes[e][t]=s);},U=(e,t,s,a)=>(g(e),typeof t=="object"&&t!==null&&Object.getOwnPropertyNames(t).forEach(r=>{const n=t[r],i=r.toLowerCase(),m=typeof a?.transformTagName=="function"&&!["GLOBAL","PROPERTIES"].includes(r)?a.transformTagName(i):r;typeof n=="string"&&n.length>0&&b(e,m.toUpperCase(),n,s);}),e);const c$1=new Map,v=[],L=new Set,h=new Map,B=/--[^;]+/g,G=/:/;(typeof o$1.A11yUi!="object"||o$1.A11yUi===null)&&(o$1.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:v,STYLING_TASK_QUEUE:c$1});const K=(e,t)=>{let s=t.match(B);if(Array.isArray(s)){s=s.filter(r=>G.test(r));const a=document.createElement("style");a.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}L.add(e);},T=(e,t)=>typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&typeof o$1.A11yUi.Themes[e]=="object"&&o$1.A11yUi.Themes[e]!==null&&typeof o$1.A11yUi.Themes[e][t]=="string"?o$1.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",q=e=>{for(const t of Array.from(e.childNodes))if(t instanceof HTMLStyleElement&&t.tagName==="STYLE")e.removeChild(t);else break},F=(e,t)=>{try{const s=[];t.forEach(a=>{const r=new CSSStyleSheet;r.replaceSync(a),s.push(r);}),e.adoptedStyleSheets=s;}catch{t.reverse().forEach(s=>{const a=document.createElement("style");a.innerHTML=s,e.insertBefore(a,e.firstChild);});}},Q=(e,t,s)=>{if(s!==!1){const a=[...Array.from(e.childNodes).filter(n=>n instanceof HTMLStyleElement&&n.tagName==="STYLE")];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch{r=[];}s?.mode==="before"?(a.reverse().forEach(n=>t.unshift(n.innerHTML)),r.reverse().forEach(n=>t.unshift(Array.from(n.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(n=>t.push(n.innerHTML)),r.forEach(n=>t.push(Array.from(n.cssRules).map(i=>i.cssText).join(""))));}},M=(e,t,s)=>{const a=t.name||"default";let r;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch{r=e;}if(h.get(a)?.has(e.tagName))$(e,r,h.get(a)?.get(e.tagName),s);else {const n=T(a,"PROPERTIES"),i=T(a,"GLOBAL"),m=T(a,e.tagName);L.has(a)===!1&&K(a,i);const y=[n,i,m];Q(r,y,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,y),t.cache===!0&&(h.has(a)===!1&&h.set(a,new Map),h.get(a)?.set(e.tagName,y)),$(e,r,y,s);}},$=(e,t,s,a)=>{q(t),F(t,s),e.style.display=a;},O=e=>{e.loglevel==="debug"&&v.push({timestamp:Date.now(),numberOfTasks:c$1.size});},W=e=>{c$1.delete(e);},R=(e,t)=>{W(e),O(t);},X=e=>{for(const t of e)if(c$1.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:a}=c$1.get(t.target);M(t.target,a,s),R(t.target,a);}};try{new MutationObserver(X);}catch{}
 
-const pushNodes = (set, domNodes) => {
-    domNodes.forEach((domNode) => {
-        if (set.has(domNode) === false) {
-            set.add(domNode);
-        }
-    });
+const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'];
+const alertVariantOptions = ['card', 'msg'];
+
+const inputCheckboxVariantOptions = ['button', 'default', 'switch'];
+
+const koliBriQuoteVariantOptions = ['block', 'inline'];
+
+const cssResizeOptions = ['both', 'horizontal', 'vertical', 'none'];
+
+const getWindow$1 = () => (typeof window === 'undefined' ? null : window);
+const getDocument = () => (typeof getWindow$1().document === 'undefined' ? null : getWindow$1().document);
+let DEV_MODE = null;
+let EXPERIMENTAL_MODE = null;
+const getDevMode = () => DEV_MODE === true;
+const getExperimentalMode = () => EXPERIMENTAL_MODE === true;
+const LOG_STYLE = 'color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000';
+const mapToArray = (msg) => {
+    return Array.isArray(msg) ? msg : [msg];
 };
-const querySelectorAll = (selector, node = document) => {
-    if (node instanceof Document ||
-        node instanceof HTMLElement ||
-        node instanceof ShadowRoot) {
-        const domNodes = new Set();
-        pushNodes(domNodes, node.querySelectorAll(selector));
-        const nodeList = node.querySelectorAll('[class*="hydrated"]');
-        for (let i = 0; i < nodeList.length; i++) {
-            const shadowRoot = nodeList[i].shadowRoot;
-            if (typeof shadowRoot === "object" && shadowRoot !== null) {
-                pushNodes(domNodes, querySelectorAll(selector, shadowRoot));
-            }
-            else {
-                pushNodes(domNodes, querySelectorAll(selector, nodeList[i]));
-            }
-        }
-        return Array.from(domNodes);
+const getLogLabel = (label) => {
+    return `%c${label}`;
+};
+const handleClassifier = (label, classifier) => {
+    if (typeof classifier === 'string' && classifier.length > 0) {
+        return `${getLogLabel(label)} | ${classifier}`;
     }
     else {
-        throw new Error(`The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.`);
+        return getLogLabel(label);
     }
 };
-
-const querySelector = (selector, node = document) => {
-    if (node instanceof Document ||
-        node instanceof HTMLElement ||
-        node instanceof ShadowRoot) {
-        let domNode = node.querySelector(selector);
-        if (domNode === null) {
-            const nodeList = node.querySelectorAll('[class*="hydrated"]');
-            for (let i = 0; i < nodeList.length; i++) {
-                const shadowRoot = nodeList[i].shadowRoot;
-                if (typeof shadowRoot === "object" && shadowRoot !== null) {
-                    domNode = querySelector(selector, shadowRoot);
-                }
-                else {
-                    domNode = querySelector(selector, nodeList[i]);
-                }
-                if (domNode !== null) {
-                    break;
-                }
-            }
+const getShield = (label, options) => {
+    return [handleClassifier(label, options === null || options === void 0 ? void 0 : options.classifier), `${LOG_STYLE};${(options === null || options === void 0 ? void 0 : options.overwriteStyle) || ''}`];
+};
+const isDevModeOrForceLog = (devMode, forceLog) => devMode() || forceLog === true;
+class Logger {
+    constructor(label, devMode) {
+        this.label = label;
+        this.devMode = devMode;
+    }
+    debug(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.debug(...getShield(this.label, options), ...mapToArray(msg));
         }
-        return domNode;
     }
-    else {
-        throw new Error(`The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.`);
+    info(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.info(...getShield(this.label, options), ...mapToArray(msg));
+        }
     }
-};
-
-var rgbaConvert$1 = {exports: {}};
-
-rgbaConvert$1.exports     = arr;
-rgbaConvert$1.exports.arr = arr;
-rgbaConvert$1.exports.obj = obj;
-rgbaConvert$1.exports.css = css;
-rgbaConvert$1.exports.hex = hex;
-rgbaConvert$1.exports.num = num;
-
-function arr(data) {
-  var a = parse$2(data);
-  if (a.length == 3) {
-    return a.concat(255)
-  } else {
-    a[3] = Math.round(a[3]);
-    return a
-  }
-}
-
-function obj(data) {
-  var a = parse$2(data);
-  return {
-    r: a[0],
-    g: a[1],
-    b: a[2],
-    a: a.length == 3
-      ? 255
-      : Math.round(a[3])
-  }
-}
-
-function css(data) {
-  var a = parse$2(data);
-  if (a.length == 3) a.push(255);
-
-  return a[3] == 255
-    ? 'rgb(' + a[0] + ', ' + a[1] + ', ' + a[2] + ')'
-    : a[3] == 0
-      ? 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', 0)'
-      : 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', ' + String(a[3] / 255).substr(1) + ')'
-}
-
-function hex(data) {
-  var a = parse$2(data);
-  if (a.length == 3) a.push(255);
-  var opaque = a[3] == 255;
-  var r = num2hex(a[0]);
-  var g = num2hex(a[1]);
-  var b = num2hex(a[2]);
-  var a = num2hex(Math.round(a[3]));
-  var is = isshort(r, g, b, a);
-  if (opaque) {
-    return is
-      ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0)
-      : '#' + r + g + b
-  }
-  return is
-    ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0) + a.charAt(0)
-    : '#' + r + g + b + a
-}
-
-function num(data) {
-  var a = parse$2(data);
-  if (a.length == 3) a.push(255);
-  else a[3] = Math.round(a[3]);
-  return ((a[3] << 24) >>> 0 | a[0] << 16 | a[1] << 8 | a[2]) >>> 0
-}
-
-function parse$2(data) {
-  if (typeof data == 'string') {
-    data = data.toLowerCase();
-    return name(data)
-      || hex3(data)
-      || hex6(data)
-      || rgb(data)
-      || rgba(data)
-      || [0, 0, 0, 255]
-  }
-  return object(data)
-    || array(data)
-    || number(data)
-    || [0, 0, 0, 255]
-}
-
-function num2hex(num) {
-  var s = num.toString(16);
-  return s.length == 1
-    ? '0' + s
-    : s
-}
-
-function isshort(r, g, b, a) {
-  var h = ['ff', '00', '11', '22', '33', '44', '55', '66',
-           '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee'];
-  return h.indexOf(r) != -1
-    && h.indexOf(g) != -1
-    && h.indexOf(b) != -1
-    && h.indexOf(a) != -1
-}
-
-function name(str) {
-  if (str == 'red')     return [255, 0, 0]
-  if (str == 'green')   return [0, 255, 0]
-  if (str == 'blue')    return [0, 0, 255]
-  if (str == 'black')   return [0, 0, 0]
-  if (str == 'white')   return [255, 255, 255]
-  if (str == 'cyan')    return [0, 255, 255]
-  if (str == 'gray')    return [128, 128, 128]
-  if (str == 'grey')    return [128, 128, 128]
-  if (str == 'magenta') return [255, 0, 255]
-  // ok, not the real css `pink` but my personal `magenta` alias
-  // `pink` is simpler than `fuchsia`, whatever...
-  if (str == 'pink')    return [255, 0, 255]
-  if (str == 'yellow')  return [255, 255, 0]
-}
-
-function hex2num(str) {
-  return str.length == 1
-    ? parseInt(str + str, 16)
-    : parseInt(str, 16)
-}
-
-function hex3(str) {
-  var s = str.replace(/^#/,'');
-  var l = s.length;
-  if (l == 3 || l == 4) {
-    var r = hex2num(s[0]);
-    var g = hex2num(s[1]);
-    var b = hex2num(s[2]);
-    var a = l == 3
-      ? 255
-      : hex2num(s[3]);
-
-    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
-
-    return [r, g, b, a]
-  }
-}
-
-function hex6(str) {
-  var s = str.replace(/^#/,'');
-  var l = s.length;
-  if (l == 6 || l == 8) {
-    var r = hex2num(s.slice(0, 2));
-    var g = hex2num(s.slice(2, 4));
-    var b = hex2num(s.slice(4, 6));
-    var a = l == 6
-      ? 255
-      : hex2num(s.slice(6, 8));
-
-    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
-
-    return [r, g, b, a]
-  }
-}
-
-function getnum(val, integer) {
-  if (typeof val != 'number') return -1
-  if (integer === true && Math.floor(val) !== val) return -1
-  return val >= 0 && val <= 255
-    ? val
-    : -1
-}
-
-function object(obj) {
-  if (Object.prototype.toString.call(obj) === '[object Object]'
-    && Object.getPrototypeOf(obj) === Object.getPrototypeOf({})) {
-    var r = getnum(obj.r != undefined ? obj.r : obj.red   != undefined ? obj.red   : 0,   true);
-    var g = getnum(obj.g != undefined ? obj.g : obj.green != undefined ? obj.green : 0,   true);
-    var b = getnum(obj.b != undefined ? obj.b : obj.blue  != undefined ? obj.blue  : 0,   true);
-    var a = getnum(obj.a != undefined ? obj.a : obj.alpha != undefined ? obj.alpha : 255, true);
-    if (r != -1 && g != -1 && b != -1 && a != -1) {
-      return [r, g, b, a]
+    trace(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.trace(...getShield(this.label, options), ...mapToArray(msg));
+        }
     }
-  }
-}
-
-function array(arr) {
-  if (Array.isArray(arr) && (arr.length == 3 || arr.length == 4)) {
-    var r = getnum(arr[0],   true);
-    var g = getnum(arr[1],   true);
-    var b = getnum(arr[2],   true);
-    var a = getnum(arr[3] != undefined ? arr[3] : 255, true);
-    if (r != -1 && g != -1 && b != -1 && a != -1) {
-      return [r, g, b, a]
+    warn(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.warn(...getShield(this.label, options), ...mapToArray(msg));
+        }
     }
-  }
-}
-
-function number(num) {
-  if (typeof num == 'number' && Math.floor(num) == num && num <= 4294967295 && num >= 0) {
-    var a = num >> 24 & 255;
-    var r = num >> 16 & 255;
-    var g = num >> 8  & 255;
-    var b = num & 255;
-    return [r, g, b, a]
-  }
-}
-
-function rgb(str) {
-  if (str.substr(0, 4) == 'rgb(') {
-    str = str.match(/^rgb\(([^)]+)\)/)[1];
-    var t = str.split(/ *, */).map(Number);
-    var r = getnum(t[0], true);
-    var g = getnum(t[1], true);
-    var b = getnum(t[2], true);
-    if (r != -1 && g != -1 && b != -1) {
-      return [r, g, b, 255]
+    error(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.error(...getShield(this.label, options), ...mapToArray(msg));
+        }
     }
-  }
-}
-
-function rgba(str) {
-  if (str.substr(0, 5) == 'rgba(') {
-    str = str.match(/^rgba\(([^)]+)\)/)[1];
-    var t = str.split(/ *, */).map(Number);
-    var r = getnum(t[0], true);
-    var g = getnum(t[1], true);
-    var b = getnum(t[2], true);
-    var a = getnum(t[3] * 255);
-    if (r != -1 && g != -1 && b != -1 && a != -1) {
-      return [r, g, b, a]
+    throw(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            throw new Error(...getShield(this.label, options), ...mapToArray(msg));
+        }
     }
-  }
 }
+const Log = new Logger('KoliBri', getDevMode);
 
-var rgbaConvert = rgbaConvert$1.exports;
+const a11yCache = new Set();
+const a11yHint = (msg, options) => {
+    if (a11yCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
+        a11yCache.add(msg);
+        Log.debug([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
+            classifier: `✋ a11y`,
+            forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
+            overwriteStyle: '; background-color: #09f',
+        });
+    }
+};
+const devCache = new Set();
+const devHint = (msg, options) => {
+    if (devCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
+        devCache.add(msg);
+        Log.debug([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
+            classifier: `💻 dev`,
+            forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
+            overwriteStyle: '; background-color: #f09',
+        });
+    }
+};
+const devWarning = (msg, options) => {
+    if (devCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
+        devCache.add(msg);
+        Log.warn([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
+            classifier: `⚠️ dev`,
+            forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
+            overwriteStyle: '; background-color: #f09',
+        });
+    }
+};
+const featureCache = new Set();
+const featureHint = (msg, done = false, options) => {
+    if (featureCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
+        featureCache.add(msg);
+        msg += done === true ? ' ✅' : '';
+        Log.debug([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
+            classifier: `🌟 feature`,
+            forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
+            overwriteStyle: '; background-color: #309',
+        });
+    }
+};
+devHint(`Wir freuen uns über jedes Feedback, Kommentare, Screenshots oder Demo-Links von einer auf KoliBri-basierenden Anwendung (kolibri@itzbund.de). Vielen Dank!`);
+const uiUxCache = new Set();
+const uiUxHint = (msg, options) => {
+    if (uiUxCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
+        uiUxCache.add(msg);
+        Log.debug([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
+            classifier: `📑 ui/ux`,
+            forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
+            overwriteStyle: '; background-color: #060;',
+        });
+    }
+};
+const a11yHintDisabled = () => {
+    a11yHint(`"Disabled" schränkt die Zugänglichkeit und Sichtbarkeit ein. Wir empfehlen aus Sicht der Barrierefreiheit readonly- statt disabled-Attribut zu verwenden.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae`);
+};
+const a11yHintLabelingLandmarks = (value) => {
+    if (typeof value !== 'string' || value === '') {
+        a11yHint(`Manche Strukturelemente, wie bspw. der nav-Tag, können mehrfach in einer Webseite verwendet werden. Damit die gleichnamigen Strukturelemente voneinander unterschieden werden können, ist es erforderlich ein Aria-Label zu setzen.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns`);
+    }
+};
+const uiUxHintMillerscheZahl = (className, length = 8) => {
+    if (length > 7) {
+        uiUxHint(`[${className}] Innerhalb von Navigationsstrukturen wird empfohlen nicht mehr als 7 Menüpunkte zu verwenden.
 
-var n=.2126,r$1=.7152,t=.0722,e=1/12.92;function u(n){return Math.pow((n+.055)/1.055,2.4)}function a(a){var i=a[0]/255,c=a[1]/255,o=a[2]/255,s=i<=.03928?i*e:u(i),f=c<=.03928?c*e:u(c),l=o<=.03928?o*e:u(o);return s*n+f*r$1+l*t}function i(n){var r=255;8===(n=n.replace(/^#/,"")).length&&(r=parseInt(n.slice(6,8),16),n=n.substring(0,6)),4===n.length&&(r=parseInt(n.slice(3,4).repeat(2),16),n=n.substring(0,3)),3===n.length&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);var t=parseInt(n,16);return [t>>16,t>>8&255,255&t,r]}function c(n,r){return (Math.max(n,r)+.05)/(Math.min(n,r)+.05)}function o(n,r){return c(a(n),a(r))}function s(n,r){return o(i(n),i(r))}
+Links:
+- https://de.ryte.com/wiki/Millersche_Zahl
+- https://de.wikipedia.org/wiki/Millersche_Zahl`);
+    }
+};
 
 var colorName = {
 	"aliceblue": [240, 248, 255],
@@ -13004,7 +12863,7 @@ var colorName = {
 
 var names = colorName;
 
-var colorParse = parse$1;
+var colorParse = parse$2;
 
 /**
  * Base hues
@@ -13025,7 +12884,7 @@ var baseHues = {
  *
  * @return {Object} A space indicator `space`, an array `values` and `alpha`
  */
-function parse$1(cstr) {
+function parse$2(cstr) {
 	var m, parts = [], alpha = 1, space;
 
 	if (typeof cstr === 'string') {
@@ -13172,7 +13031,7 @@ function parse$1(cstr) {
 
 /** @module  color-rgba */
 
-var parse = colorParse;
+var parse$1 = colorParse;
 
 var colorRgba = function rgba (color) {
 	// template literals
@@ -13181,7 +13040,7 @@ var colorRgba = function rgba (color) {
 	var values;
 
 	//attempt to parse non-array arguments
-	var parsed = parse(color);
+	var parsed = parse$1(color);
 
 	if (!parsed.space) return []
 
@@ -13223,501 +13082,544 @@ function hsl2rgb(hsl) {
 	return rgb;
 }
 
-var colorRgba$1 = colorRgba;
-
-var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
-  KeyEnum2[KeyEnum2["error"] = 0] = "error";
-  KeyEnum2[KeyEnum2["warning"] = 1] = "warning";
-  KeyEnum2[KeyEnum2["info"] = 2] = "info";
-  KeyEnum2[KeyEnum2["success"] = 3] = "success";
-  KeyEnum2[KeyEnum2["message"] = 4] = "message";
-  KeyEnum2[KeyEnum2["close"] = 5] = "close";
-  KeyEnum2[KeyEnum2["form-description"] = 6] = "form-description";
-  KeyEnum2[KeyEnum2["of"] = 7] = "of";
-  KeyEnum2[KeyEnum2["characters"] = 8] = "characters";
-  KeyEnum2[KeyEnum2["new"] = 9] = "new";
-  KeyEnum2[KeyEnum2["no-entries"] = 10] = "no-entries";
-  KeyEnum2[KeyEnum2["change-order"] = 11] = "change-order";
-  KeyEnum2[KeyEnum2["action-running"] = 12] = "action-running";
-  KeyEnum2[KeyEnum2["action-done"] = 13] = "action-done";
-  KeyEnum2[KeyEnum2["page-first"] = 14] = "page-first";
-  KeyEnum2[KeyEnum2["page-back"] = 15] = "page-back";
-  KeyEnum2[KeyEnum2["page-next"] = 16] = "page-next";
-  KeyEnum2[KeyEnum2["page-last"] = 17] = "page-last";
-  KeyEnum2[KeyEnum2["entries-per-site"] = 18] = "entries-per-site";
-  KeyEnum2[KeyEnum2["page-current"] = 19] = "page-current";
-  KeyEnum2[KeyEnum2["page-selected"] = 20] = "page-selected";
-  KeyEnum2[KeyEnum2["page-per-site"] = 21] = "page-per-site";
-  KeyEnum2[KeyEnum2["logo-description"] = 22] = "logo-description";
-  KeyEnum2[KeyEnum2["open-link-in-tab"] = 23] = "open-link-in-tab";
-  KeyEnum2[KeyEnum2["kolibri-logo"] = 24] = "kolibri-logo";
-  return KeyEnum2;
-})(KeyEnum || {});
-
-var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
-  TagEnum2[TagEnum2["abbr"] = 0] = "abbr";
-  TagEnum2[TagEnum2["accordion"] = 1] = "accordion";
-  TagEnum2[TagEnum2["accordion-group"] = 2] = "accordion-group";
-  TagEnum2[TagEnum2["alert"] = 3] = "alert";
-  TagEnum2[TagEnum2["avatar"] = 4] = "avatar";
-  TagEnum2[TagEnum2["badge"] = 5] = "badge";
-  TagEnum2[TagEnum2["breadcrumb"] = 6] = "breadcrumb";
-  TagEnum2[TagEnum2["button"] = 7] = "button";
-  TagEnum2[TagEnum2["button-group"] = 8] = "button-group";
-  TagEnum2[TagEnum2["button-link"] = 9] = "button-link";
-  TagEnum2[TagEnum2["card"] = 10] = "card";
-  TagEnum2[TagEnum2["details"] = 11] = "details";
-  TagEnum2[TagEnum2["form"] = 12] = "form";
-  TagEnum2[TagEnum2["heading"] = 13] = "heading";
-  TagEnum2[TagEnum2["icon"] = 14] = "icon";
-  TagEnum2[TagEnum2["image"] = 15] = "image";
-  TagEnum2[TagEnum2["indented-text"] = 16] = "indented-text";
-  TagEnum2[TagEnum2["input-checkbox"] = 17] = "input-checkbox";
-  TagEnum2[TagEnum2["input-color"] = 18] = "input-color";
-  TagEnum2[TagEnum2["input-date"] = 19] = "input-date";
-  TagEnum2[TagEnum2["input-email"] = 20] = "input-email";
-  TagEnum2[TagEnum2["input-file"] = 21] = "input-file";
-  TagEnum2[TagEnum2["input-number"] = 22] = "input-number";
-  TagEnum2[TagEnum2["input-password"] = 23] = "input-password";
-  TagEnum2[TagEnum2["input-radio"] = 24] = "input-radio";
-  TagEnum2[TagEnum2["input-range"] = 25] = "input-range";
-  TagEnum2[TagEnum2["input-text"] = 26] = "input-text";
-  TagEnum2[TagEnum2["kolibri"] = 27] = "kolibri";
-  TagEnum2[TagEnum2["link"] = 28] = "link";
-  TagEnum2[TagEnum2["link-button"] = 29] = "link-button";
-  TagEnum2[TagEnum2["link-group"] = 30] = "link-group";
-  TagEnum2[TagEnum2["logo"] = 31] = "logo";
-  TagEnum2[TagEnum2["modal"] = 32] = "modal";
-  TagEnum2[TagEnum2["nav"] = 33] = "nav";
-  TagEnum2[TagEnum2["pagination"] = 34] = "pagination";
-  TagEnum2[TagEnum2["progress"] = 35] = "progress";
-  TagEnum2[TagEnum2["select"] = 36] = "select";
-  TagEnum2[TagEnum2["separator"] = 37] = "separator";
-  TagEnum2[TagEnum2["skip-nav"] = 38] = "skip-nav";
-  TagEnum2[TagEnum2["spin"] = 39] = "spin";
-  TagEnum2[TagEnum2["split-button"] = 40] = "split-button";
-  TagEnum2[TagEnum2["symbol"] = 41] = "symbol";
-  TagEnum2[TagEnum2["table"] = 42] = "table";
-  TagEnum2[TagEnum2["table-stateless"] = 43] = "table-stateless";
-  TagEnum2[TagEnum2["table-stateful"] = 44] = "table-stateful";
-  TagEnum2[TagEnum2["tabs"] = 45] = "tabs";
-  TagEnum2[TagEnum2["textarea"] = 46] = "textarea";
-  TagEnum2[TagEnum2["toast-container"] = 47] = "toast-container";
-  TagEnum2[TagEnum2["toolbar"] = 48] = "toolbar";
-  TagEnum2[TagEnum2["tooltip"] = 49] = "tooltip";
-  TagEnum2[TagEnum2["tree"] = 50] = "tree";
-  TagEnum2[TagEnum2["tree-item"] = 51] = "tree-item";
-  return TagEnum2;
-})(TagEnum || {});
-
-const alertTypeOptions = ["default", "info", "success", "warning", "error"];
-const alertVariantOptions = ["card", "msg"];
-
-const inputCheckboxVariantOptions = ["button", "default", "switch"];
-
-const koliBriQuoteVariantOptions = ["block", "inline"];
-
-const cssResizeOptions = ["both", "horizontal", "vertical", "none"];
-const getWindow$1 = () => typeof window === "undefined" ? null : window;
-const getDocument = () => typeof getWindow$1().document === "undefined" ? null : getWindow$1().document;
-let DEV_MODE = null;
-let EXPERIMENTAL_MODE = null;
-const getDevMode = () => DEV_MODE === true;
-const getExperimentalMode = () => EXPERIMENTAL_MODE === true;
-const LOG_STYLE = "color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000";
-const mapToArray = (msg) => {
-  return Array.isArray(msg) ? msg : [msg];
-};
-const getLogLabel = (label) => {
-  return `%c${label}`;
-};
-const handleClassifier = (label, classifier) => {
-  if (typeof classifier === "string" && classifier.length > 0) {
-    return `${getLogLabel(label)} | ${classifier}`;
-  } else {
-    return getLogLabel(label);
-  }
-};
-const getShield = (label, options) => {
-  return [handleClassifier(label, options?.classifier), `${LOG_STYLE};${options?.overwriteStyle || ""}`];
-};
-const isDevModeOrForceLog = (devMode, forceLog) => devMode() || forceLog === true;
-class Logger {
-  constructor(label, devMode) {
-    this.label = label;
-    this.devMode = devMode;
-  }
-  debug(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      console.debug(...getShield(this.label, options), ...mapToArray(msg));
-    }
-  }
-  info(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      console.info(...getShield(this.label, options), ...mapToArray(msg));
-    }
-  }
-  trace(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      console.trace(...getShield(this.label, options), ...mapToArray(msg));
+var colorRgba$1 = colorRgba;
+
+var n=.2126,r$1=.7152,t=.0722,e=1/12.92;function u(n){return Math.pow((n+.055)/1.055,2.4)}function a(a){var i=a[0]/255,c=a[1]/255,o=a[2]/255,s=i<=.03928?i*e:u(i),f=c<=.03928?c*e:u(c),l=o<=.03928?o*e:u(o);return s*n+f*r$1+l*t}function i(n){var r=255;8===(n=n.replace(/^#/,"")).length&&(r=parseInt(n.slice(6,8),16),n=n.substring(0,6)),4===n.length&&(r=parseInt(n.slice(3,4).repeat(2),16),n=n.substring(0,3)),3===n.length&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);var t=parseInt(n,16);return [t>>16,t>>8&255,255&t,r]}function c(n,r){return (Math.max(n,r)+.05)/(Math.min(n,r)+.05)}function o(n,r){return c(a(n),a(r))}function s(n,r){return o(i(n),i(r))}
+
+var rgbaConvert = {exports: {}};
+
+rgbaConvert.exports     = arr;
+rgbaConvert.exports.arr = arr;
+rgbaConvert.exports.obj = obj;
+rgbaConvert.exports.css = css;
+rgbaConvert.exports.hex = hex;
+rgbaConvert.exports.num = num;
+
+function arr(data) {
+  var a = parse(data);
+  if (a.length == 3) {
+    return a.concat(255)
+  } else {
+    a[3] = Math.round(a[3]);
+    return a
+  }
+}
+
+function obj(data) {
+  var a = parse(data);
+  return {
+    r: a[0],
+    g: a[1],
+    b: a[2],
+    a: a.length == 3
+      ? 255
+      : Math.round(a[3])
+  }
+}
+
+function css(data) {
+  var a = parse(data);
+  if (a.length == 3) a.push(255);
+
+  return a[3] == 255
+    ? 'rgb(' + a[0] + ', ' + a[1] + ', ' + a[2] + ')'
+    : a[3] == 0
+      ? 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', 0)'
+      : 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', ' + String(a[3] / 255).substr(1) + ')'
+}
+
+function hex(data) {
+  var a = parse(data);
+  if (a.length == 3) a.push(255);
+  var opaque = a[3] == 255;
+  var r = num2hex(a[0]);
+  var g = num2hex(a[1]);
+  var b = num2hex(a[2]);
+  var a = num2hex(Math.round(a[3]));
+  var is = isshort(r, g, b, a);
+  if (opaque) {
+    return is
+      ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0)
+      : '#' + r + g + b
+  }
+  return is
+    ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0) + a.charAt(0)
+    : '#' + r + g + b + a
+}
+
+function num(data) {
+  var a = parse(data);
+  if (a.length == 3) a.push(255);
+  else a[3] = Math.round(a[3]);
+  return ((a[3] << 24) >>> 0 | a[0] << 16 | a[1] << 8 | a[2]) >>> 0
+}
+
+function parse(data) {
+  if (typeof data == 'string') {
+    data = data.toLowerCase();
+    return name(data)
+      || hex3(data)
+      || hex6(data)
+      || rgb(data)
+      || rgba(data)
+      || [0, 0, 0, 255]
+  }
+  return object(data)
+    || array(data)
+    || number(data)
+    || [0, 0, 0, 255]
+}
+
+function num2hex(num) {
+  var s = num.toString(16);
+  return s.length == 1
+    ? '0' + s
+    : s
+}
+
+function isshort(r, g, b, a) {
+  var h = ['ff', '00', '11', '22', '33', '44', '55', '66',
+           '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee'];
+  return h.indexOf(r) != -1
+    && h.indexOf(g) != -1
+    && h.indexOf(b) != -1
+    && h.indexOf(a) != -1
+}
+
+function name(str) {
+  if (str == 'red')     return [255, 0, 0]
+  if (str == 'green')   return [0, 255, 0]
+  if (str == 'blue')    return [0, 0, 255]
+  if (str == 'black')   return [0, 0, 0]
+  if (str == 'white')   return [255, 255, 255]
+  if (str == 'cyan')    return [0, 255, 255]
+  if (str == 'gray')    return [128, 128, 128]
+  if (str == 'grey')    return [128, 128, 128]
+  if (str == 'magenta') return [255, 0, 255]
+  // ok, not the real css `pink` but my personal `magenta` alias
+  // `pink` is simpler than `fuchsia`, whatever...
+  if (str == 'pink')    return [255, 0, 255]
+  if (str == 'yellow')  return [255, 255, 0]
+}
+
+function hex2num(str) {
+  return str.length == 1
+    ? parseInt(str + str, 16)
+    : parseInt(str, 16)
+}
+
+function hex3(str) {
+  var s = str.replace(/^#/,'');
+  var l = s.length;
+  if (l == 3 || l == 4) {
+    var r = hex2num(s[0]);
+    var g = hex2num(s[1]);
+    var b = hex2num(s[2]);
+    var a = l == 3
+      ? 255
+      : hex2num(s[3]);
+
+    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
+
+    return [r, g, b, a]
+  }
+}
+
+function hex6(str) {
+  var s = str.replace(/^#/,'');
+  var l = s.length;
+  if (l == 6 || l == 8) {
+    var r = hex2num(s.slice(0, 2));
+    var g = hex2num(s.slice(2, 4));
+    var b = hex2num(s.slice(4, 6));
+    var a = l == 6
+      ? 255
+      : hex2num(s.slice(6, 8));
+
+    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
+
+    return [r, g, b, a]
+  }
+}
+
+function getnum(val, integer) {
+  if (typeof val != 'number') return -1
+  if (integer === true && Math.floor(val) !== val) return -1
+  return val >= 0 && val <= 255
+    ? val
+    : -1
+}
+
+function object(obj) {
+  if (Object.prototype.toString.call(obj) === '[object Object]'
+    && Object.getPrototypeOf(obj) === Object.getPrototypeOf({})) {
+    var r = getnum(obj.r != undefined ? obj.r : obj.red   != undefined ? obj.red   : 0,   true);
+    var g = getnum(obj.g != undefined ? obj.g : obj.green != undefined ? obj.green : 0,   true);
+    var b = getnum(obj.b != undefined ? obj.b : obj.blue  != undefined ? obj.blue  : 0,   true);
+    var a = getnum(obj.a != undefined ? obj.a : obj.alpha != undefined ? obj.alpha : 255, true);
+    if (r != -1 && g != -1 && b != -1 && a != -1) {
+      return [r, g, b, a]
     }
   }
-  warn(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      console.warn(...getShield(this.label, options), ...mapToArray(msg));
+}
+
+function array(arr) {
+  if (Array.isArray(arr) && (arr.length == 3 || arr.length == 4)) {
+    var r = getnum(arr[0],   true);
+    var g = getnum(arr[1],   true);
+    var b = getnum(arr[2],   true);
+    var a = getnum(arr[3] != undefined ? arr[3] : 255, true);
+    if (r != -1 && g != -1 && b != -1 && a != -1) {
+      return [r, g, b, a]
     }
   }
-  error(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      console.error(...getShield(this.label, options), ...mapToArray(msg));
-    }
+}
+
+function number(num) {
+  if (typeof num == 'number' && Math.floor(num) == num && num <= 4294967295 && num >= 0) {
+    var a = num >> 24 & 255;
+    var r = num >> 16 & 255;
+    var g = num >> 8  & 255;
+    var b = num & 255;
+    return [r, g, b, a]
   }
-  throw(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      throw new Error(...getShield(this.label, options), ...mapToArray(msg));
+}
+
+function rgb(str) {
+  if (str.substr(0, 4) == 'rgb(') {
+    str = str.match(/^rgb\(([^)]+)\)/)[1];
+    var t = str.split(/ *, */).map(Number);
+    var r = getnum(t[0], true);
+    var g = getnum(t[1], true);
+    var b = getnum(t[2], true);
+    if (r != -1 && g != -1 && b != -1) {
+      return [r, g, b, 255]
     }
   }
 }
-const Log = new Logger("KoliBri", getDevMode);
 
-const a11yCache = /* @__PURE__ */ new Set();
-const a11yHint = (msg, options) => {
-  if (a11yCache.has(msg) === false || !!options?.force) {
-    a11yCache.add(msg);
-    Log.debug([msg].concat(options?.details || []), {
-      classifier: `\u270B a11y`,
-      forceLog: !!options?.force,
-      overwriteStyle: "; background-color: #09f"
-    });
-  }
-};
-const devCache = /* @__PURE__ */ new Set();
-const devHint = (msg, options) => {
-  if (devCache.has(msg) === false || !!options?.force) {
-    devCache.add(msg);
-    Log.debug([msg].concat(options?.details || []), {
-      classifier: `\u{1F4BB} dev`,
-      forceLog: !!options?.force,
-      overwriteStyle: "; background-color: #f09"
-    });
-  }
-};
-const devWarning = (msg, options) => {
-  if (devCache.has(msg) === false || !!options?.force) {
-    devCache.add(msg);
-    Log.warn([msg].concat(options?.details || []), {
-      classifier: `\u26A0\uFE0F dev`,
-      forceLog: !!options?.force,
-      overwriteStyle: "; background-color: #f09"
-    });
-  }
-};
-const featureCache = /* @__PURE__ */ new Set();
-const featureHint = (msg, done = false, options) => {
-  if (featureCache.has(msg) === false || !!options?.force) {
-    featureCache.add(msg);
-    msg += done === true ? " \u2705" : "";
-    Log.debug([msg].concat(options?.details || []), {
-      classifier: `\u{1F31F} feature`,
-      forceLog: !!options?.force,
-      overwriteStyle: "; background-color: #309"
-    });
-  }
-};
-devHint(
-  `Wir freuen uns \xFCber jedes Feedback, Kommentare, Screenshots oder Demo-Links von einer auf KoliBri-basierenden Anwendung (kolibri@itzbund.de). Vielen Dank!`
-);
-const uiUxCache = /* @__PURE__ */ new Set();
-const uiUxHint = (msg, options) => {
-  if (uiUxCache.has(msg) === false || !!options?.force) {
-    uiUxCache.add(msg);
-    Log.debug([msg].concat(options?.details || []), {
-      classifier: `\u{1F4D1} ui/ux`,
-      forceLog: !!options?.force,
-      overwriteStyle: "; background-color: #060;"
-    });
-  }
-};
-const a11yHintDisabled = () => {
-  a11yHint(
-    `"Disabled" schr\xE4nkt die Zug\xE4nglichkeit und Sichtbarkeit ein. Wir empfehlen aus Sicht der Barrierefreiheit readonly- statt disabled-Attribut zu verwenden.
-- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae`
-  );
-};
-const a11yHintLabelingLandmarks = (value) => {
-  if (typeof value !== "string" || value === "") {
-    a11yHint(
-      `Manche Strukturelemente, wie bspw. der nav-Tag, k\xF6nnen mehrfach in einer Webseite verwendet werden. Damit die gleichnamigen Strukturelemente voneinander unterschieden werden k\xF6nnen, ist es erforderlich ein Aria-Label zu setzen.
-- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns`
-    );
+function rgba(str) {
+  if (str.substr(0, 5) == 'rgba(') {
+    str = str.match(/^rgba\(([^)]+)\)/)[1];
+    var t = str.split(/ *, */).map(Number);
+    var r = getnum(t[0], true);
+    var g = getnum(t[1], true);
+    var b = getnum(t[2], true);
+    var a = getnum(t[3] * 255);
+    if (r != -1 && g != -1 && b != -1 && a != -1) {
+      return [r, g, b, a]
+    }
   }
-};
-const uiUxHintMillerscheZahl = (className, length = 8) => {
-  if (length > 7) {
-    uiUxHint(
-      `[${className}] Innerhalb von Navigationsstrukturen wird empfohlen nicht mehr als 7 Men\xFCpunkte zu verwenden.
+}
 
-Links:
-- https://de.ryte.com/wiki/Millersche_Zahl
-- https://de.wikipedia.org/wiki/Millersche_Zahl`
-    );
-  }
-};
+var rgba$1 = rgbaConvert.exports;
 
 const getContrastYIQ = (r, g, b) => {
-  const yiq = (r * 299 + g * 587 + b * 114) / 1e3;
-  return yiq >= 128 ? -1 : 1;
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 128 ? -1 : 1;
 };
 const calcColorContrast = (baseColor, contrastColor, ratio, dir = 1) => {
-  const color = [
-    Math.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),
-    Math.max(Math.min(Math.round(contrastColor[1] + dir * Math.max(1, contrastColor[1] / 100)), 255), 0),
-    Math.max(Math.min(Math.round(contrastColor[2] + dir * Math.max(1, contrastColor[2] / 100)), 255), 0)
-  ];
-  const contrast = s(rgbaConvert.hex(`rgba(${baseColor.join(",")},1)`), rgbaConvert.hex(`rgba(${color.join(",")},1)`));
-  const summe = color[0] + color[1] + color[2];
-  if (summe === 0 || summe === 765 || contrast > ratio) {
-    return {
-      background: baseColor,
-      foreground: color,
-      contrast
-    };
-  } else {
-    return calcColorContrast(baseColor, color, ratio, dir);
-  }
+    const color = [
+        Math.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),
+        Math.max(Math.min(Math.round(contrastColor[1] + dir * Math.max(1, contrastColor[1] / 100)), 255), 0),
+        Math.max(Math.min(Math.round(contrastColor[2] + dir * Math.max(1, contrastColor[2] / 100)), 255), 0),
+    ];
+    const contrast = s(rgba$1.hex(`rgba(${baseColor.join(',')},1)`), rgba$1.hex(`rgba(${color.join(',')},1)`));
+    const summe = color[0] + color[1] + color[2];
+    if (summe === 0 || summe === 765 || contrast > ratio) {
+        return {
+            background: baseColor,
+            foreground: color,
+            contrast,
+        };
+    }
+    else {
+        return calcColorContrast(baseColor, color, ratio, dir);
+    }
 };
-const cache = /* @__PURE__ */ new Map();
+const cache = new Map();
 const getColorContrast = (baseColor, contrastColor, ratio, dir = 1) => {
-  if (cache.has(baseColor)) {
-    return cache.get(baseColor);
-  }
-  const color = calcColorContrast(baseColor, contrastColor, ratio, dir);
-  cache.set(baseColor, color);
-  return color;
+    if (cache.has(baseColor)) {
+        return cache.get(baseColor);
+    }
+    const color = calcColorContrast(baseColor, contrastColor, ratio, dir);
+    cache.set(baseColor, color);
+    return color;
 };
 const createContrastColorPair = (color, contrastRatio = 7) => {
-  let baseColor = [0, 0, 0, 1];
-  let contrastColor = [255, 255, 255, 1];
-  if (typeof color === "string") {
-    baseColor = colorRgba$1(color);
-    contrastColor = baseColor;
-  } else if (typeof color === "object" && color !== null && typeof color.background === "string" && typeof color.foreground === "string") {
-    baseColor = colorRgba$1(color.background);
-    if (typeof color.foreground === "string") {
-      contrastColor = colorRgba$1(color.foreground);
-    } else {
-      contrastColor = baseColor;
+    let baseColor = [0, 0, 0, 1];
+    let contrastColor = [255, 255, 255, 1];
+    if (typeof color === 'string') {
+        baseColor = colorRgba$1(color);
+        contrastColor = baseColor;
+    }
+    else if (typeof color === 'object' && color !== null && typeof color.background === 'string' && typeof color.foreground === 'string') {
+        baseColor = colorRgba$1(color.background);
+        if (typeof color.foreground === 'string') {
+            contrastColor = colorRgba$1(color.foreground);
+        }
+        else {
+            contrastColor = baseColor;
+        }
+    }
+    const yiq = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);
+    const colorContrast = getColorContrast([baseColor[0], baseColor[1], baseColor[2]], [contrastColor[0], contrastColor[1], contrastColor[2]], contrastRatio, yiq);
+    contrastColor = [...colorContrast.foreground, 1];
+    return {
+        background: rgba$1.hex(`rgba(${baseColor.join(',')})`),
+        foreground: rgba$1.hex(`rgba(${contrastColor.join(',')})`),
+        contrast: colorContrast.contrast,
+    };
+};
+
+const pushNodes = (set, domNodes) => {
+    domNodes.forEach((domNode) => {
+        if (set.has(domNode) === false) {
+            set.add(domNode);
+        }
+    });
+};
+const querySelectorAll = (selector, node = document) => {
+    if (node instanceof Document ||
+        node instanceof HTMLElement ||
+        node instanceof ShadowRoot) {
+        const domNodes = new Set();
+        pushNodes(domNodes, node.querySelectorAll(selector));
+        const nodeList = node.querySelectorAll('[class*="hydrated"]');
+        for (let i = 0; i < nodeList.length; i++) {
+            const shadowRoot = nodeList[i].shadowRoot;
+            if (typeof shadowRoot === "object" && shadowRoot !== null) {
+                pushNodes(domNodes, querySelectorAll(selector, shadowRoot));
+            }
+            else {
+                pushNodes(domNodes, querySelectorAll(selector, nodeList[i]));
+            }
+        }
+        return Array.from(domNodes);
+    }
+    else {
+        throw new Error(`The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.`);
+    }
+};
+
+const querySelector = (selector, node = document) => {
+    if (node instanceof Document ||
+        node instanceof HTMLElement ||
+        node instanceof ShadowRoot) {
+        let domNode = node.querySelector(selector);
+        if (domNode === null) {
+            const nodeList = node.querySelectorAll('[class*="hydrated"]');
+            for (let i = 0; i < nodeList.length; i++) {
+                const shadowRoot = nodeList[i].shadowRoot;
+                if (typeof shadowRoot === "object" && shadowRoot !== null) {
+                    domNode = querySelector(selector, shadowRoot);
+                }
+                else {
+                    domNode = querySelector(selector, nodeList[i]);
+                }
+                if (domNode !== null) {
+                    break;
+                }
+            }
+        }
+        return domNode;
+    }
+    else {
+        throw new Error(`The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.`);
     }
-  }
-  const yiq = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);
-  const colorContrast = getColorContrast(
-    [baseColor[0], baseColor[1], baseColor[2]],
-    [contrastColor[0], contrastColor[1], contrastColor[2]],
-    contrastRatio,
-    yiq
-  );
-  contrastColor = [...colorContrast.foreground, 1];
-  return {
-    background: rgbaConvert.hex(`rgba(${baseColor.join(",")})`),
-    foreground: rgbaConvert.hex(`rgba(${contrastColor.join(",")})`),
-    contrast: colorContrast.contrast
-  };
 };
 
 const OBJECT_OBJECT = /\[object Object\]/;
 const objectObjectHandler = (value, cb) => {
-  if (typeof value === "string" && OBJECT_OBJECT.test(value)) {
-    return;
-  }
-  cb();
+    if (typeof value === 'string' && OBJECT_OBJECT.test(value)) {
+        return;
+    }
+    cb();
 };
 const emptyStringByArrayHandler = (value, cb) => {
-  if (typeof value === "string" && value === "") {
-    return;
-  }
-  cb();
+    if (typeof value === 'string' && value === '') {
+        return;
+    }
+    cb();
 };
 const setEventTarget = (event, target) => {
-  Object.defineProperty(event, "target", {
-    value: target,
-    writable: false
-  });
+    Object.defineProperty(event, 'target', {
+        value: target,
+        writable: false,
+    });
 };
 const patchState = (component) => {
-  component.nextHooks?.forEach((hooks, key) => {
-    const beforePatch = hooks.get("beforePatch");
-    if (typeof beforePatch === "function") {
-      beforePatch(component.nextState?.get(key), component.nextState, component, key);
-    }
-  });
-  if (component.nextState?.size > 0) {
-    component.state = {
-      ...component.state,
-      ...Object.fromEntries(component.nextState)
-    };
-    delete component.nextState;
-    component.nextHooks?.forEach((hooks, key) => {
-      const afterPatch = hooks.get("afterPatch");
-      if (typeof afterPatch === "function") {
-        afterPatch(component.state[key], component.state, component, key);
-      }
+    var _a, _b, _c;
+    (_a = component.nextHooks) === null || _a === void 0 ? void 0 : _a.forEach((hooks, key) => {
+        var _a;
+        const beforePatch = hooks.get('beforePatch');
+        if (typeof beforePatch === 'function') {
+            beforePatch((_a = component.nextState) === null || _a === void 0 ? void 0 : _a.get(key), component.nextState, component, key);
+        }
     });
-  }
-  delete component.nextHooks;
+    if (((_b = component.nextState) === null || _b === void 0 ? void 0 : _b.size) > 0) {
+        component.state = Object.assign(Object.assign({}, component.state), Object.fromEntries(component.nextState));
+        delete component.nextState;
+        (_c = component.nextHooks) === null || _c === void 0 ? void 0 : _c.forEach((hooks, key) => {
+            const afterPatch = hooks.get('afterPatch');
+            if (typeof afterPatch === 'function') {
+                afterPatch(component.state[key], component.state, component, key);
+            }
+        });
+    }
+    delete component.nextHooks;
 };
 const setState = (component, propName, value, hooks = {}) => {
-  if (component.nextHooks === void 0) {
-    component.nextHooks = /* @__PURE__ */ new Map();
-  }
-  if (component.nextState === void 0) {
-    component.nextState = /* @__PURE__ */ new Map();
-  }
-  const nextHooks = component.nextHooks.get(propName);
-  if (nextHooks instanceof Map === false) {
-    component.nextHooks.set(propName, /* @__PURE__ */ new Map());
-  }
-  if (typeof hooks.afterPatch === "function") {
-    component.nextHooks.get(propName)?.set("afterPatch", hooks.afterPatch);
-  }
-  if (typeof hooks.beforePatch === "function") {
-    component.nextHooks.get(propName)?.set("beforePatch", hooks.beforePatch);
-  }
-  component.nextState.set(propName, value);
-  patchState(component);
+    var _a, _b;
+    if (component.nextHooks === undefined) {
+        component.nextHooks = new Map();
+    }
+    if (component.nextState === undefined) {
+        component.nextState = new Map();
+    }
+    const nextHooks = component.nextHooks.get(propName);
+    if (nextHooks instanceof Map === false) {
+        component.nextHooks.set(propName, new Map());
+    }
+    if (typeof hooks.afterPatch === 'function') {
+        (_a = component.nextHooks.get(propName)) === null || _a === void 0 ? void 0 : _a.set('afterPatch', hooks.afterPatch);
+    }
+    if (typeof hooks.beforePatch === 'function') {
+        (_b = component.nextHooks.get(propName)) === null || _b === void 0 ? void 0 : _b.set('beforePatch', hooks.beforePatch);
+    }
+    component.nextState.set(propName, value);
+    patchState(component);
 };
 const logWarn = (component, propName, value, requiredGeneric) => {
-  devHint(
-    `[${component.constructor.name}] Der Property-Wert (${value}) f\xFCr '${propName}' ist nicht valide. Folgende Werte sind erlaubt: ${Array.from(
-      requiredGeneric
-    ).join(", ")}`
-  );
+    devHint(`[${component.constructor.name}] Der Property-Wert (${value}) für '${propName}' ist nicht valide. Folgende Werte sind erlaubt: ${Array.from(requiredGeneric).join(', ')}`);
 };
 function watchValidator(component, propName, validationFunction, requiredGeneric, value, options = {}) {
-  if (validationFunction(value)) {
-    setState(component, propName, value, options.hooks);
-  } else if (value === void 0 && options.required !== true && validationFunction(options.defaultValue)) {
-    setState(component, propName, options.defaultValue, options.hooks);
-  } else {
-    if (!options.required) {
-      requiredGeneric.add(null);
+    if (validationFunction(value)) {
+        setState(component, propName, value, options.hooks);
+    }
+    else if (value === undefined && options.required !== true && validationFunction(options.defaultValue)) {
+        setState(component, propName, options.defaultValue, options.hooks);
+    }
+    else {
+        if (!options.required) {
+            requiredGeneric.add(null);
+        }
+        logWarn(component, propName, value, requiredGeneric);
     }
-    logWarn(component, propName, value, requiredGeneric);
-  }
 }
 const watchBoolean = (component, propName, value, options) => {
-  watchValidator(component, propName, (value2) => typeof value2 === "boolean", /* @__PURE__ */ new Set(["Boolean {true, false}"]), value, options);
+    watchValidator(component, propName, (value) => typeof value === 'boolean', new Set(['Boolean {true, false}']), value, options);
 };
 const watchString = (component, propName, value, options = {}) => {
-  const minLength = typeof options.minLength === "number" ? options?.minLength : 0;
-  watchValidator(
-    component,
-    propName,
-    (value2) => typeof value2 === "string" && value2.length >= minLength && (typeof options?.maxLength === "undefined" || value2.length <= options.maxLength),
-    /* @__PURE__ */ new Set([`String`]),
-    value,
-    options
-  );
+    const minLength = typeof options.minLength === 'number' ? options === null || options === void 0 ? void 0 : options.minLength : 0;
+    watchValidator(component, propName, (value) => typeof value === 'string' && value.length >= minLength && (typeof (options === null || options === void 0 ? void 0 : options.maxLength) === 'undefined' || value.length <= options.maxLength), new Set([`String`]), value, options);
 };
 const watchNumber = (component, propName, value, options) => {
-  watchValidator(
-    component,
-    propName,
-    (value2) => typeof value2 === "number" && (typeof options?.min === "undefined" || typeof options?.min === "number" && value2 >= options.min) && (typeof options?.max === "undefined" || typeof options?.max === "number" && value2 <= options.max),
-    /* @__PURE__ */ new Set(["Number"]),
-    value,
-    options
-  );
+    watchValidator(component, propName, (value) => typeof value === 'number' &&
+        (typeof (options === null || options === void 0 ? void 0 : options.min) === 'undefined' || (typeof (options === null || options === void 0 ? void 0 : options.min) === 'number' && value >= options.min)) &&
+        (typeof (options === null || options === void 0 ? void 0 : options.max) === 'undefined' || (typeof (options === null || options === void 0 ? void 0 : options.max) === 'number' && value <= options.max)), new Set(['Number']), value, options);
 };
 const watchJsonArrayString = (component, propName, itemValidation, value, arrayValidation = (items) => items === items, options = {}) => {
-  emptyStringByArrayHandler(value, () => {
-    objectObjectHandler(value, () => {
-      if (typeof value === "undefined") {
-        value = [];
-      }
-      try {
-        try {
-          value = parseJson(value);
-        } catch (e) {
-        }
-        if (Array.isArray(value)) {
-          const invalid = value.find((item) => !itemValidation(item));
-          if (invalid === void 0 && arrayValidation(value)) {
-            setState(component, propName, value, options.hooks);
-          } else {
-            objectObjectHandler(invalid, () => {
-              Log.debug(invalid);
-              throw new Error(`\u2191 Das Schema f\xFCr das Property (_options) ist nicht valide. Der Wert wird nicht ge\xE4ndert.`);
-            });
-          }
-        } else {
-          objectObjectHandler(value, () => {
-            Log.debug(value);
-            throw new Error(`\u2191 Das Schema f\xFCr das Property (_options) ist nicht valide. Der Wert wird nicht ge\xE4ndert.`);
-          });
-        }
-      } catch (error) {
-        Log.debug(error);
-      }
+    emptyStringByArrayHandler(value, () => {
+        objectObjectHandler(value, () => {
+            if (typeof value === 'undefined') {
+                value = [];
+            }
+            try {
+                try {
+                    value = parseJson(value);
+                }
+                catch (e) {
+                }
+                if (Array.isArray(value)) {
+                    const invalid = value.find((item) => !itemValidation(item));
+                    if (invalid === undefined && arrayValidation(value)) {
+                        setState(component, propName, value, options.hooks);
+                    }
+                    else {
+                        objectObjectHandler(invalid, () => {
+                            Log.debug(invalid);
+                            throw new Error(`↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.`);
+                        });
+                    }
+                }
+                else {
+                    objectObjectHandler(value, () => {
+                        Log.debug(value);
+                        throw new Error(`↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.`);
+                    });
+                }
+            }
+            catch (error) {
+                Log.debug(error);
+            }
+        });
     });
-  });
 };
 const BOOLEAN = /^(true|false)$/;
 const INTEGER = /^-?(0|[1-9]\d*)$/;
 const FLOAT = /^-?(0.|[1-9]\d*.)\d*[1-9]$/;
 const mapString2Unknown = (value) => {
-  const typeStr = typeof value;
-  const oldValue = `${value}`;
-  if (typeof value === "string") {
-    if (BOOLEAN.test(value)) {
-      value = value === "true";
-    } else if (INTEGER.test(value)) {
-      value = parseInt(value);
-    } else if (FLOAT.test(value)) {
-      value = parseFloat(value);
-    } else if (JSON_CHARS.test(value)) {
-      try {
-        value = parseJson(value);
-      } catch (e) {
-      }
+    const typeStr = typeof value;
+    const oldValue = `${value}`;
+    if (typeof value === 'string') {
+        if (BOOLEAN.test(value)) {
+            value = value === 'true';
+        }
+        else if (INTEGER.test(value)) {
+            value = parseInt(value);
+        }
+        else if (FLOAT.test(value)) {
+            value = parseFloat(value);
+        }
+        else if (JSON_CHARS.test(value)) {
+            try {
+                value = parseJson(value);
+            }
+            catch (e) {
+            }
+        }
     }
-  }
-  if (typeStr !== typeof value) {
-    devHint(`You have used a stringified property value (${oldValue} to ${JSON.stringify(value)}) which type switched from ${typeStr} to ${typeof value}!`);
-  }
-  return value;
+    if (typeStr !== typeof value) {
+        devHint(`You have used a stringified property value (${oldValue} to ${JSON.stringify(value)}) which type switched from ${typeStr} to ${typeof value}!`);
+    }
+    return value;
 };
 const stringifyJson = (value) => {
-  try {
-    return JSON.stringify(value).replace(/"/g, "'");
-  } catch (error) {
-    Log.warn(["stringifyJson", value]);
-    Log.error(`\u2191 Das JSON konnte nicht in einen String umgewandelt werden. Es wird ein stringifizierbares JSON erwartet.`);
-    throw new Error();
-  }
+    try {
+        return JSON.stringify(value).replace(/"/g, "'");
+    }
+    catch (error) {
+        Log.warn(['stringifyJson', value]);
+        Log.error(`↑ Das JSON konnte nicht in einen String umgewandelt werden. Es wird ein stringifizierbares JSON erwartet.`);
+        throw new Error();
+    }
 };
 const JSON_CHARS = /^[{[]/;
 const parseJson = (value) => {
-  if (typeof value === "string") {
-    try {
-      return JSON.parse(value);
-    } catch (error) {
-      if (JSON_CHARS.test(value)) {
+    if (typeof value === 'string') {
         try {
-          return JSON.parse(value.replace(/'/g, '"'));
-        } catch (error2) {
-          Log.warn(["parseJson", value]);
-          Log.error(`\u2191 Der JSON-String konnte nicht geparsed werden. Achten Sie darauf, dass einfache Anf\xFChrungszeichen im Text maskiert werden (&#8216;).`);
+            return JSON.parse(value);
+        }
+        catch (error) {
+            if (JSON_CHARS.test(value)) {
+                try {
+                    return JSON.parse(value.replace(/'/g, '"'));
+                }
+                catch (error) {
+                    Log.warn(['parseJson', value]);
+                    Log.error(`↑ Der JSON-String konnte nicht geparsed werden. Achten Sie darauf, dass einfache Anführungszeichen im Text maskiert werden (&#8216;).`);
+                }
+            }
         }
-      }
     }
-  }
-  throw new Error();
+    throw new Error();
 };
 const mapBoolean2String = (value) => {
-  return typeof value === "boolean" ? value === true ? "true" : "false" : void 0;
+    return typeof value === 'boolean' ? (value === true ? 'true' : 'false') : undefined;
 };
 const mapStringOrBoolean2String = (value) => {
-  return typeof value === "string" ? value : mapBoolean2String(value);
+    return typeof value === 'string' ? value : mapBoolean2String(value);
 };
 const koliBriQuerySelector = (selector, node) => querySelector(selector, node || getDocument());
 const koliBriQuerySelectorAll = (selector, node) => querySelectorAll(selector, node || getDocument());
@@ -13730,626 +13632,592 @@ KoliBriDevHelper.querySelectorAll = koliBriQuerySelectorAll;
 KoliBriDevHelper.stringifyJson = stringifyJson;
 
 const validateAlignment = (component, propName, value) => {
-  watchValidator(component, propName, (value2) => typeof value2 === "string" && alignPropTypeOptions.includes(value2), new Set(alignPropTypeOptions), value, {
-    defaultValue: "top"
-  });
+    watchValidator(component, propName, (value) => typeof value === 'string' && alignPropTypeOptions.includes(value), new Set(alignPropTypeOptions), value, {
+        defaultValue: 'top',
+    });
 };
 
-const isObject$1 = (value) => typeof value === "object" && value !== null;
-const isString$2 = (value, minLength = 0) => typeof value === "string" && value.length >= minLength;
+const isObject$1 = (value) => typeof value === 'object' && value !== null;
+const isString$2 = (value, minLength = 0) => typeof value === 'string' && value.length >= minLength;
 const isStyle = (style) => {
-  if (typeof style === "object" && style !== null) {
-    for (const property in style) {
-      if (isString$2(property, 1) === false) {
-        return false;
-      }
+    if (typeof style === 'object' && style !== null) {
+        for (const property in style) {
+            if (isString$2(property, 1) === false) {
+                return false;
+            }
+        }
     }
-  } else {
-    return isString$2(style, 1);
-  }
-  return true;
+    else {
+        return isString$2(style, 1);
+    }
+    return true;
 };
-const STATE_CHANGE_EVENT = new Event("StateChange");
+const STATE_CHANGE_EVENT = new Event('StateChange');
 
 const validateInputSelectOptions = (option) => {
-  if (typeof option === "object" && option !== null) {
-    if (typeof option.label === "string" && option.label.length > 0) {
-      option.disabled = option.disabled === true;
-      option.label = `${option.label}`.trim();
-      if (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {
-        a11yHint(
-          `Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`
-        );
-      }
-      if (Array.isArray(option.options)) {
-        return option.options.find((item) => {
-          return validateInputSelectOptions(item) === false;
-        }) === void 0;
-      }
-      return true;
-    } else if (typeof option.label === "number") {
-      return true;
+    if (typeof option === 'object' && option !== null) {
+        if (typeof option.label === 'string' && option.label.length > 0) {
+            option.disabled = option.disabled === true;
+            option.label = `${option.label}`.trim();
+            if (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {
+                a11yHint(`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`);
+            }
+            if (Array.isArray(option.options)) {
+                return (option.options.find((item) => {
+                    return validateInputSelectOptions(item) === false;
+                }) === undefined);
+            }
+            return true;
+        }
+        else if (typeof option.label === 'number') {
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
 
 const options = {
-  hooks: {
-    afterPatch: (value) => {
-      if (value !== -1 && value !== 0) {
-        a11yHint(`Don't Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html`);
-      }
-    }
-  }
+    hooks: {
+        afterPatch: (value) => {
+            if (value !== -1 && value !== 0) {
+                a11yHint(`Don't Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html`);
+            }
+        },
+    },
 };
 const validateTabIndex = (component, value) => {
-  watchNumber(component, "_tabIndex", value, options);
+    watchNumber(component, '_tabIndex', value, options);
 };
 
 const propagateFocus = (host, ref) => {
-  if (isObject$1(host) && host) {
-    host.focus = (ops) => ref?.focus(ops);
-  }
+    if (isObject$1(host) && host) {
+        host.focus = (ops) => ref === null || ref === void 0 ? void 0 : ref.focus(ops);
+    }
 };
-let processEnv = "development";
+let processEnv = 'development';
 try {
-  processEnv = "production";
-} catch (e) {
-  processEnv = "production";
+    processEnv = "production";
+}
+catch (e) {
+    processEnv = 'production';
 }
 const handleSlotContent = (hostRef, slotRef, slotName) => {
-  if (hostRef && slotRef && typeof slotName === "string") {
-    const content = hostRef.querySelector(`[slot="${slotName}"]`);
-    if (content) {
-      slotRef.appendChild(content);
+    if (hostRef && slotRef && typeof slotName === 'string') {
+        const content = hostRef.querySelector(`[slot="${slotName}"]`);
+        if (content) {
+            slotRef.appendChild(content);
+        }
     }
-  }
 };
-const showExpertSlot = (label) => label === "";
+const showExpertSlot = (label) => label === '';
 
 const validateAccessKey = (component, value) => {
-  watchString(component, "_accessKey", value);
+    watchString(component, '_accessKey', value);
 };
 
 const validateActive = (component, value, options) => {
-  watchBoolean(component, "_active", value, options);
+    watchBoolean(component, '_active', value, options);
 };
 
 const validateAdjustHeight = (component, value) => {
-  watchBoolean(component, "_adjustHeight", value);
+    watchBoolean(component, '_adjustHeight', value);
 };
 
 const validateAlert = (component, value) => {
-  watchBoolean(component, "_alert", value);
+    watchBoolean(component, '_alert', value);
 };
 
-const horizontalAlignOptions = ["left", "right"];
-const verticalAlignOptions = ["top", "bottom"];
+const horizontalAlignOptions = ['left', 'right'];
+const verticalAlignOptions = ['top', 'bottom'];
 const alignPropTypeOptions = [...horizontalAlignOptions, ...verticalAlignOptions];
 const validateAlign = (component, value) => {
-  validateAlignment(component, "_align", value);
+    validateAlignment(component, '_align', value);
 };
 
 const validateAlternativeButtonLinkRole = (component, value) => {
-  watchString(component, "_role", value);
+    watchString(component, '_role', value);
 };
 
 const validateAriaControls = (component, value) => {
-  watchString(component, "_ariaControls", value);
+    watchString(component, '_ariaControls', value);
 };
 
-const ariaCurrentValuePropTypeOptions = ["date", "location", "page", "step", "time", "true", "false"];
+const ariaCurrentValuePropTypeOptions = ['date', 'location', 'page', 'step', 'time', 'true', 'false'];
 const validateAriaCurrentValue = (component, value) => {
-  watchValidator(
-    component,
-    `_ariaCurrentValue`,
-    (value2) => typeof value2 === "string" && ariaCurrentValuePropTypeOptions.includes(value2),
-    /* @__PURE__ */ new Set([`AriaCurrentValue {${ariaCurrentValuePropTypeOptions.join(", ")}`]),
-    value,
-    {
-      defaultValue: "page"
-    }
-  );
+    watchValidator(component, `_ariaCurrentValue`, (value) => typeof value === 'string' && ariaCurrentValuePropTypeOptions.includes(value), new Set([`AriaCurrentValue {${ariaCurrentValuePropTypeOptions.join(', ')}`]), value, {
+        defaultValue: 'page',
+    });
 };
 
 const validateAriaExpanded = (component, value) => {
-  watchBoolean(component, "_ariaExpanded", value);
+    watchBoolean(component, '_ariaExpanded', value);
 };
 
 const validateAriaSelected = (component, value) => {
-  watchBoolean(component, "_ariaSelected", value);
+    watchBoolean(component, '_ariaSelected', value);
 };
 
 const validateButtonCallbacks = (component, value) => {
-  watchValidator(
-    component,
-    `_on`,
-    (value2) => typeof value2 === "object" && value2 !== null,
-    /* @__PURE__ */ new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),
-    value
-  );
+    watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']), value);
 };
 
-const buttonTypePropTypeOptions = ["button", "reset", "submit"];
+const buttonTypePropTypeOptions = ['button', 'reset', 'submit'];
 const validateButtonType = (component, value) => {
-  watchValidator(
-    component,
-    `_type`,
-    (value2) => typeof value2 === "string" && buttonTypePropTypeOptions.includes(value2),
-    /* @__PURE__ */ new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),
-    value
-  );
+    watchValidator(component, `_type`, (value) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value), new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]), value);
 };
 
-const buttonVariantPropTypeOptions = ["primary", "secondary", "normal", "tertiary", "danger", "ghost", "custom"];
+const buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'];
 const validateButtonVariant = (component, value) => {
-  watchValidator(
-    component,
-    `_variant`,
-    (value2) => typeof value2 === "string" && buttonVariantPropTypeOptions.includes(value2),
-    /* @__PURE__ */ new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(", ")}`]),
-    value,
-    {
-      defaultValue: "normal"
-    }
-  );
+    watchValidator(component, `_variant`, (value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value), new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]), value, {
+        defaultValue: 'normal',
+    });
 };
 
 const validateChecked = (component, value) => {
-  watchBoolean(component, "_checked", value);
+    watchBoolean(component, '_checked', value);
 };
 
 const validateCollapsible = (component, value) => {
-  watchBoolean(component, "_collapsible", 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);
+    return HEX_REGEX.test(value);
 }
 function isColorObjectString(value) {
-  if (value.startsWith("{")) {
-    try {
-      const parsed = JSON.parse(value);
-      if (isValidColorPair(parsed))
-        return { type: "ColorPair", value: parsed };
-    } catch (error) {
-      return { type: null, value: null };
+    if (value.startsWith('{')) {
+        try {
+            const parsed = JSON.parse(value);
+            if (isValidColorPair(parsed))
+                return { type: 'ColorPair', value: parsed };
+        }
+        catch (error) {
+            return { type: null, value: null };
+        }
     }
-  }
-  return { type: null, value: null };
+    return { type: null, value: null };
 }
 function typeOfColor(value) {
-  if (value) {
-    if (typeof value === "string") {
-      if (isHexString(value))
-        return { type: "string", valid: true, value };
-      else {
-        const colorObject = isColorObjectString(value);
-        if (colorObject.value)
-          return { type: colorObject.type, valid: true, value: colorObject.value };
-      }
-    } else {
-      const asColorPair = value;
-      if (isValidColorPair(asColorPair))
-        return { type: "ColorPair", valid: true, value: asColorPair };
+    if (value) {
+        if (typeof value === 'string') {
+            if (isHexString(value))
+                return { type: 'string', valid: true, value: value };
+            else {
+                const colorObject = isColorObjectString(value);
+                if (colorObject.value)
+                    return { type: colorObject.type, valid: true, value: colorObject.value };
+            }
+        }
+        else {
+            const asColorPair = value;
+            if (isValidColorPair(asColorPair))
+                return { type: 'ColorPair', valid: true, value: asColorPair };
+        }
     }
-  }
-  return { type: null, valid: false, 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' ||
+            (value.foregroundColor &&
+                typeof value.foregroundColor.primary === 'string' &&
+                typeof value.foregroundColor.secondary === 'string' &&
+                typeof value.foregroundColor.neutral === 'string')));
 }
 function validatorFunction(value) {
-  const valueType = typeOfColor(value);
-  switch (valueType.type) {
-    case null:
-      return false;
-    case "string":
-    case "ColorPair":
-      return valueType.valid;
-  }
+    const valueType = typeOfColor(value);
+    switch (valueType.type) {
+        case null:
+            return false;
+        case 'string':
+        case 'ColorPair':
+            return valueType.valid;
+    }
 }
 const validateColor = (component, value, options) => {
-  watchValidator(component, "_color", validatorFunction, /* @__PURE__ */ new Set(["rgb in hex", "ColorPair"]), value, options);
+    watchValidator(component, '_color', validatorFunction, new Set(['rgb in hex', 'ColorPair']), value, options);
 };
 const handleColorChange = (value) => {
-  let colorContrast;
-  const valueType = typeOfColor(value);
-  switch (valueType.type) {
-    case "string":
-      colorContrast = createContrastColorPair(valueType.value);
-      break;
-    case "ColorPair": {
-      const asColorPair = valueType.value;
-      let foreground = "";
-      if (typeof asColorPair.foregroundColor === "string")
-        foreground = asColorPair.foregroundColor;
-      else if (asColorPair.foregroundColor?.primary)
-        foreground = asColorPair.foregroundColor.primary;
-      if (!foreground || typeof foreground !== "string")
-        foreground = "#fff";
-      colorContrast = createContrastColorPair({
-        background: asColorPair.backgroundColor,
-        foreground
-      });
-      break;
+    var _a;
+    let colorContrast;
+    const valueType = typeOfColor(value);
+    switch (valueType.type) {
+        case 'string':
+            colorContrast = createContrastColorPair(valueType.value);
+            break;
+        case 'ColorPair': {
+            const asColorPair = valueType.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({
+                background: asColorPair.backgroundColor,
+                foreground,
+            });
+            break;
+        }
+        case null:
+            console.warn(`_color was empty or invalid (${JSON.stringify(value)})`);
+            colorContrast = createContrastColorPair({
+                background: '#000',
+                foreground: '#000',
+            });
     }
-    case null:
-      console.warn(`_color was empty or invalid (${JSON.stringify(value)})`);
-      colorContrast = createContrastColorPair({
-        background: "#000",
-        foreground: "#000"
-      });
-  }
-  if (colorContrast.contrast < 7) {
-    a11yHint(
-      `[KolBadge] The contrast of ${colorContrast.contrast} (\u22657, AAA) is to low, between the color pair ${colorContrast.background} and ${colorContrast.foreground}.`
-    );
-  }
-  return {
-    backgroundColor: colorContrast.background,
-    foregroundColor: colorContrast.foreground
-  };
+    if (colorContrast.contrast < 7) {
+        a11yHint(`[KolBadge] The contrast of ${colorContrast.contrast} (≥7, AAA) is to low, between the color pair ${colorContrast.background} and ${colorContrast.foreground}.`);
+    }
+    return {
+        backgroundColor: colorContrast.background,
+        foregroundColor: colorContrast.foreground,
+    };
 };
 
 const validateCustomClass = (component, value) => {
-  watchString(component, "_customClass", value, {
-    defaultValue: void 0
-  });
+    watchString(component, '_customClass', value, {
+        defaultValue: undefined,
+    });
 };
 
 const validateDisabled = (component, value) => {
-  watchBoolean(component, "_disabled", value, {
-    hooks: {
-      afterPatch: (value2) => {
-        if (value2 === true) {
-          a11yHintDisabled();
-        }
-      }
-    }
-  });
+    watchBoolean(component, '_disabled', value, {
+        hooks: {
+            afterPatch: (value) => {
+                if (value === true) {
+                    a11yHintDisabled();
+                }
+            },
+        },
+    });
 };
 
 const validateDownload = (component, value) => {
-  watchString(component, "_download", value);
+    watchString(component, '_download', value);
 };
 
 const validateErrorList = (component, value) => {
-  watchValidator(component, "errorList", (value2) => typeof value2 === "object", /* @__PURE__ */ new Set(["Object"]), value);
+    watchValidator(component, 'errorList', (value) => typeof value === 'object', new Set(['Object']), value);
 };
 
 const validateHasCloser = (component, value) => {
-  watchBoolean(component, "_hasCloser", value);
+    watchBoolean(component, '_hasCloser', value);
 };
 
 const validateHasCompactButton = (component, value) => {
-  watchBoolean(component, "_hasCompactButton", value);
+    watchBoolean(component, '_hasCompactButton', value);
 };
 
 const validateHasCounter = (component, value) => {
-  watchBoolean(component, "_hasCounter", value);
+    watchBoolean(component, '_hasCounter', value);
 };
 
 const validateHasIconsWhenExpanded = (component, value) => {
-  watchBoolean(component, "_hasIconsWhenExpanded", value);
+    watchBoolean(component, '_hasIconsWhenExpanded', value);
 };
 
-const headingVariantPropTypeOptions = ["h1", "h2", "h3", "h4", "h5", "h6", "strong"];
+const headingVariantPropTypeOptions = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong'];
 const validateHeadingVariant = (component, value) => {
-  watchValidator(
-    component,
-    `_variant`,
-    (value2) => typeof value2 === "string" && headingVariantPropTypeOptions.includes(value2),
-    /* @__PURE__ */ new Set([`KoliBriHeadingVariant {${headingVariantPropTypeOptions.join(", ")}`]),
-    value
-  );
+    watchValidator(component, `_variant`, (value) => typeof value === 'string' && headingVariantPropTypeOptions.includes(value), new Set([`KoliBriHeadingVariant {${headingVariantPropTypeOptions.join(', ')}`]), value);
 };
 
 const validateHideError = (component, value, options) => {
-  watchBoolean(component, "_hideError", value, options);
+    watchBoolean(component, '_hideError', value, options);
 };
 
 const validateHideLabel = (component, value, options = {}) => {
-  watchBoolean(component, "_hideLabel", value, options);
+    watchBoolean(component, '_hideLabel', value, options);
 };
 
 const validateHref = (component, value, options = {}) => {
-  watchString(component, "_href", value, options);
+    watchString(component, '_href', value, options);
 };
 
 const mapCustomIcon = (state, alignment, icon) => {
-  if (isObject$1(icon)) {
-    state[alignment] = icon;
-  } else if (isString$2(icon, 1)) {
-    state[alignment] = {
-      icon
-    };
-  }
+    if (isObject$1(icon)) {
+        state[alignment] = icon;
+    }
+    else if (isString$2(icon, 1)) {
+        state[alignment] = {
+            icon: icon,
+        };
+    }
 };
 const mapIconProp2State = (icon) => {
-  let state = {};
-  if (isString$2(icon, 1)) {
-    state = {
-      left: {
-        icon
-      }
-    };
-  } else if (typeof icon === "object" && icon !== null) {
-    mapCustomIcon(state, "top", icon.top);
-    mapCustomIcon(state, "right", icon.right);
-    mapCustomIcon(state, "bottom", icon.bottom);
-    mapCustomIcon(state, "left", icon.left);
-  }
-  return state;
+    let state = {};
+    if (isString$2(icon, 1)) {
+        state = {
+            left: {
+                icon: icon,
+            },
+        };
+    }
+    else if (typeof icon === 'object' && icon !== null) {
+        mapCustomIcon(state, 'top', icon.top);
+        mapCustomIcon(state, 'right', icon.right);
+        mapCustomIcon(state, 'bottom', icon.bottom);
+        mapCustomIcon(state, 'left', icon.left);
+    }
+    return state;
 };
 const beforePatchIcon = (component) => {
-  if (component.nextState?.has("_icons")) {
-    const icons = component.nextState?.get("_icons");
-    component.nextState?.set("_icons", mapIconProp2State(icons));
-  }
+    var _a, _b, _c;
+    if ((_a = component.nextState) === null || _a === void 0 ? void 0 : _a.has('_icons')) {
+        const icons = (_b = component.nextState) === null || _b === void 0 ? void 0 : _b.get('_icons');
+        (_c = component.nextState) === null || _c === void 0 ? void 0 : _c.set('_icons', mapIconProp2State(icons));
+    }
 };
-const isIcon = (value) => typeof value === "object" && value !== null && (typeof value.style === "undefined" || isStyle(value.style)) && (typeof value.label === "undefined" || isString$2(value.label)) && isString$2(value.icon, 1);
+const isIcon = (value) => typeof value === 'object' &&
+    value !== null &&
+    (typeof value.style === 'undefined' || isStyle(value.style)) &&
+    (typeof value.label === 'undefined' || isString$2(value.label)) &&
+    isString$2(value.icon, 1);
 const validateIcons = (component, value, options = {}) => {
-  objectObjectHandler(value, () => {
-    try {
-      value = parseJson(value);
-    } catch (e) {
-    }
-    watchValidator(
-      component,
-      "_icons",
-      (value2) => {
-        const valueIsEmptyObject = typeof value2 === "object" && value2 !== null && Object.keys(value2).length === 0;
-        return value2 === null || valueIsEmptyObject || isString$2(value2, 1) || typeof value2 === "object" && value2 !== null && (isString$2(value2.left, 1) || isIcon(value2.left) || isString$2(value2.right, 1) || isIcon(value2.right) || isString$2(value2.top, 1) || isIcon(value2.top) || isString$2(value2.bottom, 1) || isIcon(value2.bottom));
-      },
-      /* @__PURE__ */ new Set(["KoliBriIcon"]),
-      value,
-      {
-        ...options,
-        defaultValue: {},
-        hooks: {
-          afterPatch: options.hooks?.afterPatch,
-          beforePatch: (nextValue, nextState, component2, key) => {
-            if (typeof options.hooks?.beforePatch === "function") {
-              options.hooks?.beforePatch(nextValue, nextState, component2, key);
-            }
-            beforePatchIcon(component2);
-          }
+    objectObjectHandler(value, () => {
+        var _a;
+        try {
+            value = parseJson(value);
         }
-      }
-    );
-  });
+        catch (e) {
+        }
+        watchValidator(component, '_icons', (value) => {
+            const valueIsEmptyObject = typeof value === 'object' && value !== null && Object.keys(value).length === 0;
+            return (value === null ||
+                valueIsEmptyObject ||
+                isString$2(value, 1) ||
+                (typeof value === 'object' &&
+                    value !== null &&
+                    (isString$2(value.left, 1) ||
+                        isIcon(value.left) ||
+                        isString$2(value.right, 1) ||
+                        isIcon(value.right) ||
+                        isString$2(value.top, 1) ||
+                        isIcon(value.top) ||
+                        isString$2(value.bottom, 1) ||
+                        isIcon(value.bottom))));
+        }, new Set(['KoliBriIcon']), value, Object.assign(Object.assign({}, options), { defaultValue: {}, hooks: {
+                afterPatch: (_a = options.hooks) === null || _a === void 0 ? void 0 : _a.afterPatch,
+                beforePatch: (nextValue, nextState, component, key) => {
+                    var _a, _b;
+                    if (typeof ((_a = options.hooks) === null || _a === void 0 ? void 0 : _a.beforePatch) === 'function') {
+                        (_b = options.hooks) === null || _b === void 0 ? void 0 : _b.beforePatch(nextValue, nextState, component, key);
+                    }
+                    beforePatchIcon(component);
+                },
+            } }));
+    });
 };
 
 const validateId = (component, value) => {
-  watchString(component, "_id", value);
+    watchString(component, '_id', value);
 };
 
 const validateImageSource = (component, value, options) => {
-  watchString(component, "_src", value, options);
+    watchString(component, '_src', value, options);
 };
 
 const validateIndeterminate = (component, value) => {
-  watchBoolean(component, "_indeterminate", value);
+    watchBoolean(component, '_indeterminate', value);
 };
 
 const headingLevelOptions = [0, 1, 2, 3, 4, 5, 6];
 const READABLE_CHARS = /[a-zA-Z0-9äöüÄÖÜß]/g;
 const ONLY_NUMBERS = /^\d+$/;
 function countReadableChars(str) {
-  return typeof str === "string" ? str.match(READABLE_CHARS)?.length || 0 : 0;
+    var _a;
+    return typeof str === 'string' ? ((_a = str.match(READABLE_CHARS)) === null || _a === void 0 ? void 0 : _a.length) || 0 : 0;
 }
 function hasEnoughReadableChars(str, min = 1) {
-  return countReadableChars(str) >= min;
+    return countReadableChars(str) >= min;
 }
 function containsOnlyNumbers(str) {
-  return ONLY_NUMBERS.test(str);
+    return ONLY_NUMBERS.test(str);
 }
 function getValidationOptions(options) {
-  return {
-    ...options,
-    hooks: {
-      afterPatch: (value, state, component, key) => {
-        if (typeof options.hooks?.afterPatch === "function") {
-          options.hooks?.afterPatch(value, state, component, key);
-        }
-        if (typeof value === "string" && hasEnoughReadableChars(value, 3) === false && containsOnlyNumbers(value) === false) {
-          a11yHint(`The heading or label ("${value}") is not accessible. A label should consist of at least three readable characters.`);
-        }
-        if (typeof value === "string" && value.length > 80) {
-          uiUxHint(`A heading or label should not be longer than 80 characters.`);
-        }
-      },
-      beforePatch: options.hooks?.beforePatch
-    }
-  };
+    var _a;
+    return Object.assign(Object.assign({}, options), { hooks: {
+            afterPatch: (value, state, component, key) => {
+                var _a, _b;
+                if (typeof ((_a = options.hooks) === null || _a === void 0 ? void 0 : _a.afterPatch) === 'function') {
+                    (_b = options.hooks) === null || _b === void 0 ? void 0 : _b.afterPatch(value, state, component, key);
+                }
+                if (typeof value === 'string' && hasEnoughReadableChars(value, 3) === false && containsOnlyNumbers(value) === false) {
+                    a11yHint(`The heading or label ("${value}") is not accessible. A label should consist of at least three readable characters.`);
+                }
+                if (typeof value === 'string' && value.length > 80) {
+                    uiUxHint(`A heading or label should not be longer than 80 characters.`);
+                }
+            },
+            beforePatch: (_a = options.hooks) === null || _a === void 0 ? void 0 : _a.beforePatch,
+        } });
 }
-const LABEL_VALUES = /* @__PURE__ */ new Set(["string"]);
+const LABEL_VALUES = new Set(['string']);
 const validateLabel = (component, value, options = {}) => {
-  watchValidator(component, "_label", (value2) => typeof value2 === "string", LABEL_VALUES, value, getValidationOptions(options));
+    watchValidator(component, '_label', (value) => typeof value === 'string', LABEL_VALUES, value, getValidationOptions(options));
 };
 const validateLabelWithExpertSlot = validateLabel;
 
 const validateLinkCallbacks = (component, value) => {
-  if (typeof value === "object" && typeof value?.onClick === "function") {
-    component.state = {
-      ...component.state,
-      _on: value
-    };
-  }
+    if (typeof value === 'object' && typeof (value === null || value === void 0 ? void 0 : value.onClick) === 'function') {
+        component.state = Object.assign(Object.assign({}, component.state), { _on: value });
+    }
 };
 
 const validateLinkTarget = (component, value) => {
-  watchString(component, "_target", value);
+    watchString(component, '_target', value);
 };
 
-const loadingOptions = ["eager", "lazy"];
+const loadingOptions = ['eager', 'lazy'];
 function validateLoading(component, value) {
-  watchValidator(component, "_loading", (value2) => typeof value2 === "string" && loadingOptions.includes(value2), new Set(loadingOptions), value);
+    watchValidator(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value);
 }
 
 const validateMax = (component, value, options) => {
-  watchNumber(component, "_max", value, options);
+    watchNumber(component, '_max', value, options);
 };
 
 const validateMsg = (component, value) => {
-  watchValidator(component, `_msg`, (value2) => typeof value2 === "object", /* @__PURE__ */ new Set(["Object"]), value);
+    watchValidator(component, `_msg`, (value) => typeof value === 'object', new Set(['Object']), value);
 };
 
 const validateMultiple = (component, value) => {
-  watchBoolean(component, "_multiple", value);
+    watchBoolean(component, '_multiple', value);
 };
 
 const validateName = (component, value, options) => {
-  watchString(component, "_name", value, options);
+    watchString(component, '_name', value, options);
 };
 
 const validateOpen = (component, value, options) => {
-  watchBoolean(component, "_open", value, options);
+    watchBoolean(component, '_open', value, options);
 };
 
 const validateOptions = (component, value, options = {}) => {
-  watchJsonArrayString(
-    component,
-    "_options",
-    (item) => typeof item === "object" && item !== null && typeof item.label === "string" && item.label.length > 0,
-    value,
-    void 0,
-    options
-  );
+    watchJsonArrayString(component, '_options', (item) => typeof item === 'object' && item !== null && typeof item.label === 'string' && item.label.length > 0, value, undefined, options);
 };
 const validateOptionsWithOptgroup = (component, value, options = {}) => {
-  watchJsonArrayString(component, "_options", validateInputSelectOptions, value, void 0, options);
+    watchJsonArrayString(component, '_options', validateInputSelectOptions, value, undefined, options);
 };
 
-const paginationPositionPropTypeOptions = ["top", "bottom", "both"];
+const paginationPositionPropTypeOptions = ['top', 'bottom', 'both'];
 const validatePaginationPosition = (component, value) => {
-  watchValidator(
-    component,
-    `_paginationPosition`,
-    (value2) => typeof value2 === "string" && paginationPositionPropTypeOptions.includes(value2),
-    /* @__PURE__ */ new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),
-    value,
-    {
-      defaultValue: "bottom"
-    }
-  );
+    watchValidator(component, `_paginationPosition`, (value) => typeof value === 'string' && paginationPositionPropTypeOptions.includes(value), new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(', ')}`]), value, {
+        defaultValue: 'bottom',
+    });
 };
 
 const validateReadOnly = (component, value) => {
-  watchBoolean(component, "_readOnly", value);
+    watchBoolean(component, '_readOnly', value);
 };
 
 const validateRequired = (component, value) => {
-  watchBoolean(component, "_required", value);
+    watchBoolean(component, '_required', value);
 };
 
 const validateRows = (component, value) => {
-  watchNumber(component, `_rows`, value, { min: 1 });
+    watchNumber(component, `_rows`, value, { min: 1 });
 };
 
 const validateShow = (component, value, hooks) => {
-  watchBoolean(component, "_show", value, hooks);
+    watchBoolean(component, '_show', value, hooks);
 };
 
 const validateSuggestions = (component, value) => {
-  watchJsonArrayString(component, "_suggestions", (item) => typeof item === "string" || typeof item === "number", value, void 0, {
-    hooks: {
-      afterPatch: (value2) => {
-        if (Array.isArray(value2) && value2.length) {
-          a11yHint("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.");
-        }
-      }
-    }
-  });
+    watchJsonArrayString(component, '_suggestions', (item) => typeof item === 'string' || typeof item === 'number', value, undefined, {
+        hooks: {
+            afterPatch: (value) => {
+                if (Array.isArray(value) && value.length) {
+                    a11yHint('Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.');
+                }
+            },
+        },
+    });
 };
 
 const validateTableCallbacks = (component, value) => {
-  watchValidator(component, `_on`, (value2) => typeof value2 === "object" && value2 !== null, /* @__PURE__ */ new Set(["TableCallbacksPropType {Events.onSort}"]), value);
+    watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['TableCallbacksPropType {Events.onSort}']), value);
 };
 
 const validateTableData = (component, value, setStateHooks) => {
-  emptyStringByArrayHandler(value, () => {
-    objectObjectHandler(value, () => {
-      if (typeof value === "undefined") {
-        value = [];
-      }
-      try {
-        value = parseJson(value);
-      } catch (e) {
-      }
-      if (Array.isArray(value) && value.every((data) => typeof data === "object" && data !== null)) {
-        setState(component, "_data", value, setStateHooks);
-      }
+    emptyStringByArrayHandler(value, () => {
+        objectObjectHandler(value, () => {
+            if (typeof value === 'undefined') {
+                value = [];
+            }
+            try {
+                value = parseJson(value);
+            }
+            catch (e) {
+            }
+            if (Array.isArray(value) && value.every((data) => typeof data === 'object' && data !== null)) {
+                setState(component, '_data', value, setStateHooks);
+            }
+        });
     });
-  });
 };
 
 const validateTableDataFoot = (component, value, setStateHooks) => {
-  emptyStringByArrayHandler(value, () => {
-    objectObjectHandler(value, () => {
-      if (typeof value === "undefined") {
-        value = [];
-      }
-      try {
-        value = parseJson(value);
-      } catch (e) {
-      }
-      if (Array.isArray(value) && value.every((data) => typeof data === "object" && data !== null)) {
-        setState(component, "_dataFoot", value, setStateHooks);
-      }
+    emptyStringByArrayHandler(value, () => {
+        objectObjectHandler(value, () => {
+            if (typeof value === 'undefined') {
+                value = [];
+            }
+            try {
+                value = parseJson(value);
+            }
+            catch (e) {
+            }
+            if (Array.isArray(value) && value.every((data) => typeof data === 'object' && data !== null)) {
+                setState(component, '_dataFoot', value, setStateHooks);
+            }
+        });
     });
-  });
 };
 
 const validateTableHeaderCells = (component, value) => {
-  emptyStringByArrayHandler(value, () => {
-    objectObjectHandler(value, () => {
-      try {
-        value = parseJson(value);
-      } catch (e) {
-      }
-      watchValidator(component, "_headerCells", (value2) => typeof value2 === "object" && value2 !== null, /* @__PURE__ */ new Set(["TableHeaderCellsPropType"]), value);
+    emptyStringByArrayHandler(value, () => {
+        objectObjectHandler(value, () => {
+            try {
+                value = parseJson(value);
+            }
+            catch (e) {
+            }
+            watchValidator(component, '_headerCells', (value) => typeof value === 'object' && value !== null, new Set(['TableHeaderCellsPropType']), value);
+        });
     });
-  });
 };
 
 const validateTooltipAlign = (component, value) => {
-  validateAlignment(component, "_tooltipAlign", value);
+    validateAlignment(component, '_tooltipAlign', value);
 };
 
 const validateTouched = (component, value) => {
-  watchBoolean(component, "_touched", value);
+    watchBoolean(component, '_touched', value);
 };
 
-const spinVariantPropTypeOptions = ["cycle", "dot", "none"];
+const spinVariantPropTypeOptions = ['cycle', 'dot', 'none'];
 const validateSpinVariant = (component, value) => {
-  watchValidator(
-    component,
-    "_variant",
-    (value2) => typeof value2 === "string" && spinVariantPropTypeOptions.includes(value2),
-    new Set(spinVariantPropTypeOptions),
-    value
-  );
+    watchValidator(component, '_variant', (value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value), new Set(spinVariantPropTypeOptions), value);
 };
 
-const inputDateTypeOptions = ["date", "datetime-local", "month", "time", "week"];
-
-const inputTextTypeOptions = ["text", "search", "url", "tel"];
+const inputDateTypeOptions = ['date', 'datetime-local', 'month', 'time', 'week'];
 
-const inputTypeOnOffOptions = ["on", "off"];
+const inputTextTypeOptions = ['text', 'search', 'url', 'tel'];
 
-const orientationOptions = ["horizontal", "vertical"];
+const inputTypeOnOffOptions = ['on', 'off'];
 
-var KoliBriProgressVariantEnum = /* @__PURE__ */ ((KoliBriProgressVariantEnum2) => {
-  KoliBriProgressVariantEnum2["bar"] = "bar";
-  KoliBriProgressVariantEnum2["cycle"] = "cycle";
-  return KoliBriProgressVariantEnum2;
-})(KoliBriProgressVariantEnum || {});
+const orientationOptions = ['horizontal', 'vertical'];
 
-new te("kol", KeyEnum, TagEnum);
+var KoliBriProgressVariantEnum;
+(function (KoliBriProgressVariantEnum) {
+    KoliBriProgressVariantEnum["bar"] = "bar";
+    KoliBriProgressVariantEnum["cycle"] = "cycle";
+})(KoliBriProgressVariantEnum || (KoliBriProgressVariantEnum = {}));
 
 let nonce = () => Math.floor(Math.random() * 16777215).toString(16);
 if (processEnv === 'test') {
@@ -14394,7 +14262,7 @@ class KolAbbr {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'c925b5b379b596db99404d6c7d4507275d70496d', class: "kol-abbr" }, hAsync("abbr", { key: 'c7a6a3482ea02fca65278aa28ea115f7a9a11f74', "aria-labelledby": this.nonce, role: "definition", tabindex: "0", title: this.state._label }, hAsync("span", { key: '7179f3b594f6815c06c46dd465739376734ea940', title: "" }, hAsync("slot", { key: '00590edd1ae4afeb4f4f066f0a16ce54c8af28a9' }))), hAsync(KolTooltipWcTag, { key: '2c44fa51a1849dabb59d0541a0d9dcc192e52bcd', _align: this.state._tooltipAlign, _id: this.nonce, _label: this.state._label })));
+        return (hAsync(Host, { key: '598d706f074db11649d068894821a214d3373d11', class: "kol-abbr" }, hAsync("abbr", { key: 'cea033577a07ea9cbc48cf32f2afa798b2f70c1b', "aria-labelledby": this.nonce, role: "definition", tabindex: "0", title: this.state._label }, hAsync("span", { key: 'f28a0dacfb9e1d5807f763e03401e1b71c0414c3', title: "" }, hAsync("slot", { key: 'c72ee140bfc1c43d781a5309c07f9a47689d6f4e' }))), hAsync(KolTooltipWcTag, { key: '2743bb91c1b770375bda8e19668e7ad698b10baa', _align: this.state._tooltipAlign, _id: this.nonce, _label: this.state._label })));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -14474,11 +14342,11 @@ class KolAccordion {
         };
     }
     render() {
-        return (hAsync(Host, { key: '375071dab3f67a8a9ea41166c5e5955a905ba04a', class: "kol-accordion" }, hAsync("div", { key: '44e8a90eed884c991797ea6e0e727777075d6d00', class: {
+        return (hAsync(Host, { key: 'f1672f2cf8b9aa85b1f63ab68d00300b74638dd8', class: "kol-accordion" }, hAsync("div", { key: 'e80bb532a6f148e9608b9d5b4eca382cf8c01e8d', class: {
                 accordion: true,
                 disabled: this.state._disabled === true,
                 open: this.state._open === true,
-            } }, hAsync(KolHeadingWcTag, { key: '6fdf9427c74afbcc932fa05c1840e8cb6b606b9a', _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync(KolButtonWcTag, { key: '4e82eb30cd0ff1fef25262dc0e34a3408b0aaad6', class: "accordion-button", ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _disabled: this.state._disabled, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { key: '0835efe279a9deb62190997682ef0e8fe4a1edf2', class: "wrapper" }, hAsync("div", { key: 'f7244e8b9807223dd80f0b261ec1e2b730f95e85', class: "animation-wrapper" }, hAsync("div", { key: '4ef5849701c39fe7f738cd34661e5c0fc9f29efc', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: '324bf4086448b8c5700c98d6fa7d830846e362af' })))))));
+            } }, hAsync(KolHeadingWcTag, { key: 'e221fc0ccd86504a3e491a8e32c55da5fa76a365', _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync(KolButtonWcTag, { key: 'f65af86aab71ff029bba8108495477d7be05c2f3', class: "accordion-button", ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _disabled: this.state._disabled, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { key: '5435d015a21707724c7180dbb96e7a0af30f9d42', class: "wrapper" }, hAsync("div", { key: '5a9958a91c49d8b807627f7029ad975e52c6e1ea', class: "animation-wrapper" }, hAsync("div", { key: '367a024dca25373063df9ec0e679161ad26bffb8', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: 'dfbbf47f20297d5f5052d7df8f74bd659ce054fd' })))))));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -14552,7 +14420,7 @@ class KolAlert {
         };
     }
     render() {
-        return (hAsync(Host, { key: '0bc6af8580c2671652be185c0703d6863173054b', class: "kol-alert" }, hAsync(KolAlertWcTag, { key: '597bc59e70dd38fc02c75f93fd4bd0e18a2adc1c', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: 'c3216b358f6a0dd8357009d7c95f3aa6101cc781' }))));
+        return (hAsync(Host, { key: '4f87a50275ed8a213086458ce239ab24148b4e95', class: "kol-alert" }, hAsync(KolAlertWcTag, { key: '97764b041f739deb6fda2f01d31993131de5e6ab', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: '3108fc83dd474231a55d3ffaf4bb8fae2ac7719d' }))));
     }
     static get style() { return {
         default: KolAlertDefaultStyle0
@@ -14788,17 +14656,17 @@ class KolAlertWc {
                 this.validateAlert(false);
             }, 10000);
         }
-        return (hAsync(Host, { key: '056ebeba8b0ebc0d76a98e3855a0022e1c689e09', class: {
+        return (hAsync(Host, { key: 'ecb2cd45b14f92cc1c337d2b81382a8cc820e869', class: {
                 'kol-alert-wc': true,
                 alert: true,
                 [this.state._type]: true,
                 [this.state._variant]: true,
                 hasCloser: !!this.state._hasCloser,
-            }, role: this.state._alert ? 'alert' : undefined }, hAsync("div", { key: 'e2807b51c729dc7814aa46bc40f371d9b785b590', class: "heading" }, hAsync(AlertIcon, { key: '207367acb5c59e0977feb68adefb0a7cdb0f4668', label: this.state._label, type: this.state._type }), hAsync("div", { key: '1d9b3c352e84393eb31fbd056a6aa9ec639d13cd', class: "heading-content" }, typeof this.state._label === 'string' && ((_a = this.state._label) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(KolHeadingWcTag, { key: 'd50d4a3e93158e486ccadec92a9e0ea2d6fa6619', _label: this.state._label, _level: this.state._level })), this.state._variant === 'msg' && (hAsync("div", { key: '63669d4a74b60428884b10f8b6dab0f6f81c3536', class: "content" }, hAsync("slot", { key: '96fcaa01e83175f5f4476b38765dfc0b98c623c7' })))), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: '2d07628e18f992d455c5104869aa4c54341b97c5', class: "close", _hideLabel: true, _icons: {
+            }, role: this.state._alert ? 'alert' : undefined }, hAsync("div", { key: 'b190de9f62c33d970daabc1b5638132da33c936e', class: "heading" }, hAsync(AlertIcon, { key: 'e1da8b194a13ec6f9270efc2234caadcee77e827', label: this.state._label, type: this.state._type }), hAsync("div", { key: '7ffd000cfbe218c582791e8646ff5caf9bad5b25', class: "heading-content" }, typeof this.state._label === 'string' && ((_a = this.state._label) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(KolHeadingWcTag, { key: 'f9e7c598243a4868b80b248fdf4dfdeed5d24a2b', _label: this.state._label, _level: this.state._level })), this.state._variant === 'msg' && (hAsync("div", { key: 'b5b70319b6c7747872e9d8072a1fe7565938f7c1', class: "content" }, hAsync("slot", { key: 'b75edf24762d861147d5ee5fa0701b4c5a30eed1' })))), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: 'a21b86376be7c8c5d8b03be1bf9635525e0ab3b7', class: "close", _hideLabel: true, _icons: {
                 left: {
                     icon: 'codicon codicon-close',
                 },
-            }, _label: translate('kol-close'), _on: this.on, _tooltipAlign: "left" }))), this.state._variant === 'card' && (hAsync("div", { key: 'd2825b4f83e736616f4d8808f46af958ba2391d1', class: "content" }, hAsync("slot", { key: '2063f32e42cc024a8f9f4fe2e66489c8c73acf71' })))));
+            }, _label: translate('kol-close'), _on: this.on, _tooltipAlign: "left" }))), this.state._variant === 'card' && (hAsync("div", { key: '222dfcfd8c2a42d88045b744d7fb98dea05be855', class: "content" }, hAsync("slot", { key: '48fb55900500e45c7f9670e065a26de7189f771f' })))));
     }
     validateAlert(value) {
         watchBoolean(this, '_alert', value);
@@ -14872,7 +14740,7 @@ class KolAvatar {
         this._label = undefined;
     }
     render() {
-        return (hAsync(Host, { key: 'c10a3e22a9825845f9ba2c0dcd5a469115ff7b6c', class: "kol-avatar" }, hAsync(KolAvatarWcTag, { key: '91b780eeab485179a1f7e158965bd6a244cd6e67', _src: this._src, _label: this._label })));
+        return (hAsync(Host, { key: '27dcef5bc7bcb3d600f33e1776e8c1e913ede9d8', class: "kol-avatar" }, hAsync(KolAvatarWcTag, { key: 'f8c1eb9c59ef3bbcbe704834ce4325284f8e6e8c', _src: this._src, _label: this._label })));
     }
     static get style() { return {
         default: KolAvatarDefaultStyle0
@@ -14917,7 +14785,7 @@ class KolAvatarWc {
         };
     }
     render() {
-        return (hAsync(Host, { key: '99fac7e3555c26480cdaf36d21bae55e9455b2a4', class: "kol-avatar-wc" }, hAsync("div", { key: 'bb096bc4e6e5c9e9d4c3e07338a09d36017966fe', "aria-label": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: "container", role: "img" }, this.state._src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: "image", src: this.state._src })) : (hAsync("span", { "aria-hidden": "true", class: "initials" }, formatLabelAsInitials(this.state._label.trim()))))));
+        return (hAsync(Host, { key: '672b71c600e54214bbaf86210fe439af3f187c83', class: "kol-avatar-wc" }, hAsync("div", { key: '8631bb174ac54c1677149d12979f6837dddd692d', "aria-label": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: "container", role: "img" }, this.state._src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: "image", src: this.state._src })) : (hAsync("span", { "aria-hidden": "true", class: "initials" }, formatLabelAsInitials(this.state._label.trim()))))));
     }
     validateSrc(value) {
         validateImageSource(this, value);
@@ -14980,12 +14848,12 @@ class KolBadge {
     }
     render() {
         const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
-        return (hAsync(Host, { key: '746b69d7e6a31860bcf349493beb6f203ae88a17', class: "kol-badge" }, hAsync("span", { key: '6a89317d2c932f4c3b271f5e15068ec818d59f5a', class: {
+        return (hAsync(Host, { key: '0b334746c26463bbc697f08077e165e56b34a97f', class: "kol-badge" }, hAsync("span", { key: '83210f467b224cb691d844a0311f4a31a1ad6e79', class: {
                 'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
             }, style: {
                 backgroundColor: this.bgColorStr,
                 color: this.colorStr,
-            } }, hAsync(KolSpanWcTag, { key: '5db2e58b4886b2732b7c0735196c26748b2f1f52', id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
+            } }, hAsync(KolSpanWcTag, { key: 'd5a3248d67baa494d9671e0da7de918511af084b', id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -15068,7 +14936,7 @@ class KolBreadcrumb {
         };
     }
     render() {
-        return (hAsync(Host, { key: '254bccd49021ec2d56c6b38b8240df50dc7c5023', class: "kol-breadcrumb" }, hAsync("nav", { key: 'dbd48e397c56b0b0c45af00c09a4d616ff329f41', "aria-label": this.state._label }, hAsync("ul", { key: '57f211b69a85c5af31ac9d50602048a62b016bac' }, this.state._links.length === 0 && (hAsync("li", { key: '6d59d8598caa0c7c1fafde753e9b87431aedbc99' }, hAsync(KolIconTag, { key: '9b1dfc2eddc205ee1db8554ccbb8891b6704f58c', _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink)))));
+        return (hAsync(Host, { key: '1cfa36fa9a381d7b470854ec4a550b54817e37d6', class: "kol-breadcrumb" }, hAsync("nav", { key: 'd913f0b8853e65302801b62abb9ee1a7911ba264', "aria-label": this.state._label }, hAsync("ul", { key: '9719d99bcfedb925e819b0abf14977692fdabc76' }, this.state._links.length === 0 && (hAsync("li", { key: '1681efdfcdb0eb6d31fe0baf14efa89208ef04e9' }, hAsync(KolIconTag, { key: '21f1969a164aaa85d48a8e985e2e788be10a5135', _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink)))));
     }
     validateLabel(value, _oldValue, initial = false) {
         if (!initial) {
@@ -15144,11 +15012,11 @@ class KolButton {
         return this._value;
     }
     render() {
-        return (hAsync(Host, { key: '5dabc170509cbae4006effd638d1f6df14a980b8', class: "kol-button" }, hAsync(KolButtonWcTag, { key: '8f77042817ac26209e77d4e7caa0f75f8b31f8ec', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: 'f25b58d924abdc5215b2ec354a57427bed43b001', class: "kol-button" }, hAsync(KolButtonWcTag, { key: 'e9afcf44b454f0a2c22bc1346fe583f697621efb', ref: this.catchRef, class: {
                 button: true,
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '743561c96a08d73b2624af46a3da8ee429ad6ae6', name: "expert", slot: "expert" }))));
+            }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '5b515b5587a2c125450f6b11952ab776bbc41a62', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -15193,7 +15061,7 @@ class KolButtonGroup {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '0258fa6b065df7a44d5b480d4ad5b4f9e82d2b2f', class: "kol-button-group" }, hAsync(KolButtonGroupWcTag, { key: '1d80e977ae25c02b2e102ddef3eef8ca043937b3' }, hAsync("slot", { key: '4e9f03087c41c9e178ea4310e73517c8f31c1eea' }))));
+        return (hAsync(Host, { key: 'e53bb9644f55447a8d34607dcf23cd22afba7cc3', class: "kol-button-group" }, hAsync(KolButtonGroupWcTag, { key: 'b4ddb170e6b597a461a4106d2903ecedc9741e6d' }, hAsync("slot", { key: 'c0297ef635d4a7b87e8c4ab5f2a9e5235eb059ca' }))));
     }
     static get style() { return {
         default: KolButtonGroupDefaultStyle0
@@ -15214,7 +15082,7 @@ class KolButtonGroupWc {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, { key: '9fbc05912a978daa9a990739dda78f117e87574c', class: "kol-button-group-wc" }, hAsync("slot", { key: 'f2c31dd0205d6a6143661c20dc23df51f7aaf91c' })));
+        return (hAsync(Host, { key: 'd70d07aee8bf780d21f93ad48d5549e65e889f02', class: "kol-button-group-wc" }, hAsync("slot", { key: '3dfb84fee69b23211aab06b29d28690cdebe5ffc' })));
     }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -15259,7 +15127,7 @@ class KolButtonLink {
         return this._value;
     }
     render() {
-        return (hAsync(Host, { key: 'bd8d9c18b824af71b6e02763f80a619d4b92bf82', class: "kol-button-link" }, hAsync(KolButtonWcTag, { key: 'c60e6ed4dd984141f90e773194fd7157a9348570', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: 'bba6c4a3141df4f4afbfff5abd8b6b8e2c6f3572', name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: 'bcca14709dca36d36884f1bda80d249ef151cf03', class: "kol-button-link" }, hAsync(KolButtonWcTag, { key: '1601a8be9c9c8c85cb776f95aa3981ccc388d978', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: 'dd476ba7cf6a6d3b08553cc7490ee51d4f08fff0', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -15554,13 +15422,13 @@ class AssociatedInputController {
 class KolButtonWc {
     render() {
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '9b78f24010f60a0c49b27964904b492cb4b9a8b0', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '56acddc79474d7a0bccef57e49451ab2685cf07b', ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: {
+        return (hAsync(Host, { key: 'c0d16e55ccda6586451460ed73035afc5094a20c', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '6ee3c6aa4c7eb2870b69369ae303b344f9243615', ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: {
                 button: true,
                 disabled: this.state._disabled === true,
                 [this.state._variant]: this.state._variant !== 'custom',
                 [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
                 'hide-label': this.state._hideLabel === true,
-            }, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync(KolSpanWcTag, { key: '9b9c3ce492e455e928f509b5fb092139040ea545', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '76c5e81308b9c7de483723bd55f0dcfbf2b2d6d5', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: 'bdbb52aa525f761ce82e78256ea1e4d8018cc369', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
+            }, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync(KolSpanWcTag, { key: '89e898b52482ab8f2b991ee630d3c01eba2c5673', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'c7f11890216223942c6adea500e5904409877564', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '31d7ab91f54a8046442ffdb435f55cb4681d1b32', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -15779,7 +15647,7 @@ class KolCard {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'e403d95ac0c2dcb63f004dc274435d92b189cec0', class: "kol-card" }, hAsync("div", { key: 'e95f4bae2c92745145847c3f6f7dcd991c83e234', class: "card" }, hAsync("div", { key: '314c85fa6d6c32f8204e330a8b29b2f91b790d16', class: "header" }, hAsync(KolHeadingWcTag, { key: 'd3f2ed37cf27695ef3645f298c62ff02d295674a', _label: this.state._label, _level: this.state._level })), hAsync("div", { key: '7b54507a0e770ec6f5f70073680518e7a44dda0e', class: "content" }, hAsync("slot", { key: 'e81a3e0d7764f284baa1a0ac464c173dad53bf61' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: '443b14fe575f486f0e61a8dd717a0ccc78247938', class: "close", _hideLabel: true, _icons: {
+        return (hAsync(Host, { key: '6a075e6c225c33dbfab5bbc6e78751eb1a2ee474', class: "kol-card" }, hAsync("div", { key: 'a3aee1a0c51e4aadd5bab63252686a9adfa7cfb6', class: "card" }, hAsync("div", { key: '1f73f4e0302ba9bb5b7fb5e0cbc6b00e7a3abdde', class: "header" }, hAsync(KolHeadingWcTag, { key: '0d077a8431e89744ed58c51d5e645f445e009169', _label: this.state._label, _level: this.state._level })), hAsync("div", { key: 'aef0ace6767b8978efd6a14967d51808660cdcad', class: "content" }, hAsync("slot", { key: '7fe022672f6e418364f63cb0a72dfbed09207c8e' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: 'ff59bb6a947d9d435f4c2a2cf968daa5064ec2d3', class: "close", _hideLabel: true, _icons: {
                 left: {
                     icon: 'codicon codicon-close',
                 },
@@ -15942,10 +15810,10 @@ class KolDetails {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'd10f3b77aece51c200586eb0aca3e36bcf93377f', class: "kol-details" }, hAsync("details", { key: 'fc2a98dd9be0f58f2753f36cd4f9cac8f0b7f95a', ref: this.catchDetails, class: {
+        return (hAsync(Host, { key: '4ad8208280a549ec10c547b20ddb003e04e68f01', class: "kol-details" }, hAsync("details", { key: '229ce17a1772bed26309a249a4326152edbe4e6e', ref: this.catchDetails, class: {
                 disabled: this.state._disabled === true,
                 open: this.state._open === true,
-            }, onToggle: this.handleToggle }, hAsync("summary", { key: '630d6b7a277a32222dc0be5f6a1bf1ab0f4c4785', ref: this.catchSummary, "aria-disabled": this.state._disabled ? 'true' : undefined, onClick: this.preventToggleIfDisabled, onKeyPress: this.preventToggleIfDisabled, tabIndex: this.state._disabled ? -1 : undefined }, hAsync(KolIconTag, { key: 'abb205a1bfa9cf5f971746b08fa5fb509cb817e3', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: 'b3c6bdd2a3e9846f834e66ad52165543c7e357e0' }, this.state._label)), hAsync("div", { key: 'a35a8360a03f7d45faaa28eec581733c1f1f62b8', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync(KolIndentedTextTag, { key: '82ff331139735fdcf8a696080e850b368070a592' }, hAsync("slot", { key: '44fcda833ae850381ad5ccd36bea739c69451755' }))))));
+            }, onToggle: this.handleToggle }, hAsync("summary", { key: '727bb07a088a3138ff4fc29ee6fe43bcf9543379', ref: this.catchSummary, "aria-disabled": this.state._disabled ? 'true' : undefined, onClick: this.preventToggleIfDisabled, onKeyPress: this.preventToggleIfDisabled, tabIndex: this.state._disabled ? -1 : undefined }, hAsync(KolIconTag, { key: '5ecf957e42408222a4fbd78c2a9974c6c6880bc9', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: '2efa00fd37325648edd0c430db88a1d6f73d270c' }, this.state._label)), hAsync("div", { key: '1d527e8caeb3c9458ecde81c4c779c505ed19dc4', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync(KolIndentedTextTag, { key: '6f57d85524db46b0a381e535b7e280ca92483ce7' }, hAsync("slot", { key: '518dd2d74ae80a0de06efcbd1097aa8e72de5db1' }))))));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -16040,10 +15908,10 @@ class KolForm {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, { key: '8200a5548128d69edd92b943223c8da7a94cab86', class: "kol-form" }, this._errorList && this._errorList.length > 0 && (hAsync(KolAlertTag, { key: '9a06342471329ce2f1d50b17b06227af2a94ee95', _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { key: 'b106a5122f460b3f431a6b3f9a067fa7835120d3', "aria-label": translate('kol-error-list') }, hAsync("ul", { key: '6192d18193f85d4f1e2a277c4f6be1ed8208f4ac' }, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkTag, { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
+        return (hAsync(Host, { key: 'c2f978944c0da89b0c1f721e48e62c20897c6e84', class: "kol-form" }, this._errorList && this._errorList.length > 0 && (hAsync(KolAlertTag, { key: '89cc664c87a2aa777ff084d447f16cebf36d33ae', _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { key: '1720c956e40dd31ebbc4e97aef78f8e1f8c204ae', "aria-label": translate('kol-error-list') }, hAsync("ul", { key: 'f99ca1869fdc217c7ebca978c2f92bf1467e19a7' }, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkTag, { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
                 if (index === 0)
                     this.errorListElement = el;
-            } })))))))), hAsync("form", { key: '995e9a16ab130602237fecb0c35e9e95b27e929c', method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, this.state._requiredText))) : null, hAsync("slot", { key: 'f3b074738cd44195ab6d8960af0a0effee60ed10' }))));
+            } })))))))), hAsync("form", { key: '9076849c5f027e66ca37da072ac15271b19ae464', method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, this.state._requiredText))) : null, hAsync("slot", { key: 'c94ae6cfb941c2a73196cb77361fb74bcaff9d0f' }))));
     }
     async focusErrorList() {
         setTimeout(() => {
@@ -16108,7 +15976,7 @@ class KolHeading {
         this._variant = undefined;
     }
     render() {
-        return (hAsync(KolHeadingWcTag, { key: 'a935fe7395f6e9365c57138b8a19d675b276af55', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant, class: "kol-heading" }, hAsync("slot", { key: '7e766ce153b74e858efb7f986994296ffa82e474', name: "expert", slot: "expert" })));
+        return (hAsync(KolHeadingWcTag, { key: 'd18d1a32f3a8872e62fe7d6c7d9743679bf013ad', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant, class: "kol-heading" }, hAsync("slot", { key: '33dbca9444ebac88573e83027076aca06a2bcfd4', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolHeadingDefaultStyle0
@@ -16186,7 +16054,7 @@ class KolHeadingWc {
         this.validateVariant(this._variant);
     }
     render() {
-        return (hAsync(Host, { key: 'fff4e111e5278ca50a7b764714da2a80518be76e', class: "kol-heading-wc" }, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
+        return (hAsync(Host, { key: '0486dd8c673554b08b07640dace2e2a63d5e8d7a', class: "kol-heading-wc" }, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -16225,7 +16093,7 @@ class KolIcon {
     }
     render() {
         const ariaShow = this.state._label.length > 0;
-        return (hAsync(Host, { key: '77b2bae604877bb233c1c4708708ac33b4a11e04', exportparts: "icon", class: "kol-icon" }, hAsync("i", { key: '12e04d1e29e084b0eed9877e6f8ca9efc9c88743', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
+        return (hAsync(Host, { key: '6f3cb974496a4f84a7e5c0712af1df89e8d09ced', exportparts: "icon", class: "kol-icon" }, hAsync("i", { key: '988ccb3b3521fedb0c39d141cb3e1865b5cfc603', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
     }
     validateIcons(value) {
         watchString(this, '_icons', value, {
@@ -16306,7 +16174,7 @@ class KolImage {
         this.validateSrcset(this._srcset);
     }
     render() {
-        return (hAsync(Host, { key: '1d47e40dfbac69d9e687a65fbfc64acba9ece3e3', class: "kol-image" }, hAsync("img", { key: 'bd14a38c01b146dd2d276ae4b58e65eeb9002995', alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset })));
+        return (hAsync(Host, { key: '976da0c35e4cfec6f956185740885cee765fc2d5', class: "kol-image" }, hAsync("img", { key: 'd9aab0d1ff56a0a63acd16d130a9703fd2fb2d2e', alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset })));
     }
     static get watchers() { return {
         "_alt": ["validateAlt"],
@@ -16344,7 +16212,7 @@ class KolIndentedText {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, { key: '93aaeebc78f2d1a36a7d141e25ed3a8c8c956174', class: "kol-indented-text-wc" }, hAsync("div", { key: 'b8616413c0ebeafe8746f99b42cfd6074795e13c' }, hAsync("slot", { key: '3a7ef569722668ca08d7243049578b48f3afe1ca' }))));
+        return (hAsync(Host, { key: '6097077f44baffeaab91669a12c8e3897f83e46a', class: "kol-indented-text-wc" }, hAsync("div", { key: 'b534e57df62b8714e6bed627268ce784a67490f8' }, hAsync("slot", { key: '99d0151973c297b5f23acfb2217b4c41b58327b6' }))));
     }
     static get style() { return {
         default: KolIndentedTextDefaultStyle0
@@ -16411,18 +16279,18 @@ class KolInput {
         const hasExpertSlot = showExpertSlot(this._label);
         const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
         const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
-        return (hAsync(Host, { key: '8252bdffbfd6563aeaf125b5b67e9d55f2583bda', class: clsx('kol-input', this.getModifierClassNameByMsgType(), {
+        return (hAsync(Host, { key: 'b072543f7641ef363994245d06c7f2bd764f753f', class: clsx('kol-input', this.getModifierClassNameByMsgType(), {
                 disabled: this._disabled === true,
                 error: hasError === true,
                 'read-only': this._readOnly === true,
                 required: this._required === true,
                 touched: this._touched === true,
                 'hidden-error': this._hideError === true,
-            }) }, hAsync("label", { key: '5b687b0fc10212e4ad903975682c571c351f499f', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'a27ab1747c51e0ef950312eae7f6a3eb4fb92cc8', class: "input-label-span" }, hAsync("slot", { key: 'ea7c6f61e71e2f665c55c4240c54358f1f5c65e1', name: "label" }))), hasHint && (hAsync("span", { key: '92a7226e070e588bfb423726a55d88c3ddf33149', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: 'f07afe67765e4e267c633f94fd0ce240a12d97ae', class: {
+            }) }, hAsync("label", { key: 'c1477c93278760eb904c8be41af9e2d616172455', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: '56168b5b34ff6cb4fcf61ee06b10319ac4e5011a', class: "input-label-span" }, hAsync("slot", { key: 'a5d86e031f9de5ab58df928c01b6f3495afa73aa', name: "label" }))), hasHint && (hAsync("span", { key: '9eb13cd9be0d8f3b292e4741b9b5e3a30f87ea57', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '544a5b66396437d9d204377a26b5a7f8b4920aa7', class: {
                 input: true,
                 'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
                 'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
-            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: 'ec32c7a63bddaaa7797d8fcfd1bd6d56870241ed', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '40134dcfd7e5ffeed24b16b4c70ccacf2e7b5c26', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '488299e9041bdbf0ffc7fc93f2fbb1ce838e35cf', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '3f24020b19c35572293fecde959feeecfe0e8847', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '6b5d44a5ae88228110ed4e2d39eea2e3aca2a708', "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showFormFieldMsg && hAsync(FormFieldMsg, { key: 'f41ba0206412d499fe66325e4f3893620c0fb5d5', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '7d4502e1e3a81e2c5e51437a7fafef665a0bb8d6', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: '12acf32b3b95f150100c8f402a739a91dd1e0ab3', class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '9ce173b5e3eb5309ff158796b2de80a35966f5a4', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: 'e6b4a93cca61a4a6ff1957ff46d1701b12dae253' }, translate('kol-characters'))))));
+            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '52f24a7649e61ba65586fa4fcd718af977188b2d', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: 'ca294a18ec2654cf6f645ff3c3fd0810acc671a7', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: 'bf192702fd5569ad649a0df9468b0ed269263226', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: 'cdbd580ebe51b27dbf57a23cf6cb4b9a0dc52c93', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '36299e559eaaf1542fa14aee60ea18ce5ad43d27', "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showFormFieldMsg && hAsync(FormFieldMsg, { key: '1ef7bb15638c51e4905126e53d55c0bd78401014', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '2140b9cf07bc0cc2cd6b68d96c51aea78261c7b6', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: '25ca509e7a4a52187a3b6fc47d66c4d03a241b23', class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '1ed61d7a3113d4a5dcfa88988d16d5c0521c8501', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: 'c460083b600b8b402dc533987cbc542824476036' }, translate('kol-characters'))))));
     }
     getModifierClassNameByMsgType() {
         var _a, _b;
@@ -16821,13 +16689,13 @@ class KolInputCheckbox {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '0d858f4103b2f2deaeea083368509527ac2d0c9a', class: "kol-input-checkbox" }, hAsync(KolInputTag, { key: '3c0d4a465f21daf4ea739cf4e072ccf0ad0caa40', class: {
+        return (hAsync(Host, { key: '24e81e8cf941c8f84a8d8f191e17f2d0a6ce3e3d', class: "kol-input-checkbox" }, hAsync(KolInputTag, { key: '5b1e2f37db302927ded8c14c96473bc60442ad73', class: {
                 checkbox: true,
                 [this.state._variant]: true,
                 'hide-label': !!this.state._hideLabel,
                 checked: this.state._checked,
                 indeterminate: this.state._indeterminate,
-            }, "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '05b3a490fb64fdb41c01b5bdbb915aada95ecc33', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: '8c173ec29e3e8e7a0575a2c6087a32d359606a4b', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '88373905b98825427b374b02308a8cc4c12ef048', class: "icon", _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ key: '0119bfa82028def230f749a9191b3b72b552cdb6', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onInput: this.onInput, onChange: this.onChange, onClick: undefined }))))));
+            }, "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '50ed12ecd0ace678478f27bbcc32f86a974a6e43', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: 'd45fd240a98954594a53ae600183a4b31bf132c2', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '10b9b1a82924e8aac37792514a1f876303447420', class: "icon", _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ key: 'a169b87320d6380d9938fee01c9b9b134034635f', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onInput: this.onInput, onChange: this.onChange, onClick: undefined }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -17100,10 +16968,10 @@ class KolInputColor {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '7ec5a6607822b3da9e446b9ff6ad21845a752268', class: "kol-input-color" }, hAsync(KolInputTag, { key: '55f208a6b126f49cd20030ed7fe58c0a7831a4e9', class: {
+        return (hAsync(Host, { key: 'afba48f148c11fcea78655daef032e2774921205', class: "kol-input-color" }, hAsync(KolInputTag, { key: 'f27891ebbc5c4c0bd959460d3c277efb9ab273ba', class: {
                 color: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '34da623bd0b7dcf86335ed10c212ad525ff210ff', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '2163be206dd6f457b6f15d2af2ff4a22dc981ad9', slot: "input" }, hAsync("input", Object.assign({ key: '133a335adc90b04ef5b7d263038876792ce51c94', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '9222b9ba80eaac4f3a5e581184352837bf029de3', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a0661d6582ec4311214fdca9aa134706218fe53a', slot: "input" }, hAsync("input", Object.assign({ key: 'ce78154c045e5f1cdaf52b35170d2d7571daf8e9', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -17412,10 +17280,10 @@ class KolInputDate {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'f62ca185d17c6f194506d9f3a31cdb9f614aee52', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '2f4dbced7acea32d3da663b1d2ec27d64f13c98a', class: {
+        return (hAsync(Host, { key: '4220dc41de222199dfb25a72b442da7149b7a289', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '30846ab551fb07bb757402090959c42e9da6a82b', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'df00861f1ba40b447b3c89f2c978e67878b13967', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '1ff4bd9d3eb52cccd3eca5647b016a5ef2111d7d', slot: "input" }, hAsync("input", Object.assign({ key: '4ab5956583bb96cfbc6aa6f27042fb1fd17b5258', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'f82498c7a5f3414120bb98d027acf60e06744ef2', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '5b96d92a28c046641153ca10f028cc7bb18928c0', slot: "input" }, hAsync("input", Object.assign({ key: 'bc7c446ca2eb46bf28fbc3fee6bb7e964342d8d8', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -17743,10 +17611,10 @@ class KolInputEmail {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '7153a978ab8ff44388c69456a281b56f1b83f152', class: {
+        return (hAsync(Host, { key: 'd9e5fc37a05a1fa49e0206d45943f8c789bd3780', class: {
                 'kol-input-email': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputTag, { key: '25ad27c2b32f915ebd8bdfb7d800bbd43f5f7627', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '8b4b88a454603fa88aa7a46d59d3b5fdf9717bd0', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '44df2dbc4578846a6a2343ff87de864d6ce083ac', slot: "input" }, hAsync("input", Object.assign({ key: '0276a8091b916905519d85f866fb2bde55d826f1', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
+            } }, hAsync(KolInputTag, { key: '1f252d60c0808ced9529b92e113d782c1c61dbb6', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'f9269342577e13a1955967c354df3745b8e4072f', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '385b7b1c58c3fcb68588d5e8d390f2625e09d381', slot: "input" }, hAsync("input", Object.assign({ key: 'd53a875e911643f0d88fc4be69866e082f561831', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -18005,10 +17873,10 @@ class KolInputFile {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '0a5d4d2e7242bbf3fac94e09c0e9ca13f81aee01', class: "kol-input-file" }, hAsync(KolInputTag, { key: '867da4bd100cee70bb7b80da963a527cf5184f36', class: {
+        return (hAsync(Host, { key: 'c54b21929a1510e62f8b8e2f38c7d101893c2767', class: "kol-input-file" }, hAsync(KolInputTag, { key: '497a5872213a3839bdffe4d680bba054f375f545', class: {
                 file: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e37fdf44af710f54d893383853a0baa256cb2aa4', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'cc5783c7faa18602bf0df3bb7498c396a4562b9b', slot: "input" }, hAsync("input", Object.assign({ key: '9a81b600963d4c3a9d5b85c917d3ab4eb155bf32', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput }))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e5db03b67cfe419b7374a0fb1f59cd078d5e7889', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '5b56a86b918329431d10a7d3392417eb6a5f5306', slot: "input" }, hAsync("input", Object.assign({ key: '1c2714425a93ec6016e483c4aed6594b5ebf459e', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -18279,13 +18147,13 @@ class KolInputNumber {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'ef88979cc8ac1b4b7887eb6842d941b1a5e2426e', class: {
+        return (hAsync(Host, { key: '91783f6017eaa7dcbbced141b8839847daa911e8', class: {
                 'kol-input-number': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputTag, { key: '296adbd12a9f229479073ad5a15bbb34b21a3809', class: {
+            } }, hAsync(KolInputTag, { key: '2a6cb2cd0ca1144ee03b71efceeb845cd3aa3075', class: {
                 number: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '71f2cfd99425309229e04782ecd86f469c15e678', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '797c73f01b19d22cc70ab4df4888bbfb7e3ff16f', slot: "input" }, hAsync("input", Object.assign({ key: '8fb3d39dac9467bde2d72c825960c10a6e57aabd', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '9a7cb3e1fa673ad7cf664db90197d431aa925560', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '85c3571c8bf8b6cbd9ee513fd37844054e594a1e', slot: "input" }, hAsync("input", Object.assign({ key: 'cb013053ba2b6fbd24230994f6c5f9cb02bb979a', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -18510,13 +18378,13 @@ class KolInputPassword {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '12067d2a71093698a9a7d03dcbf0c429e304a15b', class: {
+        return (hAsync(Host, { key: 'b65180af7655e0e88aac633077dddb3c50730ea3', class: {
                 'kol-input-password': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputTag, { key: 'd7be51827d026e4c5cc3b16c8a413ba56e87e2c7', class: {
+            } }, hAsync(KolInputTag, { key: 'b09e33d725665c6eea46c8d339256988e890c4c2', class: {
                 'hide-label': !!this.state._hideLabel,
                 password: true,
-            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '23f30cd20c9974077f8a999ebb74de856aa65b77', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'cff6f56aa84ea31cd36c04860249790b9a49fef4', slot: "input" }, hAsync("input", Object.assign({ key: '2b2abf000507a69dfe08b1950c541858b895fd98', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
+            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '2981d1a6ff67804a9658b13d7cdb54c74b616392', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '43f5a64981d410768399080258ae03a23a3cd441', slot: "input" }, hAsync("input", Object.assign({ key: 'db4867a0d462cb0a207edd0b1025f0302351bc8c', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -18737,14 +18605,14 @@ class KolInputRadio {
     render() {
         const { ariaDescribedBy, hasError } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '25964b8ce817dbcdfeaec4f994cbac692ed34080', class: "kol-input-radio" }, hAsync("fieldset", { key: 'f96f1c47aaf91b33db4ebae637efa6a52915dfe8', class: {
+        return (hAsync(Host, { key: '24f9de4ff11db8aba5b2d8c6c038f93f19324f34', class: "kol-input-radio" }, hAsync("fieldset", { key: '1886a14329f816f6998f559b0ac063b8acf226b8', class: {
                 fieldset: true,
                 disabled: this.state._disabled === true,
                 error: hasError === true,
                 required: this.state._required === true,
                 'hidden-error': this._hideError === true,
                 [this.state._orientation]: true,
-            } }, hAsync("legend", { key: 'a1bf22b21b49797d8d057c20936f803ae1d54d41', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '20fc2a21b1a1958c1301af3a59e6c1dacbc330c7' }, hAsync("span", { key: '4ae034c19584fca0e5494eec5cf89f8c27bc39bb', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this._accessKey === 'string' ? (hAsync(InternalUnderlinedAccessKey, { accessKey: this._accessKey, label: this._label })) : (this._label)))), this.state._options.map((option, index) => {
+            } }, hAsync("legend", { key: 'af6944de35814915086c4d5dc74ec8ad17cf1034', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '8ff0e5957bde7e21edb470567cfa74b528f3bef2' }, hAsync("span", { key: '03381cc1802b3bd249b4aaa27a59f6512327856d', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this._accessKey === 'string' ? (hAsync(InternalUnderlinedAccessKey, { accessKey: this._accessKey, label: this._label })) : (this._label)))), this.state._options.map((option, index) => {
             const customId = `${this.state._id}-${index}`;
             const slotName = `radio-${index}`;
             const selected = this.state._value === option.value;
@@ -18757,7 +18625,7 @@ class KolInputRadio {
                     padding: this.state._hideLabel ? '0' : undefined,
                     visibility: this.state._hideLabel ? 'hidden' : undefined,
                 } }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
-        }), hasError && hAsync(FormFieldMsg, { key: 'fd91a8716bac75d9f6d615679ee1061915d3373b', _alert: this.state._alert, _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }))));
+        }), hasError && hAsync(FormFieldMsg, { key: '8da03360a1a1c33485cc1bd4fa75f6b5179d0ac4', _alert: this.state._alert, _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -19010,13 +18878,13 @@ class KolInputRange {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '81e0a09ea3c9cd1f1f7076d4f36a6197a2111ed1', class: "kol-input-range" }, hAsync(KolInputTag, { key: '542b96a899c40eb826dfdd41cbe885a27a54ea4a', class: {
+        return (hAsync(Host, { key: 'eb243e9c807f8c36c3cd11edf8a010a5144f0e2a', class: "kol-input-range" }, hAsync(KolInputTag, { key: '910302fbe7b5c7eb1dbb4b77ada57211e0094197', class: {
                 range: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'ccb4153647e85a245db10de9e7f711c828b26ffd', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'dd7a1b2ac15ffe9358ebad4bf3d10b87b9c747a0', slot: "input" }, hAsync("div", { key: '0a004152e650b40e2bb5027b10d76950c92f3a75', class: "inputs-wrapper", style: {
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '6c33d4205f3fd42f4866382990c2b54ff705c0c3', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'c3a7fb9fac84afdc0e1e6185dbd7e5d4bba967ed', slot: "input" }, hAsync("div", { key: '7ebc67b2227b02f2612e522d04c4842b813884cb', class: "inputs-wrapper", style: {
                 '--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
-            } }, hAsync("input", Object.assign({ key: 'ef2e7b8f939518f78bc4cd77fe3ec6074a183507', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ key: '59465ba0bc63a8a402b3e1cec978ee7bba6f1b39', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange }))), hasSuggestions && [
-            hAsync("datalist", { key: '1eeb539a5ea03ecf288b3023e3147e58ae32d1b6', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
+            } }, hAsync("input", Object.assign({ key: 'cdf917c6f8505693c5b2309c5d638eb61fe04658', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ key: '990cfd5048c010921ea55eb6e836094b50e2e876', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange }))), hasSuggestions && [
+            hAsync("datalist", { key: '69bf9f5216d51bb46e48875191db608aadb10df3', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
         ]))));
     }
     constructor(hostRef) {
@@ -19232,13 +19100,13 @@ class KolInputText {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '75f1d2d6bd811aa6fa099e7a8e86d263ff202146', class: {
+        return (hAsync(Host, { key: 'd5d16bb0adf2be9984ae68798d4514189a68eda0', class: {
                 'has-value': this.state._hasValue,
                 'kol-input-text': true,
-            } }, hAsync(KolInputTag, { key: '204a0b9deacd31bedff4edca2b7de6e6d9796347', class: {
+            } }, hAsync(KolInputTag, { key: 'f1c247e405bb06c6d3f71229fa36eafc20c8f90d', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '0654dcaa4d8234f727ec101a77560e47e7655b94', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '00755d544d5d2fa017da262de720803e91276c72', slot: "input" }, hAsync("input", Object.assign({ key: 'cb3efe88c8d3ae63a5a69bf44fc04b626315d221', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown }))))));
+            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'a2409bd3131e5d94144df961c817b233ddf095a7', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '433b6fc79d40f2587b58308bb3afb6680f742e8c', slot: "input" }, hAsync("input", Object.assign({ key: 'd88d6840550e2647e9d25d43db8c423019d0653a', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -19500,7 +19368,7 @@ class KolKolibri {
     }
     render() {
         const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
-        return (hAsync(Host, { key: '564ebf5b7bcc35a66ac119a885d840060388952d', class: "kol-kolibri" }, hAsync("svg", { key: 'eab498755abb03ff07828d355b336b763be71729', role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: '150506ef641f670458fa9a767629a692d2db9ef1', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '3a71e89612ccaf509c13a50c307b6fed0088b4ff', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: '62e3558e0d84fa6de0f725cbb9f771d216209c4c', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: 'd7090215e7e76f48658b9efabccac047e47b6f7a', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: 'e70cf3e2dd7940c85ac530e98ad8bdd0b4e13d36', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '948d2b59cd8879af0eacf38f2ba12ece66c3aa86', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '0e96553dc0e8b3796e618154f23adafd9b6061b2', x: "250", y: "525", fill: fillColor }, "KoliBri")))));
+        return (hAsync(Host, { key: '5fa07f54481e954f3ada11dde5d42b88350932d0', class: "kol-kolibri" }, hAsync("svg", { key: '84d3c6b420079d3a8d26bc0eb6a33f5b09471ec6', role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'e64b0df6ca04f01f4b428f04f665bc73fc984f24', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: 'eab9abfd4ff3d50bbd87fbdbf5386be5f7918eb1', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: 'bf7dbd997df13f831cd93c0bd74203ad58a400c6', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: 'b92bc28b3225115e6167ccd64d536c6503516c43', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '4c5eadac3cf237a08d978bd47275a98b75bee325', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '0affb05d6011a26a8323c3e45bd40abdbd1cc5af', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '08b76cb8e49176c705da4f2f3b0e0c7ba7110f97', x: "250", y: "525", fill: fillColor }, "KoliBri")))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -19564,7 +19432,7 @@ class KolLink {
         this._tooltipAlign = 'right';
     }
     render() {
-        return (hAsync(Host, { key: '1943de6c5e79f400f4b9f2d549c00b0a3044ee1b', class: "kol-link" }, hAsync(KolLinkWcTag, { key: '60c7b98abc5685710cb0494d17332bf98323fb63', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'eba837915423de9498203313f8910e61f9959c8d', name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: '8a381f4c68eeb1a70ab27f86dcca9328cc98c50f', class: "kol-link" }, hAsync(KolLinkWcTag, { key: '67b91c5efc3478cf0682711554f9ba8932375667', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '2e275aa4ead87791588f79f80b49b39390ab9c70', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -19620,11 +19488,11 @@ class KolLinkButton {
         this._variant = 'normal';
     }
     render() {
-        return (hAsync(Host, { key: 'e379d1ff0888746b63f0fe337ea2e7639acffa19', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: 'd1cf90829da748ef9519b62506792e33b070e135', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '48b7c1ddbc5bf67ffcd240f66344f2726421e504', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '3c5dd469e4c56704f1b2965d835e6b8062f51830', ref: this.catchRef, class: {
                 button: true,
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '6ed657713353049ad8f72d149284f1fc6f21e67c', name: "expert", slot: "expert" }))));
+            }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '55d4e4041b79de0efc434b0effea997c85a0958c', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -19687,10 +19555,10 @@ class KolLinkGroup {
     }
     render() {
         const ListTag = this.isUl ? 'ul' : 'ol';
-        return (hAsync(Host, { key: '07a4255b5f9864dd79016be898d3c5dde567671d', class: "kol-link-group" }, hAsync(ListTag, { key: '6426f4966bd573f97f627063bc902d721af95efd', "aria-label": this.state._label, class: {
+        return (hAsync(Host, { key: '153895c9059653467587b4f6c8f2282b5ebc8bb3', class: "kol-link-group" }, hAsync(ListTag, { key: '4c6d27071580b94e66bd3a3f59b67e940d1d24c6', "aria-label": this.state._label, class: {
                 vertical: this.state._orientation === 'vertical',
                 horizontal: this.state._orientation === 'horizontal',
-            } }, hAsync(ListItem, { key: '48ca11bd6bb5e3f689a35ad05e910d38656b529b', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
+            } }, hAsync(ListItem, { key: '42e740e727f5a1d92131ef08f4102b35c1a1a105', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
     }
     validateLabel(value, _oldValue, initial = false) {
         if (!initial && this.state._label) {
@@ -19829,13 +19697,13 @@ class KolLinkWc {
     render() {
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '0fa6d3c26b8f6811452572fe341879ffd744b685', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: '39007b3cfd8006d0e492c272c5c4381caffd5d3d', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
+        return (hAsync(Host, { key: '82f9f5d0f689c25163bd6136ca5c34dcb1fd692b', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: 'b7db13f7744362450d778d707e5540558d997ecb', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
                 ? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
                 : undefined, class: {
                 disabled: this.state._disabled === true,
                 'external-link': isExternal,
                 'hide-label': this.state._hideLabel === true,
-            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '5c7f4a512866f3dddf3e1569c89cba531d46b629', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '352558d1520d9039c87992ff9f520d934ce7b210', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '1dc75afd81a923b26abe815aa99b1f6e605e2d8f', class: "external-link-icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: '956395af61a7aa10ff478e0d4af1bc6dee4c3573', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
+            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '74e96d85bcef160e5cb9c0d5676981b32e5abaaf', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'e6f537ca1733bf45673369cb51f9cd0a5ed8d349', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'b41fee1ddbffadab9c2371ff336fadb3ce7abe74', class: "external-link-icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: 'c6e48539bc159d804fd5cff1983a1a652f16a312', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -20149,7 +20017,7 @@ class KolLogo {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: 'b22bb390038db55b19becb3b5a7c07286fe6802e', class: "kol-logo" }, hAsync("svg", { key: 'd043984b885458cffaaab20b87aff94ca76d6cb3', "aria-label": translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } }), role: "img", viewBox: "0 0 225 100" }, hAsync("rect", { key: '77cf2cfe14aaf7ad2171af8b48f8516c462fe7b8', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: 'ded3c8f86cfe1e5ed0072d4a02eec46d65bb1cbb', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '73750e236421e7bd8469290ff190df5c81c2c5b4' })), hAsync("svg", { key: '423cac2465f5b54cdbe2e990b44030867faf4eba', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: 'db677551f809c4c40e2e71f5c225f3e62f35d2b1', width: "5", height: "30" }), hAsync("rect", { key: '9cac865f410a974e74e33eae4efffa1fc7b00dca', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: '0b7d7fd9b8eb41b8401b5ed3d88b0ef5b43d02b6', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '0b8a3e24294ac09963ce5ae4308f084724f1ebe0', x: "50", y: "0" }, hAsync("text", { key: '468bf4e4ab40e4dc05a30c51a32cfc6b4c5987dc', x: "0", y: "-0.05em", "font-family": "BundesSans Web", style: { backgroundColor: 'white', color: 'black' } }, BUND_LOGO_TEXT_MAP.has(this.state._org) ? (hAsync("tspan", null, (_a = BUND_LOGO_TEXT_MAP.get(this.state._org)) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
+        return (hAsync(Host, { key: 'f90b9eb725f5b4f91f75bac9b4dfaf1133f8b811', class: "kol-logo" }, hAsync("svg", { key: '964e79a52eeed741a496d403c3091ee777274f22', "aria-label": translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } }), role: "img", viewBox: "0 0 225 100" }, hAsync("rect", { key: 'd2a5552316874a4e7227d97161e24c218fd9075b', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: 'a2eec4b28bd7914394488fc1254a2c06112cd654', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '237cda1d159ca7a744a2a95db53b1d984540a5d7' })), hAsync("svg", { key: 'a0ce2abe404ba2aa2d3d08738b130a333990ad75', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: '51cc93247982b30b6c340385d86f7e81b13265aa', width: "5", height: "30" }), hAsync("rect", { key: 'a39a2992ab3ea869026c065b9d85b6eb6552fc17', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: '7be8ea205996ee15a2969e68547ff93d4c32b02e', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: 'fe5a7fcbf4e373e85cb0e42eb4766f53d0369161', x: "50", y: "0" }, hAsync("text", { key: 'a48b054b6c6cd67d5d55895d3c5d78434737ee6b', x: "0", y: "-0.05em", "font-family": "BundesSans Web", style: { backgroundColor: 'white', color: 'black' } }, BUND_LOGO_TEXT_MAP.has(this.state._org) ? (hAsync("tspan", null, (_a = BUND_LOGO_TEXT_MAP.get(this.state._org)) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
             return (hAsync("tspan", { x: "0", dy: "1.1em", key: `kol-logo-text-${index}` }, text));
         }))) : (hAsync("tspan", { fill: "red" }, hAsync("tspan", { x: "0", dy: "1.1em" }, "Der Schl\u00FCsselwert"), hAsync("tspan", { x: "0", dy: "1.1em", "font-weight": "bold" }, "'", this.state._org, "'"), hAsync("tspan", { x: "0", dy: "1.1em" }, "ist nicht definiert."), hAsync("tspan", { x: "0", dy: "1.1em" }, "oder freigegeben."))))))));
     }
@@ -20321,16 +20189,16 @@ class KolModal {
         }
     }
     render() {
-        return (hAsync(Host, { key: '823d0d36a88aa730a81d73a9007d6d5a7866a1c0', class: "kol-modal", ref: (el) => {
+        return (hAsync(Host, { key: 'cdf90127b1e3a6494acc2cd6f9e70245f0e78327', class: "kol-modal", ref: (el) => {
                 this.hostElement = el;
-            } }, this.state._activeElement && (hAsync("div", { key: '1489545d109e0a82397291dbb582259e73dab952', class: "overlay" }, hAsync("div", { key: 'ccc4f3ce8d91b922e89c708df5087af76a203c8d', class: "modal", style: {
+            } }, this.state._activeElement && (hAsync("div", { key: '786de2516f2d40b3d31fa8fd89e905bf4d05c35f', class: "overlay" }, hAsync("div", { key: '22425204eaa3a2a133c8ea8e272356d0ffcb4aee', class: "modal", style: {
                 width: this.state._width,
             }, "aria-label": this.state._label, "aria-modal": "true", role: "dialog", onKeyDown: this.onKeyDown, ref: (el) => {
                 if (el) {
                     el.setAttribute('tabindex', '0');
                     setTimeout(() => el.focus(), 250);
                 }
-            } }, hAsync("slot", { key: '77a31b65806fae411401e7ce9963eeb3a6bfc975' }))))));
+            } }, hAsync("slot", { key: '9762249853efc9159e664ff78bbb503fe7165d4e' }))))));
     }
     validateActiveElement(value) {
         watchValidator(this, '_activeElement', (value) => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
@@ -20505,11 +20373,11 @@ class KolNav {
         const collapsible = this.state._collapsible === true;
         const hideLabel = this.state._hideLabel === true;
         const orientation = this.state._orientation;
-        return (hAsync(Host, { key: '183535b1ea254c589c41a6f7b13c23b93bf41379', class: "kol-nav" }, hAsync("div", { key: 'ef813951ec5ddfd2139476f7320236c92000ed4e', class: {
+        return (hAsync(Host, { key: 'e1283eeb0574940f509d54be36e39b04bb961da4', class: "kol-nav" }, hAsync("div", { key: '1c46dd45b99ca748a2624d17f359a3cfc7809852', class: {
                 nav: true,
                 [orientation]: true,
                 'is-compact': this.state._hideLabel,
-            } }, hAsync("nav", { key: 'ff607ae4541711d1debc47d8f7b2e2f90b3c7848', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '1458f14eed003f51efaffca7fc573a70b487f687', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: 'a45d8778000d659cb3fa28b59b1117d0a35d68e2', class: "compact" }, hAsync(KolButtonTag, { key: 'cee20b7e768e41f856451c4f85c42f2ebcfe2fc6', _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
+            } }, hAsync("nav", { key: 'd23205b77dfed032f7f44f2e7d36bce5450c7ac2', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'bb988b5cea41ad49060a4b5e5081bae0eae1576c', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: 'ea122511b46cddbb705f829c2edb2a75c951c2b7', class: "compact" }, hAsync(KolButtonTag, { key: '0e8c5c86aea8f2c626c62b5eba3e8dfe2b4e45c7', _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
                 onClick: () => {
                     this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
                 },
@@ -22981,7 +22849,7 @@ class KolPopover {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'ec04943dbf11e2fecb42ea74126500179f6924bc', ref: this.catchHostAndTriggerElement, class: "kol-popover-wc" }, hAsync("div", { key: '2d191ed96a7617ab8047846268ab0778e436651f', class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { key: '7469fccc90fe09e1cd6fd5745e6c74fd3a939f64', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: 'f49f41eacdddfe7220a03b15f8a3824e9bdd2875' }))));
+        return (hAsync(Host, { key: '300c5938b894d91a742353f79f6a96da6f4fc59f', ref: this.catchHostAndTriggerElement, class: "kol-popover-wc" }, hAsync("div", { key: 'f1141877e7fe0cf9118e32012dcbaccf443d6067', class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { key: 'a4d43160414c7a0ed78edd1c7a04b88446c77e63', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '8a65a9097d526128e6b548133f98eb7578314944' }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -23057,7 +22925,7 @@ class KolProcess {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'd00230ac82a3d969c6b689afc768486d638cf42d', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: '57180ae5e6cc44e673825d6b4d1aee75d415d58f', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '447fa6a94aa4d30000f268c42ede1b43003a9dcd', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
+        return (hAsync(Host, { key: '1b2fd8a4d1aa5c22458d9bdfc9a4e5dd445fad4b', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: '7bae4af9ebda7668022a90cc52706b849618c03f', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: 'c9195793cc06eac202d9e760d7613a7441492e0f', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -23166,9 +23034,9 @@ class KolQuote {
     }
     render() {
         const hasExpertSlot = showExpertSlot(this.state._quote);
-        return (hAsync(Host, { key: '8fe24b09250355f61f95ace6d3a7ff7a0ca9c015', class: "kol-quote" }, hAsync("figure", { key: 'a916ed560de84fff1f4161bdf1cad7611a9f5123', class: {
+        return (hAsync(Host, { key: '06071e4062c3dad31dc54678b3809cda9d97bec3', class: "kol-quote" }, hAsync("figure", { key: 'a1ddfd8830f510be2acb2511e142168e9c57435a', class: {
                 [this.state._variant]: true,
-            } }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '506a414efe320052356a9c5da54cd3d4956b894b' }, hAsync("cite", { key: '697c973dd034939dd561716fe69e2878c73d79e9' }, hAsync(KolLinkTag, { key: 'e2d0feb284f831d95d401654198c30705541914d', _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
+            } }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '27b79e60e46de28765eefaf8859bf54ab2cc0596' }, hAsync("cite", { key: '3522b8bdb372c71e24d1bed45616326f535e7a4f' }, hAsync(KolLinkTag, { key: '3a5fb98869d14d343a7b184d887d057ae6e6cc2b', _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -23309,10 +23177,10 @@ class KolSelect {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'd411396c04b6e2f2fc6a707033c47e40abef6dc4', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '06b5b1350883caf01e429215928c819526390f52', class: {
+        return (hAsync(Host, { key: '281965cb420409ea118d2a8b70f5cd08d9d9bd00', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'd64734967e6f8c8670b4fce43656c0ed6e968067', class: {
                 'hide-label': !!this.state._hideLabel,
                 select: true,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'f031ebc4fb27e5cd39cc526e315477605edc3126', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'ad2d2a3358029742e7df11e69db1b9d12c28cede', slot: "input" }, hAsync("select", Object.assign({ key: '7347d688e31351ef035eda2528351792197fc3e3', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this) }), this.state._options.map((option, index) => {
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '3d6e5e1d5078fcc8b887a31a6d830f11c9ba7191', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '018c2855120bc9774e561195cd73add25131b756', slot: "input" }, hAsync("select", Object.assign({ key: '017a457ddff0db9a6d9e0ee432693705be666ea4', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this) }), this.state._options.map((option, index) => {
             const key = `-${index}`;
             if (Array.isArray(option.options)) {
                 return this.renderOptgroup(option, key);
@@ -23526,7 +23394,7 @@ class KolSkipNav {
         };
     }
     render() {
-        return (hAsync(Host, { key: '4189a5e9bde07227bc967d37d600c238465be963', class: "kol-skip-nav" }, hAsync("nav", { key: 'c3ef6425ec82a160fdcfec91e09b7aa18247ebe1', "aria-label": this.state._label }, hAsync("ul", { key: '73402e8b142b62519d3bc82a2a09cfa50dec87a5' }, this.state._links.map((link, index) => {
+        return (hAsync(Host, { key: '62f4060670b0fed1dc581206f5f36df9704d7656', class: "kol-skip-nav" }, hAsync("nav", { key: '15f57db51b516c5b8909cad29e7119f083e39c25', "aria-label": this.state._label }, hAsync("ul", { key: 'e05945c95e92c1c673a53e241ff7d262d5fa3bd4' }, this.state._links.map((link, index) => {
             return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
         })))));
     }
@@ -23582,7 +23450,7 @@ class KolSpan {
         this._label = undefined;
     }
     render() {
-        return (hAsync(KolSpanWcTag, { key: 'e4e87df188f9ef1b57766e578e09259dd40c5201', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey, class: "kol-span" }, hAsync("slot", { key: 'c76f75ff17b84e0b9a03e4336238fdfbc50a5855', name: "expert", slot: "expert" })));
+        return (hAsync(KolSpanWcTag, { key: 'ee9f6e5d82f7ec05e39bf110b919fcddc151e51c', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey, class: "kol-span" }, hAsync("slot", { key: 'c2e215b6a57d768e70838584bef7f68f16869c05', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolSpanDefaultStyle0
@@ -31946,10 +31814,10 @@ class KolSpanWc {
     render() {
         var _a, _b, _c, _d, _e;
         const hideExpertSlot = !showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '783a00de1c1feb9772f5df59d7ba4083b16b3c0a', class: {
+        return (hAsync(Host, { key: 'e510f5dc275004bb1201d767d3c4f6b1b111bdab', class: {
                 'kol-span-wc': true,
                 'hide-label': !!this.state._hideLabel,
-            } }, this.state._icons.top && (hAsync(KolIconTag, { key: '4a184128186f52bf43e9fd777693b53b81c69905', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: '4ca6db6f5c26d62468a60b5941cc17762962e389' }, this.state._icons.left && (hAsync(KolIconTag, { key: 'ea2fbb18509df157dbf9221b49cf3ddb5a21acb4', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._accessKey && this.state._label.length ? (hAsync(InternalUnderlinedAccessKey, { label: this.state._label, accessKey: this.state._accessKey })) : ((_c = this.state._label) !== null && _c !== void 0 ? _c : '')))) : (''), hAsync("span", { key: '316e91071dd0bd0df741d33077d8e6cbf866d14d', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: 'c59e7e8ee29e2a00348542eb050ac38fddea7a63', name: "expert" })), this.state._accessKey && (hAsync("span", { key: '1ff6ebe4bc18703010a4645bd57311b554eb1add', class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync(KolIconTag, { key: 'ce04705610910b5a9192cb3ead355565d202b2bc', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: 'f6257ff06166997e46f30ba7cd15b205a827be42', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
+            } }, this.state._icons.top && (hAsync(KolIconTag, { key: '2554e38751a822efe5e7150a19083ee0a911da4c', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: 'ce63ae4e376293fb190d7100e691a9ebadd6d260' }, this.state._icons.left && (hAsync(KolIconTag, { key: '5adba55d5d8b919c9c800642ab1d7951304f956e', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._accessKey && this.state._label.length ? (hAsync(InternalUnderlinedAccessKey, { label: this.state._label, accessKey: this.state._accessKey })) : ((_c = this.state._label) !== null && _c !== void 0 ? _c : '')))) : (''), hAsync("span", { key: '74d5b1e1b8ec86eb74195f6a53ae0dd817c6afbc', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '436b3c15ff051a5dfb143f31f4c2d179166a6a42', name: "expert" })), this.state._accessKey && (hAsync("span", { key: 'cfc776df99c587e283569617f2b2e99f99e9c8ac', class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync(KolIconTag, { key: 'a0e42c2487db4cb4b5cc3449e58aece39411c741', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: 'c87ec45ce7ed99f51a23586ab033130763e96164', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -32027,7 +31895,7 @@ class KolSpin {
         };
     }
     render() {
-        return (hAsync(Host, { key: '3a9df834f40a96c6d26795e41418611ce092ec82', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
+        return (hAsync(Host, { key: 'f53191060ef62b54c4ffdee2c31994a5b336cc42', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
                 spin: true,
                 [this.state._variant]: true,
             }, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
@@ -32133,12 +32001,12 @@ class KolSplitButton {
     }
     render() {
         const i18nDropdownLabel = 'kol-split-button-dropdown-label';
-        return (hAsync(Host, { key: 'bcf84f03e9bac2aca1b64b209c47feee77b1c12b', class: "kol-split-button" }, hAsync(KolButtonWcTag, { key: '9d72346bca0a38e55f6a154a2b4c44d22f614bc3', class: {
+        return (hAsync(Host, { key: '577e9b8c7a01714e07fda6c20be8b550ceec7a41', class: "kol-split-button" }, hAsync(KolButtonWcTag, { key: 'aa76711ab35310847527db57f8d0eef9d8335e66', class: {
                 'main-button': true,
                 button: true,
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '774d988e334f3bc122bb6193cfb33bb268bd5bb6', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: 'c1da46ad33f7e91864c557ece3001253d05d8228', class: "secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler }), hAsync("div", { key: '88ce2d63c2a0c074bba4439d92c6ca623b5e38f8', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: 'c27f04ab4087e92f510acdff4990412a3945b13d', class: "popover-content" }, hAsync("slot", { key: '52ff1bab37fdf7a7b46bce4335861c8089fdf670' })))));
+            }, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '4c1c1b823d00042ab3994a1977bc7e56a349d0eb', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '68e6c444187f0c23a1826525fc6e2aa75656225b', class: "secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler }), hAsync("div", { key: 'd4d0c8ade557050fae42d93b9aa62c0f88eae065', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: '2746ac0256c4527da54f26f8a45ae1616ab396cb', class: "popover-content" }, hAsync("slot", { key: 'dd32316292731dad9385af76f50e605db6098013' })))));
     }
     static get style() { return {
         default: KolSplitButtonDefaultStyle0
@@ -32184,7 +32052,7 @@ class KolSymbol {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'ab734cc9e6d2efe073178e7808f770e9bad66587', class: "kol-symbol" }, hAsync("span", { key: 'fb37efad892479268550fe017b1256c12d6ae468', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
+        return (hAsync(Host, { key: 'fd0af666653696ea6411cd6d9725c02c7b043aac', class: "kol-symbol" }, hAsync("span", { key: 'e8bf06ac3129716bce0a1138e7ee9fc12d7ba669', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -32231,7 +32099,7 @@ class KolTable {
         this._paginationPosition = 'bottom';
     }
     render() {
-        return (hAsync(KolTableStatefulTag, { key: '94800c6fdc5cfe781fa9edfe7e4c5fe366ff052b', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition }));
+        return (hAsync(KolTableStatefulTag, { key: '2fa55ce67702810dbcead3fbc5416da5333a83a8', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition }));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -32565,7 +32433,7 @@ class KolTableStateful {
             horizontal: (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
             vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
         };
-        return (hAsync(Host, { key: '6beae5b0e089bb81c12eea3d1621a21a547d1fc0', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessTag, { key: 'e4ffbb145e4484c347ebd03ca93836ab16248b64', _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
+        return (hAsync(Host, { key: '541f6b9870f00c0055d3aee0f17f98ada2dbcf50', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessTag, { key: '40d80660d9e9e5dd5be33035f7e311178dc4e9c6', _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -32618,7 +32486,7 @@ class KolTableStateless$1 {
         this._on = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '4f1ac19dd85205d12ce291d06978889039b5b7b7', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: '07818093c07afa376810b5d2d4b3518e2c531226', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on })));
+        return (hAsync(Host, { key: '5a8bbdc836f6588ca1124b93d9214f772e28166c', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: 'c3b088e32b37a9736925366d2fa03b8b5f8366e1', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on })));
     }
     static get style() { return {
         default: KolTableStatelessDefaultStyle0
@@ -32929,9 +32797,9 @@ class KolTableStateless {
     }
     render() {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
-        return (hAsync(Host, { key: '361f1522f1781a9499491ed2568c385a80b24ac2', class: "kol-table-stateless" }, hAsync("div", { key: 'a26e21dd976ecfef8e9b0cb2e7f72a7df1111cfb', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '448af685785f16f956526571a290d3b3a5245ceb', style: {
+        return (hAsync(Host, { key: 'c9b39f96474ce8823023d795cc6e0045a6274f6f', class: "kol-table-stateless" }, hAsync("div", { key: '74701c4df7b4893d3aaa3b0076833bf4387d81bf', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '3d2c8cf625a7691d27b8bef847eea6b78c189fa3', style: {
                 minWidth: this.state._minWidth,
-            } }, hAsync("div", { key: '366e0cb3589af60dfa73a30e7e1ad10f21a0b731', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'f4a9ea083af48b6dbaa77ca73f42b7d421165448', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'aea605830f1e5041003f9168f8c90ea646a81f8e' }, this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, cols.map((cell, colIndex) => {
+            } }, hAsync("div", { key: '6e2102c988e7d10aeef90b98d0e79c98f4bd0ccf', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: '12d75c33f91621cf233473d4e7c3cf615e4fa0e9', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '3cd7592b87e9169a1f073d38dbf1cd304500bd15' }, this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, cols.map((cell, colIndex) => {
             if (cell.asTd === true) {
                 return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
                         [cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
@@ -32947,7 +32815,7 @@ class KolTableStateless {
             else {
                 return this.renderHeadingCell(cell, rowIndex, colIndex);
             }
-        })))))), hAsync("tbody", { key: '4f6e9bb613569b8ee24551a7b00aa067225933fd' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
+        })))))), hAsync("tbody", { key: '3b77b39bdaab0c831a45d23355dd265028f6dbb1' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
     }
     static get watchers() { return {
         "_data": ["validateData"],
@@ -33125,11 +32993,11 @@ class KolTabs {
             } }))));
     }
     render() {
-        return (hAsync(Host, { key: 'f01547458b7f4a342aa50e5adc064c6f67a71e88', class: "kol-tabs" }, hAsync("div", { key: '26a31eb970f8c1817628cf5d5d83b33e1c258638', ref: (el) => {
+        return (hAsync(Host, { key: 'e36b32000d1ea25d35f8fba6f67a5c6aa57543b8', class: "kol-tabs" }, hAsync("div", { key: '37f564d3a8f5998a277293e8d2100de5f6efc99e', ref: (el) => {
                 this.tabPanelsElement = el;
             }, class: {
                 [`tabs-align-${this.state._align}`]: true,
-            } }, this.renderButtonGroup(), hAsync("div", { key: '97b2c1543748b6eede26fc73a7fb524110c519f6', class: "tabs-content", ref: this.catchTabPanelHost }))));
+            } }, this.renderButtonGroup(), hAsync("div", { key: '8acaea80ef08b28174c3502d8b502c8b7abb1008', class: "tabs-content", ref: this.catchTabPanelHost }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -33334,7 +33202,7 @@ class KolTextarea {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '7b6b045e439e53ec653ceb240e8c604dc9b436d4', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '036cf5bd8a3f3c5f693098995c6b6994615c035a', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '1a0e8e2c0a5a4d9cef54cfa40496685f5a28ec45', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '1aa8d9423b71f83d2ac424907ba5cdd0547d1d15', slot: "input" }, hAsync("textarea", Object.assign({ key: 'aa2ca49a5d4045abb7cb793853c1e83a25c0342f', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput, style: {
+        return (hAsync(Host, { key: '67bb77454b3cdaf1c8a59d8922f96cf1f6fad122', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '144962ff9ceae7342e7f77b0d571ffe1da7d5d91', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'c984e1c64ca8fcfe4461d9fa58d46c61e4172d33', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '2ad8230de55cc7383a7155bb990a39742619f74a', slot: "input" }, hAsync("textarea", Object.assign({ key: '940a4da1e41065482cd18a80f1582ba203721af7', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput, style: {
                 resize: this.state._resize,
             }, value: this.state._value }))))));
     }
@@ -33601,7 +33469,7 @@ class KolToastContainer {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'c9167d0aed31339d3ec0cd47e9b3d30006d1e8b2', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'ef99e4b54046120ac4daca9e22a94a6da225452e', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
+        return (hAsync(Host, { key: '4b44fe3b919950fa399f60e3c0e678e50274ca81', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'f9c329569fc33360f6730a6c4bbcf9eb5e2fc67b', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
                 onClick: () => {
                     void this.closeAll();
                 },
@@ -33755,7 +33623,7 @@ class KolTooltip {
         this.showOrHideTooltip();
     }
     render() {
-        return (hAsync(Host, { key: '606656aa9d71f02ffb45c3902c52a4b35defaef0', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: '98acb3ad1606e1da176c357ac86de22bdb99406a', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: '9e5260da7e0b3f219bf2090ed6806c79338b940b', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: 'e9c82c8d916b63b90f874277623e5d2673fb4aaf', class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
+        return (hAsync(Host, { key: '2838ea3d5f84699772717fd00308bb63e190c5b5', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: 'd0140b5288f11f179ebe4956018a9592f890dcb1', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: '7702db6cbcb4bc11d2ad5707f6ed74361825d0ab', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: 'c056746633c094caf92e3f48dfd728fb33d8c922', class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -33834,7 +33702,7 @@ class KolTree {
         this._label = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '7fb0370d2bd869cae047d1d93d217ed76768a37c', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'd2b089ac34d715abb82d6e5cb58dfbad820b08ec', _label: this._label }, hAsync("slot", { key: 'e67c5ca8ae0ac9dc3b58440e491ac4c5bd32e604' }))));
+        return (hAsync(Host, { key: 'b8f702c2c3a146c116716fefc665a3868be8c43c', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'd4c1893cc63355e9061792e297e6550e620f2887', _label: this._label }, hAsync("slot", { key: 'd60ceef03740e10316c0d282800b73965f6c48e0' }))));
     }
     static get style() { return {
         default: KolTreeDefaultStyle0
@@ -33882,7 +33750,7 @@ class KolTreeItem {
         return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
     }
     render() {
-        return (hAsync(KolTreeItemWcTag, { key: 'd5ed06ad238ea5922caaab26e7804b78e8ce6517', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'd02db21c6f8998a1191a1e971036f3a45969bc21' })));
+        return (hAsync(KolTreeItemWcTag, { key: 'a69b8e45457c1e0e153610d0820dd6e2a93d6ea3', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'f9878c6fae30f9be9cfdb6074a41a2608244f2f7' })));
     }
     static get style() { return {
         default: KolTreeItemDefaultStyle0
@@ -33922,11 +33790,11 @@ class KolTreeItemWc {
         this._href = undefined;
     }
     render() {
-        return (hAsync(Host, { key: 'b3058dcc621821256492665617a6421f497bb233', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '85bbb43bdf5aba8f48b1d55b7d03f4e0a3abf65d', class: "tree-item" }, hAsync(KolLinkTag, { key: 'edd4f9bb5c69d090a66ef8d98f082a014a610cb9', class: {
+        return (hAsync(Host, { key: '1011a3769ceefaf5be42707c8fbf8d390ba0d5e0', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '47aac7e77d5cf17468692fe0049f47b92ec0794e', class: "tree-item" }, hAsync(KolLinkTag, { key: '8893830dd17d545cd41d97f616cbdf08ca36326a', class: {
                 'tree-link': true,
                 active: Boolean(this.state._active),
-            }, _label: "", _href: this.state._href, ref: (element) => (this.linkElement = element), _tabIndex: this.state._active ? 0 : -1 }, hAsync("span", { key: '1ba7382e90c24efbbbad305c907235211000a383', slot: "expert" }, this.state._hasChildren &&
-            (this.state._open ? (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleCollapseClick(event) }, "-")) : (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleExpandClick(event) }, "+"))), ' ', this.state._label)), hAsync("ul", { key: 'ae27024bd43d804286b81e39c8de554baa5f59d5', hidden: !this.state._hasChildren || !this.state._open, role: "group" }, hAsync("slot", { key: '3ee85c3bddc97a3b7e79aecc0bf7ea5113038860' })))));
+            }, _label: "", _href: this.state._href, ref: (element) => (this.linkElement = element), _tabIndex: this.state._active ? 0 : -1 }, hAsync("span", { key: '3d9dd2cc87cc41cad7cca4d3ccc981db0066e893', slot: "expert" }, this.state._hasChildren &&
+            (this.state._open ? (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleCollapseClick(event) }, "-")) : (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleExpandClick(event) }, "+"))), ' ', this.state._label)), hAsync("ul", { key: 'aa684b3054ecefd83f212fcdb4890eeff1ce7545', hidden: !this.state._hasChildren || !this.state._open, role: "group" }, hAsync("slot", { key: '96503129fae60d97d8cc7e421c303a6f94840e02' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);
@@ -34022,7 +33890,7 @@ class KolTreeWc {
         validateLabel(this, value);
     }
     render() {
-        return (hAsync(Host, { key: '563245852e49deeb88c8ff5be2794194e08382c1', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: '9c8232025aa46657399c517c2940998e2e1937be', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: 'cc0f70c0e0ecb9a065954a5d20a5b49c5215fd8e', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '54d25e4f5e7bc3c303680118289243b8e2ed1932' })))));
+        return (hAsync(Host, { key: '2a7d6c44d79e4865fbf43834a7c5e5eb09ad9302', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'c06f3add4871974aa4e06c8ca0547a9c990efd8a', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '8c0d782c7b0cf4bd88dbab8629738b60429a988c', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '11086a8f0d7cb80a187a459ff9e3dcff121310df' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === TREE_ITEM_TAG_NAME.toUpperCase();
@@ -34179,7 +34047,7 @@ class KolVersion {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'bf254208984076cc339cb203d8cfae8ea4f0e9ff', class: "kol-version" }, hAsync(KolBadgeTag, { key: 'cca74e3a61432cf3cbc72c8cb221fd187395dea8', _color: "#bec5c9", _icons: {
+        return (hAsync(Host, { key: '252159679fb88587d2ae6df7479df43f255ff3e2', class: "kol-version" }, hAsync(KolBadgeTag, { key: '2d2f8e44d6f08eedfe2e2e33ef3c8abec3ea8e1c', _color: "#bec5c9", _icons: {
                 left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
             }, _label: this.state._label })));
     }