@public-ui/hydrate 2.0.6 → 2.0.7

package/dist/index.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v4.11.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v4.12.3 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -598,6 +598,10 @@ class MockEvent {
     stopImmediatePropagation() {
         this.cancelBubble = true;
     }
+    /**
+     * @ref https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
+     * @returns a composed path of the event
+     */
     composedPath() {
         const composedPath = [];
         let currentElement = this.target;
@@ -609,7 +613,17 @@ class MockEvent {
                 composedPath.push(currentElement.defaultView);
                 break;
             }
-            currentElement = currentElement.parentElement;
+            /**
+             * bubble up the parent chain until we arrive to the HTML element. Here we continue
+             * with the document object instead of the parent element since the parent element
+             * is `null` for HTML elements.
+             */
+            if (currentElement.parentElement == null && currentElement.tagName === 'HTML') {
+                currentElement = currentElement.ownerDocument;
+            }
+            else {
+                currentElement = currentElement.parentElement;
+            }
         }
         return composedPath;
     }
@@ -728,6 +742,9 @@ function triggerEventListener(elm, ev) {
     if (elm.nodeName === "#document" /* NODE_NAMES.DOCUMENT_NODE */) {
         triggerEventListener(elm.defaultView, ev);
     }
+    else if (elm.parentElement == null && elm.tagName === 'HTML') {
+        triggerEventListener(elm.ownerDocument, ev);
+    }
     else {
         triggerEventListener(elm.parentElement, ev);
     }
@@ -2633,18 +2650,104 @@ const jQuery = /*!
     return jQuery;
 });
 
+/**
+ * Check whether an element of interest matches a given selector.
+ *
+ * @param selector the selector of interest
+ * @param elm an element within which to find matching elements
+ * @returns whether the element matches the selector
+ */
 function matches(selector, elm) {
-    const r = jQuery.find(selector, undefined, undefined, [elm]);
-    return r.length > 0;
+    try {
+        const r = jQuery.find(selector, undefined, undefined, [elm]);
+        return r.length > 0;
+    }
+    catch (e) {
+        updateSelectorError(selector, e);
+        throw e;
+    }
 }
+/**
+ * Select the first element that matches a given selector
+ *
+ * @param selector the selector of interest
+ * @param elm the element within which to find a matching element
+ * @returns the first matching element, or null if none is found
+ */
 function selectOne(selector, elm) {
-    const r = jQuery.find(selector, elm, undefined, undefined);
-    return r[0] || null;
+    try {
+        const r = jQuery.find(selector, elm, undefined, undefined);
+        return r[0] || null;
+    }
+    catch (e) {
+        updateSelectorError(selector, e);
+        throw e;
+    }
 }
+/**
+ * Select all elements that match a given selector
+ *
+ * @param selector the selector of interest
+ * @param elm an element within which to find matching elements
+ * @returns all matching elements
+ */
 function selectAll(selector, elm) {
-    return jQuery.find(selector, elm, undefined, undefined);
+    try {
+        return jQuery.find(selector, elm, undefined, undefined);
+    }
+    catch (e) {
+        updateSelectorError(selector, e);
+        throw e;
+    }
+}
+/**
+ * A manifest of selectors which are known to be problematic in jQuery. See
+ * here to track implementation and support:
+ * https://github.com/jquery/jquery/issues/5111
+ */
+const PROBLEMATIC_SELECTORS = [':scope', ':where', ':is'];
+/**
+ * Given a selector and an error object thrown by jQuery, annotate the
+ * error's message to add some context as to the probable reason for the error.
+ * In particular, if the selector includes a selector which is known to be
+ * unsupported in jQuery, then we know that was likely the cause of the
+ * error.
+ *
+ * @param selector our selector of interest
+ * @param e an error object that was thrown in the course of using jQuery
+ */
+function updateSelectorError(selector, e) {
+    const selectorsPresent = PROBLEMATIC_SELECTORS.filter((s) => selector.includes(s));
+    if (selectorsPresent.length > 0 && e.message) {
+        e.message =
+            `At present jQuery does not support the ${humanReadableList(selectorsPresent)} ${selectorsPresent.length === 1 ? 'selector' : 'selectors'}.
+If you need this in your test, consider writing an end-to-end test instead.\n` + e.message;
+    }
+}
+/**
+ * Format a list of strings in a 'human readable' way.
+ *
+ * - If one string (['string']), return 'string'
+ * - If two strings (['a', 'b']), return 'a and b'
+ * - If three or more (['a', 'b', 'c']), return 'a, b and c'
+ *
+ * @param items a list of strings to format
+ * @returns a formatted string
+ */
+function humanReadableList(items) {
+    if (items.length <= 1) {
+        return items.join('');
+    }
+    return `${items.slice(0, items.length - 1).join(', ')} and ${items[items.length - 1]}`;
 }
 
+/**
+ * Serialize a node (either a DOM node or a mock-doc node) to an HTML string
+ *
+ * @param elm the node to serialize
+ * @param opts options to control serialization behavior
+ * @returns an html string
+ */
 function serializeNodeToHtml(elm, opts = {}) {
     const output = {
         currentLineWidth: 0,
@@ -2705,6 +2808,7 @@ function serializeNodeToHtml(elm, opts = {}) {
     return output.text.join('');
 }
 function serializeToHtml(node, opts, output, isShadowRoot) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     if (node.nodeType === 1 /* NODE_TYPES.ELEMENT_NODE */ || isShadowRoot) {
         const tagName = isShadowRoot ? 'mock:shadow-root' : getTagName(node);
         if (tagName === 'body') {
@@ -2712,12 +2816,12 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
         }
         const ignoreTag = opts.excludeTags != null && opts.excludeTags.includes(tagName);
         if (ignoreTag === false) {
-            const isWithinWhitespaceSensitiveNode = opts.newLines || opts.indentSpaces > 0 ? isWithinWhitespaceSensitive(node) : false;
+            const isWithinWhitespaceSensitiveNode = opts.newLines || ((_a = opts.indentSpaces) !== null && _a !== void 0 ? _a : 0) > 0 ? isWithinWhitespaceSensitive(node) : false;
             if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
                 output.text.push('\n');
                 output.currentLineWidth = 0;
             }
-            if (opts.indentSpaces > 0 && !isWithinWhitespaceSensitiveNode) {
+            if (((_b = opts.indentSpaces) !== null && _b !== void 0 ? _b : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
                 for (let i = 0; i < output.indent; i++) {
                     output.text.push(' ');
                 }
@@ -2742,7 +2846,9 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
                 const attrNamespaceURI = attr.namespaceURI;
                 if (attrNamespaceURI == null) {
                     output.currentLineWidth += attrName.length + 1;
-                    if (opts.approximateLineWidth > 0 && output.currentLineWidth > opts.approximateLineWidth) {
+                    if (opts.approximateLineWidth &&
+                        opts.approximateLineWidth > 0 &&
+                        output.currentLineWidth > opts.approximateLineWidth) {
                         output.text.push('\n' + attrName);
                         output.currentLineWidth = 0;
                     }
@@ -2799,7 +2905,8 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
             }
             if (node.hasAttribute('style')) {
                 const cssText = node.style.cssText;
-                if (opts.approximateLineWidth > 0 &&
+                if (opts.approximateLineWidth &&
+                    opts.approximateLineWidth > 0 &&
                     output.currentLineWidth + cssText.length + 10 > opts.approximateLineWidth) {
                     output.text.push(`\nstyle="${cssText}">`);
                     output.currentLineWidth = 0;
@@ -2816,14 +2923,14 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
         }
         if (EMPTY_ELEMENTS.has(tagName) === false) {
             if (opts.serializeShadowRoot && node.shadowRoot != null) {
-                output.indent = output.indent + opts.indentSpaces;
+                output.indent = output.indent + ((_c = opts.indentSpaces) !== null && _c !== void 0 ? _c : 0);
                 serializeToHtml(node.shadowRoot, opts, output, true);
-                output.indent = output.indent - opts.indentSpaces;
+                output.indent = output.indent - ((_d = opts.indentSpaces) !== null && _d !== void 0 ? _d : 0);
                 if (opts.newLines &&
                     (node.childNodes.length === 0 ||
                         (node.childNodes.length === 1 &&
                             node.childNodes[0].nodeType === 3 /* NODE_TYPES.TEXT_NODE */ &&
-                            node.childNodes[0].nodeValue.trim() === ''))) {
+                            ((_e = node.childNodes[0].nodeValue) === null || _e === void 0 ? void 0 : _e.trim()) === ''))) {
                     output.text.push('\n');
                     output.currentLineWidth = 0;
                     for (let i = 0; i < output.indent; i++) {
@@ -2840,9 +2947,9 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
                         childNodes[0].nodeType === 3 /* NODE_TYPES.TEXT_NODE */ &&
                         (typeof childNodes[0].nodeValue !== 'string' || childNodes[0].nodeValue.trim() === '')) ;
                     else {
-                        const isWithinWhitespaceSensitiveNode = opts.newLines || opts.indentSpaces > 0 ? isWithinWhitespaceSensitive(node) : false;
-                        if (!isWithinWhitespaceSensitiveNode && opts.indentSpaces > 0 && ignoreTag === false) {
-                            output.indent = output.indent + opts.indentSpaces;
+                        const isWithinWhitespaceSensitiveNode = opts.newLines || ((_f = opts.indentSpaces) !== null && _f !== void 0 ? _f : 0) > 0 ? isWithinWhitespaceSensitive(node) : false;
+                        if (!isWithinWhitespaceSensitiveNode && ((_g = opts.indentSpaces) !== null && _g !== void 0 ? _g : 0) > 0 && ignoreTag === false) {
+                            output.indent = output.indent + ((_h = opts.indentSpaces) !== null && _h !== void 0 ? _h : 0);
                         }
                         for (let i = 0; i < childNodeLength; i++) {
                             serializeToHtml(childNodes[i], opts, output, false);
@@ -2852,8 +2959,8 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
                                 output.text.push('\n');
                                 output.currentLineWidth = 0;
                             }
-                            if (opts.indentSpaces > 0 && !isWithinWhitespaceSensitiveNode) {
-                                output.indent = output.indent - opts.indentSpaces;
+                            if (((_j = opts.indentSpaces) !== null && _j !== void 0 ? _j : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
+                                output.indent = output.indent - ((_k = opts.indentSpaces) !== null && _k !== void 0 ? _k : 0);
                                 for (let i = 0; i < output.indent; i++) {
                                     output.text.push(' ');
                                 }
@@ -2868,7 +2975,7 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
                 }
             }
         }
-        if (opts.approximateLineWidth > 0 && STRUCTURE_ELEMENTS.has(tagName)) {
+        if (((_l = opts.approximateLineWidth) !== null && _l !== void 0 ? _l : 0) > 0 && STRUCTURE_ELEMENTS.has(tagName)) {
             output.text.push('\n');
             output.currentLineWidth = 0;
         }
@@ -2888,13 +2995,15 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
                     output.text.push(textContent);
                     output.currentLineWidth += textContent.length;
                 }
-                else if (opts.approximateLineWidth > 0 && !output.isWithinBody) ;
+                else if (((_m = opts.approximateLineWidth) !== null && _m !== void 0 ? _m : 0) > 0 && !output.isWithinBody) ;
                 else if (!opts.prettyHtml) {
                     // this text node is only whitespace, and it's not
                     // within a whitespace sensitive element like <pre> or <code>
                     // so replace the entire white space with a single new line
                     output.currentLineWidth += 1;
-                    if (opts.approximateLineWidth > 0 && output.currentLineWidth > opts.approximateLineWidth) {
+                    if (opts.approximateLineWidth &&
+                        opts.approximateLineWidth > 0 &&
+                        output.currentLineWidth > opts.approximateLineWidth) {
                         // good enough for a new line
                         // for perf these are all just estimates
                         // we don't care to ensure exact line lengths
@@ -2909,12 +3018,12 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
             }
             else {
                 // this text node has text content
-                const isWithinWhitespaceSensitiveNode = opts.newLines || opts.indentSpaces > 0 || opts.prettyHtml ? isWithinWhitespaceSensitive(node) : false;
+                const isWithinWhitespaceSensitiveNode = opts.newLines || ((_o = opts.indentSpaces) !== null && _o !== void 0 ? _o : 0) > 0 || opts.prettyHtml ? isWithinWhitespaceSensitive(node) : false;
                 if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
                     output.text.push('\n');
                     output.currentLineWidth = 0;
                 }
-                if (opts.indentSpaces > 0 && !isWithinWhitespaceSensitiveNode) {
+                if (((_p = opts.indentSpaces) !== null && _p !== void 0 ? _p : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
                     for (let i = 0; i < output.indent; i++) {
                         output.text.push(' ');
                     }
@@ -2926,7 +3035,7 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
                     const parentTagName = node.parentNode != null && node.parentNode.nodeType === 1 /* NODE_TYPES.ELEMENT_NODE */
                         ? node.parentNode.nodeName
                         : null;
-                    if (NON_ESCAPABLE_CONTENT.has(parentTagName)) {
+                    if (typeof parentTagName === 'string' && NON_ESCAPABLE_CONTENT.has(parentTagName)) {
                         // this text node cannot have its content escaped since it's going
                         // into an element like <style> or <script>
                         if (isWithinWhitespaceSensitive(node)) {
@@ -2959,7 +3068,8 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
                                 textContentLength = textContent.length;
                                 if (textContentLength > 1) {
                                     if (/\s/.test(textContent.charAt(textContentLength - 1))) {
-                                        if (opts.approximateLineWidth > 0 &&
+                                        if (opts.approximateLineWidth &&
+                                            opts.approximateLineWidth > 0 &&
                                             output.currentLineWidth + textContentLength > opts.approximateLineWidth) {
                                             textContent = textContent.trimRight() + '\n';
                                             output.currentLineWidth = 0;
@@ -2981,20 +3091,20 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
     else if (node.nodeType === 8 /* NODE_TYPES.COMMENT_NODE */) {
         const nodeValue = node.nodeValue;
         if (opts.removeHtmlComments) {
-            const isHydrateAnnotation = nodeValue.startsWith(CONTENT_REF_ID + '.') ||
-                nodeValue.startsWith(ORG_LOCATION_ID + '.') ||
-                nodeValue.startsWith(SLOT_NODE_ID + '.') ||
-                nodeValue.startsWith(TEXT_NODE_ID + '.');
+            const isHydrateAnnotation = (nodeValue === null || nodeValue === void 0 ? void 0 : nodeValue.startsWith(CONTENT_REF_ID + '.')) ||
+                (nodeValue === null || nodeValue === void 0 ? void 0 : nodeValue.startsWith(ORG_LOCATION_ID + '.')) ||
+                (nodeValue === null || nodeValue === void 0 ? void 0 : nodeValue.startsWith(SLOT_NODE_ID + '.')) ||
+                (nodeValue === null || nodeValue === void 0 ? void 0 : nodeValue.startsWith(TEXT_NODE_ID + '.'));
             if (!isHydrateAnnotation) {
                 return;
             }
         }
-        const isWithinWhitespaceSensitiveNode = opts.newLines || opts.indentSpaces > 0 ? isWithinWhitespaceSensitive(node) : false;
+        const isWithinWhitespaceSensitiveNode = opts.newLines || ((_q = opts.indentSpaces) !== null && _q !== void 0 ? _q : 0) > 0 ? isWithinWhitespaceSensitive(node) : false;
         if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
             output.text.push('\n');
             output.currentLineWidth = 0;
         }
-        if (opts.indentSpaces > 0 && !isWithinWhitespaceSensitiveNode) {
+        if (((_r = opts.indentSpaces) !== null && _r !== void 0 ? _r : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
             for (let i = 0; i < output.indent; i++) {
                 output.text.push(' ');
             }
@@ -3028,12 +3138,21 @@ function escapeString(str, attrMode) {
     }
     return str.replace(LT_REGEX, '&lt;').replace(GT_REGEX, '&gt;');
 }
+/**
+ * Determine whether a given node is within a whitespace-sensitive node by
+ * walking the parent chain until either a whitespace-sensitive node is found or
+ * there are no more parents to examine.
+ *
+ * @param node a node to check
+ * @returns whether or not this is within a whitespace-sensitive node
+ */
 function isWithinWhitespaceSensitive(node) {
-    while (node != null) {
-        if (WHITESPACE_SENSITIVE.has(node.nodeName)) {
+    let _node = node;
+    while (_node != null) {
+        if (WHITESPACE_SENSITIVE.has(_node.nodeName)) {
             return true;
         }
-        node = node.parentNode;
+        _node = _node.parentNode;
     }
     return false;
 }
@@ -3047,6 +3166,9 @@ function isWithinWhitespaceSensitive(node) {
     'NOFRAMES',
     'PLAINTEXT',
 ]);
+/**
+ * A list of whitespace sensitive tag names, such as `code`, `pre`, etc.
+ */
  const WHITESPACE_SENSITIVE = new Set([
     'CODE',
     'OUTPUT',
@@ -4106,6 +4228,18 @@ class MockHTMLElement extends MockElement {
     set tagName(value) {
         this.nodeName = value;
     }
+    /**
+     * A node’s parent of type Element is known as its parent element.
+     * If the node has a parent of a different type, its parent element
+     * is null.
+     * @returns MockElement
+     */
+    get parentElement() {
+        if (this.nodeName === 'HTML') {
+            return null;
+        }
+        return super.parentElement;
+    }
     get attributes() {
         if (this.__attributeMap == null) {
             const attrMap = createAttributeProxy(true);
@@ -8996,7 +9130,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.6
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.7
 		`, {
             forceLog: true,
         });
@@ -9424,7 +9558,8 @@ class ResourceStore extends EventEmitter {
   }
   addResourceBundle(lng, ns, resources, deep, overwrite) {
     let options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {
-      silent: false
+      silent: false,
+      skipCopy: false
     };
     let path = [lng, ns];
     if (lng.indexOf('.') > -1) {
@@ -9435,6 +9570,7 @@ class ResourceStore extends EventEmitter {
     }
     this.addNamespaces(ns);
     let pack = getPath(this.data, path) || {};
+    if (!options.skipCopy) resources = JSON.parse(JSON.stringify(resources));
     if (deep) {
       deepExtend(pack, resources, overwrite);
     } else {
@@ -10674,7 +10810,9 @@ class Connector extends EventEmitter {
     const ns = s[1];
     if (err) this.emit('failedLoading', lng, ns, err);
     if (data) {
-      this.store.addResourceBundle(lng, ns, data);
+      this.store.addResourceBundle(lng, ns, data, undefined, undefined, {
+        skipCopy: true
+      });
     }
     this.state[name] = err ? -1 : 2;
     const loaded = {};
@@ -11851,8 +11989,7 @@ const createElm = (e, t, o, n) => {
  const n = t.$elm$ = e.$elm$, s = e.$children$, l = t.$children$, a = t.$tag$, r = t.$text$;
  let i;
  null !== r ? (i = n["s-cr"]) ? i.parentNode.textContent = r : e.$text$ !== r && (n.data = r) : ((isSvgMode = "svg" === a || "foreignObject" !== a && isSvgMode), 
- ("slot" === a || updateElement(e, t, isSvgMode)), 
- null !== s && null !== l ? ((e, t, o, n, s = !1) => {
+ ("slot" === a && !useNativeShadowDom ? BUILD.experimentalSlotFixes   : updateElement(e, t, isSvgMode)), null !== s && null !== l ? ((e, t, o, n, s = !1) => {
   let l, a, r = 0, i = 0, d = 0, c = 0, $ = t.length - 1, m = t[0], p = t[$], h = n.length - 1, f = n[0], u = n[h];
   for (;r <= $ && i <= h; ) if (null == m) m = t[++r]; else if (null == p) p = t[--$]; else if (null == f) f = n[++i]; else if (null == u) u = n[--h]; else if (isSameVnode(m, f, s)) patch(m, f, s), 
   m = t[++r], f = n[++i]; else if (isSameVnode(p, u, s)) patch(p, u, s), p = t[--$], 
@@ -11920,9 +12057,9 @@ const createElm = (e, t, o, n) => {
  if (d.$attrsToReflect$ && ($.$attrs$ = $.$attrs$ || {}, d.$attrsToReflect$.map((([e, t]) => $.$attrs$[t] = i[e]))), 
  o && $.$attrs$) for (const e of Object.keys($.$attrs$)) i.hasAttribute(e) && ![ "key", "ref", "style", "class" ].includes(e) && ($.$attrs$[e] = i[e]);
  if ($.$tag$ = null, $.$flags$ |= 4, e.$vnode$ = $, $.$elm$ = c.$elm$ = i.shadowRoot || i, 
- (scopeId = i["s-sc"]), (contentRef = i["s-cr"], 
- useNativeShadowDom = supportsShadow, checkSlotFallbackVisibility = !1), patch(c, $, o), 
- BUILD.slotRelocation) {
+ (scopeId = i["s-sc"]), useNativeShadowDom = supportsShadow, 
+ (contentRef = i["s-cr"], checkSlotFallbackVisibility = !1), 
+ patch(c, $, o), BUILD.slotRelocation) {
   if (plt.$flags$ |= 1, checkSlotRelocate) {
    markSlotContentForRelocation($.$elm$);
    for (const e of relocateNodes) {
@@ -12334,7 +12471,7 @@ class KolAbbr {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("abbr", { "aria-labelledby": this.nonce, role: "definition", tabindex: "0", title: this.state._label }, hAsync("span", { title: "" }, hAsync("slot", null))), hAsync("kol-tooltip-wc", { _align: this.state._tooltipAlign, _id: this.nonce, _label: this.state._label })));
+        return (hAsync(Host, { key: 'c8fda666071c39aa4736d619ac760882a6d0979c' }, hAsync("abbr", { key: 'f95f6d33272895f591ed8d6acd75d7d02a28292c', "aria-labelledby": this.nonce, role: "definition", tabindex: "0", title: this.state._label }, hAsync("span", { key: 'fd5c2bde0303e96f02fa7bfb15e7139cfbfd5fdd', title: "" }, hAsync("slot", { key: '17f1f1603c95bce1d30d35876e50386dac2b8bf2' }))), hAsync("kol-tooltip-wc", { key: '8e6809d59f0d2bf55fc0cfa3de14d5cf6e441e00', _align: this.state._tooltipAlign, _id: this.nonce, _label: this.state._label })));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -12414,11 +12551,11 @@ class KolAccordion {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", { class: {
+        return (hAsync(Host, { key: '3ab8adaec7d4f0b9958ed3c2694a6e2001a5775d' }, hAsync("div", { key: 'f55779b5c6fde69de6510614742d1a2ade7d8225', class: {
                 accordion: true,
                 disabled: this.state._disabled === true,
                 open: this.state._open === true,
-            } }, hAsync("kol-heading-wc", { _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync("kol-button-wc", { 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", { class: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", null)))))));
+            } }, hAsync("kol-heading-wc", { key: 'e7625190a24a0d4a0faa99ae41ac2fcb8ca313cb', _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync("kol-button-wc", { key: 'f0cd4bbd5a68ddbbf77d8d7de42dd609f8e63524', 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: 'c43fb947876253f1d6d0abf27bb11513f193a4bf', class: "wrapper" }, hAsync("div", { key: '80440135831c357d57bcd909fc4f89243fd1a9c2', class: "animation-wrapper" }, hAsync("div", { key: 'ce90b614d3c0b50297c28aa4408fe49f87aa108b', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: 'f9b15c4efd666d4799f9a2b51b18ec2479d38540' })))))));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -12492,7 +12629,7 @@ class KolAlert {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-alert-wc", { _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", null))));
+        return (hAsync(Host, { key: '047deb6500f45201d1f0dec17303ef2bf0524f04' }, hAsync("kol-alert-wc", { key: '5b9819b1b4458892011a936eab2ea7056420ca52', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: '3c79632bfdca99fbe09866a9a9f2d6a73e554cd5' }))));
     }
     static get style() { return {
         default: KolAlertDefaultStyle0
@@ -12671,12 +12808,12 @@ class KolAlertWc {
                 this.validateAlert(false);
             }, 10000);
         }
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: '3b2f5ac6462c380e631c36367a2e55b7519ecbe6', class: {
                 alert: true,
                 [this.state._type]: true,
                 [this.state._variant]: true,
                 hasCloser: !!this.state._hasCloser,
-            }, role: this.state._alert ? 'alert' : undefined }, hAsync("div", { class: "heading" }, hAsync(AlertIcon, { label: this.state._label, type: this.state._type }), hAsync("div", { 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: 'e805417410e1ff870e45c1eadb03d3d7203901b5', class: "heading" }, hAsync(AlertIcon, { key: '9705bf593034348a8aa47f7980c94deac6cac7db', label: this.state._label, type: this.state._type }), hAsync("div", { key: '5360f5cc4ac1d3c3360a2517e0c934ddc21e57c6', 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: {
                 left: {
                     icon: 'codicon codicon-close',
                 },
@@ -12754,7 +12891,7 @@ class KolAvatar {
         this._label = undefined;
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-avatar-wc", { _src: this._src, _label: this._label })));
+        return (hAsync(Host, { key: '8a9cbc49c03d979e691c9863195908918df024eb' }, hAsync("kol-avatar-wc", { key: 'ac1ec4bb151efb6ef0809b005e4f0a17dd9ba923', _src: this._src, _label: this._label })));
     }
     static get style() { return {
         default: KolAvatarDefaultStyle0
@@ -12799,7 +12936,7 @@ class KolAvatarWc {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", { "aria-label": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: "container", role: "img" }, this.state._src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: "image", src: this.state._src })) : (hAsync("span", { "aria-hidden": "true", class: "initials" }, formatLabelAsInitials(this.state._label.trim()))))));
+        return (hAsync(Host, { key: 'bd338a71d4f2a5610dfb048fa22b33462e3a9d5b' }, hAsync("div", { key: '397f13c05f8ea2ac25934d8775b1231196a482ca', "aria-label": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: "container", role: "img" }, this.state._src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: "image", src: this.state._src })) : (hAsync("span", { "aria-hidden": "true", class: "initials" }, formatLabelAsInitials(this.state._label.trim()))))));
     }
     validateSrc(value) {
         validateImageSource(this, value);
@@ -12862,12 +12999,12 @@ class KolBadge {
     }
     render() {
         const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
-        return (hAsync(Host, null, hAsync("span", { class: {
+        return (hAsync(Host, { key: '94ed7b6910261ea2bb4165f06ef65c4c76672656' }, hAsync("span", { key: '50c6d9a53ab192ec2b81ebea8997a037dbc2175e', class: {
                 'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
             }, style: {
                 backgroundColor: this.bgColorStr,
                 color: this.colorStr,
-            } }, hAsync("kol-span-wc", { id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
+            } }, hAsync("kol-span-wc", { key: 'eade82d0c27658fdd9bc0a7f7efd1ec028cdbf85', id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -12950,7 +13087,7 @@ class KolBreadcrumb {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", null, 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: '7b72011fc371f8906f6e0ba6c780d0ec94b2cd5e' }, hAsync("nav", { key: 'f9aa18b4fcfd26f904b125a899e1ef36dd2a79d5', "aria-label": this.state._label }, hAsync("ul", { key: 'f85d981b4be053928f7fb6050e2b1d66e6974ec1' }, this.state._links.length === 0 && (hAsync("li", null, hAsync("kol-icon", { _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink)))));
     }
     validateLabel(value, _oldValue, initial = false) {
         if (!initial) {
@@ -13026,11 +13163,11 @@ class KolButton {
         return this._value;
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-wc", { ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '791fdae290d39968b888fbc672326ceea48e5561' }, hAsync("kol-button-wc", { key: '51928aa7425860caabc74dffbdfa3360bce5ea3f', 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", { 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: '851ea7e0ab0a17642e4e0f3f1200241e8d1c659e', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -13075,7 +13212,7 @@ class KolButtonGroup {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-group-wc", null, hAsync("slot", null))));
+        return (hAsync(Host, { key: '64fce1581c4c59a0c8af0b610c51d8dc03a834e7' }, hAsync("kol-button-group-wc", { key: 'e63c9c4964d550138f585e256903f620972341f5' }, hAsync("slot", { key: '3323c39072f26c1964165cb53dc6b3cdabd69018' }))));
     }
     static get style() { return {
         default: KolButtonGroupDefaultStyle0
@@ -13096,7 +13233,7 @@ class KolButtonGroupWc {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, null, hAsync("slot", null)));
+        return (hAsync(Host, { key: 'f33b91e186660a417bcf29bd3ff24c9e844393d8' }, hAsync("slot", { key: '718b94573ac85798def9f963c2c13be9b995be0d' })));
     }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -13141,7 +13278,7 @@ class KolButtonLink {
         return this._value;
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-wc", { 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", { name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: 'dac1e09dcd3ebb01c490db08b71b38e7aab511fc' }, hAsync("kol-button-wc", { key: '9ba3251eb1bd9687854af82cc210ba7b41cfa1c4', 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: '4b84f529453b63eafed0ac8937e2e902518a982c', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -13272,15 +13409,16 @@ const propagateSubmitEventToForm = (options = {}) => {
     }
 };
 
+const isAssociatedTagName = (name) => name === 'KOL-BUTTON' || name === 'KOL-INPUT' || name === 'KOL-SELECT' || name === 'KOL-TEXTAREA';
 class AssociatedInputController {
-    constructor(component, name, host) {
-        var _a, _b;
+    constructor(component, type, host) {
+        var _a, _b, _c;
         this.experimentalMode = getExperimentalMode();
         this.setFormAssociatedValue = (rawValue) => {
             var _a;
             const name = (_a = this.formAssociated) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
             if (name === null || name === '') {
-                devHint(` The form field (${this.name}) must have a name attribute to be form-associated. Please define the _name attribute.`);
+                devHint(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);
             }
             const strValue = this.tryToStringifyValue(rawValue);
             this.syncValue(rawValue, strValue, this.formAssociated);
@@ -13288,15 +13426,26 @@ class AssociatedInputController {
         };
         this.component = component;
         this.host = this.findHostWithShadowRoot(host);
-        this.name = name;
-        if (this.experimentalMode) {
-            (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input,select,textarea').forEach((el) => {
+        this.type = type;
+        if (getExperimentalMode() && isAssociatedTagName((_a = this.host) === null || _a === void 0 ? void 0 : _a.tagName)) {
+            (_b = this.host) === null || _b === void 0 ? void 0 : _b.querySelectorAll('input,select,textarea').forEach((el) => {
                 var _a;
                 (_a = this.host) === null || _a === void 0 ? void 0 : _a.removeChild(el);
             });
-            switch (this.name) {
+            switch (this.type) {
                 case 'button':
-                    this.formAssociated = document.createElement('button');
+                case 'checkbox':
+                case 'color':
+                case 'date':
+                case 'email':
+                case 'file':
+                case 'number':
+                case 'password':
+                case 'radio':
+                case 'range':
+                case 'text':
+                    this.formAssociated = document.createElement('input');
+                    this.formAssociated.setAttribute('type', this.type);
                     break;
                 case 'select':
                     this.formAssociated = document.createElement('select');
@@ -13308,12 +13457,11 @@ class AssociatedInputController {
                 default:
                     this.formAssociated = document.createElement('input');
                     this.formAssociated.setAttribute('type', 'hidden');
-                    break;
             }
             this.formAssociated.setAttribute('aria-hidden', 'true');
             this.formAssociated.setAttribute('data-form-associated', '');
             this.formAssociated.setAttribute('hidden', '');
-            (_b = this.host) === null || _b === void 0 ? void 0 : _b.appendChild(this.formAssociated);
+            (_c = this.host) === null || _c === void 0 ? void 0 : _c.appendChild(this.formAssociated);
         }
     }
     findHostWithShadowRoot(host) {
@@ -13352,7 +13500,7 @@ class AssociatedInputController {
     }
     syncValue(rawValue, strValue, associatedElement) {
         if (associatedElement) {
-            switch (this.name) {
+            switch (this.type) {
                 case 'select':
                     associatedElement.querySelectorAll('option').forEach((el) => {
                         associatedElement.removeChild(el);
@@ -13410,13 +13558,13 @@ class AssociatedInputController {
 class KolButtonWc {
     render() {
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, null, hAsync("button", Object.assign({ 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: '6210753dd7db71f0a3df9e778cd1c526f95503d3' }, hAsync("button", Object.assign({ key: 'e1422d9e465b133e5328cbe0037b9378174b19e4', 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", { class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { name: "expert", slot: "expert" }))), hAsync("kol-tooltip-wc", { "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("kol-span-wc", { key: '17436202d4fa5926b88734c2e0e59da6aeea3072', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '59e7ae324b13a0ebc386f5d4cfc451b92a65c76c', name: "expert", slot: "expert" }))), hAsync("kol-tooltip-wc", { key: '6b14c5d6852abfd4b6c692b9de9e58928f7ba0ba', "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);
@@ -13635,7 +13783,7 @@ class KolCard {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", { class: "card" }, hAsync("div", { class: "header" }, hAsync("kol-heading-wc", { _label: this.state._label, _level: this.state._level })), hAsync("div", { class: "content" }, hAsync("slot", null)), this.state._hasCloser && (hAsync("kol-button-wc", { class: "close", _hideLabel: true, _icons: {
+        return (hAsync(Host, { key: '37ad71d5f2139e179320e6851febe3be1b9b2bea' }, hAsync("div", { key: '88a0f248e55150345d9db00493554bc0b390602d', class: "card" }, hAsync("div", { key: '5f386f35d258bfca44452bd1097a28f6387f357e', class: "header" }, hAsync("kol-heading-wc", { key: 'ef42ea80d858504380e8652f3311e4ab96012071', _label: this.state._label, _level: this.state._level })), hAsync("div", { key: '3cc317335b260fe67c94f80eab0b6d36189bd387', class: "content" }, hAsync("slot", { key: 'dc1210ec7880c6c89c0c689602265ef7e9b45ae1' })), this.state._hasCloser && (hAsync("kol-button-wc", { class: "close", _hideLabel: true, _icons: {
                 left: {
                     icon: 'codicon codicon-close',
                 },
@@ -13798,10 +13946,10 @@ class KolDetails {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("details", { ref: this.catchDetails, class: {
+        return (hAsync(Host, { key: '7ab10edda0368a0ac4bcd0b7f46b7134bbd3430d' }, hAsync("details", { key: '0b0c72fb5cb0e24410143ed61ecff54b2a932306', ref: this.catchDetails, class: {
                 disabled: this.state._disabled === true,
                 open: this.state._open === true,
-            }, onToggle: this.handleToggle }, hAsync("summary", { 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", { _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", null, this.state._label)), hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", null, hAsync("slot", null))))));
+            }, onToggle: this.handleToggle }, hAsync("summary", { key: 'b5cfe622618b9b7b7a629f4a6856c4b2ee14716e', 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: '08c2e357a57bf92dd67029b0db473362cbe1945e', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: '57aa8182fec67c7989ccb6788bcff481883004da' }, this.state._label)), hAsync("div", { key: '5023ecbb30d3cad07eb63d56f04147cf3b5f53b6', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", { key: 'c50a195c6b5ffe096ce1459b84b6fe4d6b080cc1' }, hAsync("slot", { key: 'd61c17f9ac1d54e8645a575c1a98f366bcd4d223' }))))));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -13896,10 +14044,10 @@ class KolForm {
         this.state = {};
     }
     render() {
-        return (hAsync("form", { 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("form", { key: 'dea80b85f061a10604684cdd6fc7e19493a01dbe', 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) => {
                 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", null)));
+            } })))))))), 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: '6c5120cbfab3903b5f8e1f5d29ed0849c646f5d1' })));
     }
     validateOn(value) {
         if (typeof value === 'object' && value !== null) {
@@ -13960,7 +14108,7 @@ class KolHeading {
         this._variant = undefined;
     }
     render() {
-        return (hAsync("kol-heading-wc", { _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant }, hAsync("slot", { name: "expert", slot: "expert" })));
+        return (hAsync("kol-heading-wc", { key: '9bd5fbd58d07dba0dec0ffd891855331aa529707', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant }, hAsync("slot", { key: '15a9446734dda61f5c222c579ad674c9110b693a', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolHeadingDefaultStyle0
@@ -14038,7 +14186,7 @@ class KolHeadingWc {
         this.validateVariant(this._variant);
     }
     render() {
-        return (hAsync(Host, null, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
+        return (hAsync(Host, { key: '3a0b2e5eae14d4a7d83b25e806eaf7cda1b52c9a' }, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -14077,7 +14225,7 @@ class KolIcon {
     }
     render() {
         const ariaShow = this.state._label.length > 0;
-        return (hAsync(Host, { exportparts: "icon" }, hAsync("i", { "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
+        return (hAsync(Host, { key: 'c62ac4835d52e7e1ec559fb021c6450707313b28', exportparts: "icon" }, hAsync("i", { key: 'b7f1f9bc1218abcc1fee4c480e3a01b25be509ec', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
     }
     validateIcons(value) {
         watchString(this, '_icons', value, {
@@ -14158,7 +14306,7 @@ class KolImage {
         this.validateSrcset(this._srcset);
     }
     render() {
-        return (hAsync(Host, null, hAsync("img", { alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset })));
+        return (hAsync(Host, { key: 'fa4060a68dc8c17a0095fbbc022945fd0898a708' }, hAsync("img", { key: '01c112546e862a87b4dafb60575c973522aa87d7', alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset })));
     }
     static get watchers() { return {
         "_alt": ["validateAlt"],
@@ -14196,7 +14344,7 @@ class KolIndentedText {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", null, hAsync("slot", null))));
+        return (hAsync(Host, { key: 'c4a28b561e6f9759fed50c19ba6dd7731fbf6b68' }, hAsync("div", { key: '73f0c897232209f6027ff2f500cd4b4a9efb0331' }, hAsync("slot", { key: 'a1ee7c1f37038705cbadd7632623d4e6ce2a5f55' }))));
     }
     static get style() { return {
         default: KolIndentedTextDefaultStyle0
@@ -14259,18 +14407,18 @@ class KolInput {
         const hasExpertSlot = showExpertSlot(this._label);
         const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
         const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: '84c5c262466dfcd6f00ecf98e386fd2e247dfdf0', class: {
                 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", { class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { class: "input-label-span" }, hAsync("slot", { name: "label" }))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { class: {
+            } }, hAsync("label", { key: '692b578460ceb0d47189059a473bcc28ef2d2ee4', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'f9e73404ef4579a1190f4de8e9e5d06d95b4074a', class: "input-label-span" }, hAsync("slot", { key: '40868844711a5af81c9216d35c07726fff2429f3', name: "label" }))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '0efa6378c4e54f228079afda9cbe4a386feb8cc5', 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", { 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'))))));
+            } }, ((_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: '713beb804dc8d47b2ae8a850f49a66bbc54953bd', 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'))))));
     }
     get host() { return getElement(this); }
     static get cmpMeta() { return {
@@ -14647,13 +14795,13 @@ class KolInputCheckbox {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, null, hAsync("kol-input", { class: {
+        return (hAsync(Host, { key: 'a07b9523e15742657eed5e19e04d31fc73fb92ff' }, hAsync("kol-input", { key: '596bdf49c677c0f3bef6c1c1ef7e7e45d56cbe8d', 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", { 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", { slot: "input", class: "checkbox-container" }, hAsync("kol-icon", { 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({ 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, 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: '25b62229f692c0f8f0c0d81fb634783c2c4a1078', 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: 'ea1c89027957b528af3ecabfd2582f41557cd93a', slot: "input", class: "checkbox-container" }, hAsync("kol-icon", { key: 'a322010f5619374675b84d4d7943f341c6c77d0d', 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: '2add081eb4b44c33e30711f6eabbb43ae3154ac9', 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);
@@ -14707,7 +14855,7 @@ class KolInputCheckbox {
             _value: true,
             _variant: 'default',
         };
-        this.controller = new InputCheckboxController(this, 'input-checkbox', this.host);
+        this.controller = new InputCheckboxController(this, 'checkbox', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -14912,10 +15060,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, null, hAsync("kol-input", { class: {
+        return (hAsync(Host, { key: 'e413f694aee1c550ddcfac91c7f860355cf748d9' }, hAsync("kol-input", { key: 'e37379ebccdaa03ec1bf8199770c358d362e6e1e', 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", { 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", { slot: "input" }, hAsync("input", Object.assign({ 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, _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: 'aeaee354e5d2be63c029a3409b25fe42f9f22e67', 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: 'd2b355405561a2cdda0fc3633744298a95070cbd', slot: "input" }, hAsync("input", Object.assign({ key: '0a299b99d10fe275e7431db33cb8f607a99faebb', 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);
@@ -14950,7 +15098,7 @@ class KolInputColor {
             _label: '',
             _suggestions: [],
         };
-        this.controller = new InputColorController(this, 'input-color', this.host);
+        this.controller = new InputColorController(this, 'color', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -15218,10 +15366,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, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: {
+        return (hAsync(Host, { key: 'adc4ad74212e328f2ff36a1ec902d9b0ee89e594', class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: 'f6cb87a10b7e78738009bfffc192e7b760d51980', 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", { 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", { slot: "input" }, hAsync("input", Object.assign({ 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, { onKeyUp: this.onKeyUp }))))));
+            }, _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: '201872a3ee7612aa5e2744c1896b76a6acdbed06', 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: 'ec6ceed26ed523eefb8a7ce6f08966c961d12f92', slot: "input" }, hAsync("input", Object.assign({ key: '10d8d3f70e22fdf8380be5a3909b1549560846d4', 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, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -15275,7 +15423,7 @@ class KolInputDate {
             _suggestions: [],
             _type: 'datetime-local',
         };
-        this.controller = new InputDateController(this, 'input-date', this.host);
+        this.controller = new InputDateController(this, 'date', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -15546,9 +15694,9 @@ 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, { class: {
+        return (hAsync(Host, { key: '1010c13d2bac3c27fa31b567555a488b1fac3f93', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { 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", { 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", { slot: "input" }, hAsync("input", Object.assign({ 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, { onKeyUp: this.onKeyUp }))))));
+            } }, hAsync("kol-input", { key: 'd1dfdbbcab99c404211843b92a6f5824d699d8b1', 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: '7257973314bca2037ac794ccb4ded0fb5af970d0', 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: '16ab7468139503e608b61a3fba47e8d7ff6095be', slot: "input" }, hAsync("input", Object.assign({ key: 'b87e5fc3ed10295c7f15bd825bfe62fd8009b97c', 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, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -15604,7 +15752,7 @@ class KolInputEmail {
             _label: '',
             _suggestions: [],
         };
-        this.controller = new InputEmailController(this, 'input-email', this.host);
+        this.controller = new InputEmailController(this, 'email', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -15801,10 +15949,10 @@ class KolInputFile {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, null, hAsync("kol-input", { class: {
+        return (hAsync(Host, { key: '1a00cbdc8da61ed4d773749d445e7028ea295780' }, hAsync("kol-input", { key: '6f4ac79d4a9194f32b9f1bcd2b384aae023884fb', 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", { 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", { slot: "input" }, hAsync("input", Object.assign({ 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, _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: '32d556ef00c6b59a5122b4e77f96753ad1c02b5d', 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: '8ee73c16f14342716a38c602b71cf50aa3a8923a', slot: "input" }, hAsync("input", Object.assign({ key: '71bbb2da4c60b7b9550782aa951cf18516eab2fa', 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 }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -15850,7 +15998,7 @@ class KolInputFile {
             _id: `id-${nonce()}`,
             _label: '',
         };
-        this.controller = new InputFileController(this, 'input-file', this.host);
+        this.controller = new InputFileController(this, 'file', this.host);
     }
     validateAccept(value) {
         this.controller.validateAccept(value);
@@ -16071,12 +16219,12 @@ 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, { class: {
+        return (hAsync(Host, { key: 'cd7f33a2ad550edf368e904bccec26d6daafe0f9', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: {
+            } }, hAsync("kol-input", { key: 'fa31562f05fdcdedc9d7b27c35984302307320f5', 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", { 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", { slot: "input" }, hAsync("input", Object.assign({ 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, { onKeyUp: this.onKeyUp }))))));
+            }, _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: 'dcea00aa8a8141b85dc97c0b29a9f961ef464a00', 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: '9d1da1b50a72dd6c7e3525b15bbe1bc2689f7b51', slot: "input" }, hAsync("input", Object.assign({ key: '6f1cf0cf4c5994fbd9e689c753ba4e7a2bfe5795', 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, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -16129,7 +16277,7 @@ class KolInputNumber {
             _label: '',
             _suggestions: [],
         };
-        this.controller = new InputNumberController(this, 'input-number', this.host);
+        this.controller = new InputNumberController(this, 'number', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -16298,12 +16446,12 @@ class KolInputPassword {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: '9dc5a4f4f630528c5109ca88a7080cb6bf67a309', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: {
+            } }, hAsync("kol-input", { key: 'edfa1940e0f75db1500aa7109231f07eee670bf6', 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", { 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", { slot: "input" }, hAsync("input", Object.assign({ 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, { onKeyUp: this.onKeyUp }))))));
+            }, _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: '49d31402441803e467e5436802d502bebb3bd502', 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: '1eb4f001b9412bfcb311aef044f4acc0b7ebe184', slot: "input" }, hAsync("input", Object.assign({ key: '36089c1878bc4278886f27489f002fb4e332f570', 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, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -16356,7 +16504,7 @@ class KolInputPassword {
             _id: `id-${nonce()}`,
             _label: '',
         };
-        this.controller = new InputPasswordController(this, 'input-password', this.host);
+        this.controller = new InputPasswordController(this, 'password', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -16518,14 +16666,14 @@ class KolInputRadio {
     render() {
         const { ariaDescribedBy, hasError } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, null, hAsync("fieldset", { class: {
+        return (hAsync(Host, { key: 'c9e64d8efb3ce0debe7b9532eb6071425d6f2201' }, hAsync("fieldset", { key: 'd8fbd35669f5f399aed3bedb07ff429f34306022', 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", { class: "block w-full mb-1 leading-normal" }, hAsync("span", null, hAsync("span", { 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: 'df0ecf4b0dbdd28aa9340f2d13da7e1d792c38bd', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '51e28dd4824425a92cedd525da59f1bdef3bdf07' }, hAsync("span", { key: '5dddfbcc63e57962de5ea5b98c3642e3f8373b95', 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: {
@@ -16585,7 +16733,7 @@ class KolInputRadio {
             _options: [],
             _orientation: 'vertical',
         };
-        this.controller = new InputRadioController(this, 'input-radio', this.host);
+        this.controller = new InputRadioController(this, 'radio', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -16768,12 +16916,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, null, hAsync("kol-input", { class: {
+        return (hAsync(Host, { key: '3063e3182a644acac54d280ef6cc6dc12c97e3cd' }, hAsync("kol-input", { key: '7f67c977b65b767fa2f3752c73bd4020cb2c0bf0', 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", { 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", { slot: "input" }, hAsync("div", { class: "inputs-wrapper", style: {
+            }, _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: 'd7e3122596fa19c63e05d69855fbc693cb8c4fe7', 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: '334e8196e0a431b4ee5b7facef958de2a4e4bb47', slot: "input" }, hAsync("div", { key: 'e31f8117925acae260c1ca724d4fad90b3407b73', class: "inputs-wrapper", style: {
                 '--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
-            } }, hAsync("input", Object.assign({ 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({ 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, { onKeyUp: this.onKeyUp, onChange: this.onChange }))), hasSuggestions && [
+            } }, hAsync("input", Object.assign({ key: 'c8b422e960b6970de164b495e78f6a7b1ac0ad58', 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: '7823e5a594ba84184ebdf45c7fafccac82072bb3', 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, { onKeyUp: this.onKeyUp, onChange: this.onChange }))), hasSuggestions && [
             hAsync("datalist", { id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
         ]))));
     }
@@ -16843,7 +16991,7 @@ class KolInputRange {
             _label: '',
             _suggestions: [],
         };
-        this.controller = new InputRangeController(this, 'input-range', this.host);
+        this.controller = new InputRangeController(this, 'range', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -16987,12 +17135,12 @@ 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, { class: {
+        return (hAsync(Host, { key: '8c39e3b68d6c24eca318d6863838f9e62ae58cca', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: {
+            } }, hAsync("kol-input", { key: '068ec3fc8ff78febf6793adc0bf65789aff082d2', class: {
                 [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", { 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", { slot: "input" }, hAsync("input", Object.assign({ 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, { onKeyUp: this.onKeyUp }))))));
+            }, _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: 'eb3d8afa30bdca1feaaca76269ef01c4901493d7', 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: 'af4199f60ca3dbd22426f6b6d25897e5883da8b4', slot: "input" }, hAsync("input", Object.assign({ key: 'a08f6f8474d596096f80cb7312534ec62b916456', 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, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -17059,7 +17207,7 @@ class KolInputText {
             _suggestions: [],
             _type: 'text',
         };
-        this.controller = new InputTextController(this, 'input-text', this.host);
+        this.controller = new InputTextController(this, 'text', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -17255,7 +17403,7 @@ class KolKolibri {
     }
     render() {
         const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
-        return (hAsync(Host, null, hAsync("svg", { role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { x: "250", y: "525", fill: fillColor }, "KoliBri")))));
+        return (hAsync(Host, { key: 'ace45f5926a8b600be0cc2273c8f8d546d8ba8e6' }, hAsync("svg", { key: '55eb99abc0de54f35143118031842ea7cc70842d', role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: '6942ab866b0ad07bf7a2a568bf8de31e835a5a96', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: 'eb9f91f28efba0690560edfc3ed6711b36e90259', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: 'a7eac30abca3ea80e8c949ef4f8f956e36abc12f', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: 'fe744bbfafb1223b8a9ccf849fa18a453ba518eb', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: 'b92a34e10d1ea8c34f6ddd3b3b2eb216f18fea2d', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: 'ce93d66cc49880140d623bbfea2fc1e81192b8f8', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { x: "250", y: "525", fill: fillColor }, "KoliBri")))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -17319,7 +17467,7 @@ class KolLink {
         this._tooltipAlign = 'right';
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-link-wc", { 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", { name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: '6710a59a05f71914b93c200848ca36e6ddfaf34e' }, hAsync("kol-link-wc", { key: '698c38c2e98a207093a813f2e4136ea6756c5fb1', 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: '685bd39e0a4b03a8ac3eb2cf8f1b7beed3669604', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -17375,11 +17523,11 @@ class KolLinkButton {
         this._variant = 'normal';
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '489505aec82cab0c660d6a4a6a3270582fd392df' }, hAsync("kol-link-wc", { key: '592085ffa185d411abb0f6b907b82c18415b4787', 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", { 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: 'b119d17e62c9b30d9f041d1af1d3bc8e592e7582', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -17442,7 +17590,7 @@ class KolLinkGroup {
         };
     }
     render() {
-        return (hAsync("nav", { "aria-label": this.state._label, class: {
+        return (hAsync("nav", { key: 'b6e88795a40d5c7d21733ed902e0e2cfcf15f87a', "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 })))));
@@ -17586,13 +17734,13 @@ class KolLinkWc {
     render() {
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, null, hAsync("a", Object.assign({ 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: '5af118226534baebdc688bbe495e5d1640d485e9' }, hAsync("a", Object.assign({ key: '7327fe25769295d0786ddaf0c60b8758e3411715', 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", { _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { 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", { "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("kol-span-wc", { key: '5d7506bc04fb5790b1ee3f6dfdc56d309c9c829e', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '7212d1125baffafd781c7bdd9aef082332fa1d58', 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: '8ad3681d1c91dc44b2282f8ba180d1c1868db92a', "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);
@@ -17906,7 +18054,7 @@ class KolLogo {
     }
     render() {
         var _a;
-        return (hAsync("svg", { "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", { width: "100%", height: "100%", fill: "white" }), hAsync("svg", { x: "0", y: "4", height: "75" }, hAsync(Adler, null)), hAsync("svg", { x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { width: "5", height: "30" }), hAsync("rect", { y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { x: "50", y: "0" }, hAsync("text", { 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("svg", { key: 'd4cd2b9f73edfd42aa619e4cab6183b067f41785', "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: '39e257c063908ce9c165cafabf09168132e5265e', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: '43ddbb553a5d45cb009ce805f11b01e2903025cc', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '8da4c572d5299c5fb2f55413bab21392db5a5e0e' })), hAsync("svg", { key: 'b219fa7ad4868b92b4311d6fa4dd2b6d7a338275', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: '6bec23ae0251600a066f59200a7c4d9d88422409', width: "5", height: "30" }), hAsync("rect", { key: 'c40fe99a709a2e696683bbced343e7409744fb66', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: 'c36e3de0a96d12abc228ec70464280095ebb4c0b', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: 'e9727334c08d1f2a412ea2cb43ebffa8d9fa2b29', x: "50", y: "0" }, hAsync("text", { key: '760f0879b6eaa576fc649bc21c28611cf37aeea0', 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.")))))));
     }
@@ -17966,7 +18114,7 @@ class KolModal {
         }
     }
     render() {
-        return (hAsync(Host, { ref: (el) => {
+        return (hAsync(Host, { key: '13b0c852e8354c554f0aa24ad2482f969e3ff1cc', ref: (el) => {
                 this.hostElement = el;
             } }, this.state._activeElement && (hAsync("div", { class: "overlay" }, hAsync("div", { class: "modal", style: {
                 width: this.state._width,
@@ -18134,11 +18282,11 @@ class KolNav {
         const collapsible = this.state._collapsible === true;
         const hideLabel = this.state._hideLabel === true;
         const orientation = this.state._orientation;
-        return (hAsync(Host, null, hAsync("div", { class: {
+        return (hAsync(Host, { key: '24ac126009d1258a19767f0383de91a986caaad3' }, hAsync("div", { key: '4b6f320e19ad9a2dd41d0fb10c7386c9544e6694', class: {
                 nav: true,
                 [orientation]: true,
                 'is-compact': this.state._hideLabel,
-            } }, hAsync("nav", { "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { 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: '651dc0c04ca400605b475c9e1b2d366a62681d9f', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'fd850d1be85c31083ac52f7f37a06eb9d39909bb', 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: {
                 onClick: () => {
                     this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
                 },
@@ -20610,7 +20758,7 @@ class KolPopover {
         });
     }
     render() {
-        return (hAsync(Host, { ref: this.catchHostAndTriggerElement }, hAsync("div", { class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", null))));
+        return (hAsync(Host, { key: '6045a307b99a11bd0cf51e75b597837c3e78b3ad', ref: this.catchHostAndTriggerElement }, hAsync("div", { key: '25381a572a890f5965b19fb4f8d5d2cbe6b3fa84', class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { key: '32699d94f9724862febdcbc9980d83e5cbeca45d', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: 'c592d6463221cea6fb9e1f698d0790be8fbeaeb6' }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -20683,7 +20831,7 @@ class KolProcess {
         };
     }
     render() {
-        return (hAsync(Host, null, createProgressSVG(this.state), hAsync("progress", { "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
+        return (hAsync(Host, { key: 'b8551d5fcc8df4128baae8f4368ec3e2c32305cd' }, createProgressSVG(this.state), hAsync("progress", { key: 'cfcba3a3fc063ac99e368f02008b83832e4604bb', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: 'e03e9b9e456858ae4d090720900fb9238ae2c5fb', "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);
@@ -20792,7 +20940,7 @@ class KolQuote {
     }
     render() {
         const hasExpertSlot = showExpertSlot(this.state._quote);
-        return (hAsync(Host, null, hAsync("figure", { class: {
+        return (hAsync(Host, { key: 'e64c92051e075c6caac6948c3f57ecc136b9dc48' }, hAsync("figure", { key: 'de736aac773e427275ca48515ef8c8941821c920', 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" })))))));
     }
@@ -20935,10 +21083,10 @@ class KolSelect {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: {
+        return (hAsync(Host, { key: '93564d25e2f745598f1831de58509e4dc97522be', class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: '707171f30d8f0f9f26e5af27c1411c51feb111ae', 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", { 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", { slot: "input" }, hAsync("select", { 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,
+            }, _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: '8746d84571d09efe98a97dcd294bc157323d9f1d', 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: 'd24118171dc30049646bf799f9fcc4e679920c78', slot: "input" }, hAsync("select", { key: 'f4123c4342d377c5fd952edd6612b1ea0e325cb4', 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) => {
             const key = `-${index}`;
@@ -21141,7 +21289,7 @@ class KolSkipNav {
         };
     }
     render() {
-        return (hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", null, this.state._links.map((link, index) => {
+        return (hAsync("nav", { key: '9914c49a5cf8726c148b889897c4994843516020', "aria-label": this.state._label }, hAsync("ul", { key: 'd398b0ae6d4bd90b0e95d3f62647e49ed0a18c82' }, this.state._links.map((link, index) => {
             return (hAsync("li", { key: index }, hAsync("kol-link-wc", Object.assign({}, link))));
         }))));
     }
@@ -21197,7 +21345,7 @@ class KolSpan {
         this._label = undefined;
     }
     render() {
-        return (hAsync("kol-span-wc", { _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey }, hAsync("slot", { name: "expert", slot: "expert" })));
+        return (hAsync("kol-span-wc", { key: '0132cc04217e1979d727ba49e2dcdcf757b4becb', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey }, hAsync("slot", { key: '42a1318de3b333aba1c08624b925cda9fca6a175', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolSpanDefaultStyle0
@@ -29519,9 +29667,9 @@ class KolSpanWc {
     render() {
         var _a, _b, _c, _d, _e;
         const hideExpertSlot = !showExpertSlot(this.state._label);
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: 'be4bc67de506f0e8d720a29b7e44523b9989401f', class: {
                 '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", null, 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", { "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { 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("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: '3c9d6a132b97d663b4161a0d25ee764b4bba0af9' }, 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: 'c6f24293d68c7e26423e8f9f9f88d9c699ec27f1', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: 'a28ec0669c4c56dc107c9c258ebda888952925bf', 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 }))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -29599,7 +29747,7 @@ class KolSpin {
         };
     }
     render() {
-        return (hAsync(Host, null, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
+        return (hAsync(Host, { key: 'd139babeb251d92e1dec7287cd3ac5011736058e' }, 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" }))));
@@ -29704,12 +29852,12 @@ class KolSplitButton {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-wc", { class: {
+        return (hAsync(Host, { key: 'e14c92c229423246686da05fc29bc0ad06bcdb9d' }, hAsync("kol-button-wc", { key: 'ff109880ee0ea19361527938bc2761ef1c76ec34', 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", { class: "horizontal-line" }), hAsync("kol-button-wc", { 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", { class: "popover", ref: this.catchDropdownElements }, hAsync("div", { class: "popover-content" }, hAsync("slot", null)))));
+            }, _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: '9c08c0874bce7db3cde524dc6979307cf29f3b3a', class: "horizontal-line" }), hAsync("kol-button-wc", { key: 'ca5e5f272716d90d226c49d7212ed4c71ceff188', 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: '26b2ae9fc3164315dcd193b8aeb9a7e4d5c9bc8c', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: '1c19689a76b6e01ffafa7ca518ece929afbea09a', class: "popover-content" }, hAsync("slot", { key: '5dd900da7d0cd74cf3cf21dfcf7026fae71fbd9b' })))));
     }
     static get style() { return {
         default: KolSplitButtonDefaultStyle0
@@ -29755,7 +29903,7 @@ class KolSymbol {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("span", { "aria-label": this.state._label, role: "term" }, this.state._symbol)));
+        return (hAsync(Host, { key: 'c2f1d807eee08e97e9573ef9e9bf335ea22afb78' }, hAsync("span", { key: 'ced032be84fad5ecafb51bad19c0262102755de8', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -30359,11 +30507,11 @@ 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, null, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync("div", { ref: (element) => (this.tableDivElement = element), class: "table", tabindex: "-1", onMouseDown: (event) => {
+        return (hAsync(Host, { key: 'c90677150b9e97cf70042e225ee5dfa636204a2a' }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync("div", { key: 'e37dc0befdd35956de27a1db150b18b33ac2f8e3', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: "-1", onMouseDown: (event) => {
                 event.preventDefault();
-            } }, hAsync("table", { style: {
+            } }, hAsync("table", { key: 'c502edd590754d46df9896d5e7ac793fddcd3789', style: {
                 minWidth: this.state._minWidth,
-            } }, hAsync("caption", { tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, 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("caption", { key: '8062918aa7072822127686bd49b38f5183c73d36', tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, 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,
@@ -30416,7 +30564,7 @@ class KolTable {
                         onClick: () => this.changeCellSort(headerCell),
                     } })) : (col.label)));
             }
-        })))))), hAsync("tbody", null, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : '')), this.pageEndSlice > 0 && this.showPagination && paginationBottom));
+        })))))), hAsync("tbody", { key: 'b6c697f9ce7867647db2d24b41ce1d889bce03b6' }, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : '')), this.pageEndSlice > 0 && this.showPagination && paginationBottom));
     }
     static get watchers() { return {
         "_allowMultiSort": ["validateAllowMultiSort"],
@@ -30604,11 +30752,11 @@ class KolTabs {
             } }))));
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", { ref: (el) => {
+        return (hAsync(Host, { key: '5036574493deb60734b6c17bffe39890fda4ebfb' }, hAsync("div", { key: '4bd78978770f15cc8682196c903a07b75d483b6a', ref: (el) => {
                 this.tabPanelsElement = el;
             }, class: {
                 [`tabs-align-${this.state._align}`]: true,
-            } }, this.renderButtonGroup(), hAsync("div", { class: "tabs-content", ref: this.catchTabPanelHost }))));
+            } }, this.renderButtonGroup(), hAsync("div", { key: '5436e5f663a2ba7979e26f58e1bf8ba54ee5c919', class: "tabs-content", ref: this.catchTabPanelHost }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -30818,7 +30966,7 @@ class KolTextarea {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { 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", { 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", { slot: "input" }, hAsync("textarea", Object.assign({ 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: '7049722c61d60394be9ae94f768d86d885a37d32', class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: '6962edb5ba298933533f8fcd7094a259465f3b1f', 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: 'a18b7d461c8bb5b83c3cb826a3275bbc0372501f', 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: '592e41f63a26c46f367da898599a088e6e2e6aa5', slot: "input" }, hAsync("textarea", Object.assign({ key: 'db5e708a3375b81ed61d8d94dc1d5772cd0fc84e', 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 }))))));
     }
@@ -31230,7 +31378,7 @@ class KolTooltip {
         this.showOrHideTooltip();
     }
     render() {
-        return (hAsync(Host, null, 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: 'f4df7d861c46a816cea3f79a2a99be74a2af8338' }, 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 })))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -31309,7 +31457,7 @@ class KolTree {
         this._label = undefined;
     }
     render() {
-        return (hAsync("kol-tree-wc", { _label: this._label }, hAsync("slot", null)));
+        return (hAsync("kol-tree-wc", { key: '4e6fa26971d45ad93918c8ec2086a638f2f9336e', _label: this._label }, hAsync("slot", { key: '452ecae760f14c983c7b9107940e8b046180ee5c' })));
     }
     static get style() { return {
         default: KolTreeDefaultStyle0
@@ -31357,7 +31505,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", { _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", null)));
+        return (hAsync("kol-tree-item-wc", { key: 'b62345e32892b245ba28d96da94b9d2b8399e577', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'fd08f041fe1de76696116a09e1b7079706d76d18' })));
     }
     static get style() { return {
         default: KolTreeItemDefaultStyle0
@@ -31397,11 +31545,11 @@ class KolTreeItemWc {
         this._href = undefined;
     }
     render() {
-        return (hAsync(Host, { onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { class: "tree-item" }, hAsync("kol-link", { class: {
+        return (hAsync(Host, { key: 'ba7536b4c6f3830d30cf9dfbdce43d0fa4f7c4fc', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: '768094efd223e5213e9db1bc301b98a25cfc8982', class: "tree-item" }, hAsync("kol-link", { key: 'd70178ff1fb10c761ff39c147cad8e5025fb82b8', 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", { 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", { hidden: !this.state._hasChildren || !this.state._open, role: "group" }, hAsync("slot", null)))));
+            }, _label: "", _href: this.state._href, ref: (element) => (this.linkElement = element), _tabIndex: this.state._active ? 0 : -1 }, hAsync("span", { key: '116f34650bbd9ffe172cd508d3782b63379f7b1e', 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: '4ae5cd8eaee46ee7ae1a7404d2bee06bb6a89804', hidden: !this.state._hasChildren || !this.state._open, role: "group" }, hAsync("slot", { key: '6b99c6ab345710c2467cc3c19aa0c9684ae609f4' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);
@@ -31497,7 +31645,7 @@ class KolTreeWc {
         validateLabel(this, value);
     }
     render() {
-        return (hAsync(Host, { onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { class: "tree", "aria-label": this.state._label }, hAsync("ul", { class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", null)))));
+        return (hAsync(Host, { key: 'e60c77ae0b5a99ffcfe98db836cb9ea1cd4c4149', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: 'f192d670742c7e304b5f8b9571e16e4cce60d37b', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '0099533c1bfd1691818656555c92b2caf39770ae', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'e05b65f5929d98f0cab0c76f08622c5b312986bc' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === TREE_ITEM_TAG_NAME.toUpperCase();
@@ -31654,7 +31802,7 @@ class KolVersion {
         };
     }
     render() {
-        return (hAsync("kol-badge", { _color: "#bec5c9", _icons: {
+        return (hAsync("kol-badge", { key: 'a08d296da6f4e61827ed2c5916ca4cc7f6a9e18e', _color: "#bec5c9", _icons: {
                 left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
             }, _label: this.state._label }));
     }