@public-ui/hydrate 2.0.9 → 2.0.11

package/dist/index.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v4.12.5 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v4.13.0 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -385,6 +385,14 @@ class MockCustomElementRegistry {
         }
         return undefined;
     }
+    getName(cstr) {
+        for (const [tagName, def] of this.__registry.entries()) {
+            if (def.cstr === cstr) {
+                return tagName;
+            }
+        }
+        return undefined;
+    }
     upgrade(_rootNode) {
         //
     }
@@ -7458,7 +7466,7 @@ function rgba(str) {
 
 var rgbaConvert = rgbaConvert$1.exports;
 
-var n=.2126,r=.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+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))}function f(n){return n>=7?"AAA":n>=4.5?"AA":n>=3?"AA Large":"Fail"}
+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))}function f(n){return n>=7?"AAA":n>=4.5?"AA":n>=3?"AA Large":"Fail"}
 
 var colorName = {
 	"aliceblue": [240, 248, 255],
@@ -8942,6 +8950,10 @@ const validateMax = (component, value, options) => {
   watchNumber(component, "_max", value, options);
 };
 
+const validateMsg = (component, value) => {
+  watchValidator(component, `_msg`, (value2) => typeof value2 === "object", /* @__PURE__ */ new Set(["Object"]), value);
+};
+
 const validateMultiple = (component, value) => {
   watchBoolean(component, "_multiple", value);
 };
@@ -9040,8 +9052,6 @@ const orientationOptions = ["horizontal", "vertical"];
 var KoliBriProgressVariantEnum = /* @__PURE__ */ ((KoliBriProgressVariantEnum2) => {
   KoliBriProgressVariantEnum2["bar"] = "bar";
   KoliBriProgressVariantEnum2["cycle"] = "cycle";
-  KoliBriProgressVariantEnum2["cycle-value-label"] = "cycle-value-label";
-  KoliBriProgressVariantEnum2["cycle-label-value"] = "cycle-label-value";
   return KoliBriProgressVariantEnum2;
 })(KoliBriProgressVariantEnum || {});
 
@@ -9426,24 +9436,29 @@ const createTime = (e, t = "") => {
 let scopeId, contentRef, hostTagName, useNativeShadowDom = !1, checkSlotFallbackVisibility = !1, checkSlotRelocate = !1, isSvgMode = !1;
 
 const createElm = (e, t, o, n) => {
- const s = t.$children$[o];
- let l, a, r, i = 0;
- if (!useNativeShadowDom && (checkSlotRelocate = !0, "slot" === s.$tag$ && (scopeId && n.classList.add(scopeId + "-s"), 
- s.$flags$ |= s.$children$ ? 2 : 1)), null !== s.$text$) l = s.$elm$ = doc.createTextNode(s.$text$); else if (1 & s.$flags$) l = s.$elm$ = slotReferenceDebugNode(s) ; else {
-  if (!isSvgMode && (isSvgMode = "svg" === s.$tag$), l = s.$elm$ = doc.createElementNS(isSvgMode ? "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml", 2 & s.$flags$ ? "slot-fb" : s.$tag$) , 
-  isSvgMode && "foreignObject" === s.$tag$ && (isSvgMode = !1), updateElement(null, s, isSvgMode), 
-  null != scopeId && l["s-si"] !== scopeId && l.classList.add(l["s-si"] = scopeId), 
-  s.$children$) for (i = 0; i < s.$children$.length; ++i) a = createElm(e, s, i, l), 
-  a && l.appendChild(a);
-  ("svg" === s.$tag$ ? isSvgMode = !1 : "foreignObject" === l.tagName && (isSvgMode = !0));
+ var s;
+ const l = t.$children$[o];
+ let a, r, i, d = 0;
+ if (!useNativeShadowDom && (checkSlotRelocate = !0, "slot" === l.$tag$ && (scopeId && n.classList.add(scopeId + "-s"), 
+ l.$flags$ |= l.$children$ ? 2 : 1)), null !== l.$text$) a = l.$elm$ = doc.createTextNode(l.$text$); else if (1 & l.$flags$) a = l.$elm$ = slotReferenceDebugNode(l) ; else {
+  if (!isSvgMode && (isSvgMode = "svg" === l.$tag$), a = l.$elm$ = doc.createElementNS(isSvgMode ? "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml", 2 & l.$flags$ ? "slot-fb" : l.$tag$) , 
+  isSvgMode && "foreignObject" === l.$tag$ && (isSvgMode = !1), updateElement(null, l, isSvgMode), 
+  null != scopeId && a["s-si"] !== scopeId && a.classList.add(a["s-si"] = scopeId), 
+  l.$children$) for (d = 0; d < l.$children$.length; ++d) r = createElm(e, l, d, a), 
+  r && a.appendChild(r);
+  ("svg" === l.$tag$ ? isSvgMode = !1 : "foreignObject" === a.tagName && (isSvgMode = !0));
  }
- return l["s-hn"] = hostTagName, 3 & s.$flags$ && (l["s-sr"] = !0, 
- l["s-cr"] = contentRef, l["s-sn"] = s.$name$ || "", r = e && e.$children$ && e.$children$[o], 
- r && r.$tag$ === s.$tag$ && e.$elm$ && (putBackInOriginalLocation(e.$elm$, !1))), 
- l;
+ return a["s-hn"] = hostTagName, 3 & l.$flags$ && (a["s-sr"] = !0, 
+ a["s-cr"] = contentRef, a["s-sn"] = l.$name$ || "", a["s-rf"] = null === (s = l.$attrs$) || void 0 === s ? void 0 : s.ref, 
+ i = e && e.$children$ && e.$children$[o], i && i.$tag$ === l.$tag$ && e.$elm$ && (putBackInOriginalLocation(e.$elm$, !1))), 
+ a;
 }, putBackInOriginalLocation = (e, t) => {
  plt.$flags$ |= 1;
- const o = e.childNodes;
+ const o = Array.from(e.childNodes);
+ if (e["s-sr"] && BUILD.experimentalSlotFixes) {
+  let t = e;
+  for (;t = t.nextSibling; ) t && t["s-sn"] === e["s-sn"] && t["s-sh"] === hostTagName && o.push(t);
+ }
  for (let e = o.length - 1; e >= 0; e--) {
   const n = o[e];
   n["s-hn"] !== hostTagName && n["s-ol"] && (parentReferenceNode(n).insertBefore(n, referenceNode(n)), 
@@ -9565,7 +9580,8 @@ const createElm = (e, t, o, n) => {
       }
      }
      (!o && e !== t.parentNode || t.nextSibling !== o) && t !== o && (t["s-hn"] || !t["s-ol"] || (t["s-hn"] = t["s-ol"].parentNode.nodeName), 
-     e.insertBefore(t, o), 1 === t.nodeType && (t.hidden = null !== (l = t["s-ih"]) && void 0 !== l && l));
+     e.insertBefore(t, o), 1 === t.nodeType && (t.hidden = null !== (l = t["s-ih"]) && void 0 !== l && l)), 
+     t && "function" == typeof r["s-rf"] && r["s-rf"](t);
     } else 1 === t.nodeType && (o && (t["s-ih"] = null !== (a = t.hidden) && void 0 !== a && a), 
     t.hidden = !0);
    }
@@ -9722,7 +9738,7 @@ const callRender = (e, t, o, n) => {
  return e;
 }, initializeComponent = async (e, t, o, n) => {
  let s;
- if (0 == (32 & t.$flags$)) {
+ if (!(32 & t.$flags$)) {
   t.$flags$ |= 32;
   const n = o.$lazyBundleId$;
   if (n) {
@@ -9756,7 +9772,7 @@ const callRender = (e, t, o, n) => {
 }, fireConnectedCallback = e => {
  safeCall(e, "connectedCallback");
 }, connectedCallback = e => {
- if (0 == (1 & plt.$flags$)) {
+ if (!(1 & plt.$flags$)) {
   const t = getHostRef(e), o = t.$cmpMeta$, n = createTime("connectedCallback", o.$tagName$);
   if (1 & t.$flags$) addHostEventListeners(e, t, o.$listeners$), (null == t ? void 0 : t.$lazyInstance$) ? fireConnectedCallback(t.$lazyInstance$) : (null == t ? void 0 : t.$onReadyPromise$) && t.$onReadyPromise$.then((() => fireConnectedCallback(t.$lazyInstance$))); else {
    let n;
@@ -9799,7 +9815,7 @@ const callRender = (e, t, o, n) => {
  } catch (e) {
   consoleError(e);
  }
-}, hostListenerOpts = e => 0 != (2 & e), insertVdomAnnotations = (e, t) => {
+}, hostListenerOpts = e => !!(2 & e), insertVdomAnnotations = (e, t) => {
  if (null != e) {
   const o = {
    hostIds: 0,
@@ -9961,21 +9977,16 @@ const getKoliBri$1 = () => {
 };
 const initKoliBri = () => {
     initMeta();
-    if (getKoliBri$1() === undefined) {
-        Log.debug(`
-	,--. ,--.         ,--. ,--. ,-----.           ,--.
-	|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'
-	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
-	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
-	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.9
-		`, {
-            forceLog: true,
-        });
-    }
-    else {
-        console.warn(`You can only initialize KoliBri once.`);
-    }
+    Log.debug(`
+,--. ,--.         ,--. ,--. ,-----.           ,--.
+|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'
+|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
+|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
+\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
+🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.8
+	`, {
+        forceLog: true,
+    });
 };
 const renderDevAdvice = () => {
     if (getKoliBri$1().adviceShown !== true) {
@@ -9997,6 +10008,27 @@ if (processEnv === 'test') {
     nonce = () => 'nonce';
 }
 
+let KolAlertTag = 'kol-alert';
+let KolAlertWcTag = 'kol-alert-wc';
+let KolAvatarWcTag = 'kol-avatar-wc';
+let KolBadgeTag = 'kol-badge';
+let KolButtonTag = 'kol-button';
+let KolButtonWcTag = 'kol-button-wc';
+let KolButtonGroupWcTag = 'kol-button-group-wc';
+let KolHeadingWcTag = 'kol-heading-wc';
+let KolIconTag = 'kol-icon';
+let KolIndentedTextTag = 'kol-indented-text';
+let KolInputTag = 'kol-input';
+let KolLinkTag = 'kol-link';
+let KolLinkWcTag = 'kol-link-wc';
+let KolPaginationTag = 'kol-pagination';
+let KolSelectTag = 'kol-select';
+let KolSpanWcTag = 'kol-span-wc';
+let KolToastContainerTag = 'kol-toast-container';
+let KolTooltipWcTag = 'kol-tooltip-wc';
+let KolTreeItemWcTag = 'kol-tree-item-wc';
+let KolTreeWcTag = 'kol-tree-wc';
+
 const defaultStyleCss$K = "@layer kol-global {\n  .sc-kol-abbr-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-abbr-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-abbr-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-abbr-default-h > abbr {\n    cursor: help;\n  }\n}";
 var KolAbbrDefaultStyle0 = defaultStyleCss$K;
 
@@ -10012,7 +10044,7 @@ class KolAbbr {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'c586992a4fa0509d32fff669db916974c9e3e8fc', class: "kol-abbr" }, hAsync("abbr", { key: 'e0ca3b3e25a76c93bfa6adaec2eaca9fd94c7d11', "aria-labelledby": this.nonce, role: "definition", tabindex: "0", title: this.state._label }, hAsync("span", { key: '2ac914a0918846ea73e4ccc99d5b03d32a143f39', title: "" }, hAsync("slot", { key: '818ceebf5e3069ee353db25c23e48a7889e49f20' }))), hAsync("kol-tooltip-wc", { key: '61d19f9b12f4b490f5d5824ca265a1d8db6c7719', _align: this.state._tooltipAlign, _id: this.nonce, _label: this.state._label })));
+        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 })));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -10092,11 +10124,11 @@ class KolAccordion {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'dc7949f5742485d6e1cfaea819c3e5e6e2468964', class: "kol-accordion" }, hAsync("div", { key: 'f21a5d07aace2820babf7e55f2910d15354340c9', class: {
+        return (hAsync(Host, { key: '375071dab3f67a8a9ea41166c5e5955a905ba04a', class: "kol-accordion" }, hAsync("div", { key: '44e8a90eed884c991797ea6e0e727777075d6d00', class: {
                 accordion: true,
                 disabled: this.state._disabled === true,
                 open: this.state._open === true,
-            } }, hAsync("kol-heading-wc", { key: '44da03d00e1b38905fa7cd395bc4229967aac230', _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync("kol-button-wc", { key: '545560225f2039f9d5e22d343a64d25b996ac55c', 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: '6414875b098faca21662092281f411a4151b0800', class: "wrapper" }, hAsync("div", { key: '9fba8fa9e22365daf5b59934802331be03593d77', class: "animation-wrapper" }, hAsync("div", { key: 'f42166dd04d847887476f7bd219d661c26b31bd9', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: '01084e066906a6a012c09830ff1627baa7caad38' })))))));
+            } }, 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' })))))));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -10170,7 +10202,7 @@ class KolAlert {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'd5b4a5ab664faab7dd805c180f1776fb1ddf08e7', class: "kol-alert" }, hAsync("kol-alert-wc", { key: '7b2fdc0aab46732897e52d0c050eb3c0afa2f528', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: 'c92b7f438627d981fdcee4e7c67d5975913ed5e0' }))));
+        return (hAsync(Host, { key: 'e521d298e8e47493ec537aad97c8d501ccab0676', class: "kol-alert" }, hAsync(KolAlertWcTag, { key: 'ed49e80a84167a1d5122c2d74e948c8899113e52', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: 'd0e51952a1c60fbd7b9678d367c8022b077623b8' }))));
     }
     static get style() { return {
         default: KolAlertDefaultStyle0
@@ -12704,7 +12736,7 @@ if (processEnv === 'test') {
 }
 
 const Icon = (props) => {
-    return hAsync("kol-icon", { class: "heading-icon", _label: typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel, _icons: props.icon });
+    return hAsync(KolIconTag, { class: "heading-icon", _label: typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel, _icons: props.icon });
 };
 const AlertIcon = (props) => {
     switch (props.type) {
@@ -12757,13 +12789,13 @@ class KolAlertWc {
                 this.validateAlert(false);
             }, 10000);
         }
-        return (hAsync(Host, { key: 'aab2f14f5799fe28ba5f3c71b5a06b8dea7fab7b', class: {
+        return (hAsync(Host, { key: '056ebeba8b0ebc0d76a98e3855a0022e1c689e09', 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: '64c5e1137edf7a56a48652b73bc98b460f14a822', class: "heading" }, hAsync(AlertIcon, { key: 'a4643a5a66d851b5f403bbb0d344c368e886cc07', label: this.state._label, type: this.state._type }), hAsync("div", { key: 'f1b8dbed19d74f66fe262a4a9b54213650bebe7a', class: "heading-content" }, typeof this.state._label === 'string' && ((_a = this.state._label) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync("kol-heading-wc", { _label: this.state._label, _level: this.state._level })), this.state._variant === 'msg' && (hAsync("div", { class: "content" }, hAsync("slot", null)))), this.state._hasCloser && (hAsync("kol-button-wc", { class: "close", _hideLabel: true, _icons: {
+            }, 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, { _label: this.state._label, _level: this.state._level })), this.state._variant === 'msg' && (hAsync("div", { class: "content" }, hAsync("slot", null)))), this.state._hasCloser && (hAsync(KolButtonWcTag, { class: "close", _hideLabel: true, _icons: {
                 left: {
                     icon: 'codicon codicon-close',
                 },
@@ -12831,7 +12863,7 @@ class KolAlertWc {
     }; }
 }
 
-const defaultStyleCss$H = "@layer kol-global {\n  .sc-kol-avatar-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-avatar-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-avatar-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-avatar-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    \n    outline: transparent solid 1px;\n    \n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    background: #d3d3d3;\n    font-size: 2rem;\n  }\n}";
+const defaultStyleCss$H = "@layer kol-global {\n  .sc-kol-avatar-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-avatar-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-avatar-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-avatar-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    \n    outline: transparent solid 1px;\n    \n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    background: #d3d3d3;\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 var KolAvatarDefaultStyle0 = defaultStyleCss$H;
 
 class KolAvatar {
@@ -12841,7 +12873,7 @@ class KolAvatar {
         this._label = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '7b0934fdfd8b008b173c08d78b5d6e06811521d6', class: "kol-avatar" }, hAsync("kol-avatar-wc", { key: 'e609794fa840282ea2a6a18471d08b8923f9fb22', _src: this._src, _label: this._label })));
+        return (hAsync(Host, { key: '0df334a0e4d8d0293355420ed5c36dbbcf2d8d6c', class: "kol-avatar" }, hAsync(KolAvatarWcTag, { key: '31e4127b2530c95b357e181df773df114a2b74a5', _src: this._src, _label: this._label })));
     }
     static get style() { return {
         default: KolAvatarDefaultStyle0
@@ -12945,16 +12977,16 @@ class KolBadge {
         };
     }
     renderSmartButton(props) {
-        return (hAsync("kol-button-wc", { _ariaControls: this.id, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign, _variant: props._variant }));
+        return (hAsync(KolButtonWcTag, { _ariaControls: this.id, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign, _variant: props._variant }));
     }
     render() {
         const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
-        return (hAsync(Host, { key: '4ee15e917658c0dbcfe96555fcf19b0483d7d300', class: "kol-badge" }, hAsync("span", { key: 'f1b1220b525a84cfca0726a7b65ef510df462def', class: {
+        return (hAsync(Host, { key: '53553ba5c140ed0317b07f3614c178a06f48b5f6', class: "kol-badge" }, hAsync("span", { key: 'eb2dd60af4f8c1a3db15d91b9419434917d0cecd', class: {
                 'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
             }, style: {
                 backgroundColor: this.bgColorStr,
                 color: this.colorStr,
-            } }, hAsync("kol-span-wc", { key: '06c0229bab48dfeeac92629e1e8c8445095a293e', id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
+            } }, hAsync(KolSpanWcTag, { key: '00a6f9b5dfb4c4402505c61d7a318e58a67982f9', id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -13027,7 +13059,7 @@ class KolBreadcrumb {
         registerInstance(this, hostRef);
         this.renderLink = (link, index) => {
             const lastIndex = this.state._links.length - 1;
-            return (hAsync("li", { key: index }, index !== 0 && hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right" }), index === lastIndex ? (hAsync("span", null, link._hideLabel ? (hAsync("kol-icon", { _label: link._label, _icons: typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event' })) : (hAsync(Fragment, null, link._label)))) : (hAsync("kol-link", Object.assign({}, link)))));
+            return (hAsync("li", { key: index }, index !== 0 && hAsync(KolIconTag, { _label: "", _icons: "codicon codicon-chevron-right" }), index === lastIndex ? (hAsync("span", null, link._hideLabel ? (hAsync(KolIconTag, { _label: link._label, _icons: typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event' })) : (hAsync(Fragment, null, link._label)))) : (hAsync(KolLinkTag, Object.assign({}, link)))));
         };
         this._label = undefined;
         this._links = undefined;
@@ -13037,7 +13069,7 @@ class KolBreadcrumb {
         };
     }
     render() {
-        return (hAsync(Host, { key: '84b5eb61c0a24a5e1e8699d8daa5a557091b8cad', class: "kol-breadcrumb" }, hAsync("nav", { key: '0e6b725e4895eb7ac61a4786cfa910410bf42a98', "aria-label": this.state._label }, hAsync("ul", { key: '1527c13e34bcbfb93feec4d4724e39a8af616ba4' }, this.state._links.length === 0 && (hAsync("li", null, hAsync("kol-icon", { _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink)))));
+        return (hAsync(Host, { key: '8207d01dbede825fd138abd0f162601a2a614073', class: "kol-breadcrumb" }, hAsync("nav", { key: '4e88e8fbfa6c1d992f5a2774a150abf0f62fb201', "aria-label": this.state._label }, hAsync("ul", { key: '965b241c1bdab7d6fd533b8624701aa3a18e2ad5' }, this.state._links.length === 0 && (hAsync("li", null, hAsync(KolIconTag, { _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink)))));
     }
     validateLabel(value, _oldValue, initial = false) {
         if (!initial) {
@@ -13113,11 +13145,11 @@ class KolButton {
         return this._value;
     }
     render() {
-        return (hAsync(Host, { key: '097666c27c0fe65c11fee1dbae27a0e22af52892', class: "kol-button" }, hAsync("kol-button-wc", { key: 'e848e25b23c86f08f1b549f95991ef11a942273d', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '67fdae48e99dbeff6328fcc24853e293a249d3e1', class: "kol-button" }, hAsync(KolButtonWcTag, { key: '2ecce25536995648275992c63f5dd953e8bcf034', 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: 'b24c0fc7d2c34e5aa9b509e7be542e6ff6c6ce7d', 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: 'cf135329e77904298eab357d91d14f4a2083f0c8', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -13162,7 +13194,7 @@ class KolButtonGroup {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '38688a5c1ca3003c6bd8b95b36af10b5faacc23a', class: "kol-button-group" }, hAsync("kol-button-group-wc", { key: '7a0edea0f5b3dc358f61bea057d94da7fb20021d' }, hAsync("slot", { key: '9fd73fa23e1ebe118c9714748fa8cc01786ca31e' }))));
+        return (hAsync(Host, { key: '7822a4906cddb538912fb5dc9ab78e5f8ff571a1', class: "kol-button-group" }, hAsync(KolButtonGroupWcTag, { key: '4acc5421feeaba4738090429852cb7dedca67e5e' }, hAsync("slot", { key: 'c7514820bb0933ed067c979c06077f6957396f7b' }))));
     }
     static get style() { return {
         default: KolButtonGroupDefaultStyle0
@@ -13228,7 +13260,7 @@ class KolButtonLink {
         return this._value;
     }
     render() {
-        return (hAsync(Host, { key: 'c0b869e43af831d2b5b53cb09a131496223313a9', class: "kol-button-link" }, hAsync("kol-button-wc", { key: '72a2e656eab01a2bd04c6c9a220d63cd5fafe45b', 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: '4a8e7c6767ec109f4271b21dae8e6fa53c247287', name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: '81dd5ca6f4756ef3a97184dff6a36f19e75a3682', class: "kol-button-link" }, hAsync(KolButtonWcTag, { key: '8333cafecd10ff34bb401dd4d2fb28c52d07a84d', 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: '097b08bd7bfe43f999db5e73b176b423d270b0fe', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -13530,13 +13562,13 @@ class AssociatedInputController {
 class KolButtonWc {
     render() {
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '7f218fdb41ad92a1bdbafc30c0301c812a9eea1f', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '3dd23b3a2ab79b25c7b9d4b9ba1f5ece2bb3395e', 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: 'dd5a9e3afb3250b04a4a2d012ca2885736d234e4', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '9d985bf2bd663f8039ad7805ab81816c08abcd45', 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("kol-span-wc", { key: 'bd9534d9e5fd03ab01ffe94f878cfaa7f96f1539', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'c2a4b5f99234d883367193092777922b7c0de65b', name: "expert", slot: "expert" }))), hAsync("kol-tooltip-wc", { key: '22ffd39d8c98ab3a274dd5b898bca2ab46083d2b', "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: '2d1ac0b37da70e0fc2ec049a1c6bf835fededa56', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'fc4422ac22bb63edb8ba2ecf768802392854b882', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '0228c4d7ecbeb88dcd16e244e5bc4e9b9becf1b0', "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);
@@ -13755,7 +13787,7 @@ class KolCard {
         };
     }
     render() {
-        return (hAsync(Host, { key: '3ca352dbc26eb18f069479909b848a76143fa89a', class: "kol-card" }, hAsync("div", { key: 'c28ca77ce46d969f3ce8a31fc41bbe6fa9bf4cbf', class: "card" }, hAsync("div", { key: 'e6f06496266fad60dae497eca809cdee7193c8b1', class: "header" }, hAsync("kol-heading-wc", { key: '255902495de7dfd37543ceadbed745cb2a72217b', _label: this.state._label, _level: this.state._level })), hAsync("div", { key: 'c14ebc997dff8af5f52afadb217031805b203663', class: "content" }, hAsync("slot", { key: '0a68df303e097c07c35e527254920df1bdb943c0' })), this.state._hasCloser && (hAsync("kol-button-wc", { class: "close", _hideLabel: true, _icons: {
+        return (hAsync(Host, { key: '3a58c3891d1edac983aa496b5edac9ec3aa8e2b4', class: "kol-card" }, hAsync("div", { key: '50bc445f86ca4c282600b7351bfbff4539c0decd', class: "card" }, hAsync("div", { key: '9e5d76560aead613b5fea37975e5bc43592808c5', class: "header" }, hAsync(KolHeadingWcTag, { key: '278917cdfa2ed7b7034f0572796c149bb7fb8197', _label: this.state._label, _level: this.state._level })), hAsync("div", { key: '37c5183d5efcdc6b948f0baa1ab892ad4df07558', class: "content" }, hAsync("slot", { key: '3d57f3d4911c7b7c5983a9b296e1bfee73a10f8b' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { class: "close", _hideLabel: true, _icons: {
                 left: {
                     icon: 'codicon codicon-close',
                 },
@@ -13918,10 +13950,10 @@ class KolDetails {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'c47fa58d0d3014a168bcac85dcc193520b34d34a', class: "kol-details" }, hAsync("details", { key: '9682dc397adde2be21b30ac8a0bc9b0577178117', ref: this.catchDetails, class: {
+        return (hAsync(Host, { key: 'cda9e87d6f6a6a7803fd921180faf7a973f232b9', class: "kol-details" }, hAsync("details", { key: 'f2b66dfeda3759ec143d6fcf6fccd26189dd3580', ref: this.catchDetails, class: {
                 disabled: this.state._disabled === true,
                 open: this.state._open === true,
-            }, onToggle: this.handleToggle }, hAsync("summary", { key: '7c57725f0c8ebb48fd9fdfd9b7773eb5f6b79566', ref: this.catchSummary, "aria-disabled": this.state._disabled ? 'true' : undefined, onClick: this.preventToggleIfDisabled, onKeyPress: this.preventToggleIfDisabled, tabIndex: this.state._disabled ? -1 : undefined }, hAsync("kol-icon", { key: 'c269a80ed830e23b75c5a99f7759ba872f597e8b', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: '912d929f6a7523f0345377af147cba7b5a09e94e' }, this.state._label)), hAsync("div", { key: '2f31bd95a54e5634f4d0e7ccf0aba81016cb1e13', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", { key: '6373ac2b3afb7d53285dace1f47db9a78015e90a' }, hAsync("slot", { key: '0ff823bd0c5f55510cc6fb3d507bdfddc2e8e875' }))))));
+            }, onToggle: this.handleToggle }, hAsync("summary", { key: '8e0742051d3344cab3e790915c974919c8ce2a4a', 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: '39775945cdfbfc846138121bac62fc6f9e3a69dd', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: 'f990cbbe0104f5ae5d92cb81b24df94253e245c4' }, this.state._label)), hAsync("div", { key: 'd753895b96f482f7a8248f1fc41ac00359534444', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync(KolIndentedTextTag, { key: '6394a852168af08b09f3912245161332f2257af6' }, hAsync("slot", { key: '24dd7a5270024763791410594a0ccc9030781e20' }))))));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -14016,10 +14048,19 @@ class KolForm {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, { key: 'ceeb85dc8c8385f109ca9d31b5f1a122ebf7b7a5', class: "kol-form" }, hAsync("form", { key: '18607b4888f9227cbc98ad1bacd12246548fa4ed', method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this._errorList && this._errorList.length > 0 && (hAsync("kol-alert", { _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync("kol-link", { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
+        return (hAsync(Host, { key: '65d715836bb74ba26265a82596c68938518f1bd6', class: "kol-form" }, this._errorList && this._errorList.length > 0 && (hAsync(KolAlertTag, { _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, 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;
-            } })))))))), this.state._requiredText === true ? (hAsync("p", null, hAsync("kol-indented-text", null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync("kol-indented-text", null, this.state._requiredText))) : null, hAsync("slot", { key: '54e6a629708aa2ca7c0f403ba81aeb1d96220b48' }))));
+            } })))))))), hAsync("form", { key: '47ab1f7b0e6ab78c81d63e073b9cde8baf007f39', 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: '235d3db4100f7f872803573a909f11c137f4504c' }))));
+    }
+    async focusErrorList() {
+        setTimeout(() => {
+            var _a;
+            if (this._errorList && this._errorList.length > 0) {
+                (_a = this.errorListElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }, 300);
+        return Promise.resolve();
     }
     validateOn(value) {
         if (typeof value === 'object' && value !== null) {
@@ -14042,12 +14083,6 @@ class KolForm {
         this.validateRequiredText(this._requiredText);
         this.validateErrorList(this._errorList);
     }
-    componentDidRender() {
-        var _a;
-        if (this._errorList && this._errorList.length > 0) {
-            (_a = this.errorListElement) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }
     static get watchers() { return {
         "_on": ["validateOn"],
         "_requiredText": ["validateRequiredText"],
@@ -14060,7 +14095,8 @@ class KolForm {
             "_on": [16],
             "_requiredText": [8, "_required-text"],
             "_errorList": [16],
-            "state": [32]
+            "state": [32],
+            "focusErrorList": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -14080,7 +14116,7 @@ class KolHeading {
         this._variant = undefined;
     }
     render() {
-        return (hAsync("kol-heading-wc", { key: '1a8076d59d4938b44b0bb046e42c6488dc0eb1f8', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant, class: "kol-heading" }, hAsync("slot", { key: '6bc1333f4748b2201aaf762b978d545a6d3cc7d7', name: "expert", slot: "expert" })));
+        return (hAsync(KolHeadingWcTag, { key: '8685c39e6bfc5bb7d6885e43112d9742cc539a6e', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant, class: "kol-heading" }, hAsync("slot", { key: '5fcf1c3ade332ba647c330985ee459a0f8e89421', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolHeadingDefaultStyle0
@@ -14333,10 +14369,12 @@ class KolIndentedText {
     }; }
 }
 
-const FormFieldMsg = ({ _alert, _error, _hideError, _id }) => (hAsync("kol-alert-wc", { "aria-hidden": "true", id: `${_id}-error`, _alert: _alert, _type: "error", class: {
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const FormFieldMsg = ({ _alert, _msg, _hideError, _id }) => (hAsync(KolAlertWcTag, Object.assign({ "aria-hidden": "true", id: `${_id}-error`, _alert: _alert, _type: "error", class: {
         error: true,
         'visually-hidden': _hideError === true,
-    } }, _error));
+    } }, _msg), (_msg === null || _msg === void 0 ? void 0 : _msg._description) || undefined));
 
 class KolInput {
     constructor(hostRef) {
@@ -14349,7 +14387,6 @@ class KolInput {
         this._alert = true;
         this._currentLength = undefined;
         this._disabled = false;
-        this._error = '';
         this._hasCounter = false;
         this._hideError = false;
         this._hideLabel = false;
@@ -14358,6 +14395,7 @@ class KolInput {
         this._id = undefined;
         this._label = undefined;
         this._maxLength = undefined;
+        this._msg = undefined;
         this._readOnly = false;
         this._renderNoLabel = false;
         this._required = false;
@@ -14374,24 +14412,37 @@ class KolInput {
         return icon && typeof icon === 'object' && icon.style ? icon.style : {};
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const hasError = !this._readOnly && typeof this._error === 'string' && this._error.length > 0 && this._touched === true;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const isMessageValidError = Boolean(((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type) === 'error' && this._msg._description && ((_b = this._msg._description) === null || _b === void 0 ? void 0 : _b.length) > 0);
+        const hasError = !this._readOnly && isMessageValidError && this._touched === true;
+        const showFormFieldMsg = Boolean(hasError || (((_c = this._msg) === null || _c === void 0 ? void 0 : _c._type) !== 'error' && ((_d = this._msg) === null || _d === void 0 ? void 0 : _d._description)));
         const hasExpertSlot = showExpertSlot(this._label);
         const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
         const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
-        return (hAsync(Host, { key: '447c054ac8db224f1388d921e9c63706ec9e53e2', class: {
-                'kol-input': true,
+        return (hAsync(Host, { key: 'acb6294dbb3bb30298be633a4728d890d24c6dc7', 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: 'e15e3a2dbbbe3cedf3bf8e36cd68748403600413', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: '2e0ef8818f04fc04784adb1daae25039c6e846d3', class: "input-label-span" }, hAsync("slot", { key: 'a305c09f0c0a47d23025d37582c0cc7b4b58eaba', name: "label" }))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: 'c8888d1b723773c9aa96667dcbba16faf890921b', class: {
+            }) }, hAsync("label", { key: '356dbae7d6b7b02202e1020131dc7e8bb70a69c2', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'c5ee06729ca4bb5c1458085068ac6a64fcfeae1a', class: "input-label-span" }, hAsync("slot", { key: '146aeb9bef32ebc54b1fcbf282841d7d44fd5730', name: "label" }))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '755e40c1da91b382387ddea16935235e793fff1b', class: {
                 input: true,
-                'icon-left': typeof ((_a = this._icons) === null || _a === void 0 ? void 0 : _a.left) === 'object',
-                'icon-right': typeof ((_b = this._icons) === null || _b === void 0 ? void 0 : _b.right) === 'object',
-            } }, ((_c = this._icons) === null || _c === void 0 ? void 0 : _c.left) && (hAsync("kol-icon", { _label: "", _icons: ((_d = this._icons) === null || _d === void 0 ? void 0 : _d.left).icon, style: this.getIconStyles((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) })), hAsync("div", { key: '53e3a4f608ad7e2c8e4c712d46c6511a03aff33c', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync("kol-button-wc", { _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 })), ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) && (hAsync("kol-icon", { _label: "", _icons: ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.right).icon, style: this.getIconStyles((_h = this._icons) === null || _h === void 0 ? void 0 : _h.right) }))), useTooltopInsteadOfLabel && (hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), hasError && hAsync(FormFieldMsg, { _alert: this._alert, _hideError: this._hideError, _error: this._error, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", null, translate('kol-characters'))))));
+                '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, { _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: '49c2557719125b83a696987ee88ec72a254b5077', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { _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, { _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, { "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, { _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", null, translate('kol-characters'))))));
+    }
+    getModifierClassNameByMsgType() {
+        var _a, _b;
+        if ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type) {
+            return {
+                default: 'msg-type-default',
+                info: 'msg-type-info',
+                success: 'msg-type-success',
+                warning: 'msg-type-warning',
+                error: 'msg-type-error',
+            }[(_b = this._msg) === null || _b === void 0 ? void 0 : _b._type];
+        }
     }
     get host() { return getElement(this); }
     static get cmpMeta() { return {
@@ -14402,7 +14453,6 @@ class KolInput {
             "_alert": [4],
             "_currentLength": [2, "_current-length"],
             "_disabled": [4],
-            "_error": [1],
             "_hasCounter": [4, "_has-counter"],
             "_hideError": [4, "_hide-error"],
             "_hideLabel": [4, "_hide-label"],
@@ -14411,6 +14461,7 @@ class KolInput {
             "_id": [1],
             "_label": [1],
             "_maxLength": [2, "_max-length"],
+            "_msg": [16],
             "_readOnly": [4, "_read-only"],
             "_renderNoLabel": [4, "_render-no-label"],
             "_required": [4],
@@ -14427,7 +14478,9 @@ class KolInput {
 }
 
 const getRenderStates = (state) => {
-    const hasError = typeof state._error === 'string' && state._error.length > 0 && state._touched === true;
+    var _a, _b;
+    const isMessageValidError = Boolean(((_a = state._msg) === null || _a === void 0 ? void 0 : _a._type) === 'error' && state._msg._description && ((_b = state._msg._description) === null || _b === void 0 ? void 0 : _b.length) > 0);
+    const hasError = isMessageValidError && state._touched === true;
     const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
     const ariaDescribedBy = [];
     if (hasError === true) {
@@ -14483,6 +14536,7 @@ class InputController extends ControlledInputController {
             onChange: this.onChange.bind(this),
             onClick: this.onClick.bind(this),
             onFocus: this.onFocus.bind(this),
+            onInput: this.onInput.bind(this),
         };
         this.component = component;
     }
@@ -14499,7 +14553,13 @@ class InputController extends ControlledInputController {
         }
     }
     validateError(value) {
-        watchString(this.component, '_error', value);
+        const message = value
+            ? {
+                _description: value,
+                _type: 'error',
+            }
+            : undefined;
+        this.validateMsg(message);
     }
     validateHideError(value) {
         validateHideError(this.component, value, {
@@ -14544,6 +14604,9 @@ class InputController extends ControlledInputController {
             required: true,
         });
     }
+    validateMsg(value) {
+        validateMsg(this.component, value);
+    }
     validateOn(value) {
         if (typeof value === 'object') {
             setState(this.component, '_on', value);
@@ -14567,6 +14630,7 @@ class InputController extends ControlledInputController {
         this.validateAccessKey(this.component._accessKey);
         this.validateAdjustHeight(this.component._adjustHeight);
         this.validateError(this.component._error);
+        this.validateMsg(this.component._msg);
         this.validateDisabled(this.component._disabled);
         this.validateHideError(this.component._hideError);
         this.validateHideLabel(this.component._hideLabel);
@@ -14591,12 +14655,23 @@ class InputController extends ControlledInputController {
         var _a;
         const value = event.target.value;
         tryToDispatchKoliBriEvent('change', this.host, value);
-        this.setFormAssociatedValue(value);
         if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
             this.component._on.onChange(event, value);
         }
         this.valueChangeListeners.forEach((listener) => listener(value));
     }
+    onInput(event, shouldSetFormAssociatedValue = true) {
+        var _a;
+        const value = event.target.value;
+        stopPropagation(event);
+        tryToDispatchKoliBriEvent('input', this.host);
+        if (shouldSetFormAssociatedValue) {
+            this.setFormAssociatedValue(value);
+        }
+        if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onInput) === 'function') {
+            this.component._on.onInput(event);
+        }
+    }
     onClick(event) {
         var _a;
         stopPropagation(event);
@@ -14650,26 +14725,11 @@ class InputRadioController extends InputCheckboxRadioController {
         super(component, name, host);
         this.keyOptionMap = new Map();
         this.getOptionByKey = (key) => this.keyOptionMap.get(key);
-        this.isValueInOptions = (value, options) => {
-            return options.find((option) => option.value === value) !== undefined;
-        };
         this.afterPatchOptions = (value, _state, _component, key) => {
             if (key === '_value') {
                 this.setFormAssociatedValue(value);
             }
         };
-        this.beforePatchOptions = (_value, nextState) => {
-            const options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;
-            if (Array.isArray(options) && options.length > 0) {
-                this.keyOptionMap.clear();
-                fillKeyOptionMap(this.keyOptionMap, options);
-                const value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;
-                if (this.isValueInOptions(value, options) === false) {
-                    nextState.set('_value', options[0].value);
-                    this.onStateChange();
-                }
-            }
-        };
         this.component = component;
     }
     validateOrientation(value) {
@@ -14681,7 +14741,6 @@ class InputRadioController extends InputCheckboxRadioController {
         validateOptions(this.component, value, {
             hooks: {
                 afterPatch: this.afterPatchOptions,
-                beforePatch: this.beforePatchOptions,
             },
         });
     }
@@ -14690,19 +14749,10 @@ class InputRadioController extends InputCheckboxRadioController {
         value = Array.isArray(value) ? value[0] : value;
         setState(this.component, '_value', value, {
             afterPatch: this.afterPatchOptions,
-            beforePatch: this.beforePatchOptions,
         });
     }
-    componentWillLoad(onChange) {
+    componentWillLoad() {
         super.componentWillLoad();
-        this.onStateChange = () => {
-            if (typeof onChange === 'function') {
-                const timeout = setTimeout(() => {
-                    clearTimeout(timeout);
-                    onChange(STATE_CHANGE_EVENT);
-                });
-            }
-        };
         this.validateOrientation(this.component._orientation);
         this.validateOptions(this.component._options);
         this.validateValue(this.component._value);
@@ -14757,7 +14807,7 @@ class InputCheckboxController extends InputCheckboxRadioController {
     }
 }
 
-const defaultStyleCss$v = "@layer kol-global {\n  .sc-kol-input-checkbox-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-checkbox-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-checkbox-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-checkbox-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  label {\n    cursor: pointer;\n  }\n  .kol-input {\n    align-items: center;\n    display: grid;\n    justify-items: left;\n  }\n  .kol-input.default,\n  .kol-input.switch {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input .input {\n    align-items: center;\n    display: grid;\n    order: 1;\n  }\n  .kol-input .input div {\n    display: inline-flex;\n  }\n  .kol-input .input input {\n    margin: 0;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .hint,\n  .kol-input.error > .kol-alert {\n    grid-column: span 2;\n  }\n  .kol-input .kol-alert.error {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n  }\n  input {\n    border-style: solid;\n    border-width: 2px;\n    line-height: 24px;\n  }\n  input[type=checkbox] {\n    appearance: none;\n    background-color: #fff;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  input[type=checkbox]:before {\n    content: \"\";\n    cursor: pointer;\n  }\n  input[type=checkbox]:disabled:before {\n    cursor: not-allowed;\n  }\n  .kol-input.required .tooltip-content .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .button {\n    display: grid;\n    grid-template-columns: var(--a11y-min-size) auto;\n    grid-template-areas: \"error error\" \"input label\" \"hint hint\";\n  }\n  .button:focus-within {\n    \n    cursor: inherit;\n    outline-color: black;\n    outline-style: solid;\n  }\n  .button > .error {\n    grid-area: error;\n  }\n  .button > label {\n    grid-area: label;\n  }\n  .button > .input {\n    grid-area: input;\n  }\n  .button > .hint {\n    grid-area: hint;\n  }\n  .button .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n  }\n}\n@layer kol-component {\n  .default .checkbox-container {\n    align-items: center;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .default .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .default:not(.checked):not(.indeterminate) .icon::part(icon) {\n    display: none;\n  }\n  .default .checkbox-input-element {\n    width: 22px;\n    height: 22px;\n  }\n}\n@layer kol-component {\n  .switch .input {\n    position: relative;\n  }\n  .switch input[type=checkbox] {\n    display: inline-block;\n    height: 1.7em;\n    min-width: 3.2em;\n    position: relative;\n    width: 3.2em;\n  }\n  .switch input[type=checkbox]::before {\n    background-color: #000;\n    height: 1.2em;\n    left: calc(0.25em - 2px);\n    top: calc(0.25em - 2px);\n    position: absolute;\n    transition: 0.5s;\n    width: 1.2em;\n  }\n  .switch input[type=checkbox]:checked::before {\n    transform: translateX(1.5em);\n  }\n  .switch input[type=checkbox]:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .switch .icon {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.2em;\n    height: 1.2em;\n    position: absolute;\n    z-index: 1;\n    top: 50%;\n    left: 4px;\n    transform: translate(0, -50%);\n    transition: 0.5s;\n    color: #000;\n  }\n  .switch.checked .icon {\n    transform: translate(1.5em, -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(0.75em, -50%);\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-checkbox-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-checkbox-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-checkbox-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-checkbox-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}";
+const defaultStyleCss$v = "@layer kol-global {\n  .sc-kol-input-checkbox-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-checkbox-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-checkbox-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-checkbox-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  label {\n    cursor: pointer;\n  }\n  .kol-input {\n    align-items: center;\n    display: grid;\n    justify-items: left;\n  }\n  .kol-input.default,\n  .kol-input.switch {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input .input {\n    align-items: center;\n    display: grid;\n    order: 1;\n  }\n  .kol-input .input div {\n    display: inline-flex;\n  }\n  .kol-input .input input {\n    margin: 0;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .hint,\n  .kol-input.error > .kol-alert {\n    grid-column: span 2;\n  }\n  .kol-input .kol-alert.error {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n  }\n  input {\n    border-style: solid;\n    border-width: 2px;\n    line-height: 24px;\n  }\n  input[type=checkbox] {\n    appearance: none;\n    background-color: #fff;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  input[type=checkbox]:before {\n    content: \"\";\n    cursor: pointer;\n  }\n  input[type=checkbox]:disabled:before {\n    cursor: not-allowed;\n  }\n  .kol-input.required .tooltip-content .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .button {\n    display: grid;\n    grid-template-columns: var(--a11y-min-size) auto;\n    grid-template-areas: \"error error\" \"input label\" \"hint hint\";\n  }\n  .button:focus-within {\n    \n    cursor: inherit;\n    outline-color: black;\n    outline-style: solid;\n  }\n  .button > .error {\n    grid-area: error;\n  }\n  .button > label {\n    grid-area: label;\n  }\n  .button > .input {\n    grid-area: input;\n  }\n  .button > .hint {\n    grid-area: hint;\n  }\n  .button .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n  }\n}\n@layer kol-component {\n  .default .checkbox-container {\n    align-items: center;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .default .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .default:not(.checked):not(.indeterminate) .icon::part(icon) {\n    display: none;\n  }\n  .default .checkbox-input-element {\n    width: 22px;\n    height: 22px;\n  }\n}\n@layer kol-component {\n  .switch .input {\n    position: relative;\n  }\n  .switch input[type=checkbox] {\n    display: inline-block;\n    height: 1.7em;\n    min-width: 3.2em;\n    position: relative;\n    width: 3.2em;\n  }\n  .switch input[type=checkbox]::before {\n    background-color: #000;\n    height: 1.2em;\n    left: calc(0.25em - 2px);\n    top: calc(0.25em - 2px);\n    position: absolute;\n    transition: 0.5s;\n    width: 1.2em;\n  }\n  .switch input[type=checkbox]:checked::before {\n    transform: translateX(1.5em);\n  }\n  .switch input[type=checkbox]:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .switch .icon {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.2em;\n    height: 1.2em;\n    position: absolute;\n    z-index: 1;\n    top: 50%;\n    left: 4px;\n    transform: translate(0, -50%);\n    transition: 0.5s;\n    color: #000;\n  }\n  .switch.checked .icon {\n    transform: translate(1.5em, -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(0.75em, -50%);\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-checkbox-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-checkbox-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-checkbox-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-checkbox-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}";
 var KolInputCheckboxDefaultStyle0 = defaultStyleCss$v;
 
 class KolInputCheckbox {
@@ -14768,13 +14818,13 @@ class KolInputCheckbox {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'd008a4a74d3e57ad2f6d669b16907357a8e364fc', class: "kol-input-checkbox" }, hAsync("kol-input", { key: '6b032d1aef64dfbb72b77dfcaa38b0f68644acee', class: {
+        return (hAsync(Host, { key: 'ad1a6426df92ed8ca3ee3699982a505dc8bb498c', class: "kol-input-checkbox" }, hAsync(KolInputTag, { key: 'fb671b770db21dcfa6961e9d563b17ff24bd4dea', 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, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _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: '261e2dfd22865fe6348367783a247ec60368eff5', 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: 'f082139703b90c31b65acf34277242cde04b6a36', slot: "input", class: "checkbox-container" }, hAsync("kol-icon", { key: 'd808630f69e7424f383a7199be5de9c543763eb2', 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: '8f0a062b7be5aaf7cc88dc193dbe283be1e6ee09', 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, { 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: 'd5ad2e86464c31f00150d11c94ef3d213e247e1a', 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: 'b1d00e32ffa9ce39aa6caf0e573cad21ac12a435', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: 'e5eda2b2e5525f4b0726f22db91dd32cda42c72f', 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: '239b9a3961b17458a789235339574b7a62c20bfb', 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, { onChange: this.onChange, onClick: undefined }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -14805,6 +14855,7 @@ class KolInputCheckbox {
         this._id = undefined;
         this._indeterminate = undefined;
         this._label = undefined;
+        this._msg = undefined;
         this._name = undefined;
         this._on = undefined;
         this._required = false;
@@ -14866,6 +14917,9 @@ class KolInputCheckbox {
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateName(value) {
         this.controller.validateName(value);
     }
@@ -14909,6 +14963,7 @@ class KolInputCheckbox {
         "_id": ["validateId"],
         "_indeterminate": ["validateIndeterminate"],
         "_label": ["validateLabel"],
+        "_msg": ["validateMsg"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
         "_required": ["validateRequired"],
@@ -14937,6 +14992,7 @@ class KolInputCheckbox {
             "_id": [1],
             "_indeterminate": [1540],
             "_label": [1],
+            "_msg": [16],
             "_name": [1],
             "_on": [16],
             "_required": [4],
@@ -15021,7 +15077,7 @@ class InputColorController extends InputIconController {
     }
 }
 
-const defaultStyleCss$u = "@layer kol-global {\n  .sc-kol-input-color-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-color-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-color-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-color-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-color-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-color-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-color-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-color-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  div.input {\n    cursor: pointer;\n  }\n}";
+const defaultStyleCss$u = "@layer kol-global {\n  .sc-kol-input-color-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-color-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-color-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-color-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-color-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-color-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-color-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-color-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  div.input {\n    cursor: pointer;\n  }\n}";
 var KolInputColorDefaultStyle0 = defaultStyleCss$u;
 
 class KolInputColor {
@@ -15033,10 +15089,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: '19953f8a7559d9bdfbe27ac0efa0cf920aed4209', class: "kol-input-color" }, hAsync("kol-input", { key: 'cf10b1caee887119ed59cb4ce98f74b06703b840', class: {
+        return (hAsync(Host, { key: '5252dc45d3a28e5f0c90e98b0cfcb893ac854b0e', class: "kol-input-color" }, hAsync(KolInputTag, { key: 'f4a07a4e0c94ebbc7ce1b05d449366c903ee4b92', class: {
                 color: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _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: 'ffb354db1c74200fc3165f23089351aa967c4aa0', 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: '37fef71a7b977f88a706c1c4617c87cb5b5cad89', slot: "input" }, hAsync("input", Object.assign({ key: 'e52ad6fbe41f27e540109de85ea4eb0108b0deb2', 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: '0a4c4f562dae568f1aa18639a36d7b253ad14411', 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: '34a3f44f57bc464c61198efcdcd3cf7c4c98a624', slot: "input" }, hAsync("input", Object.assign({ key: '840bccd81c703e6c1813ecfc3a531b4487d66e18', 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);
@@ -15055,6 +15111,7 @@ class KolInputColor {
         this._icons = undefined;
         this._id = undefined;
         this._label = undefined;
+        this._msg = undefined;
         this._name = undefined;
         this._on = undefined;
         this._smartButton = undefined;
@@ -15106,6 +15163,9 @@ class KolInputColor {
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateName(value) {
         this.controller.validateName(value);
     }
@@ -15148,6 +15208,7 @@ class KolInputColor {
         "_icons": ["validateIcons"],
         "_id": ["validateId"],
         "_label": ["validateLabel"],
+        "_msg": ["validateMsg"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
         "_smartButton": ["validateSmartButton"],
@@ -15175,6 +15236,7 @@ class KolInputColor {
             "_icons": [1],
             "_id": [1],
             "_label": [1],
+            "_msg": [16],
             "_name": [1],
             "_on": [16],
             "_smartButton": [1, "_smart-button"],
@@ -15327,7 +15389,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
 InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
 InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
 
-const defaultStyleCss$t = "@layer kol-global {\n  .sc-kol-input-date-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-date-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-date-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-date-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-date-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-date-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-date-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-date-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  .kol-input-number {\n    display: block;\n  }\n}";
+const defaultStyleCss$t = "@layer kol-global {\n  .sc-kol-input-date-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-date-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-date-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-date-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-date-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-date-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-date-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-date-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  .kol-input-number {\n    display: block;\n  }\n}";
 var KolInputDateDefaultStyle0 = defaultStyleCss$t;
 
 class KolInputDate {
@@ -15339,10 +15401,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: 'b39502117e1400c8f9676c1eebe8d61ce2367152', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: 'f5d03794fcbd50874ca779b249bb0852d09ae596', class: {
+        return (hAsync(Host, { key: 'f1bdc61d56c11e78681581e7b5b2e31380fd4601', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'ce3ef3b3941944bee5504e05000ff420d60c7bc5', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _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: '31ace66850f0c33ff8e1e9ac49d0797824a375ae', 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: '31972ef59123e58d0362df3b8f2984768f2a84ed', slot: "input" }, hAsync("input", Object.assign({ key: '02b23d51c9224b1451f243a496350520ef697f03', 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: '7fc902dd7815dc389041d3915204e6ec5fe65a7d', 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: '26b9d1222d08b1db41977f4eef761e88c3ddf39e', slot: "input" }, hAsync("input", Object.assign({ key: 'd4757b23bb9d52acb6a97eb49bc6bc695b5fa1d3', 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);
@@ -15357,9 +15419,6 @@ class KolInputDate {
                     ref: this.ref,
                 });
             }
-            else {
-                this.controller.onFacade.onChange(event);
-            }
         };
         this._accessKey = undefined;
         this._alert = true;
@@ -15374,6 +15433,7 @@ class KolInputDate {
         this._label = undefined;
         this._max = undefined;
         this._min = undefined;
+        this._msg = undefined;
         this._name = undefined;
         this._on = undefined;
         this._readOnly = false;
@@ -15437,6 +15497,9 @@ class KolInputDate {
     validateMin(value) {
         this.controller.validateMin(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateName(value) {
         this.controller.validateName(value);
     }
@@ -15499,6 +15562,7 @@ class KolInputDate {
         "_label": ["validateLabel"],
         "_max": ["validateMax"],
         "_min": ["validateMin"],
+        "_msg": ["validateMsg"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
         "_readOnly": ["validateReadOnly"],
@@ -15532,6 +15596,7 @@ class KolInputDate {
             "_label": [1],
             "_max": [1],
             "_min": [1],
+            "_msg": [16],
             "_name": [1],
             "_on": [16],
             "_readOnly": [4, "_read-only"],
@@ -15655,7 +15720,7 @@ class InputEmailController extends InputTextEmailController {
     }
 }
 
-const defaultStyleCss$s = "@layer kol-global {\n  .sc-kol-input-email-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-email-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-email-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-email-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-email-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-email-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-email-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-email-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {}";
+const defaultStyleCss$s = "@layer kol-global {\n  .sc-kol-input-email-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-email-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-email-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-email-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-email-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-email-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-email-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-email-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {}";
 var KolInputEmailDefaultStyle0 = defaultStyleCss$s;
 
 class KolInputEmail {
@@ -15667,10 +15732,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: '82be71e2f6e81d9beaf65b1f9ca7c5f1d65f5d03', class: {
+        return (hAsync(Host, { key: 'f8d566bc0ff56a27c292e3957bdfa96c0b734e0e', class: {
                 'kol-input-email': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { key: 'de9084dfb1f5d978b1d853f5b292532643d10457', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _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: '1ddb1c318dbd7d2439529021145a8376dbc3264a', 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: '4155f79bd1aa46146c7164641a71a5509a398b88', slot: "input" }, hAsync("input", Object.assign({ key: '9559ef84dbb7bf2aa389ae422ecca1fea142d1d6', 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 }))))));
+            } }, hAsync(KolInputTag, { key: '12a7676f8a854208440a554b180895677a55e116', 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: '2da3355f87e14234c4718e087b3cca1e2a283d0b', 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: 'b70d04c05d1156b06f0c6880c1983eee5d5dc585', slot: "input" }, hAsync("input", Object.assign({ key: 'b67a71356ffff59cb3238c105a69dc25d128c7f0', 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);
@@ -15679,16 +15744,16 @@ class KolInputEmail {
             propagateFocus(this.host, this.ref);
         };
         this.onKeyDown = (event) => {
-            setState(this, '_currentLength', event.target.value.length);
             if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 propagateSubmitEventToForm({
                     form: this.host,
                     ref: this.ref,
                 });
             }
-            else {
-                this.controller.onFacade.onChange(event);
-            }
+        };
+        this.onInput = (event) => {
+            setState(this, '_currentLength', event.target.value.length);
+            this.controller.onFacade.onInput(event);
         };
         this._accessKey = undefined;
         this._alert = true;
@@ -15703,6 +15768,7 @@ class KolInputEmail {
         this._id = undefined;
         this._label = undefined;
         this._maxLength = undefined;
+        this._msg = undefined;
         this._multiple = false;
         this._name = undefined;
         this._on = undefined;
@@ -15767,6 +15833,9 @@ class KolInputEmail {
     validateMaxLength(value) {
         this.controller.validateMaxLength(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateMultiple(value) {
         this.controller.validateMultiple(value);
     }
@@ -15828,6 +15897,7 @@ class KolInputEmail {
         "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_maxLength": ["validateMaxLength"],
+        "_msg": ["validateMsg"],
         "_multiple": ["validateMultiple"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
@@ -15862,6 +15932,7 @@ class KolInputEmail {
             "_id": [1],
             "_label": [1],
             "_maxLength": [2, "_max-length"],
+            "_msg": [16],
             "_multiple": [4],
             "_name": [1],
             "_on": [16],
@@ -15912,7 +15983,7 @@ class InputFileController extends InputIconController {
     }
 }
 
-const defaultStyleCss$r = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-input-file-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-file-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-file-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-file-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-file-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-file-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-file-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-file-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  label input[type=file]::-webkit-file-upload-button {\n    display: none;\n  }\n  label input[type=file]:before {\n    content: \"Datei auswählen\";\n  }\n  label input[multiple]:before {\n    content: \"Dateien auswählen\";\n  }\n  div.input {\n    cursor: pointer;\n  }\n}";
+const defaultStyleCss$r = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-input-file-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-file-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-file-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-file-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-file-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-file-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-file-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-file-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  label input[type=file]::-webkit-file-upload-button {\n    display: none;\n  }\n  label input[type=file]:before {\n    content: \"Datei auswählen\";\n  }\n  label input[multiple]:before {\n    content: \"Dateien auswählen\";\n  }\n  div.input {\n    cursor: pointer;\n  }\n}";
 var KolInputFileDefaultStyle0 = defaultStyleCss$r;
 
 class KolInputFile {
@@ -15923,10 +15994,10 @@ class KolInputFile {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'c17c01ef92f7e7ae2fdf0d0bb8fa1c5f5e78097c', class: "kol-input-file" }, hAsync("kol-input", { key: '50c4beaeaed48d32e063d388d8ed3dc6718a20d9', class: {
+        return (hAsync(Host, { key: '4890bf15ab5137bde1aa60d58a0fb086d9488b55', class: "kol-input-file" }, hAsync(KolInputTag, { key: '70cbafeae056ce204a84654063039a1aab97f4dd', class: {
                 file: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _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: 'e3159d19b74d2e256961949c369b88c8321cdd69', 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: 'ac3ec7d1e5e664fed2ca4b10650f335f90d84bcc', slot: "input" }, hAsync("input", Object.assign({ key: '99ec2ad2060e83ead780687a4d7ed54575b14d05', 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 }))))));
+            }, _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: 'da09a95616192874a4435bca143e170600e3bf7d', 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: 'ebd9ab6e463dc2f1c25d85d44933319f9d331482', slot: "input" }, hAsync("input", Object.assign({ key: '50ef2e666ce96c077da3482ea758a3148c79406b', 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);
@@ -15935,17 +16006,15 @@ class KolInputFile {
             propagateFocus(this.host, this.ref);
         };
         this.onChange = (event) => {
-            var _a;
             if (this.ref instanceof HTMLInputElement && this.ref.type === 'file') {
                 const value = this.ref.files;
-                stopPropagation(event);
-                tryToDispatchKoliBriEvent('change', this.host, value);
+                this.controller.onFacade.onChange(event);
                 this.controller.setFormAssociatedValue(value);
-                if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
-                    this.state._on.onChange(event, value);
-                }
             }
         };
+        this.onInput = (event) => {
+            this.controller.onFacade.onInput(event, false);
+        };
         this._accept = undefined;
         this._accessKey = undefined;
         this._alert = true;
@@ -15957,6 +16026,7 @@ class KolInputFile {
         this._icons = undefined;
         this._id = undefined;
         this._label = undefined;
+        this._msg = undefined;
         this._multiple = false;
         this._name = undefined;
         this._on = undefined;
@@ -16007,6 +16077,9 @@ class KolInputFile {
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateMultiple(value) {
         this.controller.validateMultiple(value);
     }
@@ -16052,6 +16125,7 @@ class KolInputFile {
         "_icons": ["validateIcons"],
         "_id": ["validateId"],
         "_label": ["validateLabel"],
+        "_msg": ["validateMsg"],
         "_multiple": ["validateMultiple"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
@@ -16080,6 +16154,7 @@ class KolInputFile {
             "_icons": [1],
             "_id": [1],
             "_label": [1],
+            "_msg": [16],
             "_multiple": [4],
             "_name": [1],
             "_on": [16],
@@ -16181,7 +16256,7 @@ class InputNumberController extends InputIconController {
     }
 }
 
-const defaultStyleCss$q = "@layer kol-global {\n  .sc-kol-input-number-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-number-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-number-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-number-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-number-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-number-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-number-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-number-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {}";
+const defaultStyleCss$q = "@layer kol-global {\n  .sc-kol-input-number-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-number-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-number-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-number-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-number-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-number-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-number-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-number-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {}";
 var KolInputNumberDefaultStyle0 = defaultStyleCss$q;
 
 class KolInputNumber {
@@ -16193,13 +16268,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: '93074e828809a7b77dda9645adc60b3488bd61bc', class: {
+        return (hAsync(Host, { key: 'a6601f1735978325f3817aecc82a344253636d73', class: {
                 'kol-input-number': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { key: '86ceb7c09700c89d3f5a628c0d8b7aa33cbc8e33', class: {
+            } }, hAsync(KolInputTag, { key: 'd3ea3a283e20920a8cf2599cc81a58652840a5d1', class: {
                 number: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _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: '1291a05a915cd62fa43efea6c3fe1987b2135574', 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: '1ee8a943343584329b167010a4f58f70e332dfa8', slot: "input" }, hAsync("input", Object.assign({ key: '0dec3aff24e5f0616bceb6b992168e38f83d0445', 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: '1e93c3efc780ba3bb651201d0499879f36815939', 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: 'b5fbae94cdbc2f68acc30f4aa2720d32e7776ce2', slot: "input" }, hAsync("input", Object.assign({ key: 'af7d91f2d8ffd84c2dcd7d58149fc6e08c1c96a9', 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);
@@ -16214,9 +16289,6 @@ class KolInputNumber {
                     ref: this.ref,
                 });
             }
-            else {
-                this.controller.onFacade.onChange(event);
-            }
         };
         this._accessKey = undefined;
         this._alert = true;
@@ -16231,6 +16303,7 @@ class KolInputNumber {
         this._label = undefined;
         this._max = undefined;
         this._min = undefined;
+        this._msg = undefined;
         this._name = undefined;
         this._on = undefined;
         this._placeholder = undefined;
@@ -16293,6 +16366,9 @@ class KolInputNumber {
     validateMin(value) {
         this.controller.validateMin(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateName(value) {
         this.controller.validateName(value);
     }
@@ -16355,6 +16431,7 @@ class KolInputNumber {
         "_label": ["validateLabel"],
         "_max": ["validateMax"],
         "_min": ["validateMin"],
+        "_msg": ["validateMsg"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
         "_placeholder": ["validatePlaceholder"],
@@ -16388,6 +16465,7 @@ class KolInputNumber {
             "_label": [1],
             "_max": [8],
             "_min": [8],
+            "_msg": [16],
             "_name": [1],
             "_on": [16],
             "_placeholder": [1],
@@ -16410,7 +16488,7 @@ class KolInputNumber {
     }; }
 }
 
-const defaultStyleCss$p = "@layer kol-global {\n  .sc-kol-input-password-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-password-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-password-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-password-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-password-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-password-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-password-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-password-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {}";
+const defaultStyleCss$p = "@layer kol-global {\n  .sc-kol-input-password-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-password-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-password-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-password-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-password-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-password-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-password-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-password-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {}";
 var KolInputPasswordDefaultStyle0 = defaultStyleCss$p;
 
 class KolInputPassword {
@@ -16421,13 +16499,13 @@ class KolInputPassword {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '769c32016f7c59c51606130f260616203005becc', class: {
+        return (hAsync(Host, { key: '307fa02b26068d98edcb52788bfd492dd64e4ad5', class: {
                 'kol-input-password': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { key: 'c25d3ed86a8e919e2e27c5118344b092c781aec8', class: {
+            } }, hAsync(KolInputTag, { key: '3e91ac067006d00988682fe50d3a097b42cc56e0', class: {
                 'hide-label': !!this.state._hideLabel,
                 password: true,
-            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _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: '9d5a2971c093a88cba41b1aff59d5a0ab9dc631f', 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: 'ee0b4a8217525c148668fb91853d8a912e22dc44', slot: "input" }, hAsync("input", Object.assign({ key: '4b033201677b73f4beb160e4494752d1f4775fdc', 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 }))))));
+            }, _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: 'afb582660e9f8c96b9441afeca33e1d842f91d59', 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: 'f7258071e04606bf9ac2baf18640cb3b73c454c2', slot: "input" }, hAsync("input", Object.assign({ key: 'e4bc5ffe2bc97456d676b9a19dbb014f17cc319a', 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);
@@ -16436,16 +16514,16 @@ class KolInputPassword {
             propagateFocus(this.host, this.ref);
         };
         this.onKeyDown = (event) => {
-            setState(this, '_currentLength', event.target.value.length);
             if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 propagateSubmitEventToForm({
                     form: this.host,
                     ref: this.ref,
                 });
             }
-            else {
-                this.controller.onFacade.onChange(event);
-            }
+        };
+        this.onInput = (event) => {
+            setState(this, '_currentLength', event.target.value.length);
+            this.controller.onFacade.onInput(event);
         };
         this._accessKey = undefined;
         this._alert = true;
@@ -16460,6 +16538,7 @@ class KolInputPassword {
         this._id = undefined;
         this._label = undefined;
         this._maxLength = undefined;
+        this._msg = undefined;
         this._name = undefined;
         this._on = undefined;
         this._pattern = undefined;
@@ -16524,6 +16603,9 @@ class KolInputPassword {
     validateMaxLength(value) {
         this.controller.validateMaxLength(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateName(value) {
         this.controller.validateName(value);
     }
@@ -16579,6 +16661,7 @@ class KolInputPassword {
         "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_maxLength": ["validateMaxLength"],
+        "_msg": ["validateMsg"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
         "_pattern": ["validatePattern"],
@@ -16611,6 +16694,7 @@ class KolInputPassword {
             "_id": [1],
             "_label": [1],
             "_maxLength": [2, "_max-length"],
+            "_msg": [16],
             "_name": [1],
             "_on": [16],
             "_pattern": [1],
@@ -16632,7 +16716,7 @@ class KolInputPassword {
     }; }
 }
 
-const defaultStyleCss$o = "@layer kol-global {\n  .sc-kol-input-radio-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-radio-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-radio-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-radio-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-radio-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-radio-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-radio-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-radio-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-radio-default-h {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  .kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  input {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  input:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\n  }\n  input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    input:checked:before {\n      \n      background: highlight !important;\n    }\n  }\n  fieldset {\n    display: flex;\n  }\n  fieldset.vertical {\n    flex-direction: column;\n  }\n  fieldset .input-slot {\n    align-items: center;\n    display: flex;\n  }\n  \n  .required label > span::after {\n    content: \"\";\n  }\n}";
+const defaultStyleCss$o = "@layer kol-global {\n  .sc-kol-input-radio-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-radio-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-radio-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-radio-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-radio-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-radio-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-radio-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-radio-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-radio-default-h {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  .kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  input {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  input:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\n  }\n  input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    input:checked:before {\n      \n      background: highlight !important;\n    }\n  }\n  fieldset {\n    display: flex;\n  }\n  fieldset.vertical {\n    flex-direction: column;\n  }\n  fieldset .input-slot {\n    align-items: center;\n    display: flex;\n  }\n  \n  .required label > span::after {\n    content: \"\";\n  }\n}";
 var KolInputRadioDefaultStyle0 = defaultStyleCss$o;
 
 class KolInputRadio {
@@ -16642,26 +16726,27 @@ class KolInputRadio {
     render() {
         const { ariaDescribedBy, hasError } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'f2103803d618bc94285670b8cc2c9270cdb75bf1', class: "kol-input-radio" }, hAsync("fieldset", { key: 'a9cda38b082597f6e729260be843353ea1344d5a', class: {
+        return (hAsync(Host, { key: '8ecbb61c14eb1ab1e691b7fb33805698deee6227', class: "kol-input-radio" }, hAsync("fieldset", { key: 'a3c0c25bdac11fb58cb36dcc02ef4304aa8f1c19', 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: '638a114e07fa08edadd4e5150daeafc120f5df8e', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: 'df3d7306912e893678d3ceb318be13a79d7a39c6' }, hAsync("span", { key: 'e3609b48b053e33bc37d26b36329371dd08ded02', 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: '3af90527febcde9277bd6e1f5f6be05335d8a434', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: 'a5255df9fdffd9184eb14f3da96148bfa1629b12' }, hAsync("span", { key: '5c25d8de758d3c04049a04f1224433c47ace635d', 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}`;
-            return (hAsync("kol-input", { class: {
+            const selected = this.state._value === option.value;
+            return (hAsync(KolInputTag, { class: {
                     radio: true,
                     disabled: Boolean(this.state._disabled || option.disabled),
-                }, key: customId, _accessKey: this.state._accessKey, _disabled: this.state._disabled || option.disabled, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: customId, _label: option.label, _renderNoLabel: true, _required: this.state._required, _slotName: slotName, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("div", { slot: slotName, class: "radio-input-wrapper" }, hAsync("input", Object.assign({ ref: this.state._value === option.value ? this.catchRef : undefined, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: "radio", id: customId, checked: this.state._value === option.value, name: this.state._name || this.state._id, disabled: this.state._disabled || option.disabled, required: this.state._required, tabIndex: this.state._tabIndex, value: `-${index}` }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined })), hAsync("label", { class: "radio-label", htmlFor: `${customId}`, style: {
+                }, key: customId, _accessKey: this.state._accessKey, _disabled: this.state._disabled || option.disabled, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: customId, _label: option.label, _renderNoLabel: true, _required: this.state._required, _slotName: slotName, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("div", { slot: slotName, class: "radio-input-wrapper" }, hAsync("input", Object.assign({ ref: this.state._value === option.value ? this.catchRef : undefined, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: "radio", id: customId, checked: selected, name: this.state._name || this.state._id, disabled: this.state._disabled || option.disabled, required: this.state._required, tabIndex: this.state._tabIndex, value: `-${index}` }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined })), hAsync("label", { class: "radio-label", htmlFor: `${customId}`, style: {
                     height: this.state._hideLabel ? '0' : undefined,
                     margin: this.state._hideLabel ? '0' : undefined,
                     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, { _alert: this.state._alert, _hideError: this.state._hideError, _error: this.state._error, _id: this.state._id }))));
+        }), hasError && hAsync(FormFieldMsg, { _alert: this.state._alert, _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -16692,6 +16777,7 @@ class KolInputRadio {
         this._hint = '';
         this._id = undefined;
         this._label = undefined;
+        this._msg = undefined;
         this._name = undefined;
         this._on = undefined;
         this._options = undefined;
@@ -16738,6 +16824,9 @@ class KolInputRadio {
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateName(value) {
         this.controller.validateName(value);
     }
@@ -16769,7 +16858,7 @@ class KolInputRadio {
         this._alert = this._alert === true;
         this._touched = this._touched === true;
         this.currentValue = this._value;
-        this.controller.componentWillLoad(this.onChange);
+        this.controller.componentWillLoad();
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -16782,6 +16871,7 @@ class KolInputRadio {
         "_hint": ["validateHint"],
         "_id": ["validateId"],
         "_label": ["validateLabel"],
+        "_msg": ["validateMsg"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
         "_options": ["validateOptions"],
@@ -16808,6 +16898,7 @@ class KolInputRadio {
             "_hint": [1],
             "_id": [1],
             "_label": [1],
+            "_msg": [16],
             "_name": [1],
             "_on": [16],
             "_options": [1],
@@ -16862,7 +16953,7 @@ class InputRangeController extends InputIconController {
     }
 }
 
-const defaultStyleCss$n = "@layer kol-global {\n  .sc-kol-input-range-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-range-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-range-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-range-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-range-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-range-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-range-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-range-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  .inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n  }\n  input[type=number] {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  \n  input[type=range] {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: 1px solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: 0.5rem;\n    line-height: 1.5em;\n    padding: 0;\n    margin: 0;\n    \n    width: 0;\n  }\n  input[type=range]::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: 20px;\n    width: 20px;\n    border-radius: 20px;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  input[type=range]::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: 20px;\n    width: 20px;\n    border-radius: 20px;\n    cursor: pointer;\n    -moz-appearance: none;\n  }\n}\n\n@media (prefers-contrast: more) {\n  /*!@::-webkit-slider-thumb*/.sc-kol-input-range-default::-webkit-slider-thumb {\n    outline: 1px solid currentColor;\n  }\n}";
+const defaultStyleCss$n = "@layer kol-global {\n  .sc-kol-input-range-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-range-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-range-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-range-default-h {\n    display: block;\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-range-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-range-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-range-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-range-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  .inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n  }\n  input[type=number] {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  \n  input[type=range] {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: 1px solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5em;\n    padding: 0;\n    margin: 0;\n    \n    width: 0;\n  }\n  input[type=range]::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: 20px;\n    width: 20px;\n    border-radius: 20px;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  input[type=range]::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: 20px;\n    width: 20px;\n    border-radius: 20px;\n    cursor: pointer;\n    -moz-appearance: none;\n  }\n}\n\n@media (prefers-contrast: more) {\n  /*!@::-webkit-slider-thumb*/.sc-kol-input-range-default::-webkit-slider-thumb {\n    outline: 1px solid currentColor;\n  }\n}";
 var KolInputRangeDefaultStyle0 = defaultStyleCss$n;
 
 class KolInputRange {
@@ -16892,12 +16983,12 @@ 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: '034a0fb553937a7b62f2f65a18bbf29b80e87c8a', class: "kol-input-range" }, hAsync("kol-input", { key: 'aae7e3b7e6dbf3c5feaaf2295d530b99d16e0bdd', class: {
+        return (hAsync(Host, { key: '8234d5062e120e1d233fde4839d9deb1572db10d', class: "kol-input-range" }, hAsync(KolInputTag, { key: '6999f8fcdecc07dddbd8d087e246f74997e28391', class: {
                 range: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _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: '6ac1f176ab71220323bac77a410bf6eafaf79c0b', 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: '49542e24366de0e0925cce731d818a53168a4ff0', slot: "input" }, hAsync("div", { key: '2d36147076bbadba19aeceb7e2f02daba69c3237', 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: 'bd070fe9c62d8c4c3131a2b1a29b5f10b830b38b', 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: '32917c47012e3654b248e92c7d193c7e46bb76c8', slot: "input" }, hAsync("div", { key: 'c83767854f103c4cdc26c210419b3eb640c62037', class: "inputs-wrapper", style: {
                 '--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
-            } }, hAsync("input", Object.assign({ key: '54ffc66d46215ac9146ebe020814a5ffd78cee99', 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: '92819bbd5661430bf510c21725229a6ce872572d', 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("input", Object.assign({ key: 'e1f1ba155cdccd374927854ab18d8e93b8a5abd0', 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: '0b725315e18c898d94f2a9cab2683fe92bcff897', 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", { id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
         ]))));
     }
@@ -16934,9 +17025,6 @@ class KolInputRange {
                     ref: this.refInputNumber,
                 });
             }
-            else {
-                this.onChange(event);
-            }
         };
         this._accessKey = undefined;
         this._alert = true;
@@ -16951,6 +17039,7 @@ class KolInputRange {
         this._label = undefined;
         this._max = undefined;
         this._min = undefined;
+        this._msg = undefined;
         this._name = undefined;
         this._on = undefined;
         this._step = undefined;
@@ -17008,6 +17097,9 @@ class KolInputRange {
     validateMin(value) {
         this.controller.validateMin(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateName(value) {
         this.controller.validateName(value);
     }
@@ -17052,6 +17144,7 @@ class KolInputRange {
         "_label": ["validateLabel"],
         "_max": ["validateMax"],
         "_min": ["validateMin"],
+        "_msg": ["validateMsg"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
         "_step": ["validateStep"],
@@ -17081,6 +17174,7 @@ class KolInputRange {
             "_label": [1],
             "_max": [2],
             "_min": [2],
+            "_msg": [16],
             "_name": [1],
             "_on": [16],
             "_step": [2],
@@ -17099,7 +17193,7 @@ class KolInputRange {
     }; }
 }
 
-const defaultStyleCss$m = "@layer kol-global {\n  .sc-kol-input-text-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-text-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-text-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-text-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-text-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-text-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-text-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-text-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {}";
+const defaultStyleCss$m = "@layer kol-global {\n  .sc-kol-input-text-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-text-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-text-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-text-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n\n@layer kol-global {\n  .sc-kol-input-text-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-text-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-text-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-text-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {}";
 var KolInputTextDefaultStyle0 = defaultStyleCss$m;
 
 class KolInputText {
@@ -17111,41 +17205,38 @@ 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: 'c3683ae6e2bec8dd0d006164690d8fe8d942d588', class: {
+        return (hAsync(Host, { key: '4f46675b039f9f89859cec3776c078fa2e5e2ebf', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { key: 'e2e6cd038ed5faffe713194ffe0729f92a74d66b', class: {
+            } }, hAsync(KolInputTag, { key: '0bc1bec6966a48c94f742dd1a350523cf0c5b0e5', class: {
                 'kol-input-text': true,
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _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: '45b2d97ab2b77084986cd525e666a5909fd77dc6', 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: 'ee0f35ab5bc7a7669380ccfc9e414dd476ef8063', slot: "input" }, hAsync("input", Object.assign({ key: '2ad17d305e33ed88cb693ec6dc0eca0bdedae0a0', 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, { 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: 'b19b9098e12872ccce579a4e00fcf7656f4c6d3d', 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: '65bece26b31241c1daaa1bd3215777f3de2ac224', slot: "input" }, hAsync("input", Object.assign({ key: '6b656d80de53c9bc6d1b1b161ed3e6f3fc299600', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.catchRef = (ref) => {
-            var _a;
             this.ref = ref;
             propagateFocus(this.host, this.ref);
-            this.disconnectedCallback();
-            (_a = this.ref) === null || _a === void 0 ? void 0 : _a.addEventListener('search', this.onChange);
         };
-        this.onKeyDown = (event) => {
+        this.onChange = (event) => {
+            var _a, _b;
+            if (this.oldValue !== ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.value)) {
+                this.oldValue = (_b = this.ref) === null || _b === void 0 ? void 0 : _b.value;
+                this.controller.onFacade.onChange(event);
+            }
+        };
+        this.onInput = (event) => {
             setState(this, '_currentLength', event.target.value.length);
+            this.controller.onFacade.onInput(event);
+        };
+        this.onKeyDown = (event) => {
             if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 propagateSubmitEventToForm({
                     form: this.host,
                     ref: this.ref,
                 });
             }
-            else {
-                this.onChange(event);
-            }
-        };
-        this.onChange = (event) => {
-            var _a, _b;
-            if (this.oldValue !== ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.value)) {
-                this.oldValue = (_b = this.ref) === null || _b === void 0 ? void 0 : _b.value;
-                this.controller.onFacade.onChange(event);
-            }
         };
         this._accessKey = undefined;
         this._alert = true;
@@ -17160,6 +17251,7 @@ class KolInputText {
         this._id = undefined;
         this._label = undefined;
         this._maxLength = undefined;
+        this._msg = undefined;
         this._name = undefined;
         this._on = undefined;
         this._pattern = undefined;
@@ -17225,6 +17317,9 @@ class KolInputText {
     validateMaxLength(value) {
         this.controller.validateMaxLength(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateName(value) {
         this.controller.validateName(value);
     }
@@ -17272,10 +17367,6 @@ class KolInputText {
         this.state._hasValue = !!this.state._value;
         this.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.removeEventListener('search', this.onChange);
-    }
     get host() { return getElement(this); }
     static get watchers() { return {
         "_accessKey": ["validateAccessKey"],
@@ -17291,6 +17382,7 @@ class KolInputText {
         "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_maxLength": ["validateMaxLength"],
+        "_msg": ["validateMsg"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
         "_pattern": ["validatePattern"],
@@ -17325,6 +17417,7 @@ class KolInputText {
             "_id": [1],
             "_label": [1],
             "_maxLength": [2, "_max-length"],
+            "_msg": [16],
             "_name": [1],
             "_on": [16],
             "_pattern": [1],
@@ -17444,7 +17537,7 @@ class KolLink {
         this._tooltipAlign = 'right';
     }
     render() {
-        return (hAsync(Host, { key: '1a8b71a9c7cbf1cf31c186d53af40d76fce2ecb4', class: "kol-link" }, hAsync("kol-link-wc", { key: 'df94efa542733e26d5d601140b09d141e979cbb8', 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: '8a48cae2a414035304516e79639c222a40b9ee4b', name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: '74b031ab364b68c9faea1c242c385c2c391eb0e4', class: "kol-link" }, hAsync(KolLinkWcTag, { key: '99c07f7de1e1c30cdcd360d359b4239cf2c76c04', 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: '96bfdc2a811e8834b4b299cd36c5f83ece3505c0', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -17500,11 +17593,11 @@ class KolLinkButton {
         this._variant = 'normal';
     }
     render() {
-        return (hAsync(Host, { key: '6a35ebf8339b2cc71a8b67a9aacec68955af9077', class: "kol-link-button" }, hAsync("kol-link-wc", { key: '5162afd6e822d5513a28a96cdd76a3ebc4bdc8fe', ref: this.catchRef, class: {
+        return (hAsync(Host, { key: 'a5abcbb151ab1f14195d4a3a1fdb4b1e195ca26b', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '3bf83a6270b0405165152ad3770022b86c8cae4e', 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: 'ec123c8492959ca2241a0443931b458dfc54f4f5', 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: '7136106e0323b7f972d50444bc7c984a4a5c2e8a', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -17536,7 +17629,7 @@ class KolLinkButton {
     }; }
 }
 
-const defaultStyleCss$i = "@layer kol-global {\n  .sc-kol-link-group-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-link-group-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-link-group-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  nav.horizontal ul {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  nav.horizontal li {\n    margin-left: 1.25rem;\n    margin-right: 0.25rem;\n  }\n  nav.horizontal li:first-child {\n    margin-left: 0;\n  }\n  nav.horizontal li:last-child {\n    margin-right: 0;\n  }\n  nav.vertical li {\n    margin-left: 1.75rem;\n    margin-right: 0.5rem;\n  }\n  li.list-none {\n    list-style-type: none !important;\n    margin-left: 0;\n  }\n}";
+const defaultStyleCss$i = "@layer kol-global {\n  .sc-kol-link-group-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-link-group-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-link-group-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  :is(ol, ul).horizontal {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :is(ol, ul).horizontal li {\n    margin-left: calc(20rem / var(--kolibri-root-font-size, 16));\n    margin-right: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(ol, ul).horizontal li:first-child {\n    margin-left: 0;\n  }\n  :is(ol, ul).horizontal li:last-child {\n    margin-right: 0;\n  }\n  :is(ol, ul).vertical li {\n    margin-left: calc(28rem / var(--kolibri-root-font-size, 16));\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  li.list-none {\n    list-style-type: none !important;\n    margin-left: 0;\n  }\n}";
 var KolLinkGroupDefaultStyle0 = defaultStyleCss$i;
 
 const ListItem = (props) => {
@@ -17547,7 +17640,7 @@ const ListItem = (props) => {
                 'list-none': index === 0 && props.orientation === 'horizontal',
             }, style: {
                 listStyleType: props.listStyleType,
-            } }, hAsync("kol-link", Object.assign({}, link)))));
+            } }, hAsync(KolLinkTag, Object.assign({}, link)))));
     });
     return list;
 };
@@ -17560,26 +17653,24 @@ class KolLinkGroup {
         this._links = undefined;
         this._orientation = 'vertical';
         this.state = {
-            _label: '',
             _listStyleType: 'disc',
             _links: [],
             _orientation: 'vertical',
         };
     }
     render() {
-        return (hAsync(Host, { key: '0861d7175e2a027a12924d080bfa640f112ff707', class: "kol-link-group" }, hAsync("nav", { key: 'f91194875c070a471801b8bbd6f551eca0ad6122', "aria-label": this.state._label, class: {
+        const ListTag = this.isUl ? 'ul' : 'ol';
+        return (hAsync(Host, { key: '790e8cdb692babb2d5dc021a2b3f846e08edf239', class: "kol-link-group" }, hAsync(ListTag, { key: 'b778db5aaa11c82746df40a3c214898cd14ae215', "aria-label": this.state._label, class: {
                 vertical: this.state._orientation === 'vertical',
                 horizontal: this.state._orientation === 'horizontal',
-            } }, this.isUl === false ? (hAsync("ol", null, hAsync(ListItem, { links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))) : (hAsync("ul", null, hAsync(ListItem, { links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))))));
+            } }, hAsync(ListItem, { key: '904c59094b31d541e5bb9769ea8420d9aaac1c50', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
     }
     validateLabel(value, _oldValue, initial = false) {
-        if (!initial) {
+        if (!initial && this.state._label) {
             removeNavLabel(this.state._label);
         }
-        validateLabel(this, value, {
-            required: true,
-        });
-        addNavLabel(this.state._label);
+        validateLabel(this, value);
+        this.state._label && addNavLabel(this.state._label);
     }
     validateListStyleType(value) {
         watchValidator(this, '_listStyleType', (value) => {
@@ -17621,7 +17712,7 @@ class KolLinkGroup {
         this.validateOrientation(this._orientation);
     }
     disconnectedCallback() {
-        removeNavLabel(this.state._label);
+        this.state._label && removeNavLabel(this.state._label);
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -17711,13 +17802,13 @@ class KolLinkWc {
     render() {
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'f0c3b25a60371e5ff1e7619f2ffa9defc5047d63', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: '96f2ec8d7272865c3901574ede6d017531f97a29', 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: '504f0f2fe9bed749d0847c0fbd150e76c7871bcd', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: 'a5a83b52474683ce841ed0397e72ff8ae087af87', 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("kol-span-wc", { key: 'a5b675c4f9b4cd25c51aaba72f0ce6cb3a5c979b', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '9b6a4ed20fe6478d7394fcdfe0fec727223132bf', name: "expert", slot: "expert" })), isExternal && (hAsync("kol-icon", { 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("kol-tooltip-wc", { key: '76e6cb58659867ec918400b1ef4583521eafb160', "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: '41a0a0a0ef71a2f54025e6c60238d2a804963584', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'f4e727bbf7c7a9fb2fc0e19218cf516fd0910c2b', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { 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: '9d203ab09e2ba58b2ed7c1999b1968d3d486367c', "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);
@@ -18031,7 +18122,7 @@ class KolLogo {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '6626384dd0b31f125992d2d0d5a0cf0c508279e8', class: "kol-logo" }, hAsync("svg", { key: '29b9c7c19c39b4d40b348b451698738589991d40', "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: 'ffa55ac709fd008772423a9df7741ce961a28327', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: '726831093fb300148965f8eb6bdb28f700857c0f', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '03b761f403476dad542b57d0bb6a4c91e3b4eb8f' })), hAsync("svg", { key: '965dfe5d4eca4b3fb34f7713269cc76bad24ffe1', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: '9ea8ac3d8780e8d77a5f5b7016a99852eb8df5de', width: "5", height: "30" }), hAsync("rect", { key: '816047a5a405338fc9c79d4735be4b70fd655d5f', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: '319f7df6a39e1d7b26d6abce1fe401ae3d07763d', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '851a1fa0e2d16f40d9ad4e2a4670968c9bec8325', x: "50", y: "0" }, hAsync("text", { key: '676979226b56ebbaeb03106a736b37cd980ced29', 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: 'e99716f0d792fa12a8f211ceb9dbf20608b02404', class: "kol-logo" }, hAsync("svg", { key: '7e660a9ecfefc16c37846bbf42e7bf92eb8b8abb', "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: '9ce71f1b7e4c7643f7430591f2042fa6e3edef22', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: '819c6dc3223544570a7c1f0b31d180942e140eb8', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: 'd51c74d633ed6d7d9e5fea268e1cc965a8fde42e' })), hAsync("svg", { key: 'bd7b4dbd0084babd5818366a935874d0dc1014c3', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: 'ef334c27c11f68f3e716f86926e8abb2c8f830d0', width: "5", height: "30" }), hAsync("rect", { key: '8e965aaca880244457a2f4e4da65c201a79a002b', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: 'f2b406859435e5771f1cfa5ee1262e83d93e4b6f', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '05150ad82cbd57c88c616ddbe1a35e8aae35fbcc', x: "50", y: "0" }, hAsync("text", { key: '279f02ee9463f090328c5b4043e0102858eea34f', 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."))))))));
     }
@@ -18203,7 +18294,7 @@ class KolModal {
         }
     }
     render() {
-        return (hAsync(Host, { key: '0bd48790a0f817e4d1795f35935c8dd73adcbd1d', class: "kol-modal", ref: (el) => {
+        return (hAsync(Host, { key: '2819e0a6275d7f69108ec59713aa22432bad6465', class: "kol-modal", ref: (el) => {
                 this.hostElement = el;
             } }, this.state._activeElement && (hAsync("div", { class: "overlay" }, hAsync("div", { class: "modal", style: {
                 width: this.state._width,
@@ -18281,6 +18372,13 @@ class KolModal {
 const defaultStyleCss$f = "@layer kol-global {\n  .sc-kol-nav-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-nav-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-nav-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-nav-default-h > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}";
 var KolNavDefaultStyle0 = defaultStyleCss$f;
 
+const entryIsLink = (entryProps) => {
+    return typeof entryProps._href === 'string';
+};
+const entryIsButton = (entryProps) => {
+    var _a;
+    return entryProps._href === undefined && typeof ((_a = entryProps._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function';
+};
 class KolNav {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -18323,14 +18421,23 @@ class KolNav {
     collapseChildren(children) {
         this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren != children) });
     }
-    entry(collapsible, hideLabel, hasChildren, link, expanded) {
+    entry(collapsible, hideLabel, hasChildren, entry, expanded) {
         const icons = this.state._hasIconsWhenExpanded || this.state._hideLabel
-            ? link._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)
+            ? entry._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)
             : undefined;
-        return (hAsync("div", { class: { entry: true, 'hide-label': hideLabel } }, '_href' in link ? (hAsync("kol-link-wc", Object.assign({ class: "entry-item" }, link, { _hideLabel: hideLabel, _icons: icons }))) : (hAsync("kol-button-wc", { class: "entry-item", _label: link._label, _hideLabel: hideLabel, _icons: icons, _on: { onClick: () => this.handleToggleExpansionClick(link._children) } })), hasChildren ? this.expandButton(collapsible, link, expanded) : ''));
+        return (hAsync("div", { class: { entry: true, 'hide-label': hideLabel } }, entryIsLink(entry) ? (hAsync(KolLinkWcTag, Object.assign({ class: "entry-item" }, entry, { _hideLabel: hideLabel, _icons: icons }))) : (hAsync(KolButtonWcTag, { class: "entry-item", _label: entry._label, _hideLabel: hideLabel, _icons: icons, _on: {
+                onClick: (event, value) => {
+                    if (entryIsButton(entry) && typeof entry._on.onClick === 'function') {
+                        entry._on.onClick(event, value);
+                    }
+                    else {
+                        this.handleToggleExpansionClick(entry._children);
+                    }
+                },
+            } })), hasChildren ? this.expandButton(collapsible, entry, expanded) : ''));
     }
     expandButton(collapsible, link, expanded) {
-        return (hAsync("kol-button-wc", { class: "expand-button", _ariaExpanded: expanded, _disabled: !collapsible, _icons: 'codicon codicon-' + (expanded ? 'remove' : 'add'), _hideLabel: true, _label: `Untermenü zu ${link._label} ${expanded ? 'schließen' : 'öffnen'}`, _on: { onClick: () => this.handleToggleExpansionClick(link._children) } }));
+        return (hAsync(KolButtonWcTag, { class: "expand-button", _ariaExpanded: expanded, _disabled: !collapsible, _icons: 'codicon codicon-' + (expanded ? 'remove' : 'add'), _hideLabel: true, _label: `Untermenü zu ${link._label} ${expanded ? 'schließen' : 'öffnen'}`, _on: { onClick: () => this.handleToggleExpansionClick(link._children) } }));
     }
     li(collapsible, hideLabel, deep, index, link, orientation) {
         const active = !!link._active;
@@ -18371,11 +18478,11 @@ class KolNav {
         const collapsible = this.state._collapsible === true;
         const hideLabel = this.state._hideLabel === true;
         const orientation = this.state._orientation;
-        return (hAsync(Host, { key: '431b237b655ccee8b34ca35a5fe79b9335622519', class: "kol-nav" }, hAsync("div", { key: 'b240ec9f9e5219aa57a599c85cb674c917aff8f2', class: {
+        return (hAsync(Host, { key: '8e055bdf686c2adc6338cf663dc5f873836eaba6', class: "kol-nav" }, hAsync("div", { key: '8f095f7c3370e33d085d96cfe36b464d904747af', class: {
                 nav: true,
                 [orientation]: true,
                 'is-compact': this.state._hideLabel,
-            } }, hAsync("nav", { key: '1dc5602f413110870e810d6e30327801a9740eda', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'd1587c7add1882c85a0b2b10e04db26c0be51f09', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { class: "compact" }, hAsync("kol-button", { _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: 'd9070f9c00f1e19154ca3c571ac94318dfba3c9f', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'e4d91d4e2221db954a0cb1c4daedddd1fcce70af', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { class: "compact" }, hAsync(KolButtonTag, { _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 });
                 },
@@ -18456,7 +18563,7 @@ class KolNav {
     }; }
 }
 
-const defaultStyleCss$e = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-pagination-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-pagination-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-pagination-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-pagination-default-h {\n    align-items: center;\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: 1fr auto;\n  }\n  .navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .separator:before {\n    content: \"•••\";\n  }\n}";
+const defaultStyleCss$e = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-pagination-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-pagination-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-pagination-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-pagination-default-h {\n    align-items: center;\n    display: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .separator:before {\n    content: \"•••\";\n  }\n}";
 var KolPaginationDefaultStyle0 = defaultStyleCss$e;
 
 const leftDoubleArrowIcon = {
@@ -18626,19 +18733,19 @@ class KolPagination {
                 return null;
             }
         });
-        return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync("kol-button-wc", { class: "first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-first'), _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync("kol-button-wc", { class: "previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: translate('kol-page-back'), _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync("kol-button-wc", { class: "next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: translate('kol-page-next'), _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync("kol-button-wc", { class: "last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-last'), _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync("kol-select", { _hideLabel: true, _id: `pagination-size-${this.nonce}`, _label: translate('kol-entries-per-site'), _options: this.state._pageSizeOptions, _on: {
+        return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-first'), _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: translate('kol-page-back'), _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: translate('kol-page-next'), _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-last'), _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(KolSelectTag, { _hideLabel: true, _id: `pagination-size-${this.nonce}`, _label: translate('kol-entries-per-site'), _options: this.state._pageSizeOptions, _on: {
                 onChange: this.onChangePageSize,
             }, _value: [this.state._pageSize] }))));
     }
     getUnselectedPageButton(page) {
-        return (hAsync("li", null, hAsync("kol-button-wc", { exportparts: "icon", key: `${this.nonce}-${page}`, _customClass: this.state._customClass, _label: "", _on: {
+        return (hAsync("li", null, hAsync(KolButtonWcTag, { exportparts: "icon", key: `${this.nonce}-${page}`, _customClass: this.state._customClass, _label: "", _on: {
                 onClick: (event) => {
                     this.onClick(event, page);
                 },
             } }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, translate('kol-page')), " ", page))));
     }
     getSelectedPageButton(page) {
-        return (hAsync("li", null, hAsync("kol-button-wc", { class: "selected", key: `${this.nonce}-selected`, _customClass: this.state._customClass, _disabled: true, _label: "" }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, translate('kol-page')), " ", page))));
+        return (hAsync("li", null, hAsync(KolButtonWcTag, { class: "selected", key: `${this.nonce}-selected`, _customClass: this.state._customClass, _disabled: true, _label: "" }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, translate('kol-page')), " ", page))));
     }
     validateBoundaryCount(value) {
         watchNumber(this, '_boundaryCount', Math.max(0, value !== null && value !== void 0 ? value : 1));
@@ -20847,7 +20954,7 @@ class KolPopover {
         });
     }
     render() {
-        return (hAsync(Host, { key: '7c11858839140bb34d7645fb4c0b9193bf1b60ee', ref: this.catchHostAndTriggerElement, class: "kol-popover-wc" }, hAsync("div", { key: 'a6686e84d5894050311d9a36174f7920ecf5fce5', class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { key: 'e60e402a348c639aef30ba5ca13b754a8ff107db', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '8e8b6683c906bc64c96dd429170d30a40fb54137' }))));
+        return (hAsync(Host, { key: '75411d41cdaa39bfb0038556b160d4ed35b21341', ref: this.catchHostAndTriggerElement, class: "kol-popover-wc" }, hAsync("div", { key: '6802b4f0ab7ad5aababaca54048bc62e1179e4e3', class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { key: 'b122939f481081627e2ed57ff3a75799a33c94fe', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '38bfe558dd55f601bdf43cc3f0d8478791d9afca' }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -20880,27 +20987,30 @@ class KolPopover {
     }; }
 }
 
-const defaultStyleCss$d = "@layer kol-global {\n  .sc-kol-progress-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-progress-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-progress-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  progress {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    width: 0;\n  }\n  .bar .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .bar .background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .bar .progress {\n    fill: #0075ff;\n    stroke: transparent;\n    transition: 250ms ease-in-out 50ms;\n  }\n  .cycle .background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .cycle .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .cycle .whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .cycle .progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n    transition: 250ms ease-in-out 50ms;\n  }\n  \n  @media (prefers-reduced-motion) {\n    .progress {\n      transition-duration: 0s;\n      transition-delay: 0s;\n    }\n  }\n}";
+const defaultStyleCss$d = "@layer kol-global {\n  .sc-kol-progress-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-progress-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-progress-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  progress {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    width: 0;\n  }\n  .bar {\n    width: 150px;\n  }\n  .bar .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .bar .background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .bar .progress {\n    fill: #0075ff;\n    stroke: transparent;\n    transition: 250ms ease-in-out 50ms;\n  }\n  .cycle .background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .cycle .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .cycle .whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .cycle .progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n    transition: 250ms ease-in-out 50ms;\n  }\n  \n  @media (prefers-reduced-motion) {\n    .progress {\n      transition-duration: 0s;\n      transition-delay: 0s;\n    }\n  }\n}";
 var KolProgressDefaultStyle0 = defaultStyleCss$d;
 
 const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
-const createProgressSVG = (state) => {
+const CycleSvg = ({ state }) => {
     const fullCircle = 342;
     const textPositionTop = '43%';
     const textPositionBottom = '57%';
-    let labelY = textPositionTop;
-    let valueY = state._label ? textPositionBottom : '50%';
+    const valueY = state._label ? textPositionBottom : '50%';
+    return (hAsync("svg", { class: "cycle", width: "100", viewBox: "0 0 120 120", xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { class: "background", cx: "60", cy: "60", r: "54.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "8" }), hAsync("circle", { class: "whitespace", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "3" }), hAsync("circle", { class: "border", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "whitespace", cx: "60", cy: "60", r: "51", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "border", cx: "60", cy: "60", r: "50", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "progress", fill: "currentColor", stroke: "currentColor", "stroke-linecap": "round", "stroke-dasharray": `${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`, "stroke-width": "6", cx: "60", cy: "60", r: "54.5" }), state._label && (hAsync("text", { "aria-hidden": "true", x: "50%", y: textPositionTop, "text-anchor": "middle", fill: "currentColor" }, state._label)), hAsync("text", { "aria-hidden": "true", x: "50%", y: valueY, "text-anchor": "middle", fill: "currentColor" }, state._value, state._unit)));
+};
+const BarSvg = ({ state }) => {
+    const textLabelPadding = 'var(--kolibri-text-label-padding, 45px)';
+    const percentage = 100 * (state._value / state._max);
+    return (hAsync("div", { class: "bar" }, state._label && hAsync("div", null, state._label), hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "12", overflow: "visible" }, hAsync("rect", { class: "background", x: "1", y: "1", height: "10", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", style: { width: `calc(100% - 2px - ${textLabelPadding})` } }), hAsync("rect", { class: "border", x: "1", y: "1", height: "10", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1", style: { width: `calc(100% - 2px - ${textLabelPadding})` } }), hAsync("rect", { class: "progress", x: "2.5", y: "2.5", height: "7", rx: "3.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", style: { width: `calc(${percentage}% - 5px - (${textLabelPadding} / 100 * ${percentage}))` } }), hAsync("text", { "aria-hidden": "true", "text-anchor": "end", "dominant-baseline": "middle", fill: "currentColor", x: "100%", y: "50%" }, state._value, state._unit))));
+};
+const createProgressSVG = (state) => {
     switch (state._variant) {
-        case 'cycle-value-label':
-            if (state._label) {
-                labelY = textPositionBottom;
-                valueY = textPositionTop;
-            }
         case 'cycle':
-        case 'cycle-label-value':
-            return (hAsync("svg", { class: "cycle", width: "100", viewBox: "0 0 120 120", xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { class: "background", cx: "60", cy: "60", r: "54.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "8" }), hAsync("circle", { class: "whitespace", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "3" }), hAsync("circle", { class: "border", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "whitespace", cx: "60", cy: "60", r: "51", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "border", cx: "60", cy: "60", r: "50", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "progress", fill: "currentColor", stroke: "currentColor", "stroke-linecap": "round", "stroke-dasharray": `${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`, "stroke-width": "6", cx: "60", cy: "60", r: "54.5" }), state._label && (hAsync("text", { "aria-hidden": "true", x: "50%", y: labelY, "text-anchor": "middle", fill: "currentColor" }, state._label)), hAsync("text", { "aria-hidden": "true", x: "50%", y: valueY, "text-anchor": "middle", fill: "currentColor" }, state._value, state._unit)));
+            return hAsync(CycleSvg, { state: state });
+        case 'bar':
+            return hAsync(BarSvg, { state: state });
         default:
-            return (hAsync("div", { class: "bar" }, state._label && hAsync("div", null, state._label), hAsync("div", { style: { display: 'flex', gap: '0.3em' } }, hAsync("svg", { width: "100", viewBox: "0 0 102 8", xmlns: "http://www.w3.org/2000/svg" }, hAsync("rect", { class: "background", x: "1", y: "1", height: "10", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", width: "100" }), hAsync("rect", { class: "progress", x: "2.5", y: "2.5", height: "7", rx: "3.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", width: 95 * (state._value / state._max) }), hAsync("rect", { class: "border", x: "1", y: "1", height: "10", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1", width: "100" })), hAsync("text", { "aria-hidden": "true", "text-anchor": "middle", "dominant-baseline": "central", fill: "currentColor" }, state._value, state._unit))));
+            throw new Error(`Progress variant ${state._variant} not implemented.`);
     }
 };
 class KolProcess {
@@ -20920,7 +21030,7 @@ class KolProcess {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'd786a699c8196c6a4b89af222b716a0846553161', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: 'a32a4cc78b6a3d36686da476b18583f26d914002', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: 'db4af0c75d07dd5b8f2ec8dccdfcbbf20c4b5781', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
+        return (hAsync(Host, { key: '6e573e27abc2de814058aff6ce7b4eb2ea7b4e4a', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: '76a25c51eaed944dbe7a737df7797b129252fee9', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '849cbbea9914c5ab5e348aab70b4cf6607a47c3c', "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);
@@ -21029,9 +21139,9 @@ class KolQuote {
     }
     render() {
         const hasExpertSlot = showExpertSlot(this.state._quote);
-        return (hAsync(Host, { key: 'b70dc51576d63654d2b3fd20c89f396cb5b86f3c', class: "kol-quote" }, hAsync("figure", { key: 'eef4b7d0b5840f373a1bd461faf8053245405ee3', class: {
+        return (hAsync(Host, { key: '93d15f42ad5eaeb21002ff90c0281ec3dbd74c52', class: "kol-quote" }, hAsync("figure", { key: '9275bb3e226b2bbdf7d050417e243851556846c7', 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", null, hAsync("cite", null, hAsync("kol-link", { _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", null, hAsync("cite", null, hAsync(KolLinkTag, { _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -21147,7 +21257,7 @@ class SelectController extends InputIconController {
     }
 }
 
-const defaultStyleCss$b = "@layer kol-global {\n  .sc-kol-select-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-select-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-select-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-select-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}";
+const defaultStyleCss$b = "@layer kol-global {\n  .sc-kol-select-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-select-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-select-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-select-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}";
 var KolSelectDefaultStyle0 = defaultStyleCss$b;
 
 const isSelected = (valueList, optionValue) => {
@@ -21172,12 +21282,10 @@ class KolSelect {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '2618c080341a8ba2c5d6066cbba57985a4b22f84', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: '5a2f1ccab18352e83717e971c27f960c3c9e8b5a', class: {
+        return (hAsync(Host, { key: '6a99ca9939b8feea22389b24047e75df7de3fb07', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'c0fd316f7e13fa499b7a0f2672347d607fe01fbc', class: {
                 'hide-label': !!this.state._hideLabel,
                 select: true,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _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, _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: 'f3a3c5638ff9441925491880d5b0c4f08160ecb9', 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: '64aff4445074a7606fabeb6ae439d4361ef475b5', slot: "input" }, hAsync("select", { key: '9dbad0338a46070a9be1c4b0035439bfb659a3f6', 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", onClick: this.controller.onFacade.onClick,
-            onBlur: this.controller.onFacade.onBlur,
-            onFocus: this.controller.onFacade.onFocus, onChange: this.onChange }, 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: '43a8853f439b9a23d3832802f9968308a8639e2e', 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: '859d4531edb77433a4f833d4d67088fba62a7b33', slot: "input" }, hAsync("select", Object.assign({ key: '4e4b7d220c3ef009c5ccf46a6fa3f9b15f9eee0a', 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, { onChange: this.onChange }), this.state._options.map((option, index) => {
             const key = `-${index}`;
             if (Array.isArray(option.options)) {
                 return this.renderOptgroup(option, key);
@@ -21215,6 +21323,7 @@ class KolSelect {
         this._icons = undefined;
         this._id = undefined;
         this._label = undefined;
+        this._msg = undefined;
         this._multiple = false;
         this._name = undefined;
         this._on = undefined;
@@ -21267,6 +21376,9 @@ class KolSelect {
     validateLabel(value) {
         this.controller.validateLabel(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateMultiple(value) {
         this.controller.validateMultiple(value);
     }
@@ -21316,6 +21428,7 @@ class KolSelect {
         "_icons": ["validateIcons"],
         "_id": ["validateId"],
         "_label": ["validateLabel"],
+        "_msg": ["validateMsg"],
         "_multiple": ["validateMultiple"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
@@ -21344,6 +21457,7 @@ class KolSelect {
             "_icons": [1],
             "_id": [1],
             "_label": [1],
+            "_msg": [16],
             "_multiple": [4],
             "_name": [1],
             "_on": [16],
@@ -21378,8 +21492,8 @@ class KolSkipNav {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'eeb07ed0eafd0dcc33b1b68dc551933b34e135ee', class: "kol-skip-nav" }, hAsync("nav", { key: '223fd578a8669ea0b2b199a11d83b27437e669cf', "aria-label": this.state._label }, hAsync("ul", { key: '54d37fa51059dca3f52f4efef7107cc1ec151649' }, this.state._links.map((link, index) => {
-            return (hAsync("li", { key: index }, hAsync("kol-link-wc", Object.assign({}, link))));
+        return (hAsync(Host, { key: 'b9f4d1caf5aaf6b063c1ecdd0dd1baf65999f61a', class: "kol-skip-nav" }, hAsync("nav", { key: 'e22cfe4a60de60505fb646377b3b908315958f4f', "aria-label": this.state._label }, hAsync("ul", { key: '8bf62af710317512ab379226d441fbce34aef8b6' }, this.state._links.map((link, index) => {
+            return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
         })))));
     }
     validateLabel(value, _oldValue, initial = false) {
@@ -21434,7 +21548,7 @@ class KolSpan {
         this._label = undefined;
     }
     render() {
-        return (hAsync("kol-span-wc", { key: '80b8ba94d8f3fb40f5a0d9e528132e2a49680eaa', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey, class: "kol-span" }, hAsync("slot", { key: 'd5050bbb1ebe7e55ace0563cdf923635a8792e63', name: "expert", slot: "expert" })));
+        return (hAsync(KolSpanWcTag, { key: '200891a3b4cfb837d7cff1c93664a905f95600d7', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey, class: "kol-span" }, hAsync("slot", { key: 'b23c76157a0f8831111f9d8f661145b0d8ee8425', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolSpanDefaultStyle0
@@ -21994,18 +22108,21 @@ var Any = /[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBF
 
 var Cc = /[\0-\x1F\x7F-\x9F]/;
 
-var regex = /[\xAD\u0600-\u0605\u061C\u06DD\u070F\u0890\u0891\u08E2\u180E\u200B-\u200F\u202A-\u202E\u2060-\u2064\u2066-\u206F\uFEFF\uFFF9-\uFFFB]|\uD804[\uDCBD\uDCCD]|\uD80D[\uDC30-\uDC3F]|\uD82F[\uDCA0-\uDCA3]|\uD834[\uDD73-\uDD7A]|\uDB40[\uDC01\uDC20-\uDC7F]/;
+var regex$1 = /[\xAD\u0600-\u0605\u061C\u06DD\u070F\u0890\u0891\u08E2\u180E\u200B-\u200F\u202A-\u202E\u2060-\u2064\u2066-\u206F\uFEFF\uFFF9-\uFFFB]|\uD804[\uDCBD\uDCCD]|\uD80D[\uDC30-\uDC3F]|\uD82F[\uDCA0-\uDCA3]|\uD834[\uDD73-\uDD7A]|\uDB40[\uDC01\uDC20-\uDC7F]/;
 
 var P = /[!-#%-\*,-\/:;\?@\[-\]_\{\}\xA1\xA7\xAB\xB6\xB7\xBB\xBF\u037E\u0387\u055A-\u055F\u0589\u058A\u05BE\u05C0\u05C3\u05C6\u05F3\u05F4\u0609\u060A\u060C\u060D\u061B\u061D-\u061F\u066A-\u066D\u06D4\u0700-\u070D\u07F7-\u07F9\u0830-\u083E\u085E\u0964\u0965\u0970\u09FD\u0A76\u0AF0\u0C77\u0C84\u0DF4\u0E4F\u0E5A\u0E5B\u0F04-\u0F12\u0F14\u0F3A-\u0F3D\u0F85\u0FD0-\u0FD4\u0FD9\u0FDA\u104A-\u104F\u10FB\u1360-\u1368\u1400\u166E\u169B\u169C\u16EB-\u16ED\u1735\u1736\u17D4-\u17D6\u17D8-\u17DA\u1800-\u180A\u1944\u1945\u1A1E\u1A1F\u1AA0-\u1AA6\u1AA8-\u1AAD\u1B5A-\u1B60\u1B7D\u1B7E\u1BFC-\u1BFF\u1C3B-\u1C3F\u1C7E\u1C7F\u1CC0-\u1CC7\u1CD3\u2010-\u2027\u2030-\u2043\u2045-\u2051\u2053-\u205E\u207D\u207E\u208D\u208E\u2308-\u230B\u2329\u232A\u2768-\u2775\u27C5\u27C6\u27E6-\u27EF\u2983-\u2998\u29D8-\u29DB\u29FC\u29FD\u2CF9-\u2CFC\u2CFE\u2CFF\u2D70\u2E00-\u2E2E\u2E30-\u2E4F\u2E52-\u2E5D\u3001-\u3003\u3008-\u3011\u3014-\u301F\u3030\u303D\u30A0\u30FB\uA4FE\uA4FF\uA60D-\uA60F\uA673\uA67E\uA6F2-\uA6F7\uA874-\uA877\uA8CE\uA8CF\uA8F8-\uA8FA\uA8FC\uA92E\uA92F\uA95F\uA9C1-\uA9CD\uA9DE\uA9DF\uAA5C-\uAA5F\uAADE\uAADF\uAAF0\uAAF1\uABEB\uFD3E\uFD3F\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE61\uFE63\uFE68\uFE6A\uFE6B\uFF01-\uFF03\uFF05-\uFF0A\uFF0C-\uFF0F\uFF1A\uFF1B\uFF1F\uFF20\uFF3B-\uFF3D\uFF3F\uFF5B\uFF5D\uFF5F-\uFF65]|\uD800[\uDD00-\uDD02\uDF9F\uDFD0]|\uD801\uDD6F|\uD802[\uDC57\uDD1F\uDD3F\uDE50-\uDE58\uDE7F\uDEF0-\uDEF6\uDF39-\uDF3F\uDF99-\uDF9C]|\uD803[\uDEAD\uDF55-\uDF59\uDF86-\uDF89]|\uD804[\uDC47-\uDC4D\uDCBB\uDCBC\uDCBE-\uDCC1\uDD40-\uDD43\uDD74\uDD75\uDDC5-\uDDC8\uDDCD\uDDDB\uDDDD-\uDDDF\uDE38-\uDE3D\uDEA9]|\uD805[\uDC4B-\uDC4F\uDC5A\uDC5B\uDC5D\uDCC6\uDDC1-\uDDD7\uDE41-\uDE43\uDE60-\uDE6C\uDEB9\uDF3C-\uDF3E]|\uD806[\uDC3B\uDD44-\uDD46\uDDE2\uDE3F-\uDE46\uDE9A-\uDE9C\uDE9E-\uDEA2\uDF00-\uDF09]|\uD807[\uDC41-\uDC45\uDC70\uDC71\uDEF7\uDEF8\uDF43-\uDF4F\uDFFF]|\uD809[\uDC70-\uDC74]|\uD80B[\uDFF1\uDFF2]|\uD81A[\uDE6E\uDE6F\uDEF5\uDF37-\uDF3B\uDF44]|\uD81B[\uDE97-\uDE9A\uDFE2]|\uD82F\uDC9F|\uD836[\uDE87-\uDE8B]|\uD83A[\uDD5E\uDD5F]/;
 
+var regex = /[\$\+<->\^`\|~\xA2-\xA6\xA8\xA9\xAC\xAE-\xB1\xB4\xB8\xD7\xF7\u02C2-\u02C5\u02D2-\u02DF\u02E5-\u02EB\u02ED\u02EF-\u02FF\u0375\u0384\u0385\u03F6\u0482\u058D-\u058F\u0606-\u0608\u060B\u060E\u060F\u06DE\u06E9\u06FD\u06FE\u07F6\u07FE\u07FF\u0888\u09F2\u09F3\u09FA\u09FB\u0AF1\u0B70\u0BF3-\u0BFA\u0C7F\u0D4F\u0D79\u0E3F\u0F01-\u0F03\u0F13\u0F15-\u0F17\u0F1A-\u0F1F\u0F34\u0F36\u0F38\u0FBE-\u0FC5\u0FC7-\u0FCC\u0FCE\u0FCF\u0FD5-\u0FD8\u109E\u109F\u1390-\u1399\u166D\u17DB\u1940\u19DE-\u19FF\u1B61-\u1B6A\u1B74-\u1B7C\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD\u1FFE\u2044\u2052\u207A-\u207C\u208A-\u208C\u20A0-\u20C0\u2100\u2101\u2103-\u2106\u2108\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u212E\u213A\u213B\u2140-\u2144\u214A-\u214D\u214F\u218A\u218B\u2190-\u2307\u230C-\u2328\u232B-\u2426\u2440-\u244A\u249C-\u24E9\u2500-\u2767\u2794-\u27C4\u27C7-\u27E5\u27F0-\u2982\u2999-\u29D7\u29DC-\u29FB\u29FE-\u2B73\u2B76-\u2B95\u2B97-\u2BFF\u2CE5-\u2CEA\u2E50\u2E51\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFF\u3004\u3012\u3013\u3020\u3036\u3037\u303E\u303F\u309B\u309C\u3190\u3191\u3196-\u319F\u31C0-\u31E3\u31EF\u3200-\u321E\u322A-\u3247\u3250\u3260-\u327F\u328A-\u32B0\u32C0-\u33FF\u4DC0-\u4DFF\uA490-\uA4C6\uA700-\uA716\uA720\uA721\uA789\uA78A\uA828-\uA82B\uA836-\uA839\uAA77-\uAA79\uAB5B\uAB6A\uAB6B\uFB29\uFBB2-\uFBC2\uFD40-\uFD4F\uFDCF\uFDFC-\uFDFF\uFE62\uFE64-\uFE66\uFE69\uFF04\uFF0B\uFF1C-\uFF1E\uFF3E\uFF40\uFF5C\uFF5E\uFFE0-\uFFE6\uFFE8-\uFFEE\uFFFC\uFFFD]|\uD800[\uDD37-\uDD3F\uDD79-\uDD89\uDD8C-\uDD8E\uDD90-\uDD9C\uDDA0\uDDD0-\uDDFC]|\uD802[\uDC77\uDC78\uDEC8]|\uD805\uDF3F|\uD807[\uDFD5-\uDFF1]|\uD81A[\uDF3C-\uDF3F\uDF45]|\uD82F\uDC9C|\uD833[\uDF50-\uDFC3]|\uD834[\uDC00-\uDCF5\uDD00-\uDD26\uDD29-\uDD64\uDD6A-\uDD6C\uDD83\uDD84\uDD8C-\uDDA9\uDDAE-\uDDEA\uDE00-\uDE41\uDE45\uDF00-\uDF56]|\uD835[\uDEC1\uDEDB\uDEFB\uDF15\uDF35\uDF4F\uDF6F\uDF89\uDFA9\uDFC3]|\uD836[\uDC00-\uDDFF\uDE37-\uDE3A\uDE6D-\uDE74\uDE76-\uDE83\uDE85\uDE86]|\uD838[\uDD4F\uDEFF]|\uD83B[\uDCAC\uDCB0\uDD2E\uDEF0\uDEF1]|\uD83C[\uDC00-\uDC2B\uDC30-\uDC93\uDCA0-\uDCAE\uDCB1-\uDCBF\uDCC1-\uDCCF\uDCD1-\uDCF5\uDD0D-\uDDAD\uDDE6-\uDE02\uDE10-\uDE3B\uDE40-\uDE48\uDE50\uDE51\uDE60-\uDE65\uDF00-\uDFFF]|\uD83D[\uDC00-\uDED7\uDEDC-\uDEEC\uDEF0-\uDEFC\uDF00-\uDF76\uDF7B-\uDFD9\uDFE0-\uDFEB\uDFF0]|\uD83E[\uDC00-\uDC0B\uDC10-\uDC47\uDC50-\uDC59\uDC60-\uDC87\uDC90-\uDCAD\uDCB0\uDCB1\uDD00-\uDE53\uDE60-\uDE6D\uDE70-\uDE7C\uDE80-\uDE88\uDE90-\uDEBD\uDEBF-\uDEC5\uDECE-\uDEDB\uDEE0-\uDEE8\uDEF0-\uDEF8\uDF00-\uDF92\uDF94-\uDFCA]/;
+
 var Z = /[ \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000]/;
 
 var ucmicro = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	Any: Any,
 	Cc: Cc,
-	Cf: regex,
+	Cf: regex$1,
 	P: P,
+	S: regex,
 	Z: Z
 });
 
@@ -22720,7 +22837,7 @@ function isWhiteSpace (code) {
 
 // Currently without astral characters support.
 function isPunctChar (ch) {
-  return P.test(ch)
+  return P.test(ch) || regex.test(ch)
 }
 
 // Markdown ASCII punctuation characters.
@@ -22907,7 +23024,6 @@ function parseLinkDestination (str, start, max) {
   const result = {
     ok: false,
     pos: 0,
-    lines: 0,
     str: ''
   };
 
@@ -22976,52 +23092,66 @@ function parseLinkDestination (str, start, max) {
 
 // Parse link title
 
-function parseLinkTitle (str, start, max) {
-  let code, marker;
-  let lines = 0;
+// Parse link title within `str` in [start, max] range,
+// or continue previous parsing if `prev_state` is defined (equal to result of last execution).
+//
+function parseLinkTitle (str, start, max, prev_state) {
+  let code;
   let pos = start;
 
-  const result = {
+  const state = {
+    // if `true`, this is a valid link title
     ok: false,
+    // if `true`, this link can be continued on the next line
+    can_continue: false,
+    // if `ok`, it's the position of the first character after the closing marker
     pos: 0,
-    lines: 0,
-    str: ''
+    // if `ok`, it's the unescaped title
+    str: '',
+    // expected closing marker character code
+    marker: 0
   };
 
-  if (pos >= max) { return result }
+  if (prev_state) {
+    // this is a continuation of a previous parseLinkTitle call on the next line,
+    // used in reference links only
+    state.str = prev_state.str;
+    state.marker = prev_state.marker;
+  } else {
+    if (pos >= max) { return state }
 
-  marker = str.charCodeAt(pos);
+    let marker = str.charCodeAt(pos);
+    if (marker !== 0x22 /* " */ && marker !== 0x27 /* ' */ && marker !== 0x28 /* ( */) { return state }
 
-  if (marker !== 0x22 /* " */ && marker !== 0x27 /* ' */ && marker !== 0x28 /* ( */) { return result }
+    start++;
+    pos++;
 
-  pos++;
+    // if opening marker is "(", switch it to closing marker ")"
+    if (marker === 0x28) { marker = 0x29; }
 
-  // if opening marker is "(", switch it to closing marker ")"
-  if (marker === 0x28) { marker = 0x29; }
+    state.marker = marker;
+  }
 
   while (pos < max) {
     code = str.charCodeAt(pos);
-    if (code === marker) {
-      result.pos = pos + 1;
-      result.lines = lines;
-      result.str = unescapeAll(str.slice(start + 1, pos));
-      result.ok = true;
-      return result
-    } else if (code === 0x28 /* ( */ && marker === 0x29 /* ) */) {
-      return result
-    } else if (code === 0x0A) {
-      lines++;
+    if (code === state.marker) {
+      state.pos = pos + 1;
+      state.str += unescapeAll(str.slice(start, pos));
+      state.ok = true;
+      return state
+    } else if (code === 0x28 /* ( */ && state.marker === 0x29 /* ) */) {
+      return state
     } else if (code === 0x5C /* \ */ && pos + 1 < max) {
       pos++;
-      if (str.charCodeAt(pos) === 0x0A) {
-        lines++;
-      }
     }
 
     pos++;
   }
 
-  return result
+  // no closing marker found, but this link title may continue on the next line (for references)
+  state.can_continue = true;
+  state.str += unescapeAll(str.slice(start, pos));
+  return state
 }
 
 // Just a shortcut for bulk export
@@ -23170,7 +23300,7 @@ function Renderer () {
    * }
    * ```
    *
-   * See [source code](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.js)
+   * See [source code](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.mjs)
    * for more details and examples.
    **/
   this.rules = assign$1({}, default_rules);
@@ -24672,6 +24802,14 @@ StateBlock.prototype.Token = Token;
 
 // GFM table, https://github.github.com/gfm/#tables-extension-
 
+// Limit the amount of empty autocompleted cells in a table,
+// see https://github.com/markdown-it/markdown-it/issues/1000,
+//
+// Both pulldown-cmark and commonmark-hs limit the number of cells this way to ~200k.
+// We set it to 65k, which can expand user input by a factor of x370
+// (256x256 square is 1.8kB expanded into 650kB).
+const MAX_AUTOCOMPLETED_CELLS = 0x10000;
+
 function getLine (state, line) {
   const pos = state.bMarks[line] + state.tShift[line];
   const max = state.eMarks[line];
@@ -24827,6 +24965,7 @@ function table$1 (state, startLine, endLine, silent) {
   state.push('thead_close', 'thead', -1);
 
   let tbodyLines;
+  let autocompletedCells = 0;
 
   for (nextLine = startLine + 2; nextLine < endLine; nextLine++) {
     if (state.sCount[nextLine] < state.blkIndent) { break }
@@ -24847,6 +24986,11 @@ function table$1 (state, startLine, endLine, silent) {
     if (columns.length && columns[0] === '') columns.shift();
     if (columns.length && columns[columns.length - 1] === '') columns.pop();
 
+    // note: autocomplete count can be negative if user specifies more columns than header,
+    // but that does not affect intended use (which is limiting expansion)
+    autocompletedCells += columnCount - columns.length;
+    if (autocompletedCells > MAX_AUTOCOMPLETED_CELLS) { break }
+
     if (nextLine === startLine + 2) {
       const token_tbo = state.push('tbody_open', 'tbody', 1);
       token_tbo.map = tbodyLines = [startLine + 2, 0];
@@ -25587,8 +25731,6 @@ function list (state, startLine, endLine, silent) {
 }
 
 function reference (state, startLine, _endLine, silent) {
-  let lines = 0;
-
   let pos = state.bMarks[startLine] + state.tShift[startLine];
   let max = state.eMarks[startLine];
   let nextLine = startLine + 1;
@@ -25598,45 +25740,53 @@ function reference (state, startLine, _endLine, silent) {
 
   if (state.src.charCodeAt(pos) !== 0x5B/* [ */) { return false }
 
-  // Simple check to quickly interrupt scan on [link](url) at the start of line.
-  // Can be useful on practice: https://github.com/markdown-it/markdown-it/issues/54
-  while (++pos < max) {
-    if (state.src.charCodeAt(pos) === 0x5D /* ] */ &&
-        state.src.charCodeAt(pos - 1) !== 0x5C/* \ */) {
-      if (pos + 1 === max) { return false }
-      if (state.src.charCodeAt(pos + 1) !== 0x3A/* : */) { return false }
-      break
-    }
-  }
+  function getNextLine (nextLine) {
+    const endLine = state.lineMax;
 
-  const endLine = state.lineMax;
+    if (nextLine >= endLine || state.isEmpty(nextLine)) {
+      // empty line or end of input
+      return null
+    }
 
-  // jump line-by-line until empty one or EOF
-  const terminatorRules = state.md.block.ruler.getRules('reference');
+    let isContinuation = false;
 
-  const oldParentType = state.parentType;
-  state.parentType = 'reference';
-
-  for (; nextLine < endLine && !state.isEmpty(nextLine); nextLine++) {
     // this would be a code block normally, but after paragraph
     // it's considered a lazy continuation regardless of what's there
-    if (state.sCount[nextLine] - state.blkIndent > 3) { continue }
+    if (state.sCount[nextLine] - state.blkIndent > 3) { isContinuation = true; }
 
     // quirk for blockquotes, this line should already be checked by that rule
-    if (state.sCount[nextLine] < 0) { continue }
+    if (state.sCount[nextLine] < 0) { isContinuation = true; }
+
+    if (!isContinuation) {
+      const terminatorRules = state.md.block.ruler.getRules('reference');
+      const oldParentType = state.parentType;
+      state.parentType = 'reference';
+
+      // Some tags can terminate paragraph without empty line.
+      let terminate = false;
+      for (let i = 0, l = terminatorRules.length; i < l; i++) {
+        if (terminatorRules[i](state, nextLine, endLine, true)) {
+          terminate = true;
+          break
+        }
+      }
 
-    // Some tags can terminate paragraph without empty line.
-    let terminate = false;
-    for (let i = 0, l = terminatorRules.length; i < l; i++) {
-      if (terminatorRules[i](state, nextLine, endLine, true)) {
-        terminate = true;
-        break
+      state.parentType = oldParentType;
+      if (terminate) {
+        // terminated by another block
+        return null
       }
     }
-    if (terminate) { break }
+
+    const pos = state.bMarks[nextLine] + state.tShift[nextLine];
+    const max = state.eMarks[nextLine];
+
+    // max + 1 explicitly includes the newline
+    return state.src.slice(pos, max + 1)
   }
 
-  const str = state.getLines(startLine, nextLine, state.blkIndent, false).trim();
+  let str = state.src.slice(pos, max + 1);
+
   max = str.length;
   let labelEnd = -1;
 
@@ -25648,11 +25798,21 @@ function reference (state, startLine, _endLine, silent) {
       labelEnd = pos;
       break
     } else if (ch === 0x0A /* \n */) {
-      lines++;
+      const lineContent = getNextLine(nextLine);
+      if (lineContent !== null) {
+        str += lineContent;
+        max = str.length;
+        nextLine++;
+      }
     } else if (ch === 0x5C /* \ */) {
       pos++;
       if (pos < max && str.charCodeAt(pos) === 0x0A) {
-        lines++;
+        const lineContent = getNextLine(nextLine);
+        if (lineContent !== null) {
+          str += lineContent;
+          max = str.length;
+          nextLine++;
+        }
       }
     }
   }
@@ -25664,7 +25824,12 @@ function reference (state, startLine, _endLine, silent) {
   for (pos = labelEnd + 2; pos < max; pos++) {
     const ch = str.charCodeAt(pos);
     if (ch === 0x0A) {
-      lines++;
+      const lineContent = getNextLine(nextLine);
+      if (lineContent !== null) {
+        str += lineContent;
+        max = str.length;
+        nextLine++;
+      }
     } else if (isSpace(ch)) ; else {
       break
     }
@@ -25679,11 +25844,10 @@ function reference (state, startLine, _endLine, silent) {
   if (!state.md.validateLink(href)) { return false }
 
   pos = destRes.pos;
-  lines += destRes.lines;
 
   // save cursor state, we could require to rollback later
   const destEndPos = pos;
-  const destEndLineNo = lines;
+  const destEndLineNo = nextLine;
 
   // [label]:   destination   'title'
   //                       ^^^ skipping those spaces
@@ -25691,7 +25855,12 @@ function reference (state, startLine, _endLine, silent) {
   for (; pos < max; pos++) {
     const ch = str.charCodeAt(pos);
     if (ch === 0x0A) {
-      lines++;
+      const lineContent = getNextLine(nextLine);
+      if (lineContent !== null) {
+        str += lineContent;
+        max = str.length;
+        nextLine++;
+      }
     } else if (isSpace(ch)) ; else {
       break
     }
@@ -25699,17 +25868,25 @@ function reference (state, startLine, _endLine, silent) {
 
   // [label]:   destination   'title'
   //                          ^^^^^^^ parse this
-  const titleRes = state.md.helpers.parseLinkTitle(str, pos, max);
+  let titleRes = state.md.helpers.parseLinkTitle(str, pos, max);
+  while (titleRes.can_continue) {
+    const lineContent = getNextLine(nextLine);
+    if (lineContent === null) break
+    str += lineContent;
+    pos = max;
+    max = str.length;
+    nextLine++;
+    titleRes = state.md.helpers.parseLinkTitle(str, pos, max, titleRes);
+  }
   let title;
 
   if (pos < max && start !== pos && titleRes.ok) {
     title = titleRes.str;
     pos = titleRes.pos;
-    lines += titleRes.lines;
   } else {
     title = '';
     pos = destEndPos;
-    lines = destEndLineNo;
+    nextLine = destEndLineNo;
   }
 
   // skip trailing spaces until the rest of the line
@@ -25725,7 +25902,7 @@ function reference (state, startLine, _endLine, silent) {
       // but it could still be a valid reference if we roll back
       title = '';
       pos = destEndPos;
-      lines = destEndLineNo;
+      nextLine = destEndLineNo;
       while (pos < max) {
         const ch = str.charCodeAt(pos);
         if (!isSpace(ch)) { break }
@@ -25756,9 +25933,7 @@ function reference (state, startLine, _endLine, silent) {
     state.env.references[label] = { title, href };
   }
 
-  state.parentType = oldParentType;
-
-  state.line = startLine + lines + 1;
+  state.line = nextLine;
   return true
 }
 
@@ -25815,8 +25990,8 @@ var block_names = [
   'option',
   'p',
   'param',
+  'search',
   'section',
-  'source',
   'summary',
   'table',
   'tbody',
@@ -25845,9 +26020,9 @@ const attribute   = '(?:\\s+' + attr_name + '(?:\\s*=\\s*' + attr_value + ')?)';
 const open_tag    = '<[A-Za-z][A-Za-z0-9\\-]*' + attribute + '*\\s*\\/?>';
 
 const close_tag   = '<\\/[A-Za-z][A-Za-z0-9\\-]*\\s*>';
-const comment     = '<!---->|<!--(?:-?[^>-])(?:-?[^-])*-->';
+const comment     = '<!---?>|<!--(?:[^-]|-[^-]|--[^>])*-->';
 const processing  = '<[?][\\s\\S]*?[?]>';
-const declaration = '<![A-Z]+\\s+[^>]*>';
+const declaration = '<![A-Za-z][^>]*>';
 const cdata       = '<!\\[CDATA\\[[\\s\\S]*?\\]\\]>';
 
 const HTML_TAG_RE = new RegExp('^(?:' + open_tag + '|' + close_tag + '|' + comment +
@@ -26304,9 +26479,6 @@ StateInline.prototype.push = function (type, tag, nesting) {
 //  - canSplitWord - determine if these markers can be found inside a word
 //
 StateInline.prototype.scanDelims = function (start, canSplitWord) {
-  let can_open, can_close;
-  let left_flanking = true;
-  let right_flanking = true;
   const max = this.posMax;
   const marker = this.src.charCodeAt(start);
 
@@ -26327,29 +26499,13 @@ StateInline.prototype.scanDelims = function (start, canSplitWord) {
   const isLastWhiteSpace = isWhiteSpace(lastChar);
   const isNextWhiteSpace = isWhiteSpace(nextChar);
 
-  if (isNextWhiteSpace) {
-    left_flanking = false;
-  } else if (isNextPunctChar) {
-    if (!(isLastWhiteSpace || isLastPunctChar)) {
-      left_flanking = false;
-    }
-  }
-
-  if (isLastWhiteSpace) {
-    right_flanking = false;
-  } else if (isLastPunctChar) {
-    if (!(isNextWhiteSpace || isNextPunctChar)) {
-      right_flanking = false;
-    }
-  }
+  const left_flanking =
+    !isNextWhiteSpace && (!isNextPunctChar || isLastWhiteSpace || isLastPunctChar);
+  const right_flanking =
+    !isLastWhiteSpace && (!isLastPunctChar || isNextWhiteSpace || isNextPunctChar);
 
-  if (!canSplitWord) {
-    can_open  = left_flanking  && (!right_flanking || isLastPunctChar);
-    can_close = right_flanking && (!left_flanking  || isNextPunctChar);
-  } else {
-    can_open  = left_flanking;
-    can_close = right_flanking;
-  }
+  const can_open  = left_flanking  && (canSplitWord || !right_flanking || isLastPunctChar);
+  const can_close = right_flanking && (canSplitWord || !left_flanking  || isNextPunctChar);
 
   return { can_open, can_close, length: count }
 };
@@ -26417,7 +26573,7 @@ function text (state, silent) {
 // Alternative implementation, for memory.
 //
 // It costs 10% of performance, but allows extend terminators list, if place it
-// to `ParcerInline` property. Probably, will switch to it sometime, such
+// to `ParserInline` property. Probably, will switch to it sometime, such
 // flexibility required.
 
 /*
@@ -29297,12 +29453,12 @@ function normalizeLinkText (url) {
  * MarkdownIt provides named presets as a convenience to quickly
  * enable/disable active syntax rules and options for common use cases.
  *
- * - ["commonmark"](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/commonmark.js) -
+ * - ["commonmark"](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/commonmark.mjs) -
  *   configures parser to strict [CommonMark](http://commonmark.org/) mode.
- * - [default](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/default.js) -
+ * - [default](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/default.mjs) -
  *   similar to GFM, used when no preset name given. Enables all available rules,
  *   but still without html, typographer & autolinker.
- * - ["zero"](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/zero.js) -
+ * - ["zero"](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/zero.mjs) -
  *   all rules disabled. Useful to quickly setup your config via `.enable()`.
  *   For example, when you need only `bold` and `italic` markup and nothing else.
  *
@@ -29319,7 +29475,7 @@ function normalizeLinkText (url) {
  *   Can be useful for external highlighters.
  * - __linkify__ - `false`. Set `true` to autoconvert URL-like text to links.
  * - __typographer__  - `false`. Set `true` to enable [some language-neutral
- *   replacement](https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.js) +
+ *   replacement](https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.mjs) +
  *   quotes beautification (smartquotes).
  * - __quotes__ - `“”‘’`, String or Array. Double + single quotes replacement
  *   pairs, when typographer enabled and smartquotes on. For example, you can
@@ -29445,7 +29601,7 @@ function MarkdownIt (presetName, options) {
    * md.renderer.rules['my_token'] = myToken
    * ```
    *
-   * See [[Renderer]] docs and [source code](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.js).
+   * See [[Renderer]] docs and [source code](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.mjs).
    **/
   this.renderer = new Renderer();
 
@@ -29453,7 +29609,7 @@ function MarkdownIt (presetName, options) {
    * MarkdownIt#linkify -> LinkifyIt
    *
    * [linkify-it](https://github.com/markdown-it/linkify-it) instance.
-   * Used by [linkify](https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/linkify.js)
+   * Used by [linkify](https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/linkify.mjs)
    * rule.
    **/
   this.linkify = new LinkifyIt();
@@ -29756,10 +29912,10 @@ class KolSpanWc {
     render() {
         var _a, _b, _c, _d, _e;
         const hideExpertSlot = !showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'd5a41deb6bc204692ee7893fe04a09e3877571ff', class: {
+        return (hAsync(Host, { key: '17cb9b501a4ced92791b8633123c62c89179a7de', class: {
                 'kol-span-wc': true,
                 'hide-label': !!this.state._hideLabel,
-            } }, this.state._icons.top && (hAsync("kol-icon", { 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: 'ba98a95852b44dfc070ca4b07f333e54bebb5c1a' }, this.state._icons.left && (hAsync("kol-icon", { 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: 'f1dd5757c1c8848cff22baa543dfe7f38705d24d', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: 'e52e91f547e9bafa38d6717263b3e1b0d2ab5463', name: "expert" })), this.state._accessKey && (hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync("kol-icon", { 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("kol-icon", { 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, { 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: '27cb02736fcdfbaa0cd634e3cb31d72be6236132' }, this.state._icons.left && (hAsync(KolIconTag, { 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: 'dc41753567cbb94ba0e4dfcaf9f05e56520a36d1', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '40f84dbfec15357ebda4ffb43cfff3ba488b5947', name: "expert" })), this.state._accessKey && (hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync(KolIconTag, { 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, { 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);
@@ -29813,7 +29969,7 @@ class KolSpanWc {
     }; }
 }
 
-const defaultStyleCss$8 = "@layer kol-global {\n  .sc-kol-spin-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-spin-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-spin-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .spin.cycle {\n    width: 3rem;\n    height: 3rem;\n  }\n  .spin.cycle > .loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .spin.cycle > .loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0px;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #fc0;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: red;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  } \n  @media (prefers-reduced-motion) {\n    .spin.cycle > .loader {\n      animation-duration: 4s;\n    }\n    .spin.cycle > .loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .spin.dot {\n    height: 1rem;\n    width: 3rem;\n  }\n  .spin.dot > span {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: 0.1rem solid #fff;\n    height: 0.8rem;\n    position: absolute;\n    top: 0.1rem;\n    width: 0.8rem;\n  }\n  .spin.dot > span:first-child {\n    background-color: #fc0;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: 0.1rem;\n  }\n  .spin.dot > span:nth-child(2) {\n    background-color: red;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: 0.1rem;\n  }\n  .spin.dot > span:nth-child(3) {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: 1.1rem;\n  }\n  .spin.dot > span:nth-child(4) {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: 2.1rem;\n  }\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(1rem, 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  } \n  @media (prefers-reduced-motion) {\n    .spin.dot > span:first-child,\n    .spin.dot > span:nth-child(2),\n    .spin.dot > span:nth-child(3),\n    .spin.dot > span:nth-child(4) {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .spin {\n    display: block;\n    padding: 0.125rem;\n    position: relative;\n  }\n}";
+const defaultStyleCss$8 = "@layer kol-global {\n  .sc-kol-spin-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-spin-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-spin-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .spin.cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.cycle > .loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .spin.cycle > .loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0px;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #fc0;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: red;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  } \n  @media (prefers-reduced-motion) {\n    .spin.cycle > .loader {\n      animation-duration: 4s;\n    }\n    .spin.cycle > .loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .spin.dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:first-child {\n    background-color: #fc0;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:nth-child(2) {\n    background-color: red;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:nth-child(3) {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:nth-child(4) {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  } \n  @media (prefers-reduced-motion) {\n    .spin.dot > span:first-child,\n    .spin.dot > span:nth-child(2),\n    .spin.dot > span:nth-child(3),\n    .spin.dot > span:nth-child(4) {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .spin {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}";
 var KolSpinDefaultStyle0 = defaultStyleCss$8;
 
 function renderSpin(variant) {
@@ -29837,7 +29993,7 @@ class KolSpin {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'b81ce39211d5f987ffbc53d80961c70b29bd4549', 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: 'ec37d2bdf4b9945800c447ec16e6ea33a6ddb37f', 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" }))));
@@ -29874,7 +30030,7 @@ class KolSpin {
     }; }
 }
 
-const defaultStyleCss$7 = "@layer kol-global {\n  .sc-kol-split-button-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-split-button-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-split-button-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-split-button-default-h {\n    display: flex;\n    position: relative;\n  }\n  .main-button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .main-button .kol-span-wc {\n    place-items: start;\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .horizontal-line {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: 2px;\n    height: 70%;\n    margin-block: auto;\n    width: 1px;\n  }\n  \n  .popover {\n    height: 0;\n    left: 0;\n    min-width: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 100%;\n    transition: height 0.3s ease-in-out;\n  }\n  .popover-content {\n    inset: 0 0 auto 0;\n    min-width: 100%;\n    position: absolute;\n  }\n}";
+const defaultStyleCss$7 = "@layer kol-global {\n  .sc-kol-split-button-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-split-button-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-split-button-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-split-button-default-h {\n    display: flex;\n    position: relative;\n  }\n  .main-button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  \n  .popover {\n    height: 0;\n    left: 0;\n    min-width: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 100%;\n    transition: height 0.3s ease-in-out;\n  }\n  .popover-content {\n    inset: 0 0 auto 0;\n    min-width: 100%;\n    position: absolute;\n  }\n}";
 var KolSplitButtonDefaultStyle0 = defaultStyleCss$7;
 
 class KolSplitButton {
@@ -29942,12 +30098,12 @@ class KolSplitButton {
         };
     }
     render() {
-        return (hAsync(Host, { key: '8efae0a334245989606a89adc6271ade6c7528df', class: "kol-split-button" }, hAsync("kol-button-wc", { key: '8e297ae5cf884f34d7f000ff6e170e18a5475731', class: {
+        return (hAsync(Host, { key: '7898654f49f93bc50a417f6835265b569c3a73b2', class: "kol-split-button" }, hAsync(KolButtonWcTag, { key: 'a9e18768bb8059fb837e5eeabca7c01289f06709', 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: 'c62d2cab7915ee26a186d2d5b5933764622ca349', class: "horizontal-line" }), hAsync("kol-button-wc", { key: '4cd810ea86e19157a0fefef280e4ce10da8691cc', class: "secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: `dropdown ${this.state._show ? 'schließen' : 'öffnen'}`, _on: this.clickToggleHandler }), hAsync("div", { key: '5ae91ba61bee6d8eedd71b8d083622f10e6ebde1', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: '6837f0023c05616b20c8b1d2ed2ec541671d39be', class: "popover-content" }, hAsync("slot", { key: 'b1ef68bec39d39d59e8ac8dc10ec41ef3a6dcaab' })))));
+            }, _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: 'c303390829032681f7755a3e67b88d0cae9921fa', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: 'c90f62696b693a3d756bb0fd8e7c1a8eb6baf7d9', class: "secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: `dropdown ${this.state._show ? 'schließen' : 'öffnen'}`, _on: this.clickToggleHandler }), hAsync("div", { key: '36eb49b4e885ca7518a8a50392d0b5fcbad47839', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: '5d4cfe7fc1ed75875834db0e71af50e1788fc907', class: "popover-content" }, hAsync("slot", { key: 'fc467f4eb37e58cb31c4bd3718efeadc0fbf8c08' })))));
     }
     static get style() { return {
         default: KolSplitButtonDefaultStyle0
@@ -29993,7 +30149,7 @@ class KolSymbol {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'b071b46c9d96da1e599b76be0cafaf187f072075', class: "kol-symbol" }, hAsync("span", { key: 'eb3597f3f03e7a5ace45f4cf952de7f39ad85d11', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
+        return (hAsync(Host, { key: 'f873ad7a782cffef4063cf9f988fd14f30670bc4', class: "kol-symbol" }, hAsync("span", { key: '9fddfd0eb165cbcdb75cc405206e7ea6a7df43a3', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -30155,7 +30311,7 @@ class KolTable {
                     }, "aria-sort": sortDirection, "data-sort": `sort-${shortSortDirection}` }, hAsync("div", { class: "w-full flex gap-1 items-center" }, hAsync("div", { class: {
                         'w-full': true,
                         [headerCell.textAlign]: typeof headerCell.textAlign === 'string' && headerCell.textAlign.length > 0,
-                    }, style: { textAlign: headerCell.textAlign } }, headerCell.label), !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (hAsync("kol-button", { exportparts: "icon", _icons: sortButtonIcon, _hideLabel: true, _label: translate('kol-change-order', { placeholders: { colLabel: headerCell.label } }), _on: {
+                    }, style: { textAlign: headerCell.textAlign } }, headerCell.label), !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (hAsync(KolButtonTag, { exportparts: "icon", _icons: sortButtonIcon, _hideLabel: true, _label: translate('kol-change-order', { placeholders: { colLabel: headerCell.label } }), _on: {
                         onClick: () => this.changeCellSort(headerCell),
                     }, _variant: "ghost" })))));
             }
@@ -30589,7 +30745,7 @@ class KolTable {
                         ? this.state._data.length.toString()
                         : '0',
             },
-        })), hAsync("div", null, hAsync("kol-pagination", { _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._max || this.state._data.length, _label: translate('kol-table-pagination-label', { placeholders: { label: this.state._label } }) }))));
+        })), hAsync("div", null, hAsync(KolPaginationTag, { _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._max || this.state._data.length, _label: translate('kol-table-pagination-label', { placeholders: { label: this.state._label } }) }))));
     }
     render() {
         var _a, _b;
@@ -30597,11 +30753,9 @@ class KolTable {
         const dataField = this.createDataField(displayedData, this.state._headers);
         const paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination() : null;
         const paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination() : null;
-        return (hAsync(Host, { key: 'ada6030d7ac543a217cc84bfdd75338cef70c29a', class: "kol-table" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync("div", { key: '0dfbdfddb595e8dedf46025fbe8a1907533c38b0', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: "-1", onMouseDown: (event) => {
-                event.preventDefault();
-            } }, hAsync("table", { key: '600355b22b947a5b262bb94b8ba2ec4a8d8ffe15', style: {
+        return (hAsync(Host, { key: '0b8cd06996a98fcbe8d3296a28d06082d1074328', class: "kol-table" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync("div", { key: 'f8fabd56df12fd92af06df94a5e6528785b79403', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '7289a7ac2e0bee41c13e7de9c9a02686928b0b5a', style: {
                 minWidth: this.state._minWidth,
-            } }, hAsync("div", { key: 'a614d130c0366f3820bce9cf79f5c098786827ad', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'd3c79fbaf8bab8859cda8871e2329129b31ab7c6', id: "caption" }, this.state._label), Array.isArray(this.state._headers.horizontal) && (hAsync("thead", null, this.state._headers.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, cols.map((col, colIndex) => {
+            } }, hAsync("div", { key: 'f84baebd6200ea5f72daa75fa3cd354530aa6dfe', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'd3c1d14609baea31541ed3c683c8c99a0febd8d9', id: "caption" }, this.state._label), Array.isArray(this.state._headers.horizontal) && (hAsync("thead", null, this.state._headers.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, cols.map((col, colIndex) => {
             if (col.asTd === true) {
                 return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${col.label}`, class: {
                         [col.textAlign]: typeof col.textAlign === 'string' && col.textAlign.length > 0,
@@ -30650,11 +30804,11 @@ class KolTable {
                 }
                 return (hAsync("th", { class: col.textAlign ? `align-${col.textAlign}` : undefined, key: `thead-${rowIndex}-${colIndex}-${headerCell.label}`, scope: typeof headerCell.colSpan === 'number' && headerCell.colSpan > 1 ? 'colgroup' : 'col', colSpan: headerCell.colSpan, rowSpan: headerCell.rowSpan, style: {
                         width: col.width,
-                    }, "aria-sort": sortDirection, "data-sort": `sort-${shortSortDirection}` }, !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') ? (hAsync("kol-button-wc", { class: "table-sort-button", exportparts: "icon", _icons: { right: sortButtonIcon }, _label: col.label, _on: {
+                    }, "aria-sort": sortDirection, "data-sort": `sort-${shortSortDirection}` }, !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') ? (hAsync(KolButtonWcTag, { class: "table-sort-button", exportparts: "icon", _icons: { right: sortButtonIcon }, _label: col.label, _on: {
                         onClick: () => this.changeCellSort(headerCell),
                     } })) : (col.label)));
             }
-        })))))), hAsync("tbody", { key: '74923b609f2bdb1880ee8e07b5d305a95d7551be' }, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : '')), this.pageEndSlice > 0 && this.showPagination && paginationBottom));
+        })))))), hAsync("tbody", { key: '9572064fca9f8595677ae4053a930b5222a46f75' }, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : '')), this.pageEndSlice > 0 && this.showPagination && paginationBottom));
     }
     static get watchers() { return {
         "_allowMultiSort": ["validateAllowMultiSort"],
@@ -30837,16 +30991,16 @@ class KolTabs {
         };
     }
     renderButtonGroup() {
-        return (hAsync("kol-button-group-wc", { class: "tabs-button-group", role: "tablist", "aria-label": this.state._label, onKeyDown: this.onKeyDown }, this.state._tabs.map((button, index) => (hAsync("kol-button-wc", { _disabled: button._disabled, _icons: button._icons, _hideLabel: button._hideLabel, _label: button._label, _on: this.callbacks, _tabIndex: this.state._selected === index ? 0 : -1, _tooltipAlign: button._tooltipAlign, _variant: this.state._selected === index ? 'custom' : undefined, _customClass: this.state._selected === index ? 'selected' : undefined, _ariaControls: `tabpanel-${index}`, _ariaSelected: this.state._selected === index, _id: `${this.state._label.replace(/\s/g, '-')}-tab-${index}`, _role: "tab", _value: index }))), this.showCreateTab && (hAsync("kol-button-wc", { class: "create-button", _label: this.onCreateLabel, _on: {
+        return (hAsync(KolButtonGroupWcTag, { class: "tabs-button-group", role: "tablist", "aria-label": this.state._label, onKeyDown: this.onKeyDown }, this.state._tabs.map((button, index) => (hAsync(KolButtonWcTag, { _disabled: button._disabled, _icons: button._icons, _hideLabel: button._hideLabel, _label: button._label, _on: this.callbacks, _tabIndex: this.state._selected === index ? 0 : -1, _tooltipAlign: button._tooltipAlign, _variant: this.state._selected === index ? 'custom' : undefined, _customClass: this.state._selected === index ? 'selected' : undefined, _ariaControls: `tabpanel-${index}`, _ariaSelected: this.state._selected === index, _id: `${this.state._label.replace(/\s/g, '-')}-tab-${index}`, _role: "tab", _value: index }))), this.showCreateTab && (hAsync(KolButtonWcTag, { class: "create-button", _label: this.onCreateLabel, _on: {
                 onClick: this.onCreate,
             } }))));
     }
     render() {
-        return (hAsync(Host, { key: '21e32321d813e659ff9f347333474ba6fc12417d', class: "kol-tabs" }, hAsync("div", { key: '51b7ffd8beaf7acf179057fe9d10ca8084b07ce5', ref: (el) => {
+        return (hAsync(Host, { key: '2fad7d033c45c57688d2278ff26f22a2e77f6742', class: "kol-tabs" }, hAsync("div", { key: '436e7e53f7c7aef6c40312d56f5c3d9546ddbf0e', ref: (el) => {
                 this.tabPanelsElement = el;
             }, class: {
                 [`tabs-align-${this.state._align}`]: true,
-            } }, this.renderButtonGroup(), hAsync("div", { key: '30a1b6711d5b343664794e0c0bf87baf250d645b', class: "tabs-content", ref: this.catchTabPanelHost }))));
+            } }, this.renderButtonGroup(), hAsync("div", { key: '6ce5162fadaeec1a86c0d1c12274bffe17bc2371', class: "tabs-content", ref: this.catchTabPanelHost }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -31036,7 +31190,7 @@ class TextareaController extends InputController {
     }
 }
 
-const defaultStyleCss$4 = "@layer kol-global {\n  .sc-kol-textarea-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-textarea-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-textarea-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-textarea-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}";
+const defaultStyleCss$4 = "@layer kol-global {\n  .sc-kol-textarea-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-textarea-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-textarea-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-textarea-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}";
 var KolTextareaDefaultStyle0 = defaultStyleCss$4;
 
 const increaseTextareaHeight = (el) => {
@@ -31056,7 +31210,7 @@ class KolTextarea {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '19f47babe2f79907e99abf26966e86941b208992', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: 'a4a2f5cb1b13d9ef9b843c22e84c8f1a3c4de59e', 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, _error: this.state._error, _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, _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: 'c597418ee9b8ce03a7558c75340a7bd7f10c18b9', 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: '4ed26377ebce315249e421468d0601e8678fb637', slot: "input" }, hAsync("textarea", Object.assign({ key: 'ce21338cbe05ae4000ff82f700fdbef433b85c85', 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: '636cb3cc4cefb06fd6c60041ac2d623eb758762e', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'bb0c9dd6917b62d52838672951b1088f078e118f', 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: '62b64cf042de7c57570353cd443cc4e843df8f83', 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: '5b4d535681a13845342183b030826e344a4457ec', slot: "input" }, hAsync("textarea", Object.assign({ key: 'eb97767e995b143b3394954b716f955c9353685d', 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 }))))));
     }
@@ -31066,12 +31220,13 @@ class KolTextarea {
             this.ref = ref;
             propagateFocus(this.host, this.ref);
         };
-        this.onInput = () => {
+        this.onInput = (event) => {
             if (this.ref instanceof HTMLTextAreaElement) {
                 setState(this, '_currentLength', this.ref.value.length);
                 if (this.state._adjustHeight) {
                     this._rows = increaseTextareaHeight(this.ref);
                 }
+                this.controller.onFacade.onInput(event);
             }
         };
         this._accessKey = undefined;
@@ -31086,6 +31241,7 @@ class KolTextarea {
         this._id = undefined;
         this._label = undefined;
         this._maxLength = undefined;
+        this._msg = undefined;
         this._name = undefined;
         this._on = undefined;
         this._placeholder = undefined;
@@ -31145,6 +31301,9 @@ class KolTextarea {
     validateMaxLength(value) {
         this.controller.validateMaxLength(value);
     }
+    validateMsg(value) {
+        this.controller.validateMsg(value);
+    }
     validateName(value) {
         this.controller.validateName(value);
     }
@@ -31207,6 +31366,7 @@ class KolTextarea {
         "_id": ["validateId"],
         "_label": ["validateLabel"],
         "_maxLength": ["validateMaxLength"],
+        "_msg": ["validateMsg"],
         "_name": ["validateName"],
         "_on": ["validateOn"],
         "_placeholder": ["validatePlaceholder"],
@@ -31238,6 +31398,7 @@ class KolTextarea {
             "_id": [1],
             "_label": [1],
             "_maxLength": [2, "_max-length"],
+            "_msg": [16],
             "_name": [1],
             "_on": [16],
             "_placeholder": [1],
@@ -31266,7 +31427,7 @@ const InternalToast = ({ toastState, onClose, key }) => {
         }
     };
     return (hAsync("div", { class: `toast ${toastState.status}`, key: key },
-        hAsync("kol-alert", { class: "alert", _alert: true, _label: toastState.toast.label, _level: 0, _hasCloser: true, _type: toastState.toast.type, _variant: toastState.toast.alertVariant || 'card', _on: { onClose } },
+        hAsync(KolAlertTag, { class: "alert", _alert: true, _label: toastState.toast.label, _level: 0, _hasCloser: true, _type: toastState.toast.type, _variant: toastState.toast.alertVariant || 'card', _on: { onClose } },
             hAsync("div", { ref: handleRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
 };
 
@@ -31314,7 +31475,7 @@ class KolToastContainer {
         }, TRANSITION_TIMEOUT);
     }
     render() {
-        return (hAsync(Host, { key: 'ce1551aa251d05dfcd3d2441642a12e8fa90ebc5', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync("kol-button", { _label: translate('kol-toast-close-all'), class: "close-all", _on: {
+        return (hAsync(Host, { key: 'f07fd5109ed0d409e24587c68ff6b6ac22029c77', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { _label: translate('kol-toast-close-all'), class: "close-all", _on: {
                 onClick: () => {
                     void this.closeAll();
                 },
@@ -31468,7 +31629,7 @@ class KolTooltip {
         this.showOrHideTooltip();
     }
     render() {
-        return (hAsync(Host, { key: '2e3ecbcc4086fbde460e236deb0897f2e3640d2b', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync("kol-span-wc", { class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
+        return (hAsync(Host, { key: 'd66390aa1b5fcee783e926c2afcd99d123ca6c3d', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -31547,7 +31708,7 @@ class KolTree {
         this._label = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '344178911acfaf4f357e050cf84aa10073a20d95', class: "kol-tree" }, hAsync("kol-tree-wc", { key: '807db2d335a097e93548a19436796ec6e57182b4', _label: this._label }, hAsync("slot", { key: 'a58fb82e80d69e17543b12253fe4a7ab8c5add9f' }))));
+        return (hAsync(Host, { key: '1038483261c2b4929beeeeef68594fb81da9ba86', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'cac350ec6d6f9b4f601cc4731782ea110921cbf1', _label: this._label }, hAsync("slot", { key: 'c7989f873174400d0fe3dac6a67af3bf6349fc9e' }))));
     }
     static get style() { return {
         default: KolTreeDefaultStyle0
@@ -31595,7 +31756,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("kol-tree-item-wc", { key: 'f5b1d6b29456f69610fc768d14d827df38560060', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '3bb0a4fe44ca1357a5083dd9a6dd8b51b5dc2197' })));
+        return (hAsync(KolTreeItemWcTag, { key: '0e5d3a40b309446a14662830d862c9dbfd4968fb', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'e238c62349b04358899f4ea7fe58d4713175a3dd' })));
     }
     static get style() { return {
         default: KolTreeItemDefaultStyle0
@@ -31635,11 +31796,11 @@ class KolTreeItemWc {
         this._href = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '79baf67cdfda8ab6569ef2457e2f22491e491545', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '5212ac3fbcaec55122e9fe60d0a12c7253e949bd', class: "tree-item" }, hAsync("kol-link", { key: '1764c2398ee5c9d175b78eb2934cc5b1f5b3aa64', class: {
+        return (hAsync(Host, { key: '83bbef4a6573e8f8db6a79a62264c33b0bc1c8ee', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '7681e149dbabff21b30b58ef9438a1ffa6a6896d', class: "tree-item" }, hAsync(KolLinkTag, { key: 'e13e85b22f341446ca106124b90db1bdc9327123', 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: 'bcf8abdcde70d98efb9e7af90a411375d5f96fe3', 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: 'ae32253812ee9f7165c5812dff2dc4c7c8c0df60', hidden: !this.state._hasChildren || !this.state._open, role: "group" }, hAsync("slot", { key: '2b778851a20cb1e0a1c14d068b5f6f4235b7fe2c' })))));
+            }, _label: "", _href: this.state._href, ref: (element) => (this.linkElement = element), _tabIndex: this.state._active ? 0 : -1 }, hAsync("span", { key: 'c379822a5452765a330f6700a262738dc5aa8414', 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: 'b09e26cdcad7a8a0e22517056db1562c28805ef2', hidden: !this.state._hasChildren || !this.state._open, role: "group" }, hAsync("slot", { key: '7010ba5c7ff4adbeb277e9e117b54d47d933258a' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);
@@ -31735,7 +31896,7 @@ class KolTreeWc {
         validateLabel(this, value);
     }
     render() {
-        return (hAsync(Host, { key: 'ec5b4714c09d7f83acaa1ae8eae70980400b3969', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: '4656ce07f92edccf78398661ebd2724f1d6520a1', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '1a4ff195a91ffc6675fe58aff031326bb13140bf', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '08e783235759ace2fee71f95ee5268ab531c7556' })))));
+        return (hAsync(Host, { key: 'e890882e0c30f2dc33e17e0a7aff0a782b9cbaca', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: '5c051db3cb3b7fd89aca1a7d2f19a4677c4345b0', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '5b5b42abb8b55c468342890ed40e92d5e2bfb82d', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '4224f966cb6385a7322cceab67d6a9eea3000eb2' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === TREE_ITEM_TAG_NAME.toUpperCase();
@@ -31892,7 +32053,7 @@ class KolVersion {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'e1d593e27379a736832c5b8458e69bfb8d77f1a8', class: "kol-version" }, hAsync("kol-badge", { key: 'f045cf83b09ab91ed28c638e8be25177f4fbb5f6', _color: "#bec5c9", _icons: {
+        return (hAsync(Host, { key: 'a1a7b2f3472afbb4277dbf09170fea6702d36bb9', class: "kol-version" }, hAsync(KolBadgeTag, { key: '7d2bd52c7aa4246b8ef967d3e95f43af4c0f40ba', _color: "#bec5c9", _icons: {
                 left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
             }, _label: this.state._label })));
     }
@@ -32085,14 +32246,22 @@ var index = /*#__PURE__*/Object.freeze({
 	__proto__: null
 });
 
+let initialized = false;
+const isInitialized = () => initialized;
+
 class ToasterService {
     constructor(document, options) {
         this.document = document;
         this.options = options;
-        this.toastContainerElement = this.document.createElement('kol-toast-container');
+        console.log('create', KolToastContainerTag);
+        console.trace();
+        this.toastContainerElement = this.document.createElement(KolToastContainerTag);
         this.document.body.prepend(this.toastContainerElement);
     }
     static getInstance(document, options) {
+        if (!isInitialized()) {
+            throw new Error('Toaster: Call KoliBri bootstrap/register method first.');
+        }
         let instance = this.instances.get(document);
         if (!instance) {
             instance = new ToasterService(document, options);