@public-ui/hydrate 1.7.12 → 1.7.13

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);
@@ -7378,7 +7512,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) {
@@ -7389,6 +7524,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 {
@@ -8628,7 +8764,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 = {};
@@ -9604,21 +9742,23 @@ const getKoliBri = () => {
     return kolibri;
 };
 const initKoliBri = () => {
-    if (getKoliBri().Modal === undefined) {
-        const Modal = new ModalService();
-        Object.defineProperty(getKoliBri(), 'Modal', {
-            get: function () {
-                return Modal;
-            },
-        });
-        initMeta();
+    initMeta();
+    if (getKoliBri() === undefined) {
+        if (getKoliBri().Modal === undefined) {
+            const Modal = new ModalService();
+            Object.defineProperty(getKoliBri(), 'Modal', {
+                get: function () {
+                    return Modal;
+                },
+            });
+        }
         Log.debug(`
 	,--. ,--.         ,--. ,--. ,-----.           ,--.
 	|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 1.7.12
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 1.7.13
 		`, {
             forceLog: true,
         });
@@ -10077,8 +10217,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[--$], 
@@ -10146,9 +10285,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) {
@@ -11952,7 +12091,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: '708351b62d4ddfaf9439718bf7051ed6e12b4486' }, hAsync("abbr", { key: 'b371ff0646d639bd497ed6fe92717905ff211d39', "aria-labelledby": this.nonce, role: "definition", tabindex: "0", title: this.state._label }, hAsync("span", { key: 'e36ec17f92845711268b3bd960913dc6c56bce3e', title: "" }, hAsync("slot", { key: '3278ea5174dd48858f631cb1c03bff4d761a211e' }))), hAsync("kol-tooltip-wc", { key: 'c1df9a9f393550710ccbd84a9e0545f6721079b0', _align: this.state._tooltipAlign, _id: this.nonce, _label: this.state._label })));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -12041,10 +12180,10 @@ class KolAccordion {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", { class: {
+        return (hAsync(Host, { key: '8c686a1ace1a5590acab87ea8f163256358ebf6d' }, hAsync("div", { key: '4f5503a545568c8f87fe2111c5136f9f16f490f4', class: {
                 accordion: true,
                 open: this.state._open === true,
-            } }, hAsync("kol-heading-wc", { _label: "", _level: this.state._level }, hAsync("kol-button-wc", { ref: this.catchRef, _ariaControls: this.nonce, _ariaExpanded: this.state._open, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { class: "header" }, hAsync("slot", { name: "header" })), 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", { name: "content" }), " ", hAsync("slot", null)))))));
+            } }, hAsync("kol-heading-wc", { key: '9691df7d0623bb39c06be4f8286c5658aecdcb4c', _label: "", _level: this.state._level }, hAsync("kol-button-wc", { key: '3410de38f55311a87821e571762d4683e2062fa8', ref: this.catchRef, _ariaControls: this.nonce, _ariaExpanded: this.state._open, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { key: '3da23d8ba623e5e529b2c2394a33e1870ebdd014', class: "header" }, hAsync("slot", { key: 'b632cf66243ccb977959fddfb34db365ed38222d', name: "header" })), hAsync("div", { key: '11da544ccaa00747092f677cc459e09d82b31012', class: "wrapper" }, hAsync("div", { key: '68c299ae9645bf16aa1fb1a1ede356b14b4f0aef', class: "animation-wrapper" }, hAsync("div", { key: '508dfb7024c87ec0200ec2e21be2fa7e14bb8e05', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: '9d26e7477d5ce341ce43e68d023c4d5ea0d28d27', name: "content" }), " ", hAsync("slot", { key: '656c38a9e4f3aceceb5e859007b2982483c3f946' })))))));
     }
     validateHeading(value) {
         this.validateLabel(value);
@@ -12118,7 +12257,7 @@ class KolAlert {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-alert-wc", { _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label || this._heading, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", null))));
+        return (hAsync(Host, { key: 'c03548c30755d84f8d3a8446a69ac66295e81904' }, hAsync("kol-alert-wc", { key: 'efbe11d9d405c7cc6f85e759cf8e4e4e3d1ecf4f', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label || this._heading, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: '84583b0ddd7a3cbc00127b0cc804659122f74e94' }))));
     }
     static get style() { return {
         default: KolAlertDefaultStyle0
@@ -12300,11 +12439,11 @@ class KolAlertWc {
                 this.validateAlert(false);
             }, 10000);
         }
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: 'a8c1c49a73dccecc52e1bb48ae90655d09d565e0', class: {
                 [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", null, 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: 'd92efd87fd960c0ba7ce79b5fc1ceb433a4e11e8', class: "heading" }, hAsync(AlertIcon, { key: '8c9ad64898564e4dc796c9b5df091bfff74daa88', label: this.state._label, type: this.state._type }), hAsync("div", { key: 'd3052998c633241fc71779fad487eee4bafd0fce' }, 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',
                 },
@@ -12382,7 +12521,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: '5b96fc500d56c6996c034b7e847f4441a28fcae2' }, hAsync("kol-avatar-wc", { key: 'a7a695f8d2a6ab665c891b6a558a0c23df3c3d06', _src: this._src, _label: this._label })));
     }
     static get style() { return {
         default: KolAvatarDefaultStyle0
@@ -12431,7 +12570,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: 'd6f0df983e4fba51ff7210d193ba04117332c3a7' }, hAsync("div", { key: 'd860929aa8f9c5494921636cf0b5d1bf5be7cba9', "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);
@@ -13046,12 +13185,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: 'da2a9a1dee13abf702deba02e2eab426d4a8e13e' }, hAsync("span", { key: 'e5187949eaa03e7c52acc62246a992ef2dae47e4', 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, _hideLabel: this._hideLabel || this._iconOnly, _icons: this._icons || this._icon, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
+            } }, hAsync("kol-span-wc", { key: 'fb2d932f756435a52549be7820a1b612ae93a532', id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _hideLabel: this._hideLabel || this._iconOnly, _icons: this._icons || this._icon, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -13140,7 +13279,7 @@ class KolBreadcrumb {
     }
     render() {
         var _a;
-        return (hAsync(Host, null, hAsync("nav", { "aria-label": (_a = this.state._label) !== null && _a !== void 0 ? _a : '' }, 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: '82d914b48822aac7b981ed22d2e90d85e8644a3f' }, hAsync("nav", { key: 'f5de4c29db727db5a3a41246450b9a22293d6483', "aria-label": (_a = this.state._label) !== null && _a !== void 0 ? _a : '' }, hAsync("ul", { key: '7f1dd301a992981f0878e6eea21c14dba15b5774' }, this.state._links.length === 0 && (hAsync("li", null, hAsync("kol-icon", { _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink)))));
     }
     validateAriaLabel(value) {
         this.validateLabel(value);
@@ -13223,11 +13362,11 @@ class KolButton {
         this._variant = 'normal';
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-wc", { ref: this.catchRef, class: {
+        return (hAsync(Host, { key: 'b228ce853ebee99e8708bfc57bd8f2192ac1f0cd' }, hAsync("kol-button-wc", { key: '48bdf9bf98bccee92cf5702b8f15270ae076333f', 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, _ariaCurrent: this._ariaCurrent, _ariaExpanded: this._ariaExpanded, _ariaLabel: this._ariaLabel, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel || this._iconOnly, _icons: this._icons || this._icon, _iconAlign: this._iconAlign, _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, _ariaCurrent: this._ariaCurrent, _ariaExpanded: this._ariaExpanded, _ariaLabel: this._ariaLabel, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel || this._iconOnly, _icons: this._icons || this._icon, _iconAlign: this._iconAlign, _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: '60582d0b9caf121864c09971febef2e1513560a9', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -13276,7 +13415,7 @@ class KolButtonGroup {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-group-wc", null, hAsync("slot", null))));
+        return (hAsync(Host, { key: '138608450f886e6de9fd5f9e35b5d17c555abe95' }, hAsync("kol-button-group-wc", { key: '558bdfc37d4ec8bb44f60e75b57469d85c939b51' }, hAsync("slot", { key: 'c702a187186d9e28ed132628719934efe8322905' }))));
     }
     static get style() { return {
         default: KolButtonGroupDefaultStyle0
@@ -13297,7 +13436,7 @@ class KolButtonGroupWc {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, null, hAsync("slot", null)));
+        return (hAsync(Host, { key: '0a28d777fa9b7c36104f6a8615742a6364090af7' }, hAsync("slot", { key: '6019634c93288ec663b3a660672f3786940f58cc' })));
     }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -13343,7 +13482,7 @@ class KolButtonLink {
         this._value = undefined;
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-wc", { ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaCurrent: this._ariaCurrent, _ariaExpanded: this._ariaExpanded, _ariaLabel: this._ariaLabel, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons || this._icon, _hideLabel: this._hideLabel || this._iconOnly, _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: '45b774f3a699e10d33cc71b48e07137501ca191f' }, hAsync("kol-button-wc", { key: 'cb5dbe3be87a23d23855879710c1b585f4cf8376', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaCurrent: this._ariaCurrent, _ariaExpanded: this._ariaExpanded, _ariaLabel: this._ariaLabel, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons || this._icon, _hideLabel: this._hideLabel || this._iconOnly, _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: '2da5eb21f97a0f00f3e80407c2436287ff419b54', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -13390,7 +13529,7 @@ class KolButtonLinkTextSwitch {
         this._link = undefined;
     }
     render() {
-        return hAsync(Host, null, this.renderContent());
+        return hAsync(Host, { key: '762e39cdd166779bf6d6e0c12eaf0fd41d8e27e5' }, this.renderContent());
     }
     renderContent() {
         if (this._link._on) {
@@ -13656,14 +13795,15 @@ const validateName = (component, value, options) => {
     watchString(component, '_name', value, 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.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);
@@ -13671,15 +13811,26 @@ class AssociatedInputController {
         };
         this.component = component;
         this.host = this.findHostWithShadowRoot(host);
-        this.name = name;
-        if (getExperimentalMode()) {
-            (_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');
@@ -13691,12 +13842,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) {
@@ -13735,7 +13885,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);
@@ -13793,13 +13943,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, "aria-controls": this.state._ariaControls, "aria-current": mapStringOrBoolean2String(this.state._ariaCurrent), "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: '5dff8da9a3b8734608f3c3f771e1a90339764d19' }, hAsync("button", Object.assign({ key: '33bc190417912eb7e72895350f493fc6a7967891', ref: this.catchRef, accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-current": mapStringOrBoolean2String(this.state._ariaCurrent), "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,
                 [this.state._variant]: this.state._variant !== 'custom',
                 [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
                 'icon-only': this.state._hideLabel === true,
                 '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", _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, _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: '56f8c91f168dafb82a184b9e79abe9d9aecd99ce', class: "button-inner", _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '303c0bfd4c0e6d97e14e91e2dbc9352af5e38680', name: "expert", slot: "expert" }))), hAsync("kol-tooltip-wc", { key: '636ba536af349d6ffccb691f663e3aa1dc2ad3d2', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -14061,7 +14211,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("slot", { name: "header" })), hAsync("div", { class: "content" }, hAsync("slot", { name: "content" }), hAsync("slot", null)), this.state._hasFooter && (hAsync("div", { class: "footer" }, hAsync("slot", { name: "footer" }))), this.state._hasCloser && (hAsync("kol-button-wc", { class: "close", _hideLabel: true, _icons: {
+        return (hAsync(Host, { key: '2b8c626fafb032b61ef3743f3a04102ede6488d6' }, hAsync("div", { key: '3ccc471fd5fda77531de9d062cbdb0daefac6b54', class: "card" }, hAsync("div", { key: 'aa05b50858b4a628e0fb5708e4893f87888ce436', class: "header" }, hAsync("kol-heading-wc", { key: '1117ed09b7a7fb84f6fe6272f67e7742d975b1c2', _label: this.state._label, _level: this.state._level }), hAsync("slot", { key: 'bcd0bbaa9f0ae4eefae2b69c3322fe03ff703cd6', name: "header" })), hAsync("div", { key: 'e431e1fd02b10da6f924bbf8477830768617e812', class: "content" }, hAsync("slot", { key: '5936c807271e2a594c7fae849ff45b669f4823f9', name: "content" }), hAsync("slot", { key: '6267e9a4d99c8be762e286cacd4611aa09f5e5d8' })), this.state._hasFooter && (hAsync("div", { class: "footer" }, hAsync("slot", { name: "footer" }))), this.state._hasCloser && (hAsync("kol-button-wc", { class: "close", _hideLabel: true, _icons: {
                 left: {
                     icon: 'codicon codicon-close',
                 },
@@ -14232,9 +14382,9 @@ class KolDetails {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("details", { ref: (el) => {
+        return (hAsync(Host, { key: 'a4b246a37223bdcf0d956b35d245aa4451e819e0' }, hAsync("details", { key: '80bae99a4b39285e81c32a3e85d9c558071b1032', ref: (el) => {
                 this.detailsElement = el;
-            }, onToggle: this.handleToggle }, hAsync("summary", { ref: this.catchRef }, this.state._open ? hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-down" }) : hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right" }), 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: 'cac9c2810f0e782df5620788c104c0432a643744', ref: this.catchRef }, this.state._open ? hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-down" }) : hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right" }), hAsync("span", { key: '185843eab9759cac6ce24a535b12d9b12faad9ed' }, this.state._label)), hAsync("div", { key: '027cd60a0956191b4465129e2170756483e72b08', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", { key: 'a6c79680210a15ccd08fba0d01ded42d360de0d7' }, hAsync("slot", { key: 'ad55233de0422914a80e7bd3bd2456a84c2edc3f' }))))));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -14332,10 +14482,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: '5a362febb352a2cd5451a884122763c56093edac', 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: 'a9c11e995286f97104b2f6f9b08d3bbb4de4bab2' })));
     }
     validateOn(value) {
         if (typeof value === 'object' && value !== null) {
@@ -14395,7 +14545,7 @@ class KolHeading {
         this._secondaryHeadline = undefined;
     }
     render() {
-        return (hAsync("kol-heading-wc", { _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline }, hAsync("slot", null)));
+        return (hAsync("kol-heading-wc", { key: '5f8441b182a577e01466384566b70ab6657fa353', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline }, hAsync("slot", { key: '7ea9f4b7e848bf3afa2039f5ec4ab14ce2573243' })));
     }
     static get style() { return {
         default: KolHeadingDefaultStyle0
@@ -14478,7 +14628,7 @@ class KolHeadingWc {
         this.validateSecondaryHeadline(this._secondaryHeadline);
     }
     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: 'd8cad5ea1646a4865ae0022f84ce2929b043f9b0' }, 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"],
@@ -14517,7 +14667,7 @@ class KolIcon {
     }
     render() {
         const ariaShow = typeof this.state._label === 'string' && 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: '631762f738652194b8b7b1d57a165ccbbd1a4c0e', exportparts: "icon" }, hAsync("i", { key: '26865fd58a1580ae5aefc0ce870447c8a8808bcd', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
     }
     validateAriaLabel(value) {
         this.validateLabel(value);
@@ -14579,7 +14729,7 @@ class KolIconFontAwesome {
         this._part = undefined;
     }
     render() {
-        return (hAsync("kol-icon", { exportparts: `icon${typeof this._part === 'string' ? `,${this._part}` : ''}`, _ariaLabel: this._ariaLabel, _icon: typeof this._prefix === 'string' && typeof this._icon === 'string' ? `${this._prefix} fa-${this._icon}` : undefined }));
+        return (hAsync("kol-icon", { key: '743cf721c8dd2e1d45bab31269ab272ebfcccaa8', exportparts: `icon${typeof this._part === 'string' ? `,${this._part}` : ''}`, _ariaLabel: this._ariaLabel, _icon: typeof this._prefix === 'string' && typeof this._icon === 'string' ? `${this._prefix} fa-${this._icon}` : undefined }));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -14604,7 +14754,7 @@ class KolIconIcofont {
         this._part = undefined;
     }
     render() {
-        return (hAsync("kol-icon", { exportparts: `icon${typeof this._part === 'string' ? `,${this._part}` : ''}`, _ariaLabel: this._ariaLabel, _icon: typeof this._icon === 'string' ? `icofont-${this._icon}` : undefined }));
+        return (hAsync("kol-icon", { key: '1428836cf22a3df024ffc4c8dd5674e9ca0de44c', exportparts: `icon${typeof this._part === 'string' ? `,${this._part}` : ''}`, _ariaLabel: this._ariaLabel, _icon: typeof this._icon === 'string' ? `icofont-${this._icon}` : undefined }));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -14669,7 +14819,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: '2f7fb28b077bfaccd73846be554221556934f6dd' }, hAsync("img", { key: '63447e8ae1c2c802eb4342d5e8f21da6cc2b8087', 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"],
@@ -14707,7 +14857,7 @@ class KolIndentedText {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", null, hAsync("slot", null))));
+        return (hAsync(Host, { key: '0cccaf45787f9ce48b611b1a52b0874c4a289379' }, hAsync("div", { key: '79efcdb0fe562eeaf676b7dc2550554ff6ee3219' }, hAsync("slot", { key: 'c1642ad9e6743897698af21535db19a9eeffdb9f' }))));
     }
     static get style() { return {
         default: KolIndentedTextDefaultStyle0
@@ -14769,22 +14919,22 @@ class KolInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        const hasError = typeof this._error === 'string' && this._error.length > 0 && this._touched === true;
+        const hasError = !this._readOnly && typeof this._error === 'string' && this._error.length > 0 && this._touched === true;
         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: '00309cc52c4174d881725fad556e0d2e51fdacf4', 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", null, hAsync("slot", { name: "label" }))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { class: {
+            } }, hAsync("label", { key: '64833944c9a10261e8d3ab97638a25c61ab532ce', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'a52a31e30c528dfc6f9822184161017f10017e02' }, hAsync("slot", { key: '077f57b5fb6b00756d6a2b8e9559c0921e2af9ad', name: "label" }))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '41890a631d116ffb5223c5686c595c81b24e3b8b', class: {
                 input: true,
                 'icon-left': typeof ((_a = this.getIconsProp()) === null || _a === void 0 ? void 0 : _a.left) === 'object',
                 'icon-right': typeof ((_b = this.getIconsProp()) === null || _b === void 0 ? void 0 : _b.right) === 'object',
-            } }, ((_c = this.getIconsProp()) === null || _c === void 0 ? void 0 : _c.left) && (hAsync("kol-icon", { _ariaLabel: "", _icons: ((_d = this.getIconsProp()) === null || _d === void 0 ? void 0 : _d.left).icon, style: this.getIconStyles((_e = this.getIconsProp()) === 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.getIconsProp()) === null || _f === void 0 ? void 0 : _f.right) && (hAsync("kol-icon", { _ariaLabel: "", _icons: ((_g = this.getIconsProp()) === null || _g === void 0 ? void 0 : _g.right).icon, style: this.getIconStyles((_h = this.getIconsProp()) === null || _h === void 0 ? void 0 : _h.right) }))), useTooltopInsteadOfLabel && (hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", _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.getIconsProp()) === null || _c === void 0 ? void 0 : _c.left) && (hAsync("kol-icon", { _ariaLabel: "", _icons: ((_d = this.getIconsProp()) === null || _d === void 0 ? void 0 : _d.left).icon, style: this.getIconStyles((_e = this.getIconsProp()) === null || _e === void 0 ? void 0 : _e.left) })), hAsync("div", { key: 'b6f8ec87d4f056f25fc725de1e7144929b5aaa0e', 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.getIconsProp()) === null || _f === void 0 ? void 0 : _f.right) && (hAsync("kol-icon", { _ariaLabel: "", _icons: ((_g = this.getIconsProp()) === null || _g === void 0 ? void 0 : _g.right).icon, style: this.getIconStyles((_h = this.getIconsProp()) === null || _h === void 0 ? void 0 : _h.right) }))), useTooltopInsteadOfLabel && (hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", _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 {
@@ -14827,7 +14977,7 @@ class KolInputAdapterLeanup {
         deprecatedHint(`Die Komponente 'kol-input-adapter-leanup' mit dem Release v1.1.7 umgezogen. Lesen Sie hier, wie Sie sie migrieren: https://public-ui.github.io/docs/changelog/#117---30092022`);
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-alert", { _type: "warning" }, "Die Komponente ", hAsync("code", null, "kol-input-adapter-leanup"), " ist umgezogen. Lesen Sie hier, wie Sie sie migrieren:", ' ', hAsync("kol-link", { _href: "https://public-ui.github.io/docs/changelog#118---07102022", _label: "https://public-ui.github.io/docs/changelog#118---07102022", _target: "documentation" }))));
+        return (hAsync(Host, { key: '4b16cef24a209fd93fa5dad0fbd09ea540aae8a0' }, hAsync("kol-alert", { key: '0d59dae162b57c68530d2325889fc55b1cf03c2d', _type: "warning" }, "Die Komponente ", hAsync("code", { key: 'ceb863d89d8375cafb90ab03ccc1b13d6c3fc679' }, "kol-input-adapter-leanup"), " ist umgezogen. Lesen Sie hier, wie Sie sie migrieren:", ' ', hAsync("kol-link", { key: '4f35f28e03e61d8ac72280210dbd1eb596324d3b', _href: "https://public-ui.github.io/docs/changelog#118---07102022", _label: "https://public-ui.github.io/docs/changelog#118---07102022", _target: "documentation" }))));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -15231,13 +15381,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: '3e9589f1902103be9c9ed7347eac365c5555a34c' }, hAsync("kol-input", { key: '6f310044536e272fe74f395533c4f436133d2440', 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, _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", 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, _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: '2e3e0e5debe7102d24f6ea8d12ff9889ce7e01fe', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("label", { key: 'a4b5735954f4fb1a1d90870f08c963c8532f1c11', slot: "input", class: "checkbox-container" }, hAsync("kol-icon", { key: '6aef51233da37536004ca3baf88b128356058914', 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: '06fb3a9c5dc433e96933607d8bec92e586189d83', 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);
@@ -15292,7 +15442,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);
@@ -15515,10 +15665,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: '0e16f9f2927ec02e72c4689044d48aa709e825e1' }, hAsync("kol-input", { key: '86fb6e8489c8828501bab5394c62a66bbb26df1e', class: {
                 color: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _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", 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))))));
+            }, _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: '187b54d97280c6fe4da049b9cd1304a703ab32c4', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { key: 'b18e47084eb0126f998b6567bb7b575b69538a15', slot: "input" }, hAsync("input", Object.assign({ key: '9255e5f72c4a20639499aec845449317b4d71a4e', 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);
@@ -15555,7 +15705,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);
@@ -15834,10 +15984,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: 'a7939ff7a07ceb1f7d1353eb118135835c5efe8b', class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: '8e034cc422a6c55a5697ec7d88e79057c962525f', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _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", 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 }))))));
+            }, _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: '27402d1a52bab6253fdd00a2fe74e00b103f66f3', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { key: 'd645f8889c6cfafdbf119bb4e71698535aabb663', slot: "input" }, hAsync("input", Object.assign({ key: '2d7b453795f5f9bfbdb2fc788e95befc803c6465', 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);
@@ -15893,7 +16043,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);
@@ -16184,9 +16334,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: '01c8ca031ea1865c96b5bc330b367fd614d80bb5', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: { email: true, 'hide-label': !!this.state._hideLabel }, _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", 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, size: this.state._size, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+            } }, hAsync("kol-input", { key: '11df1e63cff7af57d8880abeeef7f9065cdc8cee', class: { email: true, 'hide-label': !!this.state._hideLabel }, _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: '48afaefc49a29456ad14a76b4be7fab1a1ef2074', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { key: '7c90981b925209571446ead59bb1bddee7b6b789', slot: "input" }, hAsync("input", Object.assign({ key: '572e01e9686a08a92cbaeae84ca600d7a36d6d78', 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, size: this.state._size, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -16245,7 +16395,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);
@@ -16452,10 +16602,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: 'c539134ccffa259fabd21a191188654c70016d8f' }, hAsync("kol-input", { key: 'f566dfd52907707f5a38045c6541ca2de9cb45bd', class: {
                 file: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _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", 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 }))))));
+            }, _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: 'cb76cd13e9357276695d090da2154e350abc298d', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { key: 'd8d9ce4350121b3422bb0e768825c0cba596fa64', slot: "input" }, hAsync("input", Object.assign({ key: 'ac67747b45cc9929bea1170ee91ac1d57079fa20', 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);
@@ -16502,7 +16652,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);
@@ -16729,12 +16879,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: 'a9748277cee819adce6b127081f0cfa5441d682b', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: {
+            } }, hAsync("kol-input", { key: '40ecd8ff4de1b9ad3f97b33bab7bd454d8de7882', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _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", 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: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+            }, _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: '07baca12888890bf6ea393e4c7114b5d8ec451fc', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { key: '643d5ba030e94ce9da1c2215f112d7bc765d735b', slot: "input" }, hAsync("input", Object.assign({ key: '8f01ed8220657ad891bf2825f847d05a45af88d7', 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: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -16791,7 +16941,7 @@ class KolInputNumber {
             _suggestions: [],
             _type: 'number',
         };
-        this.controller = new InputNumberController(this, 'input-number', this.host);
+        this.controller = new InputNumberController(this, 'number', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -16970,12 +17120,12 @@ class KolInputPassword {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: '7736f862e07440f19114335d48657adcea46b951', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: {
+            } }, hAsync("kol-input", { key: '173f549a9cb3364b81740c63f75e58e5726ac157', class: {
                 'hide-label': !!this.state._hideLabel,
                 password: true,
-            }, _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", 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, size: this.state._size, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+            }, _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: '92e89e0ad7da94aa7aa18e8127861f0a4ab9bef9', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { key: '90fefb9899d9e05cce1f29ff7bdfcfc99ecc1e11', slot: "input" }, hAsync("input", Object.assign({ key: 'be6663629e465217015c54a9ef78fafe5a21891d', 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, size: this.state._size, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -17030,7 +17180,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);
@@ -17198,13 +17348,13 @@ 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: '515c7bc42989a97794fb454999439e1ce017d5a7' }, hAsync("fieldset", { key: '60d734fef274115e225e8e39cf012138ee614ffa', class: {
                 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", null) : this.state._label))), this.state._options.map((option, index) => {
+            } }, hAsync("legend", { key: '5a45ea8d6231420bf7b642fbed4f428af07aaed9', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: 'c84d8dcdb811a98faab88a367fdb7ba2fbb058cd' }, hAsync("span", { key: 'eec4d1c9940d5f8eb991343be28982e7fce2a9bb', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label))), this.state._options.map((option, index) => {
             const customId = `${this.state._id}-${index}`;
             const slotName = `radio-${index}`;
             return (hAsync("kol-input", { class: {
@@ -17265,7 +17415,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);
@@ -17410,7 +17560,7 @@ class KolInputRadioGroup {
         deprecatedHint(`[KolInputRadioGroup] Die Komponenten Input-Radio-Group und Input-Radio werden zur Komponente Input-Radio zusammengeführt. Wir empfehlen den Tag <kol-input-radio> statt <kol-input-radio-group> zu verwenden.
 
 Mit der Version 1.1 wird die Komponente KolInputRadioGroup aus der Bibliothek entfernt.`);
-        return (hAsync("kol-input-radio", { _accessKey: this._accessKey, _disabled: this._disabled, _error: this._error, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _list: this._list, _name: this._name, _on: this._on, _orientation: this._orientation, _required: this._required, _tabIndex: this._tabIndex, _touched: this._touched, _value: this._value }, hAsync("slot", null)));
+        return (hAsync("kol-input-radio", { key: '573d500e6df9c89211ee2a52e44c110af20711e9', _accessKey: this._accessKey, _disabled: this._disabled, _error: this._error, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _list: this._list, _name: this._name, _on: this._on, _orientation: this._orientation, _required: this._required, _tabIndex: this._tabIndex, _touched: this._touched, _value: this._value }, hAsync("slot", { key: '3227de03fd2efe1cbfe6cb1f098072efb93bee6a' })));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -17494,12 +17644,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: 'bd713229ee3ac562b5d954abcbdb35dc3459a202' }, hAsync("kol-input", { key: '0790ebec34ce9ed23529efd439a617a362287a85', class: {
                 range: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _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", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("div", { class: "inputs-wrapper", style: {
+            }, _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: 'c8b8fbf6f99e9d5a8e20adbe62a60360a240c59b', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { key: 'c7776296ab581b85f32853b6ca7acf1f55ae9b1d', slot: "input" }, hAsync("div", { key: '77994219a957c789271b9c3f9869c59e562dca45', 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: '9a405810b39660491228eda68ff54551a24fae62', 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: '52a0e7052e75a0564e09fd862e154601b48b30f7', 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 })))),
         ]))));
     }
@@ -17574,7 +17724,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);
@@ -17728,12 +17878,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: '1a29c5451db5c23c9c05bae0ac6321b1e89e34d3', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: {
+            } }, hAsync("kol-input", { key: 'b4c1540403fec357830d855ee82cf816ec0f8251', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _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", 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, size: this.state._size, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+            }, _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: '986082f361c179298755864962015c99d07db107', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { key: 'e12c4b1d18b45bc7907e03d52f9df372dda1785e', slot: "input" }, hAsync("input", Object.assign({ key: 'bf0942100325219e62df6063e92556b44cc4e4ba', 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, size: this.state._size, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -17803,7 +17953,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);
@@ -18013,7 +18163,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: 'e91b308413c63a91d3d470be79f4d69f428eae2d' }, hAsync("svg", { key: '2b2fd488cc1fa7208b802e1d6fa52ff0450b56c6', 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: 'f89dd3983aa16dfe3489e57f6eb8c2ed846f0be4', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '69dc26bdf907ca3b8bc672f0efbdf6d7762d11fa', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: '38d1f715be410cd25207bc7bb7f95951c4a49db7', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: '08a98beb3d1e21dc4b8beb7550e8d209e94b18f3', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '066236218d9e29ce6677932b17f13d97ab67b0ab', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '6bbfe9422332e76cdcae2b42fc970421c90f93b0', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { x: "250", y: "525", fill: fillColor }, "KoliBri")))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -18087,7 +18237,7 @@ class KolLink {
         this._useCase = 'text';
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, _ariaControls: this._ariaControls, _ariaCurrent: this._ariaCurrent, _ariaExpanded: this._ariaExpanded, _ariaLabel: this._ariaLabel, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons || this._icon, _iconAlign: this._iconAlign, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: this._role, _selector: this._selector, _stealth: this._stealth, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign, _useCase: this._useCase }, hAsync("slot", { name: "expert", slot: "expert" }), hAsync("slot", { slot: "expert" }))));
+        return (hAsync(Host, { key: 'eb3715ec38647a9077b26e3091a2a8bdbf907c62' }, hAsync("kol-link-wc", { key: 'c6ad6bc86b15a9f2ea02c91f698a82e9ae0e392c', ref: this.catchRef, _ariaControls: this._ariaControls, _ariaCurrent: this._ariaCurrent, _ariaExpanded: this._ariaExpanded, _ariaLabel: this._ariaLabel, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons || this._icon, _iconAlign: this._iconAlign, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: this._role, _selector: this._selector, _stealth: this._stealth, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign, _useCase: this._useCase }, hAsync("slot", { key: '303d1bbf2c0db58fbe429f6080d56b3d456f8f0c', name: "expert", slot: "expert" }), hAsync("slot", { key: '7c3259998fe4ec8192b320781accdcdd5d038040', slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -18158,11 +18308,11 @@ class KolLinkButton {
         this._variant = 'normal';
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '402ef735b290dfcc919bd4378e0ea565e81facf2' }, hAsync("kol-link-wc", { key: '98357beb8cf1d50c9d1d10b2a9460c23a8d06612', ref: this.catchRef, class: {
                 button: true,
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _ariaControls: this._ariaControls, _ariaCurrent: this._ariaCurrent, _ariaExpanded: this._ariaExpanded, _ariaLabel: this._ariaLabel, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icon: this._icon, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+            }, _ariaControls: this._ariaControls, _ariaCurrent: this._ariaCurrent, _ariaExpanded: this._ariaExpanded, _ariaLabel: this._ariaLabel, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icon: this._icon, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '16ca94931954f62cf2a0436bfdd463ae28a76b6d', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -18235,7 +18385,7 @@ class KolLinkGroup {
     }
     render() {
         var _a;
-        return (hAsync("nav", { "aria-label": this.state._label, class: {
+        return (hAsync("nav", { key: '80528f3aea5083b8c38a525d16a516a984be9c89', "aria-label": this.state._label, class: {
                 vertical: this.state._orientation === 'vertical',
                 horizontal: this.state._orientation === 'horizontal',
             } }, typeof this.state._heading === 'string' && ((_a = this.state._heading) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync("kol-heading-wc", { _label: this.state._heading, _level: this.state._level })), 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 })))));
@@ -18452,7 +18602,7 @@ class KolLinkWc {
     render() {
         const { isExternal, tagAttrs, goToProps } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, null, hAsync("a", Object.assign({ ref: this.catchRef }, tagAttrs, { "aria-controls": this.state._ariaControls, "aria-current": this.state._ariaCurrent, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
+        return (hAsync(Host, { key: '9201bb10f5792a2919a139d70e770d4dec308246' }, hAsync("a", Object.assign({ key: '7291aaa7ba79a39fc32d8464824c953f306d83e7', ref: this.catchRef }, tagAttrs, { "aria-controls": this.state._ariaControls, "aria-current": this.state._ariaCurrent, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
                 ? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
                 : undefined, "aria-selected": mapBoolean2String(this.state._ariaSelected), class: {
                 disabled: this.state._disabled === true,
@@ -18460,7 +18610,7 @@ class KolLinkWc {
                 'icon-only': this.state._hideLabel === true,
                 'hide-label': this.state._hideLabel === true,
                 'external-link': isExternal,
-            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick }, goToProps, { role: this.state._role, tabIndex: this.state._tabIndex }), hAsync("kol-span-wc", { _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, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
+            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick }, goToProps, { role: this.state._role, tabIndex: this.state._tabIndex }), hAsync("kol-span-wc", { key: 'e562c195cbebc81c20187ffe4fabfc18056e45e7', _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '01185b36134df7a0acdf06a30824800230ebf47a', 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: '629160b8d5de598b088e05f253827aa07f64cad2', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
     }
     validateAriaControls(value) {
         validateAriaControls(this, value);
@@ -18836,7 +18986,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: '120145309d86c12979fa05bfdf0eb8a154f72c85', "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: '80ef91901c5603b203dc41929115530896d5f83e', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: 'ac4b76f90a05f294399e0e86697632f1c2af9441', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '538bf6e666341f1f613d978831ce89736cf86a99' })), hAsync("svg", { key: 'ff6d5f0c71b87c4218c44e6b94e0314d76d34dd6', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: '0f1bfb66248a62a42408e54c7a252d493c4af708', width: "5", height: "30" }), hAsync("rect", { key: '21c6e6f4589ca4839480048607392d7844e9067d', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: '0ab55202ff71653d1cd0a40dd721c43977df6bc6', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: 'd2212bcdcb6afbece2d94f0c94fa1da91f5355ef', x: "50", y: "0" }, hAsync("text", { key: 'e2ae88a0ea0da6afa29b92129185198f8fecacb8', 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.")))))));
     }
@@ -18899,7 +19049,7 @@ class KolModal {
         }
     }
     render() {
-        return (hAsync(Host, { ref: (el) => {
+        return (hAsync(Host, { key: 'e12517d7dd2dd87ac02746af6a7906d7bf00df7c', ref: (el) => {
                 this.hostElement = el;
             } }, this.state._activeElement && (hAsync("div", { class: "overlay" }, hAsync("div", { class: "modal", style: {
                 width: this.state._width,
@@ -19055,10 +19205,10 @@ 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: 'cf4267e07292edd55fef0d781af3914ce2419012' }, hAsync("div", { key: '816ac2cf881fd3b5fc431a3a88b934b22cce2214', class: {
                 [orientation]: true,
                 [this.state._variant]: true,
-            } }, 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: 'bad828a3a972631cfc94ae99bc14f79917cc22fe', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '5bf63301f434937fc4a3a09ce0d16b2e3bae66d3', 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 });
                 },
@@ -21093,7 +21243,7 @@ class KolPopover {
         (_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.showPopover);
     }
     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: '3fd3068c0582b286f2791afdc22547cc6ccdabc6', ref: this.catchHostAndTriggerElement }, hAsync("div", { key: 'edd1a77f65a9545cc477571e90d9a91b09bed747', class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { key: '7ce5af20fc6284d5912eb6c2d9f188d858d36033', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '6678c27b47e83861139a3750531cf45240f4a594' }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -21175,7 +21325,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", hidden: true }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
+        return (hAsync(Host, { key: '7c5b72c294d76a569e1a1ec7b10aae5d97bc2ff4' }, createProgressSVG(this.state), hAsync("progress", { key: '3e7ca0cacc2f5b3aad5f68d796f38c2471406d6b', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '448ca430be063f58130771e71a8201ac1dab5089', "aria-live": "polite", "aria-relevant": "removals text", hidden: true }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -21293,7 +21443,7 @@ class KolQuote {
     }
     render() {
         const hasExpertSlot = showExpertSlot(this.state._quote);
-        return (hAsync(Host, null, hAsync("figure", { class: {
+        return (hAsync(Host, { key: 'd7e18d09d749c969274be2240c8d499e76199c2f' }, hAsync("figure", { key: '18a29720fa2f2eaf8fa3c41912ce5b3c3fe31ff4', 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" })))))));
     }
@@ -21443,10 +21593,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: 'b932d777ac13c627cfc6e10705197c968c20ac94', class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: 'b05cee642950421d1acf8a96b6a8cac5af19ebf0', class: {
                 'hide-label': !!this.state._hideLabel,
                 select: true,
-            }, _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", 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", style: {
+            }, _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: '2911a3254ac87ca007f0792ff61cad7b0733d40d', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { key: '819ff89c6e60281cd49add83a8ba7a48bdbe3f2b', slot: "input" }, hAsync("select", { key: 'd3f28dcb1b69416ecb4b4489ffebc02afaac1fcb', 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", style: {
                 height: this.state._height,
             }, onClick: this.controller.onFacade.onClick,
             onBlur: this.controller.onFacade.onBlur,
@@ -21676,7 +21826,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: '8ec0b3a2de8c96ad8538dad8db2ce8c5b2ad2667', "aria-label": this.state._label }, hAsync("ul", { key: '644b35fbe9ac6d486c0e098a7e588878e13dac80' }, this.state._links.map((link, index) => {
             return (hAsync("li", { key: index }, hAsync("kol-link-wc", Object.assign({}, link))));
         }))));
     }
@@ -21738,7 +21888,7 @@ class KolSpan {
         this._label = undefined;
     }
     render() {
-        return (hAsync("kol-span-wc", { _icons: this._icons || this._icon, _hideLabel: this._hideLabel, _label: this._label }, hAsync("slot", { name: "expert", slot: "expert" })));
+        return (hAsync("kol-span-wc", { key: '76067a8adf112183b6d04b05ee9f521903eaf840', _icons: this._icons || this._icon, _hideLabel: this._hideLabel, _label: this._label }, hAsync("slot", { key: 'df6518b1e9775d64c12295efe403403da58715f2', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolSpanDefaultStyle0
@@ -30062,10 +30212,10 @@ class KolSpanWc {
     render() {
         var _a, _b, _c, _d, _e;
         const hideExpertSlot = !showExpertSlot(this.state._label);
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: '5fc97f91b8dec7e2ad149a1af44a7204bc902e79', class: {
                 'icon-only': !!this.state._hideLabel,
                 '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" }, (_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._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: '94063870a7800b31838e9661fcdf652443b7cfbc' }, 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" }, (_c = this.state._label) !== null && _c !== void 0 ? _c : ''))) : (''), hAsync("span", { key: '77083a652d6c9e05528f49d9413d6614f8b3ecb9', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '453158202d2c93980e1febaeb76b5dc5a63bd9e8', name: "expert" })), 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 }))));
     }
     validateAllowMarkdown(value) {
         watchBoolean(this, '_allowMarkdown', value, {
@@ -30151,7 +30301,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: 'acea6ca3c535ee30fa850c122b56704db547e8e3' }, 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" }))));
@@ -30274,12 +30424,12 @@ class KolSplitButton {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-wc", { class: {
+        return (hAsync(Host, { key: '77a40c57394a116af5fd949db3e0db294c78ed03' }, hAsync("kol-button-wc", { key: 'f2351f1fc873029a149d3cadba087b6ae454b67c', class: {
                 'main-button': true,
                 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, _icons: this._icons || this._icon, _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)))));
+            }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons || this._icon, _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: '8ff44a6250eefc056b9ce78916332aef97e05a8f', class: "horizontal-line" }), hAsync("kol-button-wc", { key: 'cfa410189c5cf8f2cb06ec2f3e02383ba4ae431b', 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: 'd9d4d37a72a781e57bacb4f5c501c6e2a98459b3', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: '4517c49f73440929a898250a88b31c2b4cd3e19d', class: "popover-content" }, hAsync("slot", { key: '5da8c5c3489e6fc93e50f4998d3d31e2dc216307' })))));
     }
     validateShowDropdown(value) {
         this.validateShow(value);
@@ -30349,7 +30499,7 @@ class KolSymbol {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("span", { "aria-label": this.state._label, role: "term" }, this.state._symbol)));
+        return (hAsync(Host, { key: '2d5a491f86548d3ae09f56e3445ca224fe6a7db9' }, hAsync("span", { key: '8c23febba820e390d90650f88affa5fe59325a5f', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
     }
     validateAriaLabel(value) {
         this.validateLabel(value);
@@ -30849,11 +30999,11 @@ class KolTable {
         var _a, _b;
         const displayedData = this.selectDisplayedData(this.state._sortedData, this.showPagination ? (_b = (_a = this.state._pagination) === null || _a === void 0 ? void 0 : _a._pageSize) !== null && _b !== void 0 ? _b : 10 : this.state._sortedData.length, this.state._pagination._page || 1);
         const dataField = this.createDataField(displayedData, this.state._headers);
-        return (hAsync(Host, null, this.pageEndSlice > 0 && this.showPagination && (hAsync("div", { class: "pagination" }, hAsync("span", null, "Eintr\u00E4ge ", this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0, " bis ", this.pageEndSlice, " von", ' ', this.state._pagination._max || (Array.isArray(this.state._data) ? this.state._data.length : 0), " angezeigt"), hAsync("div", null, hAsync("kol-pagination", { _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._total || this.state._data.length, _label: translate('kol-table-pagination-label', { placeholders: { label: this.state._label } }) })))), hAsync("div", { ref: (element) => (this.tableDivElement = element), class: "table", tabindex: "-1", onMouseDown: (event) => {
+        return (hAsync(Host, { key: 'f794beeff78b8ce946e98c0a4f10be2e55729783' }, this.pageEndSlice > 0 && this.showPagination && (hAsync("div", { class: "pagination" }, hAsync("span", null, "Eintr\u00E4ge ", this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0, " bis ", this.pageEndSlice, " von", ' ', this.state._pagination._max || (Array.isArray(this.state._data) ? this.state._data.length : 0), " angezeigt"), hAsync("div", null, hAsync("kol-pagination", { _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._total || this.state._data.length, _label: translate('kol-table-pagination-label', { placeholders: { label: this.state._label } }) })))), hAsync("div", { key: '98f7c3ca6d5d59e09bbade107641460898d51477', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: "-1", onMouseDown: (event) => {
                 event.preventDefault();
-            } }, hAsync("table", { style: {
+            } }, hAsync("table", { key: 'd0d6ffe63fbeac62252a13212e7f80ce64ba01ee', 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: 'f1e234380539c835b369d15bab9ac71f4db64f1e', 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,
@@ -30903,7 +31053,7 @@ class KolTable {
                         },
                     } })) : (col.label)));
             }
-        })))))), hAsync("tbody", null, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : ''))));
+        })))))), hAsync("tbody", { key: '9e4e017a420d45539a9144c3a731f7f0563f1753' }, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : ''))));
     }
     static get watchers() { return {
         "_caption": ["validateCaption"],
@@ -31091,11 +31241,11 @@ class KolTabs {
             } }))));
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", { ref: (el) => {
+        return (hAsync(Host, { key: 'be1e630d4846c8ef49d61c9cab2552124894a3ad' }, hAsync("div", { key: '9aab458792e5d7837f1c1fd161ec45b6f35e9be1', ref: (el) => {
                 this.tabPanelsElement = el;
             }, class: {
                 [`tabs-align-${this.state._align}`]: true,
-            } }, this.renderButtonGroup(), hAsync("div", { ref: this.catchTabPanelHost }))));
+            } }, this.renderButtonGroup(), hAsync("div", { key: 'c1a2e1a886e97df496dae2528502fe3932c06122', ref: this.catchTabPanelHost }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -31311,7 +31461,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 }, _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", 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: '167c7a02e594ac5bc34bcf92ea7a7d9115fdcc9d', class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: '912d0306c10c55646d43a853d6faccc91dd1f07e', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _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: '3c9ffd3f11b2b111967260fcdfeb0963ac0254c7', slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { key: 'a75008135953f90fcfa4795ff3df6512fa3e3c0d', slot: "input" }, hAsync("textarea", Object.assign({ key: 'a39da00d59818eaccf2806321f25ad0f01e46aef', 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 }))))));
     }
@@ -31597,7 +31747,7 @@ class KolToast {
         this.validateType(this._type);
     }
     render() {
-        return (hAsync(Host, null, this.state._show && (hAsync("div", null, hAsync("kol-alert", { _alert: this.state._alert, _label: this.state._label, _level: this.state._level, _hasCloser: this.state._hasCloser, _type: this.state._type, _variant: "card", _on: this.on }, hAsync("slot", null))))));
+        return (hAsync(Host, { key: '3126796e9dab24ea6322b4839821966fe0630daf' }, this.state._show && (hAsync("div", null, hAsync("kol-alert", { _alert: this.state._alert, _label: this.state._label, _level: this.state._level, _hasCloser: this.state._hasCloser, _type: this.state._type, _variant: "card", _on: this.on }, hAsync("slot", null))))));
     }
     static get watchers() { return {
         "_alert": ["validateAlert"],
@@ -31689,7 +31839,7 @@ class KolToastContainer {
         }, TRANSITION_TIMEOUT);
     }
     render() {
-        return (hAsync(Fragment, null, this.state._toastStates.length > 1 && (hAsync("kol-button", { _label: translate('kol-toast-close-all'), class: "close-all", _on: {
+        return (hAsync(Fragment, { key: '2c9e021d640aa320053781d0796d3de3bcf30e18' }, this.state._toastStates.length > 1 && (hAsync("kol-button", { _label: translate('kol-toast-close-all'), class: "close-all", _on: {
                 onClick: () => {
                     void this.closeAll();
                 },
@@ -31873,7 +32023,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, _label: this.state._label })))));
+        return (hAsync(Host, { key: 'f614a97e8b5de6eed4d4cd824baca94c82e77118' }, 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, _label: this.state._label })))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -31971,7 +32121,7 @@ class KolVersion {
         };
     }
     render() {
-        return (hAsync("kol-badge", { _color: Farbspektrum.Hellgrau, _icons: {
+        return (hAsync("kol-badge", { key: '517d542f789eabd86874a6a592d7d7c0f55b549e', _color: Farbspektrum.Hellgrau, _icons: {
                 left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
             }, _label: this.state._label }));
     }