@public-ui/hydrate 2.0.6 → 2.0.8

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);
@@ -7814,6 +7948,7 @@ const a11yHint = (msg, options) => {
     a11yCache.add(msg);
     Log.debug([msg].concat(options?.details || []), {
       classifier: `\u270B a11y`,
+      forceLog: !!options?.force,
       overwriteStyle: "; background-color: #09f"
     });
   }
@@ -7824,6 +7959,7 @@ const devHint = (msg, options) => {
     devCache.add(msg);
     Log.debug([msg].concat(options?.details || []), {
       classifier: `\u{1F4BB} dev`,
+      forceLog: !!options?.force,
       overwriteStyle: "; background-color: #f09"
     });
   }
@@ -7832,7 +7968,8 @@ const devWarning = (msg, options) => {
   if (devCache.has(msg) === false || !!options?.force) {
     devCache.add(msg);
     Log.warn([msg].concat(options?.details || []), {
-      classifier: `\u{1F4BB} dev`,
+      classifier: `\u26A0\uFE0F dev`,
+      forceLog: !!options?.force,
       overwriteStyle: "; background-color: #f09"
     });
   }
@@ -7844,6 +7981,7 @@ const featureHint = (msg, done = false, options) => {
     msg += done === true ? " \u2705" : "";
     Log.debug([msg].concat(options?.details || []), {
       classifier: `\u{1F31F} feature`,
+      forceLog: !!options?.force,
       overwriteStyle: "; background-color: #309"
     });
   }
@@ -7857,6 +7995,7 @@ const uiUxHint = (msg, options) => {
     uiUxCache.add(msg);
     Log.debug([msg].concat(options?.details || []), {
       classifier: `\u{1F4D1} ui/ux`,
+      forceLog: !!options?.force,
       overwriteStyle: "; background-color: #060;"
     });
   }
@@ -8996,7 +9135,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.6
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.8
 		`, {
             forceLog: true,
         });
@@ -9424,7 +9563,8 @@ class ResourceStore extends EventEmitter {
   }
   addResourceBundle(lng, ns, resources, deep, overwrite) {
     let options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {
-      silent: false
+      silent: false,
+      skipCopy: false
     };
     let path = [lng, ns];
     if (lng.indexOf('.') > -1) {
@@ -9435,6 +9575,7 @@ class ResourceStore extends EventEmitter {
     }
     this.addNamespaces(ns);
     let pack = getPath(this.data, path) || {};
+    if (!options.skipCopy) resources = JSON.parse(JSON.stringify(resources));
     if (deep) {
       deepExtend(pack, resources, overwrite);
     } else {
@@ -10674,7 +10815,9 @@ class Connector extends EventEmitter {
     const ns = s[1];
     if (err) this.emit('failedLoading', lng, ns, err);
     if (data) {
-      this.store.addResourceBundle(lng, ns, data);
+      this.store.addResourceBundle(lng, ns, data, undefined, undefined, {
+        skipCopy: true
+      });
     }
     this.state[name] = err ? -1 : 2;
     const loaded = {};
@@ -11851,8 +11994,7 @@ const createElm = (e, t, o, n) => {
  const n = t.$elm$ = e.$elm$, s = e.$children$, l = t.$children$, a = t.$tag$, r = t.$text$;
  let i;
  null !== r ? (i = n["s-cr"]) ? i.parentNode.textContent = r : e.$text$ !== r && (n.data = r) : ((isSvgMode = "svg" === a || "foreignObject" !== a && isSvgMode), 
- ("slot" === a || updateElement(e, t, isSvgMode)), 
- null !== s && null !== l ? ((e, t, o, n, s = !1) => {
+ ("slot" === a && !useNativeShadowDom ? BUILD.experimentalSlotFixes   : updateElement(e, t, isSvgMode)), null !== s && null !== l ? ((e, t, o, n, s = !1) => {
   let l, a, r = 0, i = 0, d = 0, c = 0, $ = t.length - 1, m = t[0], p = t[$], h = n.length - 1, f = n[0], u = n[h];
   for (;r <= $ && i <= h; ) if (null == m) m = t[++r]; else if (null == p) p = t[--$]; else if (null == f) f = n[++i]; else if (null == u) u = n[--h]; else if (isSameVnode(m, f, s)) patch(m, f, s), 
   m = t[++r], f = n[++i]; else if (isSameVnode(p, u, s)) patch(p, u, s), p = t[--$], 
@@ -11920,9 +12062,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) {
@@ -12319,7 +12461,7 @@ const cmpModules = new Map, getModule = e => {
  e["s-p"] = [], e["s-rc"] = [], addHostEventListeners(e, o, t.$listeners$), hostRefs.set(e, o);
 }, styles = new Map, modeResolutionChain = [];
 
-const defaultStyleCss$K = "@layer kol-global {\n\t.sc-kol-abbr-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-abbr-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-abbr-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-abbr-default-h > abbr {\n\t\tcursor: help;\n\t}\n}";
+const defaultStyleCss$K = "@layer kol-global {\n  .sc-kol-abbr-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-abbr-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-abbr-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-abbr-default-h > abbr {\n    cursor: help;\n  }\n}";
 var KolAbbrDefaultStyle0 = defaultStyleCss$K;
 
 class KolAbbr {
@@ -12334,7 +12476,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: '6e641c05b92a65b78ab29cf5c235bdedb8ed8de5' }, hAsync("abbr", { key: 'ab14012932b95533dc9e4c717e68980a65416774', "aria-labelledby": this.nonce, role: "definition", tabindex: "0", title: this.state._label }, hAsync("span", { key: '7a81e8480077f7f8305ed8f47216bfdefd0c4523', title: "" }, hAsync("slot", { key: 'e2e31111550a224ccee7240cf4c571827c355b25' }))), hAsync("kol-tooltip-wc", { key: 'c92fa5831e80c8f0b9d0c3abe1442b472b6aa08c', _align: this.state._tooltipAlign, _id: this.nonce, _label: this.state._label })));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -12378,7 +12520,7 @@ const watchHeadingLevel = (component, value) => {
     });
 };
 
-const defaultStyleCss$J = "@layer kol-global {\n\t.sc-kol-accordion-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-accordion-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-accordion-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-accordion-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t\n\t.wrapper {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 0fr;\n\t\toverflow: hidden;\n\t\ttransition: grid-template-rows 0.3s;\n\t}\n\n\t.accordion.open .wrapper {\n\t\tgrid-template-rows: 1fr;\n\t}\n\n\t.animation-wrapper {\n\t\tmin-height: 0;\n\t\ttransition: visibility 0.3s;\n\t\t\n\t\tvisibility: hidden;\n\t}\n\n\t.accordion.open .animation-wrapper {\n\t\tvisibility: visible;\n\t}\n\n\t@media (prefers-reduced-motion) {\n\t\t.animation-wrapper,\n\t\t.wrapper {\n\t\t\ttransition-duration: 0s;\n\t\t}\n\t}\n\n\t\n\t@media print {\n\t\t.accordion:not(.open) .animation-wrapper {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t\n\t.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}";
+const defaultStyleCss$J = "@layer kol-global {\n  .sc-kol-accordion-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-accordion-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-accordion-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-accordion-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  \n  .wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .accordion.open .wrapper {\n    grid-template-rows: 1fr;\n  }\n  .animation-wrapper {\n    min-height: 0;\n    transition: visibility 0.3s;\n    \n    visibility: hidden;\n  }\n  .accordion.open .animation-wrapper {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .animation-wrapper,\n    .wrapper {\n      transition-duration: 0s;\n    }\n  }\n  \n  @media print {\n    .accordion:not(.open) .animation-wrapper {\n      display: none;\n    }\n  }\n  \n  .accordion kol-heading-wc kol-button-wc button kol-span-wc {\n    justify-items: start;\n  }\n}";
 var KolAccordionDefaultStyle0 = defaultStyleCss$J;
 
 featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
@@ -12414,11 +12556,11 @@ class KolAccordion {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", { class: {
+        return (hAsync(Host, { key: '294c0ac82f2c24cd0c5c556785f5b4a2d73b6aa5' }, hAsync("div", { key: 'cfd7bdaa96bb6a0c5a179a98a93effc7383bcfd2', class: {
                 accordion: true,
                 disabled: this.state._disabled === true,
                 open: this.state._open === true,
-            } }, hAsync("kol-heading-wc", { _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync("kol-button-wc", { class: "accordion-button", ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _disabled: this.state._disabled, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { class: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", null)))))));
+            } }, hAsync("kol-heading-wc", { key: 'e49705e9f7565b1b3f168321b882993e2ce5677b', _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync("kol-button-wc", { key: 'f34ffc21868be05b6e7ad902dc82ad62f7e00d0c', class: "accordion-button", ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _disabled: this.state._disabled, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { key: 'ed04195eceb26029289e887b80129849755e544e', class: "wrapper" }, hAsync("div", { key: 'e87334cb177913a4a7d94dc813713acc02d0cad2', class: "animation-wrapper" }, hAsync("div", { key: 'b9992fa16d3b8add05b4d49f0ece92da68a0f292', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: 'e8de6a75d5c44c843555c296007c7c3b4fbb7667' })))))));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -12474,7 +12616,7 @@ class KolAccordion {
     }; }
 }
 
-const defaultStyleCss$I = "@layer kol-global {\n\t.sc-kol-alert-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-alert-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-alert-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-alert-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tkol-alert-wc {\n\t\tdisplay: grid;\n\t}\n\n\tkol-alert-wc .heading {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tkol-alert-wc .heading > div {\n\t\tflex-grow: 1;\n\t}\n\n\t.close {\n\t\toutline: transparent solid 1px; \n\t}\n}";
+const defaultStyleCss$I = "@layer kol-global {\n  .sc-kol-alert-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-alert-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-alert-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-alert-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  kol-alert-wc {\n    display: grid;\n  }\n  kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    \n    outline: transparent solid 1px;\n  }\n}";
 var KolAlertDefaultStyle0 = defaultStyleCss$I;
 
 class KolAlert {
@@ -12492,7 +12634,7 @@ class KolAlert {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-alert-wc", { _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", null))));
+        return (hAsync(Host, { key: '08349db0e37673cb2fca5ecba6c573c3d840f265' }, hAsync("kol-alert-wc", { key: '8e62e95f302b83ec0ac5281e00e80d95c4bf815a', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: '7decfec840a7bb15867ee3c51c9e88e85d90c11a' }))));
     }
     static get style() { return {
         default: KolAlertDefaultStyle0
@@ -12671,12 +12813,12 @@ class KolAlertWc {
                 this.validateAlert(false);
             }, 10000);
         }
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: '3b2f5ac6462c380e631c36367a2e55b7519ecbe6', class: {
                 alert: true,
                 [this.state._type]: true,
                 [this.state._variant]: true,
                 hasCloser: !!this.state._hasCloser,
-            }, role: this.state._alert ? 'alert' : undefined }, hAsync("div", { class: "heading" }, hAsync(AlertIcon, { label: this.state._label, type: this.state._type }), hAsync("div", { class: "heading-content" }, typeof this.state._label === 'string' && ((_a = this.state._label) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync("kol-heading-wc", { _label: this.state._label, _level: this.state._level })), this.state._variant === 'msg' && (hAsync("div", { class: "content" }, hAsync("slot", null)))), this.state._hasCloser && (hAsync("kol-button-wc", { class: "close", _hideLabel: true, _icons: {
+            }, role: this.state._alert ? 'alert' : undefined }, hAsync("div", { key: 'e805417410e1ff870e45c1eadb03d3d7203901b5', class: "heading" }, hAsync(AlertIcon, { key: '9705bf593034348a8aa47f7980c94deac6cac7db', label: this.state._label, type: this.state._type }), hAsync("div", { key: '5360f5cc4ac1d3c3360a2517e0c934ddc21e57c6', class: "heading-content" }, typeof this.state._label === 'string' && ((_a = this.state._label) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync("kol-heading-wc", { _label: this.state._label, _level: this.state._level })), this.state._variant === 'msg' && (hAsync("div", { class: "content" }, hAsync("slot", null)))), this.state._hasCloser && (hAsync("kol-button-wc", { class: "close", _hideLabel: true, _icons: {
                 left: {
                     icon: 'codicon codicon-close',
                 },
@@ -12744,7 +12886,7 @@ class KolAlertWc {
     }; }
 }
 
-const defaultStyleCss$H = "@layer kol-global {\n\t.sc-kol-avatar-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-avatar-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-avatar-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-avatar-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\toutline: transparent solid 1px; \n\t\t\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t\n\t\tbackground: #d3d3d3;\n\t\tfont-size: 2rem;\n\t}\n}";
+const defaultStyleCss$H = "@layer kol-global {\n  .sc-kol-avatar-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-avatar-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-avatar-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-avatar-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    \n    outline: transparent solid 1px;\n    \n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    background: #d3d3d3;\n    font-size: 2rem;\n  }\n}";
 var KolAvatarDefaultStyle0 = defaultStyleCss$H;
 
 class KolAvatar {
@@ -12754,7 +12896,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: 'cd44529963e0629affa85b1134f7246baf7729bc' }, hAsync("kol-avatar-wc", { key: '0b222cf17e4c7eca8c2799fbf469156c411c16c2', _src: this._src, _label: this._label })));
     }
     static get style() { return {
         default: KolAvatarDefaultStyle0
@@ -12799,7 +12941,7 @@ class KolAvatarWc {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", { "aria-label": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: "container", role: "img" }, this.state._src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: "image", src: this.state._src })) : (hAsync("span", { "aria-hidden": "true", class: "initials" }, formatLabelAsInitials(this.state._label.trim()))))));
+        return (hAsync(Host, { key: 'bd338a71d4f2a5610dfb048fa22b33462e3a9d5b' }, hAsync("div", { key: '397f13c05f8ea2ac25934d8775b1231196a482ca', "aria-label": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: "container", role: "img" }, this.state._src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: "image", src: this.state._src })) : (hAsync("span", { "aria-hidden": "true", class: "initials" }, formatLabelAsInitials(this.state._label.trim()))))));
     }
     validateSrc(value) {
         validateImageSource(this, value);
@@ -12831,7 +12973,7 @@ class KolAvatarWc {
     }; }
 }
 
-const defaultStyleCss$G = "@layer kol-global {\n\t.sc-kol-badge-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-badge-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-badge-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-badge-default-h > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\toutline: transparent solid 1px; \n\t}\n\n\t.sc-kol-badge-default-h > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}";
+const defaultStyleCss$G = "@layer kol-global {\n  .sc-kol-badge-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-badge-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-badge-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-badge-default-h > span {\n    display: inline-flex;\n    place-items: center;\n    \n    outline: transparent solid 1px;\n  }\n  .sc-kol-badge-default-h > span > kol-button-wc button {\n    color: inherit;\n  }\n}";
 var KolBadgeDefaultStyle0 = defaultStyleCss$G;
 
 featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
@@ -12862,12 +13004,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: '5d1fd671a172d0ba38cbf23fa045948e8f9aa742' }, hAsync("span", { key: '5ec75d0bd6b870de76b6cba1b6c930e23c789cfb', class: {
                 'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
             }, style: {
                 backgroundColor: this.bgColorStr,
                 color: this.colorStr,
-            } }, hAsync("kol-span-wc", { id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
+            } }, hAsync("kol-span-wc", { key: '5e1dffd59c041e0ef27fd2fa20549a25cc5d4e38', id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -12932,7 +13074,7 @@ const watchNavLinks = (className, component, value) => {
     uiUxHintMillerscheZahl(className, component.state._links.length);
 };
 
-const defaultStyleCss$F = "@layer kol-global {\n\t.sc-kol-breadcrumb-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-breadcrumb-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-breadcrumb-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}";
+const defaultStyleCss$F = "@layer kol-global {\n  .sc-kol-breadcrumb-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-breadcrumb-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-breadcrumb-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}";
 var KolBreadcrumbDefaultStyle0 = defaultStyleCss$F;
 
 class KolBreadcrumb {
@@ -12950,7 +13092,7 @@ class KolBreadcrumb {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", null, this.state._links.length === 0 && (hAsync("li", null, hAsync("kol-icon", { _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink)))));
+        return (hAsync(Host, { key: '1b99a13d302819561bf51edc1cb4a05f89967063' }, hAsync("nav", { key: 'd71e3390a54c63cf18368a82c2e6750a28146e1d', "aria-label": this.state._label }, hAsync("ul", { key: '8cc08e251c0da6505cfcf8a1d3b1af40e3192c4e' }, this.state._links.length === 0 && (hAsync("li", null, hAsync("kol-icon", { _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink)))));
     }
     validateLabel(value, _oldValue, initial = false) {
         if (!initial) {
@@ -12993,7 +13135,7 @@ class KolBreadcrumb {
     }; }
 }
 
-const defaultStyleCss$E = "@layer kol-global {\n\t.sc-kol-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\n\t\t&::before {\n\t\t\t\n\t\t\tcontent: '\\200B';\n\t\t}\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n}";
+const defaultStyleCss$E = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-button-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-button-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-button-default-h {\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    \n    content: \"​\";\n  }\n  \n  :is(a, button) > kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}";
 var KolButtonDefaultStyle0 = defaultStyleCss$E;
 
 class KolButton {
@@ -13026,11 +13168,11 @@ class KolButton {
         return this._value;
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-wc", { ref: this.catchRef, class: {
+        return (hAsync(Host, { key: 'd76ea8bf456ddaeee4b64c76afede341613ee130' }, hAsync("kol-button-wc", { key: 'a0f7fecf5def02a83705650983fc802a5e0c2c97', ref: this.catchRef, class: {
                 button: true,
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { name: "expert", slot: "expert" }))));
+            }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '0e72a84f82fbe11ade57f35068ec4cc14bc9247a', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -13067,7 +13209,7 @@ class KolButton {
     }; }
 }
 
-const defaultStyleCss$D = "@layer kol-global {\n\t.sc-kol-button-group-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-group-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-button-group-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-button-group-default-h > kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}";
+const defaultStyleCss$D = "@layer kol-global {\n  .sc-kol-button-group-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-group-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-button-group-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-button-group-default-h > kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}";
 var KolButtonGroupDefaultStyle0 = defaultStyleCss$D;
 
 class KolButtonGroup {
@@ -13075,7 +13217,7 @@ class KolButtonGroup {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-group-wc", null, hAsync("slot", null))));
+        return (hAsync(Host, { key: '5f4c61034aced84a8d92730cd54ca56df05cd593' }, hAsync("kol-button-group-wc", { key: '933df889462dd5f3ff3a2566d275789c58d57953' }, hAsync("slot", { key: 'ef671eea7bd4491c1a897f9491479225b7af0f88' }))));
     }
     static get style() { return {
         default: KolButtonGroupDefaultStyle0
@@ -13096,7 +13238,7 @@ class KolButtonGroupWc {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, null, hAsync("slot", null)));
+        return (hAsync(Host, { key: 'f33b91e186660a417bcf29bd3ff24c9e844393d8' }, hAsync("slot", { key: '718b94573ac85798def9f963c2c13be9b995be0d' })));
     }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -13110,7 +13252,7 @@ class KolButtonGroupWc {
     }; }
 }
 
-const defaultStyleCss$C = "@layer kol-global {\n\t.sc-kol-button-link-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-link-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-button-link-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-button-link-default-h {\n\t\tdisplay: inline-block;\n\t}\n\n\t:is(a, button) {\n\t\talign-items: baseline;\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: left;\n\t\ttext-decoration-line: underline;\n\t}\n\n\ta:is(:focus, :hover):not([aria-disabled]),\n\tbutton:is(:focus, :hover):not([disabled]) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.skip {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\t.skip:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tpadding: 1em;\n\t\tposition: unset;\n\t}\n\n\tkol-icon.external-link-icon {\n\t\tdisplay: inline-flex;\n\t}\n}";
+const defaultStyleCss$C = "@layer kol-global {\n  .sc-kol-button-link-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-link-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-button-link-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-button-link-default-h {\n    display: inline-block;\n  }\n  :is(a, button) {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]),\n  button:is(:focus, :hover):not([disabled]) {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background-color: #fff;\n    left: unset;\n    padding: 1em;\n    position: unset;\n  }\n  kol-icon.external-link-icon {\n    display: inline-flex;\n  }\n}";
 var KolButtonLinkDefaultStyle0 = defaultStyleCss$C;
 
 class KolButtonLink {
@@ -13141,7 +13283,7 @@ class KolButtonLink {
         return this._value;
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-wc", { ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: '3da0ccd3dd78c3f20006c1dcc1b1f99e0e70f433' }, hAsync("kol-button-wc", { key: '41b0122bdee6583329b558a92e48de5768d2aff1', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: 'f5074fff2cf50a3954e29743d61e5316fb18a48a', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -13260,7 +13402,14 @@ const propagateSubmitEventToForm = (options = {}) => {
         if (form.tagName === 'FORM') {
             setEventTarget(event, form);
             form.dispatchEvent(event);
-            form.submit();
+            if (getExperimentalMode() && form.noValidate === false) {
+                devHint(`If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.`, {
+                    force: true,
+                });
+            }
+            if (typeof form.requestSubmit === 'function') {
+                form.requestSubmit();
+            }
         }
         else if (form.tagName === 'KOL-FORM') {
             setEventTarget(event, KoliBriDevHelper.querySelector('form', form));
@@ -13272,15 +13421,28 @@ const propagateSubmitEventToForm = (options = {}) => {
     }
 };
 
+const isAssociatedTagName = (name) => name === 'KOL-BUTTON' ||
+    name === 'KOL-INPUT-CHECKBOX' ||
+    name === 'KOL-INPUT-COLOR' ||
+    name === 'KOL-INPUT-DATE' ||
+    name === 'KOL-INPUT-EMAIL' ||
+    name === 'KOL-INPUT-FILE' ||
+    name === 'KOL-INPUT-NUMBER' ||
+    name === 'KOL-INPUT-PASSWORD' ||
+    name === 'KOL-INPUT-RADIO' ||
+    name === 'KOL-INPUT-RANGE' ||
+    name === 'KOL-INPUT-TEXT' ||
+    name === 'KOL-SELECT' ||
+    name === 'KOL-TEXTAREA';
 class AssociatedInputController {
-    constructor(component, name, host) {
-        var _a, _b;
+    constructor(component, type, host) {
+        var _a, _b, _c;
         this.experimentalMode = getExperimentalMode();
         this.setFormAssociatedValue = (rawValue) => {
             var _a;
             const name = (_a = this.formAssociated) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
             if (name === null || name === '') {
-                devHint(` The form field (${this.name}) must have a name attribute to be form-associated. Please define the _name attribute.`);
+                devHint(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);
             }
             const strValue = this.tryToStringifyValue(rawValue);
             this.syncValue(rawValue, strValue, this.formAssociated);
@@ -13288,15 +13450,25 @@ class AssociatedInputController {
         };
         this.component = component;
         this.host = this.findHostWithShadowRoot(host);
-        this.name = name;
-        if (this.experimentalMode) {
-            (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input,select,textarea').forEach((el) => {
+        this.type = type;
+        if (this.experimentalMode && 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 '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');
@@ -13305,15 +13477,15 @@ class AssociatedInputController {
                 case 'textarea':
                     this.formAssociated = document.createElement('textarea');
                     break;
+                case 'checkbox':
                 default:
                     this.formAssociated = document.createElement('input');
                     this.formAssociated.setAttribute('type', 'hidden');
-                    break;
             }
             this.formAssociated.setAttribute('aria-hidden', 'true');
             this.formAssociated.setAttribute('data-form-associated', '');
             this.formAssociated.setAttribute('hidden', '');
-            (_b = this.host) === null || _b === void 0 ? void 0 : _b.appendChild(this.formAssociated);
+            (_c = this.host) === null || _c === void 0 ? void 0 : _c.appendChild(this.formAssociated);
         }
     }
     findHostWithShadowRoot(host) {
@@ -13352,7 +13524,10 @@ class AssociatedInputController {
     }
     syncValue(rawValue, strValue, associatedElement) {
         if (associatedElement) {
-            switch (this.name) {
+            switch (this.type) {
+                case 'file':
+                    associatedElement.files = rawValue;
+                    break;
                 case 'select':
                     associatedElement.querySelectorAll('option').forEach((el) => {
                         associatedElement.removeChild(el);
@@ -13410,13 +13585,13 @@ class AssociatedInputController {
 class KolButtonWc {
     render() {
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, null, hAsync("button", Object.assign({ ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: {
+        return (hAsync(Host, { key: '6210753dd7db71f0a3df9e778cd1c526f95503d3' }, hAsync("button", Object.assign({ key: 'e1422d9e465b133e5328cbe0037b9378174b19e4', ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: {
                 button: true,
                 disabled: this.state._disabled === true,
                 [this.state._variant]: this.state._variant !== 'custom',
                 [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
                 'hide-label': this.state._hideLabel === true,
-            }, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync("kol-span-wc", { class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { name: "expert", slot: "expert" }))), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
+            }, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync("kol-span-wc", { key: '17436202d4fa5926b88734c2e0e59da6aeea3072', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '59e7ae324b13a0ebc386f5d4cfc451b92a65c76c', name: "expert", slot: "expert" }))), hAsync("kol-tooltip-wc", { key: '6b14c5d6852abfd4b6c692b9de9e58928f7ba0ba', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -13610,7 +13785,7 @@ class KolButtonWc {
     }; }
 }
 
-const defaultStyleCss$B = "@layer kol-global {\n\t.sc-kol-card-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-card-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-card-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-card-default-h > div.card {\n\t\theight: 100%;\n\t\tposition: relative;\n\t\toutline: transparent solid 1px; \n\t}\n\n\t.close {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t}\n}";
+const defaultStyleCss$B = "@layer kol-global {\n  .sc-kol-card-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-card-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-card-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-card-default-h > div.card {\n    height: 100%;\n    position: relative;\n    \n    outline: transparent solid 1px;\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}";
 var KolCardDefaultStyle0 = defaultStyleCss$B;
 
 class KolCard {
@@ -13635,7 +13810,7 @@ class KolCard {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", { class: "card" }, hAsync("div", { class: "header" }, hAsync("kol-heading-wc", { _label: this.state._label, _level: this.state._level })), hAsync("div", { class: "content" }, hAsync("slot", null)), this.state._hasCloser && (hAsync("kol-button-wc", { class: "close", _hideLabel: true, _icons: {
+        return (hAsync(Host, { key: 'cedd32f1f86999744fb365196da4474a2c293910' }, hAsync("div", { key: 'cb44c0d9333f7ec26deb01c97f41191aa8f1a198', class: "card" }, hAsync("div", { key: '9468450bd10e60a389de45935e8545d1c1670db7', class: "header" }, hAsync("kol-heading-wc", { key: '48407663ce2b8e7cb80b86a554d5021b6f1f6ce2', _label: this.state._label, _level: this.state._level })), hAsync("div", { key: '22db9c7015b929c52be42b9ded4b5a82ecced5e2', class: "content" }, hAsync("slot", { key: '7419762a2db00430c15487abc85ee2803e3a6075' })), this.state._hasCloser && (hAsync("kol-button-wc", { class: "close", _hideLabel: true, _icons: {
                 left: {
                     icon: 'codicon codicon-close',
                 },
@@ -13756,7 +13931,7 @@ class DetailsAnimationController {
     }
 }
 
-const defaultStyleCss$A = "@layer kol-global {\n\t.sc-kol-details-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-details-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-details-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-details-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tdetails {\n\t\tdisplay: grid;\n\t}\n\n\tdetails > summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tdetails > summary > span {\n\t\tborder-bottom-color: grey;\n\t\tborder-bottom-style: solid;\n\t}\n\n\tdetails > summary:focus > span,\n\tdetails > summary:hover > span,\n\tdetails[open] > summary > span {\n\t\tborder-bottom-color: #000;\n\t}\n\n\t.content {\n\t\toverflow: hidden;\n\t}\n\n\tdetails > kol-indented-text {\n\t\tmargin: 0.25em 0 0 0.5em;\n\t}\n\n\t.icon.is-open::part(icon) {\n\t\ttransform: rotate(90deg);\n\t}\n}";
+const defaultStyleCss$A = "@layer kol-global {\n  .sc-kol-details-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-details-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-details-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-details-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  details {\n    display: grid;\n  }\n  details > summary {\n    cursor: pointer;\n    display: flex;\n    place-items: center;\n  }\n  details > summary > span {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  details > summary:focus > span,\n  details > summary:hover > span,\n  details[open] > summary > span {\n    border-bottom-color: #000;\n  }\n  .content {\n    overflow: hidden;\n  }\n  details > kol-indented-text {\n    margin: 0.25em 0 0 0.5em;\n  }\n  .icon.is-open::part(icon) {\n    transform: rotate(90deg);\n  }\n}";
 var KolDetailsDefaultStyle0 = defaultStyleCss$A;
 
 class KolDetails {
@@ -13798,10 +13973,10 @@ class KolDetails {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("details", { ref: this.catchDetails, class: {
+        return (hAsync(Host, { key: '19a9ba1643545d503b5c3c24da5bf25c00c7b5be' }, hAsync("details", { key: '3ab637c36145d8bfc38fd812301f9b2b39d93c0e', ref: this.catchDetails, class: {
                 disabled: this.state._disabled === true,
                 open: this.state._open === true,
-            }, onToggle: this.handleToggle }, hAsync("summary", { ref: this.catchSummary, "aria-disabled": this.state._disabled ? 'true' : undefined, onClick: this.preventToggleIfDisabled, onKeyPress: this.preventToggleIfDisabled, tabIndex: this.state._disabled ? -1 : undefined }, hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", null, this.state._label)), hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", null, hAsync("slot", null))))));
+            }, onToggle: this.handleToggle }, hAsync("summary", { key: '300c130a467763e1d484effebfe9ec4356db376f', ref: this.catchSummary, "aria-disabled": this.state._disabled ? 'true' : undefined, onClick: this.preventToggleIfDisabled, onKeyPress: this.preventToggleIfDisabled, tabIndex: this.state._disabled ? -1 : undefined }, hAsync("kol-icon", { key: '5f936b81f501e1dc4e42949880557a2036b776a8', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: '9919b851361c1f50b88b35035c8db92eecc86a8c' }, this.state._label)), hAsync("div", { key: 'd07f7f1d5358b1f6363e0d3ee129054f77e63c7e', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", { key: '673da4e5cf44d5e14106a76ec6032165f25aa1b4' }, hAsync("slot", { key: 'ccc843d742d1fa91e9ddd38dce808d547a0f85b8' }))))));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -13896,10 +14071,10 @@ class KolForm {
         this.state = {};
     }
     render() {
-        return (hAsync("form", { method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this._errorList && this._errorList.length > 0 && (hAsync("kol-alert", { _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync("kol-link", { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
+        return (hAsync("form", { key: 'dea80b85f061a10604684cdd6fc7e19493a01dbe', method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this._errorList && this._errorList.length > 0 && (hAsync("kol-alert", { _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync("kol-link", { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
                 if (index === 0)
                     this.errorListElement = el;
-            } })))))))), this.state._requiredText === true ? (hAsync("p", null, hAsync("kol-indented-text", null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync("kol-indented-text", null, this.state._requiredText))) : null, hAsync("slot", null)));
+            } })))))))), this.state._requiredText === true ? (hAsync("p", null, hAsync("kol-indented-text", null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync("kol-indented-text", null, this.state._requiredText))) : null, hAsync("slot", { key: '6c5120cbfab3903b5f8e1f5d29ed0849c646f5d1' })));
     }
     validateOn(value) {
         if (typeof value === 'object' && value !== null) {
@@ -13948,7 +14123,7 @@ class KolForm {
     }; }
 }
 
-const defaultStyleCss$z = "@layer kol-global {\n\t.sc-kol-heading-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-heading-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-heading-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}";
+const defaultStyleCss$z = "@layer kol-global {\n  .sc-kol-heading-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-heading-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-heading-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}";
 var KolHeadingDefaultStyle0 = defaultStyleCss$z;
 
 class KolHeading {
@@ -13960,7 +14135,7 @@ class KolHeading {
         this._variant = undefined;
     }
     render() {
-        return (hAsync("kol-heading-wc", { _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant }, hAsync("slot", { name: "expert", slot: "expert" })));
+        return (hAsync("kol-heading-wc", { key: '6bb6b392c7eb87f5b0028a8423d39150ebe2202e', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant }, hAsync("slot", { key: '5a7ba9a99f01fb45abd70fed732c1024fb5682fa', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolHeadingDefaultStyle0
@@ -14038,7 +14213,7 @@ class KolHeadingWc {
         this.validateVariant(this._variant);
     }
     render() {
-        return (hAsync(Host, null, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
+        return (hAsync(Host, { key: '3a0b2e5eae14d4a7d83b25e806eaf7cda1b52c9a' }, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -14062,7 +14237,7 @@ class KolHeadingWc {
     }; }
 }
 
-const defaultStyleCss$y = "@font-face {\n\tfont-family: \"codicon\";\n\tfont-display: block;\n\tsrc: url(\"./codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa\") format(\"truetype\");\n}\n\n/*!@.codicon[class*='codicon-']*/.codicon[class*='codicon-'].sc-kol-icon-default {\n\tfont: normal normal normal 16px/1 codicon;\n\tdisplay: inline-block;\n\ttext-decoration: none;\n\ttext-rendering: auto;\n\ttext-align: center;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n}\n\n\n\n@keyframes codicon-spin {\n\t100% {\n\t\ttransform:rotate(360deg);\n\t}\n}\n\n/*!@.codicon-sync.codicon-modifier-spin,\n.codicon-loading.codicon-modifier-spin,\n.codicon-gear.codicon-modifier-spin*/.codicon-sync.codicon-modifier-spin.sc-kol-icon-default, .codicon-loading.codicon-modifier-spin.sc-kol-icon-default, .codicon-gear.codicon-modifier-spin.sc-kol-icon-default {\n\t\n\tanimation: codicon-spin 1.5s steps(30) infinite;\n}\n\n/*!@.codicon-modifier-disabled*/.codicon-modifier-disabled.sc-kol-icon-default {\n\topacity: 0.5;\n}\n\n/*!@.codicon-modifier-hidden*/.codicon-modifier-hidden.sc-kol-icon-default {\n\topacity: 0;\n}\n\n\n/*!@.codicon-loading*/.codicon-loading.sc-kol-icon-default {\n\tanimation-duration: 1s !important;\n\tanimation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;\n}\n\n\n\n/*!@.codicon-add:before*/.codicon-add.sc-kol-icon-default:before { content: \"\\ea60\" }\n/*!@.codicon-plus:before*/.codicon-plus.sc-kol-icon-default:before { content: \"\\ea60\" }\n/*!@.codicon-gist-new:before*/.codicon-gist-new.sc-kol-icon-default:before { content: \"\\ea60\" }\n/*!@.codicon-repo-create:before*/.codicon-repo-create.sc-kol-icon-default:before { content: \"\\ea60\" }\n/*!@.codicon-lightbulb:before*/.codicon-lightbulb.sc-kol-icon-default:before { content: \"\\ea61\" }\n/*!@.codicon-light-bulb:before*/.codicon-light-bulb.sc-kol-icon-default:before { content: \"\\ea61\" }\n/*!@.codicon-repo:before*/.codicon-repo.sc-kol-icon-default:before { content: \"\\ea62\" }\n/*!@.codicon-repo-delete:before*/.codicon-repo-delete.sc-kol-icon-default:before { content: \"\\ea62\" }\n/*!@.codicon-gist-fork:before*/.codicon-gist-fork.sc-kol-icon-default:before { content: \"\\ea63\" }\n/*!@.codicon-repo-forked:before*/.codicon-repo-forked.sc-kol-icon-default:before { content: \"\\ea63\" }\n/*!@.codicon-git-pull-request:before*/.codicon-git-pull-request.sc-kol-icon-default:before { content: \"\\ea64\" }\n/*!@.codicon-git-pull-request-abandoned:before*/.codicon-git-pull-request-abandoned.sc-kol-icon-default:before { content: \"\\ea64\" }\n/*!@.codicon-record-keys:before*/.codicon-record-keys.sc-kol-icon-default:before { content: \"\\ea65\" }\n/*!@.codicon-keyboard:before*/.codicon-keyboard.sc-kol-icon-default:before { content: \"\\ea65\" }\n/*!@.codicon-tag:before*/.codicon-tag.sc-kol-icon-default:before { content: \"\\ea66\" }\n/*!@.codicon-tag-add:before*/.codicon-tag-add.sc-kol-icon-default:before { content: \"\\ea66\" }\n/*!@.codicon-tag-remove:before*/.codicon-tag-remove.sc-kol-icon-default:before { content: \"\\ea66\" }\n/*!@.codicon-person:before*/.codicon-person.sc-kol-icon-default:before { content: \"\\ea67\" }\n/*!@.codicon-person-follow:before*/.codicon-person-follow.sc-kol-icon-default:before { content: \"\\ea67\" }\n/*!@.codicon-person-outline:before*/.codicon-person-outline.sc-kol-icon-default:before { content: \"\\ea67\" }\n/*!@.codicon-person-filled:before*/.codicon-person-filled.sc-kol-icon-default:before { content: \"\\ea67\" }\n/*!@.codicon-git-branch:before*/.codicon-git-branch.sc-kol-icon-default:before { content: \"\\ea68\" }\n/*!@.codicon-git-branch-create:before*/.codicon-git-branch-create.sc-kol-icon-default:before { content: \"\\ea68\" }\n/*!@.codicon-git-branch-delete:before*/.codicon-git-branch-delete.sc-kol-icon-default:before { content: \"\\ea68\" }\n/*!@.codicon-source-control:before*/.codicon-source-control.sc-kol-icon-default:before { content: \"\\ea68\" }\n/*!@.codicon-mirror:before*/.codicon-mirror.sc-kol-icon-default:before { content: \"\\ea69\" }\n/*!@.codicon-mirror-public:before*/.codicon-mirror-public.sc-kol-icon-default:before { content: \"\\ea69\" }\n/*!@.codicon-star:before*/.codicon-star.sc-kol-icon-default:before { content: \"\\ea6a\" }\n/*!@.codicon-star-add:before*/.codicon-star-add.sc-kol-icon-default:before { content: \"\\ea6a\" }\n/*!@.codicon-star-delete:before*/.codicon-star-delete.sc-kol-icon-default:before { content: \"\\ea6a\" }\n/*!@.codicon-star-empty:before*/.codicon-star-empty.sc-kol-icon-default:before { content: \"\\ea6a\" }\n/*!@.codicon-comment:before*/.codicon-comment.sc-kol-icon-default:before { content: \"\\ea6b\" }\n/*!@.codicon-comment-add:before*/.codicon-comment-add.sc-kol-icon-default:before { content: \"\\ea6b\" }\n/*!@.codicon-alert:before*/.codicon-alert.sc-kol-icon-default:before { content: \"\\ea6c\" }\n/*!@.codicon-warning:before*/.codicon-warning.sc-kol-icon-default:before { content: \"\\ea6c\" }\n/*!@.codicon-search:before*/.codicon-search.sc-kol-icon-default:before { content: \"\\ea6d\" }\n/*!@.codicon-search-save:before*/.codicon-search-save.sc-kol-icon-default:before { content: \"\\ea6d\" }\n/*!@.codicon-log-out:before*/.codicon-log-out.sc-kol-icon-default:before { content: \"\\ea6e\" }\n/*!@.codicon-sign-out:before*/.codicon-sign-out.sc-kol-icon-default:before { content: \"\\ea6e\" }\n/*!@.codicon-log-in:before*/.codicon-log-in.sc-kol-icon-default:before { content: \"\\ea6f\" }\n/*!@.codicon-sign-in:before*/.codicon-sign-in.sc-kol-icon-default:before { content: \"\\ea6f\" }\n/*!@.codicon-eye:before*/.codicon-eye.sc-kol-icon-default:before { content: \"\\ea70\" }\n/*!@.codicon-eye-unwatch:before*/.codicon-eye-unwatch.sc-kol-icon-default:before { content: \"\\ea70\" }\n/*!@.codicon-eye-watch:before*/.codicon-eye-watch.sc-kol-icon-default:before { content: \"\\ea70\" }\n/*!@.codicon-circle-filled:before*/.codicon-circle-filled.sc-kol-icon-default:before { content: \"\\ea71\" }\n/*!@.codicon-primitive-dot:before*/.codicon-primitive-dot.sc-kol-icon-default:before { content: \"\\ea71\" }\n/*!@.codicon-close-dirty:before*/.codicon-close-dirty.sc-kol-icon-default:before { content: \"\\ea71\" }\n/*!@.codicon-debug-breakpoint:before*/.codicon-debug-breakpoint.sc-kol-icon-default:before { content: \"\\ea71\" }\n/*!@.codicon-debug-breakpoint-disabled:before*/.codicon-debug-breakpoint-disabled.sc-kol-icon-default:before { content: \"\\ea71\" }\n/*!@.codicon-debug-hint:before*/.codicon-debug-hint.sc-kol-icon-default:before { content: \"\\ea71\" }\n/*!@.codicon-primitive-square:before*/.codicon-primitive-square.sc-kol-icon-default:before { content: \"\\ea72\" }\n/*!@.codicon-edit:before*/.codicon-edit.sc-kol-icon-default:before { content: \"\\ea73\" }\n/*!@.codicon-pencil:before*/.codicon-pencil.sc-kol-icon-default:before { content: \"\\ea73\" }\n/*!@.codicon-info:before*/.codicon-info.sc-kol-icon-default:before { content: \"\\ea74\" }\n/*!@.codicon-issue-opened:before*/.codicon-issue-opened.sc-kol-icon-default:before { content: \"\\ea74\" }\n/*!@.codicon-gist-private:before*/.codicon-gist-private.sc-kol-icon-default:before { content: \"\\ea75\" }\n/*!@.codicon-git-fork-private:before*/.codicon-git-fork-private.sc-kol-icon-default:before { content: \"\\ea75\" }\n/*!@.codicon-lock:before*/.codicon-lock.sc-kol-icon-default:before { content: \"\\ea75\" }\n/*!@.codicon-mirror-private:before*/.codicon-mirror-private.sc-kol-icon-default:before { content: \"\\ea75\" }\n/*!@.codicon-close:before*/.codicon-close.sc-kol-icon-default:before { content: \"\\ea76\" }\n/*!@.codicon-remove-close:before*/.codicon-remove-close.sc-kol-icon-default:before { content: \"\\ea76\" }\n/*!@.codicon-x:before*/.codicon-x.sc-kol-icon-default:before { content: \"\\ea76\" }\n/*!@.codicon-repo-sync:before*/.codicon-repo-sync.sc-kol-icon-default:before { content: \"\\ea77\" }\n/*!@.codicon-sync:before*/.codicon-sync.sc-kol-icon-default:before { content: \"\\ea77\" }\n/*!@.codicon-clone:before*/.codicon-clone.sc-kol-icon-default:before { content: \"\\ea78\" }\n/*!@.codicon-desktop-download:before*/.codicon-desktop-download.sc-kol-icon-default:before { content: \"\\ea78\" }\n/*!@.codicon-beaker:before*/.codicon-beaker.sc-kol-icon-default:before { content: \"\\ea79\" }\n/*!@.codicon-microscope:before*/.codicon-microscope.sc-kol-icon-default:before { content: \"\\ea79\" }\n/*!@.codicon-vm:before*/.codicon-vm.sc-kol-icon-default:before { content: \"\\ea7a\" }\n/*!@.codicon-device-desktop:before*/.codicon-device-desktop.sc-kol-icon-default:before { content: \"\\ea7a\" }\n/*!@.codicon-file:before*/.codicon-file.sc-kol-icon-default:before { content: \"\\ea7b\" }\n/*!@.codicon-file-text:before*/.codicon-file-text.sc-kol-icon-default:before { content: \"\\ea7b\" }\n/*!@.codicon-more:before*/.codicon-more.sc-kol-icon-default:before { content: \"\\ea7c\" }\n/*!@.codicon-ellipsis:before*/.codicon-ellipsis.sc-kol-icon-default:before { content: \"\\ea7c\" }\n/*!@.codicon-kebab-horizontal:before*/.codicon-kebab-horizontal.sc-kol-icon-default:before { content: \"\\ea7c\" }\n/*!@.codicon-mail-reply:before*/.codicon-mail-reply.sc-kol-icon-default:before { content: \"\\ea7d\" }\n/*!@.codicon-reply:before*/.codicon-reply.sc-kol-icon-default:before { content: \"\\ea7d\" }\n/*!@.codicon-organization:before*/.codicon-organization.sc-kol-icon-default:before { content: \"\\ea7e\" }\n/*!@.codicon-organization-filled:before*/.codicon-organization-filled.sc-kol-icon-default:before { content: \"\\ea7e\" }\n/*!@.codicon-organization-outline:before*/.codicon-organization-outline.sc-kol-icon-default:before { content: \"\\ea7e\" }\n/*!@.codicon-new-file:before*/.codicon-new-file.sc-kol-icon-default:before { content: \"\\ea7f\" }\n/*!@.codicon-file-add:before*/.codicon-file-add.sc-kol-icon-default:before { content: \"\\ea7f\" }\n/*!@.codicon-new-folder:before*/.codicon-new-folder.sc-kol-icon-default:before { content: \"\\ea80\" }\n/*!@.codicon-file-directory-create:before*/.codicon-file-directory-create.sc-kol-icon-default:before { content: \"\\ea80\" }\n/*!@.codicon-trash:before*/.codicon-trash.sc-kol-icon-default:before { content: \"\\ea81\" }\n/*!@.codicon-trashcan:before*/.codicon-trashcan.sc-kol-icon-default:before { content: \"\\ea81\" }\n/*!@.codicon-history:before*/.codicon-history.sc-kol-icon-default:before { content: \"\\ea82\" }\n/*!@.codicon-clock:before*/.codicon-clock.sc-kol-icon-default:before { content: \"\\ea82\" }\n/*!@.codicon-folder:before*/.codicon-folder.sc-kol-icon-default:before { content: \"\\ea83\" }\n/*!@.codicon-file-directory:before*/.codicon-file-directory.sc-kol-icon-default:before { content: \"\\ea83\" }\n/*!@.codicon-symbol-folder:before*/.codicon-symbol-folder.sc-kol-icon-default:before { content: \"\\ea83\" }\n/*!@.codicon-logo-github:before*/.codicon-logo-github.sc-kol-icon-default:before { content: \"\\ea84\" }\n/*!@.codicon-mark-github:before*/.codicon-mark-github.sc-kol-icon-default:before { content: \"\\ea84\" }\n/*!@.codicon-github:before*/.codicon-github.sc-kol-icon-default:before { content: \"\\ea84\" }\n/*!@.codicon-terminal:before*/.codicon-terminal.sc-kol-icon-default:before { content: \"\\ea85\" }\n/*!@.codicon-console:before*/.codicon-console.sc-kol-icon-default:before { content: \"\\ea85\" }\n/*!@.codicon-repl:before*/.codicon-repl.sc-kol-icon-default:before { content: \"\\ea85\" }\n/*!@.codicon-zap:before*/.codicon-zap.sc-kol-icon-default:before { content: \"\\ea86\" }\n/*!@.codicon-symbol-event:before*/.codicon-symbol-event.sc-kol-icon-default:before { content: \"\\ea86\" }\n/*!@.codicon-error:before*/.codicon-error.sc-kol-icon-default:before { content: \"\\ea87\" }\n/*!@.codicon-stop:before*/.codicon-stop.sc-kol-icon-default:before { content: \"\\ea87\" }\n/*!@.codicon-variable:before*/.codicon-variable.sc-kol-icon-default:before { content: \"\\ea88\" }\n/*!@.codicon-symbol-variable:before*/.codicon-symbol-variable.sc-kol-icon-default:before { content: \"\\ea88\" }\n/*!@.codicon-array:before*/.codicon-array.sc-kol-icon-default:before { content: \"\\ea8a\" }\n/*!@.codicon-symbol-array:before*/.codicon-symbol-array.sc-kol-icon-default:before { content: \"\\ea8a\" }\n/*!@.codicon-symbol-module:before*/.codicon-symbol-module.sc-kol-icon-default:before { content: \"\\ea8b\" }\n/*!@.codicon-symbol-package:before*/.codicon-symbol-package.sc-kol-icon-default:before { content: \"\\ea8b\" }\n/*!@.codicon-symbol-namespace:before*/.codicon-symbol-namespace.sc-kol-icon-default:before { content: \"\\ea8b\" }\n/*!@.codicon-symbol-object:before*/.codicon-symbol-object.sc-kol-icon-default:before { content: \"\\ea8b\" }\n/*!@.codicon-symbol-method:before*/.codicon-symbol-method.sc-kol-icon-default:before { content: \"\\ea8c\" }\n/*!@.codicon-symbol-function:before*/.codicon-symbol-function.sc-kol-icon-default:before { content: \"\\ea8c\" }\n/*!@.codicon-symbol-constructor:before*/.codicon-symbol-constructor.sc-kol-icon-default:before { content: \"\\ea8c\" }\n/*!@.codicon-symbol-boolean:before*/.codicon-symbol-boolean.sc-kol-icon-default:before { content: \"\\ea8f\" }\n/*!@.codicon-symbol-null:before*/.codicon-symbol-null.sc-kol-icon-default:before { content: \"\\ea8f\" }\n/*!@.codicon-symbol-numeric:before*/.codicon-symbol-numeric.sc-kol-icon-default:before { content: \"\\ea90\" }\n/*!@.codicon-symbol-number:before*/.codicon-symbol-number.sc-kol-icon-default:before { content: \"\\ea90\" }\n/*!@.codicon-symbol-structure:before*/.codicon-symbol-structure.sc-kol-icon-default:before { content: \"\\ea91\" }\n/*!@.codicon-symbol-struct:before*/.codicon-symbol-struct.sc-kol-icon-default:before { content: \"\\ea91\" }\n/*!@.codicon-symbol-parameter:before*/.codicon-symbol-parameter.sc-kol-icon-default:before { content: \"\\ea92\" }\n/*!@.codicon-symbol-type-parameter:before*/.codicon-symbol-type-parameter.sc-kol-icon-default:before { content: \"\\ea92\" }\n/*!@.codicon-symbol-key:before*/.codicon-symbol-key.sc-kol-icon-default:before { content: \"\\ea93\" }\n/*!@.codicon-symbol-text:before*/.codicon-symbol-text.sc-kol-icon-default:before { content: \"\\ea93\" }\n/*!@.codicon-symbol-reference:before*/.codicon-symbol-reference.sc-kol-icon-default:before { content: \"\\ea94\" }\n/*!@.codicon-go-to-file:before*/.codicon-go-to-file.sc-kol-icon-default:before { content: \"\\ea94\" }\n/*!@.codicon-symbol-enum:before*/.codicon-symbol-enum.sc-kol-icon-default:before { content: \"\\ea95\" }\n/*!@.codicon-symbol-value:before*/.codicon-symbol-value.sc-kol-icon-default:before { content: \"\\ea95\" }\n/*!@.codicon-symbol-ruler:before*/.codicon-symbol-ruler.sc-kol-icon-default:before { content: \"\\ea96\" }\n/*!@.codicon-symbol-unit:before*/.codicon-symbol-unit.sc-kol-icon-default:before { content: \"\\ea96\" }\n/*!@.codicon-activate-breakpoints:before*/.codicon-activate-breakpoints.sc-kol-icon-default:before { content: \"\\ea97\" }\n/*!@.codicon-archive:before*/.codicon-archive.sc-kol-icon-default:before { content: \"\\ea98\" }\n/*!@.codicon-arrow-both:before*/.codicon-arrow-both.sc-kol-icon-default:before { content: \"\\ea99\" }\n/*!@.codicon-arrow-down:before*/.codicon-arrow-down.sc-kol-icon-default:before { content: \"\\ea9a\" }\n/*!@.codicon-arrow-left:before*/.codicon-arrow-left.sc-kol-icon-default:before { content: \"\\ea9b\" }\n/*!@.codicon-arrow-right:before*/.codicon-arrow-right.sc-kol-icon-default:before { content: \"\\ea9c\" }\n/*!@.codicon-arrow-small-down:before*/.codicon-arrow-small-down.sc-kol-icon-default:before { content: \"\\ea9d\" }\n/*!@.codicon-arrow-small-left:before*/.codicon-arrow-small-left.sc-kol-icon-default:before { content: \"\\ea9e\" }\n/*!@.codicon-arrow-small-right:before*/.codicon-arrow-small-right.sc-kol-icon-default:before { content: \"\\ea9f\" }\n/*!@.codicon-arrow-small-up:before*/.codicon-arrow-small-up.sc-kol-icon-default:before { content: \"\\eaa0\" }\n/*!@.codicon-arrow-up:before*/.codicon-arrow-up.sc-kol-icon-default:before { content: \"\\eaa1\" }\n/*!@.codicon-bell:before*/.codicon-bell.sc-kol-icon-default:before { content: \"\\eaa2\" }\n/*!@.codicon-bold:before*/.codicon-bold.sc-kol-icon-default:before { content: \"\\eaa3\" }\n/*!@.codicon-book:before*/.codicon-book.sc-kol-icon-default:before { content: \"\\eaa4\" }\n/*!@.codicon-bookmark:before*/.codicon-bookmark.sc-kol-icon-default:before { content: \"\\eaa5\" }\n/*!@.codicon-debug-breakpoint-conditional-unverified:before*/.codicon-debug-breakpoint-conditional-unverified.sc-kol-icon-default:before { content: \"\\eaa6\" }\n/*!@.codicon-debug-breakpoint-conditional:before*/.codicon-debug-breakpoint-conditional.sc-kol-icon-default:before { content: \"\\eaa7\" }\n/*!@.codicon-debug-breakpoint-conditional-disabled:before*/.codicon-debug-breakpoint-conditional-disabled.sc-kol-icon-default:before { content: \"\\eaa7\" }\n/*!@.codicon-debug-breakpoint-data-unverified:before*/.codicon-debug-breakpoint-data-unverified.sc-kol-icon-default:before { content: \"\\eaa8\" }\n/*!@.codicon-debug-breakpoint-data:before*/.codicon-debug-breakpoint-data.sc-kol-icon-default:before { content: \"\\eaa9\" }\n/*!@.codicon-debug-breakpoint-data-disabled:before*/.codicon-debug-breakpoint-data-disabled.sc-kol-icon-default:before { content: \"\\eaa9\" }\n/*!@.codicon-debug-breakpoint-log-unverified:before*/.codicon-debug-breakpoint-log-unverified.sc-kol-icon-default:before { content: \"\\eaaa\" }\n/*!@.codicon-debug-breakpoint-log:before*/.codicon-debug-breakpoint-log.sc-kol-icon-default:before { content: \"\\eaab\" }\n/*!@.codicon-debug-breakpoint-log-disabled:before*/.codicon-debug-breakpoint-log-disabled.sc-kol-icon-default:before { content: \"\\eaab\" }\n/*!@.codicon-briefcase:before*/.codicon-briefcase.sc-kol-icon-default:before { content: \"\\eaac\" }\n/*!@.codicon-broadcast:before*/.codicon-broadcast.sc-kol-icon-default:before { content: \"\\eaad\" }\n/*!@.codicon-browser:before*/.codicon-browser.sc-kol-icon-default:before { content: \"\\eaae\" }\n/*!@.codicon-bug:before*/.codicon-bug.sc-kol-icon-default:before { content: \"\\eaaf\" }\n/*!@.codicon-calendar:before*/.codicon-calendar.sc-kol-icon-default:before { content: \"\\eab0\" }\n/*!@.codicon-case-sensitive:before*/.codicon-case-sensitive.sc-kol-icon-default:before { content: \"\\eab1\" }\n/*!@.codicon-check:before*/.codicon-check.sc-kol-icon-default:before { content: \"\\eab2\" }\n/*!@.codicon-checklist:before*/.codicon-checklist.sc-kol-icon-default:before { content: \"\\eab3\" }\n/*!@.codicon-chevron-down:before*/.codicon-chevron-down.sc-kol-icon-default:before { content: \"\\eab4\" }\n/*!@.codicon-chevron-left:before*/.codicon-chevron-left.sc-kol-icon-default:before { content: \"\\eab5\" }\n/*!@.codicon-chevron-right:before*/.codicon-chevron-right.sc-kol-icon-default:before { content: \"\\eab6\" }\n/*!@.codicon-chevron-up:before*/.codicon-chevron-up.sc-kol-icon-default:before { content: \"\\eab7\" }\n/*!@.codicon-chrome-close:before*/.codicon-chrome-close.sc-kol-icon-default:before { content: \"\\eab8\" }\n/*!@.codicon-chrome-maximize:before*/.codicon-chrome-maximize.sc-kol-icon-default:before { content: \"\\eab9\" }\n/*!@.codicon-chrome-minimize:before*/.codicon-chrome-minimize.sc-kol-icon-default:before { content: \"\\eaba\" }\n/*!@.codicon-chrome-restore:before*/.codicon-chrome-restore.sc-kol-icon-default:before { content: \"\\eabb\" }\n/*!@.codicon-circle-outline:before*/.codicon-circle-outline.sc-kol-icon-default:before { content: \"\\eabc\" }\n/*!@.codicon-debug-breakpoint-unverified:before*/.codicon-debug-breakpoint-unverified.sc-kol-icon-default:before { content: \"\\eabc\" }\n/*!@.codicon-circle-slash:before*/.codicon-circle-slash.sc-kol-icon-default:before { content: \"\\eabd\" }\n/*!@.codicon-circuit-board:before*/.codicon-circuit-board.sc-kol-icon-default:before { content: \"\\eabe\" }\n/*!@.codicon-clear-all:before*/.codicon-clear-all.sc-kol-icon-default:before { content: \"\\eabf\" }\n/*!@.codicon-clippy:before*/.codicon-clippy.sc-kol-icon-default:before { content: \"\\eac0\" }\n/*!@.codicon-close-all:before*/.codicon-close-all.sc-kol-icon-default:before { content: \"\\eac1\" }\n/*!@.codicon-cloud-download:before*/.codicon-cloud-download.sc-kol-icon-default:before { content: \"\\eac2\" }\n/*!@.codicon-cloud-upload:before*/.codicon-cloud-upload.sc-kol-icon-default:before { content: \"\\eac3\" }\n/*!@.codicon-code:before*/.codicon-code.sc-kol-icon-default:before { content: \"\\eac4\" }\n/*!@.codicon-collapse-all:before*/.codicon-collapse-all.sc-kol-icon-default:before { content: \"\\eac5\" }\n/*!@.codicon-color-mode:before*/.codicon-color-mode.sc-kol-icon-default:before { content: \"\\eac6\" }\n/*!@.codicon-comment-discussion:before*/.codicon-comment-discussion.sc-kol-icon-default:before { content: \"\\eac7\" }\n/*!@.codicon-credit-card:before*/.codicon-credit-card.sc-kol-icon-default:before { content: \"\\eac9\" }\n/*!@.codicon-dash:before*/.codicon-dash.sc-kol-icon-default:before { content: \"\\eacc\" }\n/*!@.codicon-dashboard:before*/.codicon-dashboard.sc-kol-icon-default:before { content: \"\\eacd\" }\n/*!@.codicon-database:before*/.codicon-database.sc-kol-icon-default:before { content: \"\\eace\" }\n/*!@.codicon-debug-continue:before*/.codicon-debug-continue.sc-kol-icon-default:before { content: \"\\eacf\" }\n/*!@.codicon-debug-disconnect:before*/.codicon-debug-disconnect.sc-kol-icon-default:before { content: \"\\ead0\" }\n/*!@.codicon-debug-pause:before*/.codicon-debug-pause.sc-kol-icon-default:before { content: \"\\ead1\" }\n/*!@.codicon-debug-restart:before*/.codicon-debug-restart.sc-kol-icon-default:before { content: \"\\ead2\" }\n/*!@.codicon-debug-start:before*/.codicon-debug-start.sc-kol-icon-default:before { content: \"\\ead3\" }\n/*!@.codicon-debug-step-into:before*/.codicon-debug-step-into.sc-kol-icon-default:before { content: \"\\ead4\" }\n/*!@.codicon-debug-step-out:before*/.codicon-debug-step-out.sc-kol-icon-default:before { content: \"\\ead5\" }\n/*!@.codicon-debug-step-over:before*/.codicon-debug-step-over.sc-kol-icon-default:before { content: \"\\ead6\" }\n/*!@.codicon-debug-stop:before*/.codicon-debug-stop.sc-kol-icon-default:before { content: \"\\ead7\" }\n/*!@.codicon-debug:before*/.codicon-debug.sc-kol-icon-default:before { content: \"\\ead8\" }\n/*!@.codicon-device-camera-video:before*/.codicon-device-camera-video.sc-kol-icon-default:before { content: \"\\ead9\" }\n/*!@.codicon-device-camera:before*/.codicon-device-camera.sc-kol-icon-default:before { content: \"\\eada\" }\n/*!@.codicon-device-mobile:before*/.codicon-device-mobile.sc-kol-icon-default:before { content: \"\\eadb\" }\n/*!@.codicon-diff-added:before*/.codicon-diff-added.sc-kol-icon-default:before { content: \"\\eadc\" }\n/*!@.codicon-diff-ignored:before*/.codicon-diff-ignored.sc-kol-icon-default:before { content: \"\\eadd\" }\n/*!@.codicon-diff-modified:before*/.codicon-diff-modified.sc-kol-icon-default:before { content: \"\\eade\" }\n/*!@.codicon-diff-removed:before*/.codicon-diff-removed.sc-kol-icon-default:before { content: \"\\eadf\" }\n/*!@.codicon-diff-renamed:before*/.codicon-diff-renamed.sc-kol-icon-default:before { content: \"\\eae0\" }\n/*!@.codicon-diff:before*/.codicon-diff.sc-kol-icon-default:before { content: \"\\eae1\" }\n/*!@.codicon-discard:before*/.codicon-discard.sc-kol-icon-default:before { content: \"\\eae2\" }\n/*!@.codicon-editor-layout:before*/.codicon-editor-layout.sc-kol-icon-default:before { content: \"\\eae3\" }\n/*!@.codicon-empty-window:before*/.codicon-empty-window.sc-kol-icon-default:before { content: \"\\eae4\" }\n/*!@.codicon-exclude:before*/.codicon-exclude.sc-kol-icon-default:before { content: \"\\eae5\" }\n/*!@.codicon-extensions:before*/.codicon-extensions.sc-kol-icon-default:before { content: \"\\eae6\" }\n/*!@.codicon-eye-closed:before*/.codicon-eye-closed.sc-kol-icon-default:before { content: \"\\eae7\" }\n/*!@.codicon-file-binary:before*/.codicon-file-binary.sc-kol-icon-default:before { content: \"\\eae8\" }\n/*!@.codicon-file-code:before*/.codicon-file-code.sc-kol-icon-default:before { content: \"\\eae9\" }\n/*!@.codicon-file-media:before*/.codicon-file-media.sc-kol-icon-default:before { content: \"\\eaea\" }\n/*!@.codicon-file-pdf:before*/.codicon-file-pdf.sc-kol-icon-default:before { content: \"\\eaeb\" }\n/*!@.codicon-file-submodule:before*/.codicon-file-submodule.sc-kol-icon-default:before { content: \"\\eaec\" }\n/*!@.codicon-file-symlink-directory:before*/.codicon-file-symlink-directory.sc-kol-icon-default:before { content: \"\\eaed\" }\n/*!@.codicon-file-symlink-file:before*/.codicon-file-symlink-file.sc-kol-icon-default:before { content: \"\\eaee\" }\n/*!@.codicon-file-zip:before*/.codicon-file-zip.sc-kol-icon-default:before { content: \"\\eaef\" }\n/*!@.codicon-files:before*/.codicon-files.sc-kol-icon-default:before { content: \"\\eaf0\" }\n/*!@.codicon-filter:before*/.codicon-filter.sc-kol-icon-default:before { content: \"\\eaf1\" }\n/*!@.codicon-flame:before*/.codicon-flame.sc-kol-icon-default:before { content: \"\\eaf2\" }\n/*!@.codicon-fold-down:before*/.codicon-fold-down.sc-kol-icon-default:before { content: \"\\eaf3\" }\n/*!@.codicon-fold-up:before*/.codicon-fold-up.sc-kol-icon-default:before { content: \"\\eaf4\" }\n/*!@.codicon-fold:before*/.codicon-fold.sc-kol-icon-default:before { content: \"\\eaf5\" }\n/*!@.codicon-folder-active:before*/.codicon-folder-active.sc-kol-icon-default:before { content: \"\\eaf6\" }\n/*!@.codicon-folder-opened:before*/.codicon-folder-opened.sc-kol-icon-default:before { content: \"\\eaf7\" }\n/*!@.codicon-gear:before*/.codicon-gear.sc-kol-icon-default:before { content: \"\\eaf8\" }\n/*!@.codicon-gift:before*/.codicon-gift.sc-kol-icon-default:before { content: \"\\eaf9\" }\n/*!@.codicon-gist-secret:before*/.codicon-gist-secret.sc-kol-icon-default:before { content: \"\\eafa\" }\n/*!@.codicon-gist:before*/.codicon-gist.sc-kol-icon-default:before { content: \"\\eafb\" }\n/*!@.codicon-git-commit:before*/.codicon-git-commit.sc-kol-icon-default:before { content: \"\\eafc\" }\n/*!@.codicon-git-compare:before*/.codicon-git-compare.sc-kol-icon-default:before { content: \"\\eafd\" }\n/*!@.codicon-compare-changes:before*/.codicon-compare-changes.sc-kol-icon-default:before { content: \"\\eafd\" }\n/*!@.codicon-git-merge:before*/.codicon-git-merge.sc-kol-icon-default:before { content: \"\\eafe\" }\n/*!@.codicon-github-action:before*/.codicon-github-action.sc-kol-icon-default:before { content: \"\\eaff\" }\n/*!@.codicon-github-alt:before*/.codicon-github-alt.sc-kol-icon-default:before { content: \"\\eb00\" }\n/*!@.codicon-globe:before*/.codicon-globe.sc-kol-icon-default:before { content: \"\\eb01\" }\n/*!@.codicon-grabber:before*/.codicon-grabber.sc-kol-icon-default:before { content: \"\\eb02\" }\n/*!@.codicon-graph:before*/.codicon-graph.sc-kol-icon-default:before { content: \"\\eb03\" }\n/*!@.codicon-gripper:before*/.codicon-gripper.sc-kol-icon-default:before { content: \"\\eb04\" }\n/*!@.codicon-heart:before*/.codicon-heart.sc-kol-icon-default:before { content: \"\\eb05\" }\n/*!@.codicon-home:before*/.codicon-home.sc-kol-icon-default:before { content: \"\\eb06\" }\n/*!@.codicon-horizontal-rule:before*/.codicon-horizontal-rule.sc-kol-icon-default:before { content: \"\\eb07\" }\n/*!@.codicon-hubot:before*/.codicon-hubot.sc-kol-icon-default:before { content: \"\\eb08\" }\n/*!@.codicon-inbox:before*/.codicon-inbox.sc-kol-icon-default:before { content: \"\\eb09\" }\n/*!@.codicon-issue-reopened:before*/.codicon-issue-reopened.sc-kol-icon-default:before { content: \"\\eb0b\" }\n/*!@.codicon-issues:before*/.codicon-issues.sc-kol-icon-default:before { content: \"\\eb0c\" }\n/*!@.codicon-italic:before*/.codicon-italic.sc-kol-icon-default:before { content: \"\\eb0d\" }\n/*!@.codicon-jersey:before*/.codicon-jersey.sc-kol-icon-default:before { content: \"\\eb0e\" }\n/*!@.codicon-json:before*/.codicon-json.sc-kol-icon-default:before { content: \"\\eb0f\" }\n/*!@.codicon-kebab-vertical:before*/.codicon-kebab-vertical.sc-kol-icon-default:before { content: \"\\eb10\" }\n/*!@.codicon-key:before*/.codicon-key.sc-kol-icon-default:before { content: \"\\eb11\" }\n/*!@.codicon-law:before*/.codicon-law.sc-kol-icon-default:before { content: \"\\eb12\" }\n/*!@.codicon-lightbulb-autofix:before*/.codicon-lightbulb-autofix.sc-kol-icon-default:before { content: \"\\eb13\" }\n/*!@.codicon-link-external:before*/.codicon-link-external.sc-kol-icon-default:before { content: \"\\eb14\" }\n/*!@.codicon-link:before*/.codicon-link.sc-kol-icon-default:before { content: \"\\eb15\" }\n/*!@.codicon-list-ordered:before*/.codicon-list-ordered.sc-kol-icon-default:before { content: \"\\eb16\" }\n/*!@.codicon-list-unordered:before*/.codicon-list-unordered.sc-kol-icon-default:before { content: \"\\eb17\" }\n/*!@.codicon-live-share:before*/.codicon-live-share.sc-kol-icon-default:before { content: \"\\eb18\" }\n/*!@.codicon-loading:before*/.codicon-loading.sc-kol-icon-default:before { content: \"\\eb19\" }\n/*!@.codicon-location:before*/.codicon-location.sc-kol-icon-default:before { content: \"\\eb1a\" }\n/*!@.codicon-mail-read:before*/.codicon-mail-read.sc-kol-icon-default:before { content: \"\\eb1b\" }\n/*!@.codicon-mail:before*/.codicon-mail.sc-kol-icon-default:before { content: \"\\eb1c\" }\n/*!@.codicon-markdown:before*/.codicon-markdown.sc-kol-icon-default:before { content: \"\\eb1d\" }\n/*!@.codicon-megaphone:before*/.codicon-megaphone.sc-kol-icon-default:before { content: \"\\eb1e\" }\n/*!@.codicon-mention:before*/.codicon-mention.sc-kol-icon-default:before { content: \"\\eb1f\" }\n/*!@.codicon-milestone:before*/.codicon-milestone.sc-kol-icon-default:before { content: \"\\eb20\" }\n/*!@.codicon-mortar-board:before*/.codicon-mortar-board.sc-kol-icon-default:before { content: \"\\eb21\" }\n/*!@.codicon-move:before*/.codicon-move.sc-kol-icon-default:before { content: \"\\eb22\" }\n/*!@.codicon-multiple-windows:before*/.codicon-multiple-windows.sc-kol-icon-default:before { content: \"\\eb23\" }\n/*!@.codicon-mute:before*/.codicon-mute.sc-kol-icon-default:before { content: \"\\eb24\" }\n/*!@.codicon-no-newline:before*/.codicon-no-newline.sc-kol-icon-default:before { content: \"\\eb25\" }\n/*!@.codicon-note:before*/.codicon-note.sc-kol-icon-default:before { content: \"\\eb26\" }\n/*!@.codicon-octoface:before*/.codicon-octoface.sc-kol-icon-default:before { content: \"\\eb27\" }\n/*!@.codicon-open-preview:before*/.codicon-open-preview.sc-kol-icon-default:before { content: \"\\eb28\" }\n/*!@.codicon-package:before*/.codicon-package.sc-kol-icon-default:before { content: \"\\eb29\" }\n/*!@.codicon-paintcan:before*/.codicon-paintcan.sc-kol-icon-default:before { content: \"\\eb2a\" }\n/*!@.codicon-pin:before*/.codicon-pin.sc-kol-icon-default:before { content: \"\\eb2b\" }\n/*!@.codicon-play:before*/.codicon-play.sc-kol-icon-default:before { content: \"\\eb2c\" }\n/*!@.codicon-run:before*/.codicon-run.sc-kol-icon-default:before { content: \"\\eb2c\" }\n/*!@.codicon-plug:before*/.codicon-plug.sc-kol-icon-default:before { content: \"\\eb2d\" }\n/*!@.codicon-preserve-case:before*/.codicon-preserve-case.sc-kol-icon-default:before { content: \"\\eb2e\" }\n/*!@.codicon-preview:before*/.codicon-preview.sc-kol-icon-default:before { content: \"\\eb2f\" }\n/*!@.codicon-project:before*/.codicon-project.sc-kol-icon-default:before { content: \"\\eb30\" }\n/*!@.codicon-pulse:before*/.codicon-pulse.sc-kol-icon-default:before { content: \"\\eb31\" }\n/*!@.codicon-question:before*/.codicon-question.sc-kol-icon-default:before { content: \"\\eb32\" }\n/*!@.codicon-quote:before*/.codicon-quote.sc-kol-icon-default:before { content: \"\\eb33\" }\n/*!@.codicon-radio-tower:before*/.codicon-radio-tower.sc-kol-icon-default:before { content: \"\\eb34\" }\n/*!@.codicon-reactions:before*/.codicon-reactions.sc-kol-icon-default:before { content: \"\\eb35\" }\n/*!@.codicon-references:before*/.codicon-references.sc-kol-icon-default:before { content: \"\\eb36\" }\n/*!@.codicon-refresh:before*/.codicon-refresh.sc-kol-icon-default:before { content: \"\\eb37\" }\n/*!@.codicon-regex:before*/.codicon-regex.sc-kol-icon-default:before { content: \"\\eb38\" }\n/*!@.codicon-remote-explorer:before*/.codicon-remote-explorer.sc-kol-icon-default:before { content: \"\\eb39\" }\n/*!@.codicon-remote:before*/.codicon-remote.sc-kol-icon-default:before { content: \"\\eb3a\" }\n/*!@.codicon-remove:before*/.codicon-remove.sc-kol-icon-default:before { content: \"\\eb3b\" }\n/*!@.codicon-replace-all:before*/.codicon-replace-all.sc-kol-icon-default:before { content: \"\\eb3c\" }\n/*!@.codicon-replace:before*/.codicon-replace.sc-kol-icon-default:before { content: \"\\eb3d\" }\n/*!@.codicon-repo-clone:before*/.codicon-repo-clone.sc-kol-icon-default:before { content: \"\\eb3e\" }\n/*!@.codicon-repo-force-push:before*/.codicon-repo-force-push.sc-kol-icon-default:before { content: \"\\eb3f\" }\n/*!@.codicon-repo-pull:before*/.codicon-repo-pull.sc-kol-icon-default:before { content: \"\\eb40\" }\n/*!@.codicon-repo-push:before*/.codicon-repo-push.sc-kol-icon-default:before { content: \"\\eb41\" }\n/*!@.codicon-report:before*/.codicon-report.sc-kol-icon-default:before { content: \"\\eb42\" }\n/*!@.codicon-request-changes:before*/.codicon-request-changes.sc-kol-icon-default:before { content: \"\\eb43\" }\n/*!@.codicon-rocket:before*/.codicon-rocket.sc-kol-icon-default:before { content: \"\\eb44\" }\n/*!@.codicon-root-folder-opened:before*/.codicon-root-folder-opened.sc-kol-icon-default:before { content: \"\\eb45\" }\n/*!@.codicon-root-folder:before*/.codicon-root-folder.sc-kol-icon-default:before { content: \"\\eb46\" }\n/*!@.codicon-rss:before*/.codicon-rss.sc-kol-icon-default:before { content: \"\\eb47\" }\n/*!@.codicon-ruby:before*/.codicon-ruby.sc-kol-icon-default:before { content: \"\\eb48\" }\n/*!@.codicon-save-all:before*/.codicon-save-all.sc-kol-icon-default:before { content: \"\\eb49\" }\n/*!@.codicon-save-as:before*/.codicon-save-as.sc-kol-icon-default:before { content: \"\\eb4a\" }\n/*!@.codicon-save:before*/.codicon-save.sc-kol-icon-default:before { content: \"\\eb4b\" }\n/*!@.codicon-screen-full:before*/.codicon-screen-full.sc-kol-icon-default:before { content: \"\\eb4c\" }\n/*!@.codicon-screen-normal:before*/.codicon-screen-normal.sc-kol-icon-default:before { content: \"\\eb4d\" }\n/*!@.codicon-search-stop:before*/.codicon-search-stop.sc-kol-icon-default:before { content: \"\\eb4e\" }\n/*!@.codicon-server:before*/.codicon-server.sc-kol-icon-default:before { content: \"\\eb50\" }\n/*!@.codicon-settings-gear:before*/.codicon-settings-gear.sc-kol-icon-default:before { content: \"\\eb51\" }\n/*!@.codicon-settings:before*/.codicon-settings.sc-kol-icon-default:before { content: \"\\eb52\" }\n/*!@.codicon-shield:before*/.codicon-shield.sc-kol-icon-default:before { content: \"\\eb53\" }\n/*!@.codicon-smiley:before*/.codicon-smiley.sc-kol-icon-default:before { content: \"\\eb54\" }\n/*!@.codicon-sort-precedence:before*/.codicon-sort-precedence.sc-kol-icon-default:before { content: \"\\eb55\" }\n/*!@.codicon-split-horizontal:before*/.codicon-split-horizontal.sc-kol-icon-default:before { content: \"\\eb56\" }\n/*!@.codicon-split-vertical:before*/.codicon-split-vertical.sc-kol-icon-default:before { content: \"\\eb57\" }\n/*!@.codicon-squirrel:before*/.codicon-squirrel.sc-kol-icon-default:before { content: \"\\eb58\" }\n/*!@.codicon-star-full:before*/.codicon-star-full.sc-kol-icon-default:before { content: \"\\eb59\" }\n/*!@.codicon-star-half:before*/.codicon-star-half.sc-kol-icon-default:before { content: \"\\eb5a\" }\n/*!@.codicon-symbol-class:before*/.codicon-symbol-class.sc-kol-icon-default:before { content: \"\\eb5b\" }\n/*!@.codicon-symbol-color:before*/.codicon-symbol-color.sc-kol-icon-default:before { content: \"\\eb5c\" }\n/*!@.codicon-symbol-constant:before*/.codicon-symbol-constant.sc-kol-icon-default:before { content: \"\\eb5d\" }\n/*!@.codicon-symbol-enum-member:before*/.codicon-symbol-enum-member.sc-kol-icon-default:before { content: \"\\eb5e\" }\n/*!@.codicon-symbol-field:before*/.codicon-symbol-field.sc-kol-icon-default:before { content: \"\\eb5f\" }\n/*!@.codicon-symbol-file:before*/.codicon-symbol-file.sc-kol-icon-default:before { content: \"\\eb60\" }\n/*!@.codicon-symbol-interface:before*/.codicon-symbol-interface.sc-kol-icon-default:before { content: \"\\eb61\" }\n/*!@.codicon-symbol-keyword:before*/.codicon-symbol-keyword.sc-kol-icon-default:before { content: \"\\eb62\" }\n/*!@.codicon-symbol-misc:before*/.codicon-symbol-misc.sc-kol-icon-default:before { content: \"\\eb63\" }\n/*!@.codicon-symbol-operator:before*/.codicon-symbol-operator.sc-kol-icon-default:before { content: \"\\eb64\" }\n/*!@.codicon-symbol-property:before*/.codicon-symbol-property.sc-kol-icon-default:before { content: \"\\eb65\" }\n/*!@.codicon-wrench:before*/.codicon-wrench.sc-kol-icon-default:before { content: \"\\eb65\" }\n/*!@.codicon-wrench-subaction:before*/.codicon-wrench-subaction.sc-kol-icon-default:before { content: \"\\eb65\" }\n/*!@.codicon-symbol-snippet:before*/.codicon-symbol-snippet.sc-kol-icon-default:before { content: \"\\eb66\" }\n/*!@.codicon-tasklist:before*/.codicon-tasklist.sc-kol-icon-default:before { content: \"\\eb67\" }\n/*!@.codicon-telescope:before*/.codicon-telescope.sc-kol-icon-default:before { content: \"\\eb68\" }\n/*!@.codicon-text-size:before*/.codicon-text-size.sc-kol-icon-default:before { content: \"\\eb69\" }\n/*!@.codicon-three-bars:before*/.codicon-three-bars.sc-kol-icon-default:before { content: \"\\eb6a\" }\n/*!@.codicon-thumbsdown:before*/.codicon-thumbsdown.sc-kol-icon-default:before { content: \"\\eb6b\" }\n/*!@.codicon-thumbsup:before*/.codicon-thumbsup.sc-kol-icon-default:before { content: \"\\eb6c\" }\n/*!@.codicon-tools:before*/.codicon-tools.sc-kol-icon-default:before { content: \"\\eb6d\" }\n/*!@.codicon-triangle-down:before*/.codicon-triangle-down.sc-kol-icon-default:before { content: \"\\eb6e\" }\n/*!@.codicon-triangle-left:before*/.codicon-triangle-left.sc-kol-icon-default:before { content: \"\\eb6f\" }\n/*!@.codicon-triangle-right:before*/.codicon-triangle-right.sc-kol-icon-default:before { content: \"\\eb70\" }\n/*!@.codicon-triangle-up:before*/.codicon-triangle-up.sc-kol-icon-default:before { content: \"\\eb71\" }\n/*!@.codicon-twitter:before*/.codicon-twitter.sc-kol-icon-default:before { content: \"\\eb72\" }\n/*!@.codicon-unfold:before*/.codicon-unfold.sc-kol-icon-default:before { content: \"\\eb73\" }\n/*!@.codicon-unlock:before*/.codicon-unlock.sc-kol-icon-default:before { content: \"\\eb74\" }\n/*!@.codicon-unmute:before*/.codicon-unmute.sc-kol-icon-default:before { content: \"\\eb75\" }\n/*!@.codicon-unverified:before*/.codicon-unverified.sc-kol-icon-default:before { content: \"\\eb76\" }\n/*!@.codicon-verified:before*/.codicon-verified.sc-kol-icon-default:before { content: \"\\eb77\" }\n/*!@.codicon-versions:before*/.codicon-versions.sc-kol-icon-default:before { content: \"\\eb78\" }\n/*!@.codicon-vm-active:before*/.codicon-vm-active.sc-kol-icon-default:before { content: \"\\eb79\" }\n/*!@.codicon-vm-outline:before*/.codicon-vm-outline.sc-kol-icon-default:before { content: \"\\eb7a\" }\n/*!@.codicon-vm-running:before*/.codicon-vm-running.sc-kol-icon-default:before { content: \"\\eb7b\" }\n/*!@.codicon-watch:before*/.codicon-watch.sc-kol-icon-default:before { content: \"\\eb7c\" }\n/*!@.codicon-whitespace:before*/.codicon-whitespace.sc-kol-icon-default:before { content: \"\\eb7d\" }\n/*!@.codicon-whole-word:before*/.codicon-whole-word.sc-kol-icon-default:before { content: \"\\eb7e\" }\n/*!@.codicon-window:before*/.codicon-window.sc-kol-icon-default:before { content: \"\\eb7f\" }\n/*!@.codicon-word-wrap:before*/.codicon-word-wrap.sc-kol-icon-default:before { content: \"\\eb80\" }\n/*!@.codicon-zoom-in:before*/.codicon-zoom-in.sc-kol-icon-default:before { content: \"\\eb81\" }\n/*!@.codicon-zoom-out:before*/.codicon-zoom-out.sc-kol-icon-default:before { content: \"\\eb82\" }\n/*!@.codicon-list-filter:before*/.codicon-list-filter.sc-kol-icon-default:before { content: \"\\eb83\" }\n/*!@.codicon-list-flat:before*/.codicon-list-flat.sc-kol-icon-default:before { content: \"\\eb84\" }\n/*!@.codicon-list-selection:before*/.codicon-list-selection.sc-kol-icon-default:before { content: \"\\eb85\" }\n/*!@.codicon-selection:before*/.codicon-selection.sc-kol-icon-default:before { content: \"\\eb85\" }\n/*!@.codicon-list-tree:before*/.codicon-list-tree.sc-kol-icon-default:before { content: \"\\eb86\" }\n/*!@.codicon-debug-breakpoint-function-unverified:before*/.codicon-debug-breakpoint-function-unverified.sc-kol-icon-default:before { content: \"\\eb87\" }\n/*!@.codicon-debug-breakpoint-function:before*/.codicon-debug-breakpoint-function.sc-kol-icon-default:before { content: \"\\eb88\" }\n/*!@.codicon-debug-breakpoint-function-disabled:before*/.codicon-debug-breakpoint-function-disabled.sc-kol-icon-default:before { content: \"\\eb88\" }\n/*!@.codicon-debug-stackframe-active:before*/.codicon-debug-stackframe-active.sc-kol-icon-default:before { content: \"\\eb89\" }\n/*!@.codicon-circle-small-filled:before*/.codicon-circle-small-filled.sc-kol-icon-default:before { content: \"\\eb8a\" }\n/*!@.codicon-debug-stackframe-dot:before*/.codicon-debug-stackframe-dot.sc-kol-icon-default:before { content: \"\\eb8a\" }\n/*!@.codicon-debug-stackframe:before*/.codicon-debug-stackframe.sc-kol-icon-default:before { content: \"\\eb8b\" }\n/*!@.codicon-debug-stackframe-focused:before*/.codicon-debug-stackframe-focused.sc-kol-icon-default:before { content: \"\\eb8b\" }\n/*!@.codicon-debug-breakpoint-unsupported:before*/.codicon-debug-breakpoint-unsupported.sc-kol-icon-default:before { content: \"\\eb8c\" }\n/*!@.codicon-symbol-string:before*/.codicon-symbol-string.sc-kol-icon-default:before { content: \"\\eb8d\" }\n/*!@.codicon-debug-reverse-continue:before*/.codicon-debug-reverse-continue.sc-kol-icon-default:before { content: \"\\eb8e\" }\n/*!@.codicon-debug-step-back:before*/.codicon-debug-step-back.sc-kol-icon-default:before { content: \"\\eb8f\" }\n/*!@.codicon-debug-restart-frame:before*/.codicon-debug-restart-frame.sc-kol-icon-default:before { content: \"\\eb90\" }\n/*!@.codicon-debug-alt:before*/.codicon-debug-alt.sc-kol-icon-default:before { content: \"\\eb91\" }\n/*!@.codicon-call-incoming:before*/.codicon-call-incoming.sc-kol-icon-default:before { content: \"\\eb92\" }\n/*!@.codicon-call-outgoing:before*/.codicon-call-outgoing.sc-kol-icon-default:before { content: \"\\eb93\" }\n/*!@.codicon-menu:before*/.codicon-menu.sc-kol-icon-default:before { content: \"\\eb94\" }\n/*!@.codicon-expand-all:before*/.codicon-expand-all.sc-kol-icon-default:before { content: \"\\eb95\" }\n/*!@.codicon-feedback:before*/.codicon-feedback.sc-kol-icon-default:before { content: \"\\eb96\" }\n/*!@.codicon-group-by-ref-type:before*/.codicon-group-by-ref-type.sc-kol-icon-default:before { content: \"\\eb97\" }\n/*!@.codicon-ungroup-by-ref-type:before*/.codicon-ungroup-by-ref-type.sc-kol-icon-default:before { content: \"\\eb98\" }\n/*!@.codicon-account:before*/.codicon-account.sc-kol-icon-default:before { content: \"\\eb99\" }\n/*!@.codicon-bell-dot:before*/.codicon-bell-dot.sc-kol-icon-default:before { content: \"\\eb9a\" }\n/*!@.codicon-debug-console:before*/.codicon-debug-console.sc-kol-icon-default:before { content: \"\\eb9b\" }\n/*!@.codicon-library:before*/.codicon-library.sc-kol-icon-default:before { content: \"\\eb9c\" }\n/*!@.codicon-output:before*/.codicon-output.sc-kol-icon-default:before { content: \"\\eb9d\" }\n/*!@.codicon-run-all:before*/.codicon-run-all.sc-kol-icon-default:before { content: \"\\eb9e\" }\n/*!@.codicon-sync-ignored:before*/.codicon-sync-ignored.sc-kol-icon-default:before { content: \"\\eb9f\" }\n/*!@.codicon-pinned:before*/.codicon-pinned.sc-kol-icon-default:before { content: \"\\eba0\" }\n/*!@.codicon-github-inverted:before*/.codicon-github-inverted.sc-kol-icon-default:before { content: \"\\eba1\" }\n/*!@.codicon-server-process:before*/.codicon-server-process.sc-kol-icon-default:before { content: \"\\eba2\" }\n/*!@.codicon-server-environment:before*/.codicon-server-environment.sc-kol-icon-default:before { content: \"\\eba3\" }\n/*!@.codicon-pass:before*/.codicon-pass.sc-kol-icon-default:before { content: \"\\eba4\" }\n/*!@.codicon-issue-closed:before*/.codicon-issue-closed.sc-kol-icon-default:before { content: \"\\eba4\" }\n/*!@.codicon-stop-circle:before*/.codicon-stop-circle.sc-kol-icon-default:before { content: \"\\eba5\" }\n/*!@.codicon-play-circle:before*/.codicon-play-circle.sc-kol-icon-default:before { content: \"\\eba6\" }\n/*!@.codicon-record:before*/.codicon-record.sc-kol-icon-default:before { content: \"\\eba7\" }\n/*!@.codicon-debug-alt-small:before*/.codicon-debug-alt-small.sc-kol-icon-default:before { content: \"\\eba8\" }\n/*!@.codicon-vm-connect:before*/.codicon-vm-connect.sc-kol-icon-default:before { content: \"\\eba9\" }\n/*!@.codicon-cloud:before*/.codicon-cloud.sc-kol-icon-default:before { content: \"\\ebaa\" }\n/*!@.codicon-merge:before*/.codicon-merge.sc-kol-icon-default:before { content: \"\\ebab\" }\n/*!@.codicon-export:before*/.codicon-export.sc-kol-icon-default:before { content: \"\\ebac\" }\n/*!@.codicon-graph-left:before*/.codicon-graph-left.sc-kol-icon-default:before { content: \"\\ebad\" }\n/*!@.codicon-magnet:before*/.codicon-magnet.sc-kol-icon-default:before { content: \"\\ebae\" }\n/*!@.codicon-notebook:before*/.codicon-notebook.sc-kol-icon-default:before { content: \"\\ebaf\" }\n/*!@.codicon-redo:before*/.codicon-redo.sc-kol-icon-default:before { content: \"\\ebb0\" }\n/*!@.codicon-check-all:before*/.codicon-check-all.sc-kol-icon-default:before { content: \"\\ebb1\" }\n/*!@.codicon-pinned-dirty:before*/.codicon-pinned-dirty.sc-kol-icon-default:before { content: \"\\ebb2\" }\n/*!@.codicon-pass-filled:before*/.codicon-pass-filled.sc-kol-icon-default:before { content: \"\\ebb3\" }\n/*!@.codicon-circle-large-filled:before*/.codicon-circle-large-filled.sc-kol-icon-default:before { content: \"\\ebb4\" }\n/*!@.codicon-circle-large-outline:before*/.codicon-circle-large-outline.sc-kol-icon-default:before { content: \"\\ebb5\" }\n/*!@.codicon-combine:before*/.codicon-combine.sc-kol-icon-default:before { content: \"\\ebb6\" }\n/*!@.codicon-gather:before*/.codicon-gather.sc-kol-icon-default:before { content: \"\\ebb6\" }\n/*!@.codicon-table:before*/.codicon-table.sc-kol-icon-default:before { content: \"\\ebb7\" }\n/*!@.codicon-variable-group:before*/.codicon-variable-group.sc-kol-icon-default:before { content: \"\\ebb8\" }\n/*!@.codicon-type-hierarchy:before*/.codicon-type-hierarchy.sc-kol-icon-default:before { content: \"\\ebb9\" }\n/*!@.codicon-type-hierarchy-sub:before*/.codicon-type-hierarchy-sub.sc-kol-icon-default:before { content: \"\\ebba\" }\n/*!@.codicon-type-hierarchy-super:before*/.codicon-type-hierarchy-super.sc-kol-icon-default:before { content: \"\\ebbb\" }\n/*!@.codicon-git-pull-request-create:before*/.codicon-git-pull-request-create.sc-kol-icon-default:before { content: \"\\ebbc\" }\n/*!@.codicon-run-above:before*/.codicon-run-above.sc-kol-icon-default:before { content: \"\\ebbd\" }\n/*!@.codicon-run-below:before*/.codicon-run-below.sc-kol-icon-default:before { content: \"\\ebbe\" }\n/*!@.codicon-notebook-template:before*/.codicon-notebook-template.sc-kol-icon-default:before { content: \"\\ebbf\" }\n/*!@.codicon-debug-rerun:before*/.codicon-debug-rerun.sc-kol-icon-default:before { content: \"\\ebc0\" }\n/*!@.codicon-workspace-trusted:before*/.codicon-workspace-trusted.sc-kol-icon-default:before { content: \"\\ebc1\" }\n/*!@.codicon-workspace-untrusted:before*/.codicon-workspace-untrusted.sc-kol-icon-default:before { content: \"\\ebc2\" }\n/*!@.codicon-workspace-unknown:before*/.codicon-workspace-unknown.sc-kol-icon-default:before { content: \"\\ebc3\" }\n/*!@.codicon-terminal-cmd:before*/.codicon-terminal-cmd.sc-kol-icon-default:before { content: \"\\ebc4\" }\n/*!@.codicon-terminal-debian:before*/.codicon-terminal-debian.sc-kol-icon-default:before { content: \"\\ebc5\" }\n/*!@.codicon-terminal-linux:before*/.codicon-terminal-linux.sc-kol-icon-default:before { content: \"\\ebc6\" }\n/*!@.codicon-terminal-powershell:before*/.codicon-terminal-powershell.sc-kol-icon-default:before { content: \"\\ebc7\" }\n/*!@.codicon-terminal-tmux:before*/.codicon-terminal-tmux.sc-kol-icon-default:before { content: \"\\ebc8\" }\n/*!@.codicon-terminal-ubuntu:before*/.codicon-terminal-ubuntu.sc-kol-icon-default:before { content: \"\\ebc9\" }\n/*!@.codicon-terminal-bash:before*/.codicon-terminal-bash.sc-kol-icon-default:before { content: \"\\ebca\" }\n/*!@.codicon-arrow-swap:before*/.codicon-arrow-swap.sc-kol-icon-default:before { content: \"\\ebcb\" }\n/*!@.codicon-copy:before*/.codicon-copy.sc-kol-icon-default:before { content: \"\\ebcc\" }\n/*!@.codicon-person-add:before*/.codicon-person-add.sc-kol-icon-default:before { content: \"\\ebcd\" }\n/*!@.codicon-filter-filled:before*/.codicon-filter-filled.sc-kol-icon-default:before { content: \"\\ebce\" }\n/*!@.codicon-wand:before*/.codicon-wand.sc-kol-icon-default:before { content: \"\\ebcf\" }\n/*!@.codicon-debug-line-by-line:before*/.codicon-debug-line-by-line.sc-kol-icon-default:before { content: \"\\ebd0\" }\n/*!@.codicon-inspect:before*/.codicon-inspect.sc-kol-icon-default:before { content: \"\\ebd1\" }\n/*!@.codicon-layers:before*/.codicon-layers.sc-kol-icon-default:before { content: \"\\ebd2\" }\n/*!@.codicon-layers-dot:before*/.codicon-layers-dot.sc-kol-icon-default:before { content: \"\\ebd3\" }\n/*!@.codicon-layers-active:before*/.codicon-layers-active.sc-kol-icon-default:before { content: \"\\ebd4\" }\n/*!@.codicon-compass:before*/.codicon-compass.sc-kol-icon-default:before { content: \"\\ebd5\" }\n/*!@.codicon-compass-dot:before*/.codicon-compass-dot.sc-kol-icon-default:before { content: \"\\ebd6\" }\n/*!@.codicon-compass-active:before*/.codicon-compass-active.sc-kol-icon-default:before { content: \"\\ebd7\" }\n/*!@.codicon-azure:before*/.codicon-azure.sc-kol-icon-default:before { content: \"\\ebd8\" }\n/*!@.codicon-issue-draft:before*/.codicon-issue-draft.sc-kol-icon-default:before { content: \"\\ebd9\" }\n/*!@.codicon-git-pull-request-closed:before*/.codicon-git-pull-request-closed.sc-kol-icon-default:before { content: \"\\ebda\" }\n/*!@.codicon-git-pull-request-draft:before*/.codicon-git-pull-request-draft.sc-kol-icon-default:before { content: \"\\ebdb\" }\n/*!@.codicon-debug-all:before*/.codicon-debug-all.sc-kol-icon-default:before { content: \"\\ebdc\" }\n/*!@.codicon-debug-coverage:before*/.codicon-debug-coverage.sc-kol-icon-default:before { content: \"\\ebdd\" }\n/*!@.codicon-run-errors:before*/.codicon-run-errors.sc-kol-icon-default:before { content: \"\\ebde\" }\n/*!@.codicon-folder-library:before*/.codicon-folder-library.sc-kol-icon-default:before { content: \"\\ebdf\" }\n/*!@.codicon-debug-continue-small:before*/.codicon-debug-continue-small.sc-kol-icon-default:before { content: \"\\ebe0\" }\n/*!@.codicon-beaker-stop:before*/.codicon-beaker-stop.sc-kol-icon-default:before { content: \"\\ebe1\" }\n/*!@.codicon-graph-line:before*/.codicon-graph-line.sc-kol-icon-default:before { content: \"\\ebe2\" }\n/*!@.codicon-graph-scatter:before*/.codicon-graph-scatter.sc-kol-icon-default:before { content: \"\\ebe3\" }\n/*!@.codicon-pie-chart:before*/.codicon-pie-chart.sc-kol-icon-default:before { content: \"\\ebe4\" }\n/*!@.codicon-bracket:before*/.codicon-bracket.sc-kol-icon-default:before { content: \"\\eb0f\" }\n/*!@.codicon-bracket-dot:before*/.codicon-bracket-dot.sc-kol-icon-default:before { content: \"\\ebe5\" }\n/*!@.codicon-bracket-error:before*/.codicon-bracket-error.sc-kol-icon-default:before { content: \"\\ebe6\" }\n/*!@.codicon-lock-small:before*/.codicon-lock-small.sc-kol-icon-default:before { content: \"\\ebe7\" }\n/*!@.codicon-azure-devops:before*/.codicon-azure-devops.sc-kol-icon-default:before { content: \"\\ebe8\" }\n/*!@.codicon-verified-filled:before*/.codicon-verified-filled.sc-kol-icon-default:before { content: \"\\ebe9\" }\n/*!@.codicon-newline:before*/.codicon-newline.sc-kol-icon-default:before { content: \"\\ebea\" }\n/*!@.codicon-layout:before*/.codicon-layout.sc-kol-icon-default:before { content: \"\\ebeb\" }\n/*!@.codicon-layout-activitybar-left:before*/.codicon-layout-activitybar-left.sc-kol-icon-default:before { content: \"\\ebec\" }\n/*!@.codicon-layout-activitybar-right:before*/.codicon-layout-activitybar-right.sc-kol-icon-default:before { content: \"\\ebed\" }\n/*!@.codicon-layout-panel-left:before*/.codicon-layout-panel-left.sc-kol-icon-default:before { content: \"\\ebee\" }\n/*!@.codicon-layout-panel-center:before*/.codicon-layout-panel-center.sc-kol-icon-default:before { content: \"\\ebef\" }\n/*!@.codicon-layout-panel-justify:before*/.codicon-layout-panel-justify.sc-kol-icon-default:before { content: \"\\ebf0\" }\n/*!@.codicon-layout-panel-right:before*/.codicon-layout-panel-right.sc-kol-icon-default:before { content: \"\\ebf1\" }\n/*!@.codicon-layout-panel:before*/.codicon-layout-panel.sc-kol-icon-default:before { content: \"\\ebf2\" }\n/*!@.codicon-layout-sidebar-left:before*/.codicon-layout-sidebar-left.sc-kol-icon-default:before { content: \"\\ebf3\" }\n/*!@.codicon-layout-sidebar-right:before*/.codicon-layout-sidebar-right.sc-kol-icon-default:before { content: \"\\ebf4\" }\n/*!@.codicon-layout-statusbar:before*/.codicon-layout-statusbar.sc-kol-icon-default:before { content: \"\\ebf5\" }\n/*!@.codicon-layout-menubar:before*/.codicon-layout-menubar.sc-kol-icon-default:before { content: \"\\ebf6\" }\n/*!@.codicon-layout-centered:before*/.codicon-layout-centered.sc-kol-icon-default:before { content: \"\\ebf7\" }\n/*!@.codicon-target:before*/.codicon-target.sc-kol-icon-default:before { content: \"\\ebf8\" }\n/*!@.codicon-indent:before*/.codicon-indent.sc-kol-icon-default:before { content: \"\\ebf9\" }\n/*!@.codicon-record-small:before*/.codicon-record-small.sc-kol-icon-default:before { content: \"\\ebfa\" }\n/*!@.codicon-error-small:before*/.codicon-error-small.sc-kol-icon-default:before { content: \"\\ebfb\" }\n/*!@.codicon-arrow-circle-down:before*/.codicon-arrow-circle-down.sc-kol-icon-default:before { content: \"\\ebfc\" }\n/*!@.codicon-arrow-circle-left:before*/.codicon-arrow-circle-left.sc-kol-icon-default:before { content: \"\\ebfd\" }\n/*!@.codicon-arrow-circle-right:before*/.codicon-arrow-circle-right.sc-kol-icon-default:before { content: \"\\ebfe\" }\n/*!@.codicon-arrow-circle-up:before*/.codicon-arrow-circle-up.sc-kol-icon-default:before { content: \"\\ebff\" }\n/*!@.codicon-layout-sidebar-right-off:before*/.codicon-layout-sidebar-right-off.sc-kol-icon-default:before { content: \"\\ec00\" }\n/*!@.codicon-layout-panel-off:before*/.codicon-layout-panel-off.sc-kol-icon-default:before { content: \"\\ec01\" }\n/*!@.codicon-layout-sidebar-left-off:before*/.codicon-layout-sidebar-left-off.sc-kol-icon-default:before { content: \"\\ec02\" }\n/*!@.codicon-blank:before*/.codicon-blank.sc-kol-icon-default:before { content: \"\\ec03\" }\n/*!@.codicon-heart-filled:before*/.codicon-heart-filled.sc-kol-icon-default:before { content: \"\\ec04\" }\n/*!@.codicon-map:before*/.codicon-map.sc-kol-icon-default:before { content: \"\\ec05\" }\n/*!@.codicon-map-filled:before*/.codicon-map-filled.sc-kol-icon-default:before { content: \"\\ec06\" }\n/*!@.codicon-circle-small:before*/.codicon-circle-small.sc-kol-icon-default:before { content: \"\\ec07\" }\n/*!@.codicon-bell-slash:before*/.codicon-bell-slash.sc-kol-icon-default:before { content: \"\\ec08\" }\n/*!@.codicon-bell-slash-dot:before*/.codicon-bell-slash-dot.sc-kol-icon-default:before { content: \"\\ec09\" }\n/*!@.codicon-comment-unresolved:before*/.codicon-comment-unresolved.sc-kol-icon-default:before { content: \"\\ec0a\" }\n/*!@.codicon-git-pull-request-go-to-changes:before*/.codicon-git-pull-request-go-to-changes.sc-kol-icon-default:before { content: \"\\ec0b\" }\n/*!@.codicon-git-pull-request-new-changes:before*/.codicon-git-pull-request-new-changes.sc-kol-icon-default:before { content: \"\\ec0c\" }\n\n@layer kol-component {\n\t.sc-kol-icon-default-h {\n\t\tcolor: inherit;\n\t\tdisplay: contents;\n\t\theight: 1em;\n\t\tline-height: inherit;\n\t\twidth: 1em;\n\t}\n\n\t.sc-kol-icon-default-h > i {\n\t\theight: 1em;\n\t\twidth: 1em;\n\t}\n\n\t\n\t.sc-kol-icon-default-h > i,\n\t.sc-kol-icon-default-h > i:before {\n\t\tfont-size: inherit !important;\n\t}\n}";
+const defaultStyleCss$y = "@font-face {\n  font-family: \"codicon\";\n  font-display: block;\n  src: url(\"./codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa\") format(\"truetype\");\n}\n/*!@.codicon[class*=codicon-]*/.codicon[class*=codicon-].sc-kol-icon-default {\n  font: normal normal normal 16px/1 codicon;\n  display: inline-block;\n  text-decoration: none;\n  text-rendering: auto;\n  text-align: center;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n\n@keyframes codicon-spin {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n/*!@.codicon-sync.codicon-modifier-spin,\n.codicon-loading.codicon-modifier-spin,\n.codicon-gear.codicon-modifier-spin*/.codicon-sync.codicon-modifier-spin.sc-kol-icon-default, .codicon-loading.codicon-modifier-spin.sc-kol-icon-default, .codicon-gear.codicon-modifier-spin.sc-kol-icon-default {\n  \n  animation: codicon-spin 1.5s steps(30) infinite;\n}\n\n/*!@.codicon-modifier-disabled*/.codicon-modifier-disabled.sc-kol-icon-default {\n  opacity: 0.5;\n}\n\n/*!@.codicon-modifier-hidden*/.codicon-modifier-hidden.sc-kol-icon-default {\n  opacity: 0;\n}\n\n\n/*!@.codicon-loading*/.codicon-loading.sc-kol-icon-default {\n  animation-duration: 1s !important;\n  animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;\n}\n\n\n/*!@.codicon-add:before*/.codicon-add.sc-kol-icon-default:before {\n  content: \"\\ea60\";\n}\n\n/*!@.codicon-plus:before*/.codicon-plus.sc-kol-icon-default:before {\n  content: \"\\ea60\";\n}\n\n/*!@.codicon-gist-new:before*/.codicon-gist-new.sc-kol-icon-default:before {\n  content: \"\\ea60\";\n}\n\n/*!@.codicon-repo-create:before*/.codicon-repo-create.sc-kol-icon-default:before {\n  content: \"\\ea60\";\n}\n\n/*!@.codicon-lightbulb:before*/.codicon-lightbulb.sc-kol-icon-default:before {\n  content: \"\\ea61\";\n}\n\n/*!@.codicon-light-bulb:before*/.codicon-light-bulb.sc-kol-icon-default:before {\n  content: \"\\ea61\";\n}\n\n/*!@.codicon-repo:before*/.codicon-repo.sc-kol-icon-default:before {\n  content: \"\\ea62\";\n}\n\n/*!@.codicon-repo-delete:before*/.codicon-repo-delete.sc-kol-icon-default:before {\n  content: \"\\ea62\";\n}\n\n/*!@.codicon-gist-fork:before*/.codicon-gist-fork.sc-kol-icon-default:before {\n  content: \"\\ea63\";\n}\n\n/*!@.codicon-repo-forked:before*/.codicon-repo-forked.sc-kol-icon-default:before {\n  content: \"\\ea63\";\n}\n\n/*!@.codicon-git-pull-request:before*/.codicon-git-pull-request.sc-kol-icon-default:before {\n  content: \"\\ea64\";\n}\n\n/*!@.codicon-git-pull-request-abandoned:before*/.codicon-git-pull-request-abandoned.sc-kol-icon-default:before {\n  content: \"\\ea64\";\n}\n\n/*!@.codicon-record-keys:before*/.codicon-record-keys.sc-kol-icon-default:before {\n  content: \"\\ea65\";\n}\n\n/*!@.codicon-keyboard:before*/.codicon-keyboard.sc-kol-icon-default:before {\n  content: \"\\ea65\";\n}\n\n/*!@.codicon-tag:before*/.codicon-tag.sc-kol-icon-default:before {\n  content: \"\\ea66\";\n}\n\n/*!@.codicon-tag-add:before*/.codicon-tag-add.sc-kol-icon-default:before {\n  content: \"\\ea66\";\n}\n\n/*!@.codicon-tag-remove:before*/.codicon-tag-remove.sc-kol-icon-default:before {\n  content: \"\\ea66\";\n}\n\n/*!@.codicon-person:before*/.codicon-person.sc-kol-icon-default:before {\n  content: \"\\ea67\";\n}\n\n/*!@.codicon-person-follow:before*/.codicon-person-follow.sc-kol-icon-default:before {\n  content: \"\\ea67\";\n}\n\n/*!@.codicon-person-outline:before*/.codicon-person-outline.sc-kol-icon-default:before {\n  content: \"\\ea67\";\n}\n\n/*!@.codicon-person-filled:before*/.codicon-person-filled.sc-kol-icon-default:before {\n  content: \"\\ea67\";\n}\n\n/*!@.codicon-git-branch:before*/.codicon-git-branch.sc-kol-icon-default:before {\n  content: \"\\ea68\";\n}\n\n/*!@.codicon-git-branch-create:before*/.codicon-git-branch-create.sc-kol-icon-default:before {\n  content: \"\\ea68\";\n}\n\n/*!@.codicon-git-branch-delete:before*/.codicon-git-branch-delete.sc-kol-icon-default:before {\n  content: \"\\ea68\";\n}\n\n/*!@.codicon-source-control:before*/.codicon-source-control.sc-kol-icon-default:before {\n  content: \"\\ea68\";\n}\n\n/*!@.codicon-mirror:before*/.codicon-mirror.sc-kol-icon-default:before {\n  content: \"\\ea69\";\n}\n\n/*!@.codicon-mirror-public:before*/.codicon-mirror-public.sc-kol-icon-default:before {\n  content: \"\\ea69\";\n}\n\n/*!@.codicon-star:before*/.codicon-star.sc-kol-icon-default:before {\n  content: \"\\ea6a\";\n}\n\n/*!@.codicon-star-add:before*/.codicon-star-add.sc-kol-icon-default:before {\n  content: \"\\ea6a\";\n}\n\n/*!@.codicon-star-delete:before*/.codicon-star-delete.sc-kol-icon-default:before {\n  content: \"\\ea6a\";\n}\n\n/*!@.codicon-star-empty:before*/.codicon-star-empty.sc-kol-icon-default:before {\n  content: \"\\ea6a\";\n}\n\n/*!@.codicon-comment:before*/.codicon-comment.sc-kol-icon-default:before {\n  content: \"\\ea6b\";\n}\n\n/*!@.codicon-comment-add:before*/.codicon-comment-add.sc-kol-icon-default:before {\n  content: \"\\ea6b\";\n}\n\n/*!@.codicon-alert:before*/.codicon-alert.sc-kol-icon-default:before {\n  content: \"\\ea6c\";\n}\n\n/*!@.codicon-warning:before*/.codicon-warning.sc-kol-icon-default:before {\n  content: \"\\ea6c\";\n}\n\n/*!@.codicon-search:before*/.codicon-search.sc-kol-icon-default:before {\n  content: \"\\ea6d\";\n}\n\n/*!@.codicon-search-save:before*/.codicon-search-save.sc-kol-icon-default:before {\n  content: \"\\ea6d\";\n}\n\n/*!@.codicon-log-out:before*/.codicon-log-out.sc-kol-icon-default:before {\n  content: \"\\ea6e\";\n}\n\n/*!@.codicon-sign-out:before*/.codicon-sign-out.sc-kol-icon-default:before {\n  content: \"\\ea6e\";\n}\n\n/*!@.codicon-log-in:before*/.codicon-log-in.sc-kol-icon-default:before {\n  content: \"\\ea6f\";\n}\n\n/*!@.codicon-sign-in:before*/.codicon-sign-in.sc-kol-icon-default:before {\n  content: \"\\ea6f\";\n}\n\n/*!@.codicon-eye:before*/.codicon-eye.sc-kol-icon-default:before {\n  content: \"\\ea70\";\n}\n\n/*!@.codicon-eye-unwatch:before*/.codicon-eye-unwatch.sc-kol-icon-default:before {\n  content: \"\\ea70\";\n}\n\n/*!@.codicon-eye-watch:before*/.codicon-eye-watch.sc-kol-icon-default:before {\n  content: \"\\ea70\";\n}\n\n/*!@.codicon-circle-filled:before*/.codicon-circle-filled.sc-kol-icon-default:before {\n  content: \"\\ea71\";\n}\n\n/*!@.codicon-primitive-dot:before*/.codicon-primitive-dot.sc-kol-icon-default:before {\n  content: \"\\ea71\";\n}\n\n/*!@.codicon-close-dirty:before*/.codicon-close-dirty.sc-kol-icon-default:before {\n  content: \"\\ea71\";\n}\n\n/*!@.codicon-debug-breakpoint:before*/.codicon-debug-breakpoint.sc-kol-icon-default:before {\n  content: \"\\ea71\";\n}\n\n/*!@.codicon-debug-breakpoint-disabled:before*/.codicon-debug-breakpoint-disabled.sc-kol-icon-default:before {\n  content: \"\\ea71\";\n}\n\n/*!@.codicon-debug-hint:before*/.codicon-debug-hint.sc-kol-icon-default:before {\n  content: \"\\ea71\";\n}\n\n/*!@.codicon-primitive-square:before*/.codicon-primitive-square.sc-kol-icon-default:before {\n  content: \"\\ea72\";\n}\n\n/*!@.codicon-edit:before*/.codicon-edit.sc-kol-icon-default:before {\n  content: \"\\ea73\";\n}\n\n/*!@.codicon-pencil:before*/.codicon-pencil.sc-kol-icon-default:before {\n  content: \"\\ea73\";\n}\n\n/*!@.codicon-info:before*/.codicon-info.sc-kol-icon-default:before {\n  content: \"\\ea74\";\n}\n\n/*!@.codicon-issue-opened:before*/.codicon-issue-opened.sc-kol-icon-default:before {\n  content: \"\\ea74\";\n}\n\n/*!@.codicon-gist-private:before*/.codicon-gist-private.sc-kol-icon-default:before {\n  content: \"\\ea75\";\n}\n\n/*!@.codicon-git-fork-private:before*/.codicon-git-fork-private.sc-kol-icon-default:before {\n  content: \"\\ea75\";\n}\n\n/*!@.codicon-lock:before*/.codicon-lock.sc-kol-icon-default:before {\n  content: \"\\ea75\";\n}\n\n/*!@.codicon-mirror-private:before*/.codicon-mirror-private.sc-kol-icon-default:before {\n  content: \"\\ea75\";\n}\n\n/*!@.codicon-close:before*/.codicon-close.sc-kol-icon-default:before {\n  content: \"\\ea76\";\n}\n\n/*!@.codicon-remove-close:before*/.codicon-remove-close.sc-kol-icon-default:before {\n  content: \"\\ea76\";\n}\n\n/*!@.codicon-x:before*/.codicon-x.sc-kol-icon-default:before {\n  content: \"\\ea76\";\n}\n\n/*!@.codicon-repo-sync:before*/.codicon-repo-sync.sc-kol-icon-default:before {\n  content: \"\\ea77\";\n}\n\n/*!@.codicon-sync:before*/.codicon-sync.sc-kol-icon-default:before {\n  content: \"\\ea77\";\n}\n\n/*!@.codicon-clone:before*/.codicon-clone.sc-kol-icon-default:before {\n  content: \"\\ea78\";\n}\n\n/*!@.codicon-desktop-download:before*/.codicon-desktop-download.sc-kol-icon-default:before {\n  content: \"\\ea78\";\n}\n\n/*!@.codicon-beaker:before*/.codicon-beaker.sc-kol-icon-default:before {\n  content: \"\\ea79\";\n}\n\n/*!@.codicon-microscope:before*/.codicon-microscope.sc-kol-icon-default:before {\n  content: \"\\ea79\";\n}\n\n/*!@.codicon-vm:before*/.codicon-vm.sc-kol-icon-default:before {\n  content: \"\\ea7a\";\n}\n\n/*!@.codicon-device-desktop:before*/.codicon-device-desktop.sc-kol-icon-default:before {\n  content: \"\\ea7a\";\n}\n\n/*!@.codicon-file:before*/.codicon-file.sc-kol-icon-default:before {\n  content: \"\\ea7b\";\n}\n\n/*!@.codicon-file-text:before*/.codicon-file-text.sc-kol-icon-default:before {\n  content: \"\\ea7b\";\n}\n\n/*!@.codicon-more:before*/.codicon-more.sc-kol-icon-default:before {\n  content: \"\\ea7c\";\n}\n\n/*!@.codicon-ellipsis:before*/.codicon-ellipsis.sc-kol-icon-default:before {\n  content: \"\\ea7c\";\n}\n\n/*!@.codicon-kebab-horizontal:before*/.codicon-kebab-horizontal.sc-kol-icon-default:before {\n  content: \"\\ea7c\";\n}\n\n/*!@.codicon-mail-reply:before*/.codicon-mail-reply.sc-kol-icon-default:before {\n  content: \"\\ea7d\";\n}\n\n/*!@.codicon-reply:before*/.codicon-reply.sc-kol-icon-default:before {\n  content: \"\\ea7d\";\n}\n\n/*!@.codicon-organization:before*/.codicon-organization.sc-kol-icon-default:before {\n  content: \"\\ea7e\";\n}\n\n/*!@.codicon-organization-filled:before*/.codicon-organization-filled.sc-kol-icon-default:before {\n  content: \"\\ea7e\";\n}\n\n/*!@.codicon-organization-outline:before*/.codicon-organization-outline.sc-kol-icon-default:before {\n  content: \"\\ea7e\";\n}\n\n/*!@.codicon-new-file:before*/.codicon-new-file.sc-kol-icon-default:before {\n  content: \"\\ea7f\";\n}\n\n/*!@.codicon-file-add:before*/.codicon-file-add.sc-kol-icon-default:before {\n  content: \"\\ea7f\";\n}\n\n/*!@.codicon-new-folder:before*/.codicon-new-folder.sc-kol-icon-default:before {\n  content: \"\\ea80\";\n}\n\n/*!@.codicon-file-directory-create:before*/.codicon-file-directory-create.sc-kol-icon-default:before {\n  content: \"\\ea80\";\n}\n\n/*!@.codicon-trash:before*/.codicon-trash.sc-kol-icon-default:before {\n  content: \"\\ea81\";\n}\n\n/*!@.codicon-trashcan:before*/.codicon-trashcan.sc-kol-icon-default:before {\n  content: \"\\ea81\";\n}\n\n/*!@.codicon-history:before*/.codicon-history.sc-kol-icon-default:before {\n  content: \"\\ea82\";\n}\n\n/*!@.codicon-clock:before*/.codicon-clock.sc-kol-icon-default:before {\n  content: \"\\ea82\";\n}\n\n/*!@.codicon-folder:before*/.codicon-folder.sc-kol-icon-default:before {\n  content: \"\\ea83\";\n}\n\n/*!@.codicon-file-directory:before*/.codicon-file-directory.sc-kol-icon-default:before {\n  content: \"\\ea83\";\n}\n\n/*!@.codicon-symbol-folder:before*/.codicon-symbol-folder.sc-kol-icon-default:before {\n  content: \"\\ea83\";\n}\n\n/*!@.codicon-logo-github:before*/.codicon-logo-github.sc-kol-icon-default:before {\n  content: \"\\ea84\";\n}\n\n/*!@.codicon-mark-github:before*/.codicon-mark-github.sc-kol-icon-default:before {\n  content: \"\\ea84\";\n}\n\n/*!@.codicon-github:before*/.codicon-github.sc-kol-icon-default:before {\n  content: \"\\ea84\";\n}\n\n/*!@.codicon-terminal:before*/.codicon-terminal.sc-kol-icon-default:before {\n  content: \"\\ea85\";\n}\n\n/*!@.codicon-console:before*/.codicon-console.sc-kol-icon-default:before {\n  content: \"\\ea85\";\n}\n\n/*!@.codicon-repl:before*/.codicon-repl.sc-kol-icon-default:before {\n  content: \"\\ea85\";\n}\n\n/*!@.codicon-zap:before*/.codicon-zap.sc-kol-icon-default:before {\n  content: \"\\ea86\";\n}\n\n/*!@.codicon-symbol-event:before*/.codicon-symbol-event.sc-kol-icon-default:before {\n  content: \"\\ea86\";\n}\n\n/*!@.codicon-error:before*/.codicon-error.sc-kol-icon-default:before {\n  content: \"\\ea87\";\n}\n\n/*!@.codicon-stop:before*/.codicon-stop.sc-kol-icon-default:before {\n  content: \"\\ea87\";\n}\n\n/*!@.codicon-variable:before*/.codicon-variable.sc-kol-icon-default:before {\n  content: \"\\ea88\";\n}\n\n/*!@.codicon-symbol-variable:before*/.codicon-symbol-variable.sc-kol-icon-default:before {\n  content: \"\\ea88\";\n}\n\n/*!@.codicon-array:before*/.codicon-array.sc-kol-icon-default:before {\n  content: \"\\ea8a\";\n}\n\n/*!@.codicon-symbol-array:before*/.codicon-symbol-array.sc-kol-icon-default:before {\n  content: \"\\ea8a\";\n}\n\n/*!@.codicon-symbol-module:before*/.codicon-symbol-module.sc-kol-icon-default:before {\n  content: \"\\ea8b\";\n}\n\n/*!@.codicon-symbol-package:before*/.codicon-symbol-package.sc-kol-icon-default:before {\n  content: \"\\ea8b\";\n}\n\n/*!@.codicon-symbol-namespace:before*/.codicon-symbol-namespace.sc-kol-icon-default:before {\n  content: \"\\ea8b\";\n}\n\n/*!@.codicon-symbol-object:before*/.codicon-symbol-object.sc-kol-icon-default:before {\n  content: \"\\ea8b\";\n}\n\n/*!@.codicon-symbol-method:before*/.codicon-symbol-method.sc-kol-icon-default:before {\n  content: \"\\ea8c\";\n}\n\n/*!@.codicon-symbol-function:before*/.codicon-symbol-function.sc-kol-icon-default:before {\n  content: \"\\ea8c\";\n}\n\n/*!@.codicon-symbol-constructor:before*/.codicon-symbol-constructor.sc-kol-icon-default:before {\n  content: \"\\ea8c\";\n}\n\n/*!@.codicon-symbol-boolean:before*/.codicon-symbol-boolean.sc-kol-icon-default:before {\n  content: \"\\ea8f\";\n}\n\n/*!@.codicon-symbol-null:before*/.codicon-symbol-null.sc-kol-icon-default:before {\n  content: \"\\ea8f\";\n}\n\n/*!@.codicon-symbol-numeric:before*/.codicon-symbol-numeric.sc-kol-icon-default:before {\n  content: \"\\ea90\";\n}\n\n/*!@.codicon-symbol-number:before*/.codicon-symbol-number.sc-kol-icon-default:before {\n  content: \"\\ea90\";\n}\n\n/*!@.codicon-symbol-structure:before*/.codicon-symbol-structure.sc-kol-icon-default:before {\n  content: \"\\ea91\";\n}\n\n/*!@.codicon-symbol-struct:before*/.codicon-symbol-struct.sc-kol-icon-default:before {\n  content: \"\\ea91\";\n}\n\n/*!@.codicon-symbol-parameter:before*/.codicon-symbol-parameter.sc-kol-icon-default:before {\n  content: \"\\ea92\";\n}\n\n/*!@.codicon-symbol-type-parameter:before*/.codicon-symbol-type-parameter.sc-kol-icon-default:before {\n  content: \"\\ea92\";\n}\n\n/*!@.codicon-symbol-key:before*/.codicon-symbol-key.sc-kol-icon-default:before {\n  content: \"\\ea93\";\n}\n\n/*!@.codicon-symbol-text:before*/.codicon-symbol-text.sc-kol-icon-default:before {\n  content: \"\\ea93\";\n}\n\n/*!@.codicon-symbol-reference:before*/.codicon-symbol-reference.sc-kol-icon-default:before {\n  content: \"\\ea94\";\n}\n\n/*!@.codicon-go-to-file:before*/.codicon-go-to-file.sc-kol-icon-default:before {\n  content: \"\\ea94\";\n}\n\n/*!@.codicon-symbol-enum:before*/.codicon-symbol-enum.sc-kol-icon-default:before {\n  content: \"\\ea95\";\n}\n\n/*!@.codicon-symbol-value:before*/.codicon-symbol-value.sc-kol-icon-default:before {\n  content: \"\\ea95\";\n}\n\n/*!@.codicon-symbol-ruler:before*/.codicon-symbol-ruler.sc-kol-icon-default:before {\n  content: \"\\ea96\";\n}\n\n/*!@.codicon-symbol-unit:before*/.codicon-symbol-unit.sc-kol-icon-default:before {\n  content: \"\\ea96\";\n}\n\n/*!@.codicon-activate-breakpoints:before*/.codicon-activate-breakpoints.sc-kol-icon-default:before {\n  content: \"\\ea97\";\n}\n\n/*!@.codicon-archive:before*/.codicon-archive.sc-kol-icon-default:before {\n  content: \"\\ea98\";\n}\n\n/*!@.codicon-arrow-both:before*/.codicon-arrow-both.sc-kol-icon-default:before {\n  content: \"\\ea99\";\n}\n\n/*!@.codicon-arrow-down:before*/.codicon-arrow-down.sc-kol-icon-default:before {\n  content: \"\\ea9a\";\n}\n\n/*!@.codicon-arrow-left:before*/.codicon-arrow-left.sc-kol-icon-default:before {\n  content: \"\\ea9b\";\n}\n\n/*!@.codicon-arrow-right:before*/.codicon-arrow-right.sc-kol-icon-default:before {\n  content: \"\\ea9c\";\n}\n\n/*!@.codicon-arrow-small-down:before*/.codicon-arrow-small-down.sc-kol-icon-default:before {\n  content: \"\\ea9d\";\n}\n\n/*!@.codicon-arrow-small-left:before*/.codicon-arrow-small-left.sc-kol-icon-default:before {\n  content: \"\\ea9e\";\n}\n\n/*!@.codicon-arrow-small-right:before*/.codicon-arrow-small-right.sc-kol-icon-default:before {\n  content: \"\\ea9f\";\n}\n\n/*!@.codicon-arrow-small-up:before*/.codicon-arrow-small-up.sc-kol-icon-default:before {\n  content: \"\\eaa0\";\n}\n\n/*!@.codicon-arrow-up:before*/.codicon-arrow-up.sc-kol-icon-default:before {\n  content: \"\\eaa1\";\n}\n\n/*!@.codicon-bell:before*/.codicon-bell.sc-kol-icon-default:before {\n  content: \"\\eaa2\";\n}\n\n/*!@.codicon-bold:before*/.codicon-bold.sc-kol-icon-default:before {\n  content: \"\\eaa3\";\n}\n\n/*!@.codicon-book:before*/.codicon-book.sc-kol-icon-default:before {\n  content: \"\\eaa4\";\n}\n\n/*!@.codicon-bookmark:before*/.codicon-bookmark.sc-kol-icon-default:before {\n  content: \"\\eaa5\";\n}\n\n/*!@.codicon-debug-breakpoint-conditional-unverified:before*/.codicon-debug-breakpoint-conditional-unverified.sc-kol-icon-default:before {\n  content: \"\\eaa6\";\n}\n\n/*!@.codicon-debug-breakpoint-conditional:before*/.codicon-debug-breakpoint-conditional.sc-kol-icon-default:before {\n  content: \"\\eaa7\";\n}\n\n/*!@.codicon-debug-breakpoint-conditional-disabled:before*/.codicon-debug-breakpoint-conditional-disabled.sc-kol-icon-default:before {\n  content: \"\\eaa7\";\n}\n\n/*!@.codicon-debug-breakpoint-data-unverified:before*/.codicon-debug-breakpoint-data-unverified.sc-kol-icon-default:before {\n  content: \"\\eaa8\";\n}\n\n/*!@.codicon-debug-breakpoint-data:before*/.codicon-debug-breakpoint-data.sc-kol-icon-default:before {\n  content: \"\\eaa9\";\n}\n\n/*!@.codicon-debug-breakpoint-data-disabled:before*/.codicon-debug-breakpoint-data-disabled.sc-kol-icon-default:before {\n  content: \"\\eaa9\";\n}\n\n/*!@.codicon-debug-breakpoint-log-unverified:before*/.codicon-debug-breakpoint-log-unverified.sc-kol-icon-default:before {\n  content: \"\\eaaa\";\n}\n\n/*!@.codicon-debug-breakpoint-log:before*/.codicon-debug-breakpoint-log.sc-kol-icon-default:before {\n  content: \"\\eaab\";\n}\n\n/*!@.codicon-debug-breakpoint-log-disabled:before*/.codicon-debug-breakpoint-log-disabled.sc-kol-icon-default:before {\n  content: \"\\eaab\";\n}\n\n/*!@.codicon-briefcase:before*/.codicon-briefcase.sc-kol-icon-default:before {\n  content: \"\\eaac\";\n}\n\n/*!@.codicon-broadcast:before*/.codicon-broadcast.sc-kol-icon-default:before {\n  content: \"\\eaad\";\n}\n\n/*!@.codicon-browser:before*/.codicon-browser.sc-kol-icon-default:before {\n  content: \"\\eaae\";\n}\n\n/*!@.codicon-bug:before*/.codicon-bug.sc-kol-icon-default:before {\n  content: \"\\eaaf\";\n}\n\n/*!@.codicon-calendar:before*/.codicon-calendar.sc-kol-icon-default:before {\n  content: \"\\eab0\";\n}\n\n/*!@.codicon-case-sensitive:before*/.codicon-case-sensitive.sc-kol-icon-default:before {\n  content: \"\\eab1\";\n}\n\n/*!@.codicon-check:before*/.codicon-check.sc-kol-icon-default:before {\n  content: \"\\eab2\";\n}\n\n/*!@.codicon-checklist:before*/.codicon-checklist.sc-kol-icon-default:before {\n  content: \"\\eab3\";\n}\n\n/*!@.codicon-chevron-down:before*/.codicon-chevron-down.sc-kol-icon-default:before {\n  content: \"\\eab4\";\n}\n\n/*!@.codicon-chevron-left:before*/.codicon-chevron-left.sc-kol-icon-default:before {\n  content: \"\\eab5\";\n}\n\n/*!@.codicon-chevron-right:before*/.codicon-chevron-right.sc-kol-icon-default:before {\n  content: \"\\eab6\";\n}\n\n/*!@.codicon-chevron-up:before*/.codicon-chevron-up.sc-kol-icon-default:before {\n  content: \"\\eab7\";\n}\n\n/*!@.codicon-chrome-close:before*/.codicon-chrome-close.sc-kol-icon-default:before {\n  content: \"\\eab8\";\n}\n\n/*!@.codicon-chrome-maximize:before*/.codicon-chrome-maximize.sc-kol-icon-default:before {\n  content: \"\\eab9\";\n}\n\n/*!@.codicon-chrome-minimize:before*/.codicon-chrome-minimize.sc-kol-icon-default:before {\n  content: \"\\eaba\";\n}\n\n/*!@.codicon-chrome-restore:before*/.codicon-chrome-restore.sc-kol-icon-default:before {\n  content: \"\\eabb\";\n}\n\n/*!@.codicon-circle-outline:before*/.codicon-circle-outline.sc-kol-icon-default:before {\n  content: \"\\eabc\";\n}\n\n/*!@.codicon-debug-breakpoint-unverified:before*/.codicon-debug-breakpoint-unverified.sc-kol-icon-default:before {\n  content: \"\\eabc\";\n}\n\n/*!@.codicon-circle-slash:before*/.codicon-circle-slash.sc-kol-icon-default:before {\n  content: \"\\eabd\";\n}\n\n/*!@.codicon-circuit-board:before*/.codicon-circuit-board.sc-kol-icon-default:before {\n  content: \"\\eabe\";\n}\n\n/*!@.codicon-clear-all:before*/.codicon-clear-all.sc-kol-icon-default:before {\n  content: \"\\eabf\";\n}\n\n/*!@.codicon-clippy:before*/.codicon-clippy.sc-kol-icon-default:before {\n  content: \"\\eac0\";\n}\n\n/*!@.codicon-close-all:before*/.codicon-close-all.sc-kol-icon-default:before {\n  content: \"\\eac1\";\n}\n\n/*!@.codicon-cloud-download:before*/.codicon-cloud-download.sc-kol-icon-default:before {\n  content: \"\\eac2\";\n}\n\n/*!@.codicon-cloud-upload:before*/.codicon-cloud-upload.sc-kol-icon-default:before {\n  content: \"\\eac3\";\n}\n\n/*!@.codicon-code:before*/.codicon-code.sc-kol-icon-default:before {\n  content: \"\\eac4\";\n}\n\n/*!@.codicon-collapse-all:before*/.codicon-collapse-all.sc-kol-icon-default:before {\n  content: \"\\eac5\";\n}\n\n/*!@.codicon-color-mode:before*/.codicon-color-mode.sc-kol-icon-default:before {\n  content: \"\\eac6\";\n}\n\n/*!@.codicon-comment-discussion:before*/.codicon-comment-discussion.sc-kol-icon-default:before {\n  content: \"\\eac7\";\n}\n\n/*!@.codicon-credit-card:before*/.codicon-credit-card.sc-kol-icon-default:before {\n  content: \"\\eac9\";\n}\n\n/*!@.codicon-dash:before*/.codicon-dash.sc-kol-icon-default:before {\n  content: \"\\eacc\";\n}\n\n/*!@.codicon-dashboard:before*/.codicon-dashboard.sc-kol-icon-default:before {\n  content: \"\\eacd\";\n}\n\n/*!@.codicon-database:before*/.codicon-database.sc-kol-icon-default:before {\n  content: \"\\eace\";\n}\n\n/*!@.codicon-debug-continue:before*/.codicon-debug-continue.sc-kol-icon-default:before {\n  content: \"\\eacf\";\n}\n\n/*!@.codicon-debug-disconnect:before*/.codicon-debug-disconnect.sc-kol-icon-default:before {\n  content: \"\\ead0\";\n}\n\n/*!@.codicon-debug-pause:before*/.codicon-debug-pause.sc-kol-icon-default:before {\n  content: \"\\ead1\";\n}\n\n/*!@.codicon-debug-restart:before*/.codicon-debug-restart.sc-kol-icon-default:before {\n  content: \"\\ead2\";\n}\n\n/*!@.codicon-debug-start:before*/.codicon-debug-start.sc-kol-icon-default:before {\n  content: \"\\ead3\";\n}\n\n/*!@.codicon-debug-step-into:before*/.codicon-debug-step-into.sc-kol-icon-default:before {\n  content: \"\\ead4\";\n}\n\n/*!@.codicon-debug-step-out:before*/.codicon-debug-step-out.sc-kol-icon-default:before {\n  content: \"\\ead5\";\n}\n\n/*!@.codicon-debug-step-over:before*/.codicon-debug-step-over.sc-kol-icon-default:before {\n  content: \"\\ead6\";\n}\n\n/*!@.codicon-debug-stop:before*/.codicon-debug-stop.sc-kol-icon-default:before {\n  content: \"\\ead7\";\n}\n\n/*!@.codicon-debug:before*/.codicon-debug.sc-kol-icon-default:before {\n  content: \"\\ead8\";\n}\n\n/*!@.codicon-device-camera-video:before*/.codicon-device-camera-video.sc-kol-icon-default:before {\n  content: \"\\ead9\";\n}\n\n/*!@.codicon-device-camera:before*/.codicon-device-camera.sc-kol-icon-default:before {\n  content: \"\\eada\";\n}\n\n/*!@.codicon-device-mobile:before*/.codicon-device-mobile.sc-kol-icon-default:before {\n  content: \"\\eadb\";\n}\n\n/*!@.codicon-diff-added:before*/.codicon-diff-added.sc-kol-icon-default:before {\n  content: \"\\eadc\";\n}\n\n/*!@.codicon-diff-ignored:before*/.codicon-diff-ignored.sc-kol-icon-default:before {\n  content: \"\\eadd\";\n}\n\n/*!@.codicon-diff-modified:before*/.codicon-diff-modified.sc-kol-icon-default:before {\n  content: \"\\eade\";\n}\n\n/*!@.codicon-diff-removed:before*/.codicon-diff-removed.sc-kol-icon-default:before {\n  content: \"\\eadf\";\n}\n\n/*!@.codicon-diff-renamed:before*/.codicon-diff-renamed.sc-kol-icon-default:before {\n  content: \"\\eae0\";\n}\n\n/*!@.codicon-diff:before*/.codicon-diff.sc-kol-icon-default:before {\n  content: \"\\eae1\";\n}\n\n/*!@.codicon-discard:before*/.codicon-discard.sc-kol-icon-default:before {\n  content: \"\\eae2\";\n}\n\n/*!@.codicon-editor-layout:before*/.codicon-editor-layout.sc-kol-icon-default:before {\n  content: \"\\eae3\";\n}\n\n/*!@.codicon-empty-window:before*/.codicon-empty-window.sc-kol-icon-default:before {\n  content: \"\\eae4\";\n}\n\n/*!@.codicon-exclude:before*/.codicon-exclude.sc-kol-icon-default:before {\n  content: \"\\eae5\";\n}\n\n/*!@.codicon-extensions:before*/.codicon-extensions.sc-kol-icon-default:before {\n  content: \"\\eae6\";\n}\n\n/*!@.codicon-eye-closed:before*/.codicon-eye-closed.sc-kol-icon-default:before {\n  content: \"\\eae7\";\n}\n\n/*!@.codicon-file-binary:before*/.codicon-file-binary.sc-kol-icon-default:before {\n  content: \"\\eae8\";\n}\n\n/*!@.codicon-file-code:before*/.codicon-file-code.sc-kol-icon-default:before {\n  content: \"\\eae9\";\n}\n\n/*!@.codicon-file-media:before*/.codicon-file-media.sc-kol-icon-default:before {\n  content: \"\\eaea\";\n}\n\n/*!@.codicon-file-pdf:before*/.codicon-file-pdf.sc-kol-icon-default:before {\n  content: \"\\eaeb\";\n}\n\n/*!@.codicon-file-submodule:before*/.codicon-file-submodule.sc-kol-icon-default:before {\n  content: \"\\eaec\";\n}\n\n/*!@.codicon-file-symlink-directory:before*/.codicon-file-symlink-directory.sc-kol-icon-default:before {\n  content: \"\\eaed\";\n}\n\n/*!@.codicon-file-symlink-file:before*/.codicon-file-symlink-file.sc-kol-icon-default:before {\n  content: \"\\eaee\";\n}\n\n/*!@.codicon-file-zip:before*/.codicon-file-zip.sc-kol-icon-default:before {\n  content: \"\\eaef\";\n}\n\n/*!@.codicon-files:before*/.codicon-files.sc-kol-icon-default:before {\n  content: \"\\eaf0\";\n}\n\n/*!@.codicon-filter:before*/.codicon-filter.sc-kol-icon-default:before {\n  content: \"\\eaf1\";\n}\n\n/*!@.codicon-flame:before*/.codicon-flame.sc-kol-icon-default:before {\n  content: \"\\eaf2\";\n}\n\n/*!@.codicon-fold-down:before*/.codicon-fold-down.sc-kol-icon-default:before {\n  content: \"\\eaf3\";\n}\n\n/*!@.codicon-fold-up:before*/.codicon-fold-up.sc-kol-icon-default:before {\n  content: \"\\eaf4\";\n}\n\n/*!@.codicon-fold:before*/.codicon-fold.sc-kol-icon-default:before {\n  content: \"\\eaf5\";\n}\n\n/*!@.codicon-folder-active:before*/.codicon-folder-active.sc-kol-icon-default:before {\n  content: \"\\eaf6\";\n}\n\n/*!@.codicon-folder-opened:before*/.codicon-folder-opened.sc-kol-icon-default:before {\n  content: \"\\eaf7\";\n}\n\n/*!@.codicon-gear:before*/.codicon-gear.sc-kol-icon-default:before {\n  content: \"\\eaf8\";\n}\n\n/*!@.codicon-gift:before*/.codicon-gift.sc-kol-icon-default:before {\n  content: \"\\eaf9\";\n}\n\n/*!@.codicon-gist-secret:before*/.codicon-gist-secret.sc-kol-icon-default:before {\n  content: \"\\eafa\";\n}\n\n/*!@.codicon-gist:before*/.codicon-gist.sc-kol-icon-default:before {\n  content: \"\\eafb\";\n}\n\n/*!@.codicon-git-commit:before*/.codicon-git-commit.sc-kol-icon-default:before {\n  content: \"\\eafc\";\n}\n\n/*!@.codicon-git-compare:before*/.codicon-git-compare.sc-kol-icon-default:before {\n  content: \"\\eafd\";\n}\n\n/*!@.codicon-compare-changes:before*/.codicon-compare-changes.sc-kol-icon-default:before {\n  content: \"\\eafd\";\n}\n\n/*!@.codicon-git-merge:before*/.codicon-git-merge.sc-kol-icon-default:before {\n  content: \"\\eafe\";\n}\n\n/*!@.codicon-github-action:before*/.codicon-github-action.sc-kol-icon-default:before {\n  content: \"\\eaff\";\n}\n\n/*!@.codicon-github-alt:before*/.codicon-github-alt.sc-kol-icon-default:before {\n  content: \"\\eb00\";\n}\n\n/*!@.codicon-globe:before*/.codicon-globe.sc-kol-icon-default:before {\n  content: \"\\eb01\";\n}\n\n/*!@.codicon-grabber:before*/.codicon-grabber.sc-kol-icon-default:before {\n  content: \"\\eb02\";\n}\n\n/*!@.codicon-graph:before*/.codicon-graph.sc-kol-icon-default:before {\n  content: \"\\eb03\";\n}\n\n/*!@.codicon-gripper:before*/.codicon-gripper.sc-kol-icon-default:before {\n  content: \"\\eb04\";\n}\n\n/*!@.codicon-heart:before*/.codicon-heart.sc-kol-icon-default:before {\n  content: \"\\eb05\";\n}\n\n/*!@.codicon-home:before*/.codicon-home.sc-kol-icon-default:before {\n  content: \"\\eb06\";\n}\n\n/*!@.codicon-horizontal-rule:before*/.codicon-horizontal-rule.sc-kol-icon-default:before {\n  content: \"\\eb07\";\n}\n\n/*!@.codicon-hubot:before*/.codicon-hubot.sc-kol-icon-default:before {\n  content: \"\\eb08\";\n}\n\n/*!@.codicon-inbox:before*/.codicon-inbox.sc-kol-icon-default:before {\n  content: \"\\eb09\";\n}\n\n/*!@.codicon-issue-reopened:before*/.codicon-issue-reopened.sc-kol-icon-default:before {\n  content: \"\\eb0b\";\n}\n\n/*!@.codicon-issues:before*/.codicon-issues.sc-kol-icon-default:before {\n  content: \"\\eb0c\";\n}\n\n/*!@.codicon-italic:before*/.codicon-italic.sc-kol-icon-default:before {\n  content: \"\\eb0d\";\n}\n\n/*!@.codicon-jersey:before*/.codicon-jersey.sc-kol-icon-default:before {\n  content: \"\\eb0e\";\n}\n\n/*!@.codicon-json:before*/.codicon-json.sc-kol-icon-default:before {\n  content: \"\\eb0f\";\n}\n\n/*!@.codicon-kebab-vertical:before*/.codicon-kebab-vertical.sc-kol-icon-default:before {\n  content: \"\\eb10\";\n}\n\n/*!@.codicon-key:before*/.codicon-key.sc-kol-icon-default:before {\n  content: \"\\eb11\";\n}\n\n/*!@.codicon-law:before*/.codicon-law.sc-kol-icon-default:before {\n  content: \"\\eb12\";\n}\n\n/*!@.codicon-lightbulb-autofix:before*/.codicon-lightbulb-autofix.sc-kol-icon-default:before {\n  content: \"\\eb13\";\n}\n\n/*!@.codicon-link-external:before*/.codicon-link-external.sc-kol-icon-default:before {\n  content: \"\\eb14\";\n}\n\n/*!@.codicon-link:before*/.codicon-link.sc-kol-icon-default:before {\n  content: \"\\eb15\";\n}\n\n/*!@.codicon-list-ordered:before*/.codicon-list-ordered.sc-kol-icon-default:before {\n  content: \"\\eb16\";\n}\n\n/*!@.codicon-list-unordered:before*/.codicon-list-unordered.sc-kol-icon-default:before {\n  content: \"\\eb17\";\n}\n\n/*!@.codicon-live-share:before*/.codicon-live-share.sc-kol-icon-default:before {\n  content: \"\\eb18\";\n}\n\n/*!@.codicon-loading:before*/.codicon-loading.sc-kol-icon-default:before {\n  content: \"\\eb19\";\n}\n\n/*!@.codicon-location:before*/.codicon-location.sc-kol-icon-default:before {\n  content: \"\\eb1a\";\n}\n\n/*!@.codicon-mail-read:before*/.codicon-mail-read.sc-kol-icon-default:before {\n  content: \"\\eb1b\";\n}\n\n/*!@.codicon-mail:before*/.codicon-mail.sc-kol-icon-default:before {\n  content: \"\\eb1c\";\n}\n\n/*!@.codicon-markdown:before*/.codicon-markdown.sc-kol-icon-default:before {\n  content: \"\\eb1d\";\n}\n\n/*!@.codicon-megaphone:before*/.codicon-megaphone.sc-kol-icon-default:before {\n  content: \"\\eb1e\";\n}\n\n/*!@.codicon-mention:before*/.codicon-mention.sc-kol-icon-default:before {\n  content: \"\\eb1f\";\n}\n\n/*!@.codicon-milestone:before*/.codicon-milestone.sc-kol-icon-default:before {\n  content: \"\\eb20\";\n}\n\n/*!@.codicon-mortar-board:before*/.codicon-mortar-board.sc-kol-icon-default:before {\n  content: \"\\eb21\";\n}\n\n/*!@.codicon-move:before*/.codicon-move.sc-kol-icon-default:before {\n  content: \"\\eb22\";\n}\n\n/*!@.codicon-multiple-windows:before*/.codicon-multiple-windows.sc-kol-icon-default:before {\n  content: \"\\eb23\";\n}\n\n/*!@.codicon-mute:before*/.codicon-mute.sc-kol-icon-default:before {\n  content: \"\\eb24\";\n}\n\n/*!@.codicon-no-newline:before*/.codicon-no-newline.sc-kol-icon-default:before {\n  content: \"\\eb25\";\n}\n\n/*!@.codicon-note:before*/.codicon-note.sc-kol-icon-default:before {\n  content: \"\\eb26\";\n}\n\n/*!@.codicon-octoface:before*/.codicon-octoface.sc-kol-icon-default:before {\n  content: \"\\eb27\";\n}\n\n/*!@.codicon-open-preview:before*/.codicon-open-preview.sc-kol-icon-default:before {\n  content: \"\\eb28\";\n}\n\n/*!@.codicon-package:before*/.codicon-package.sc-kol-icon-default:before {\n  content: \"\\eb29\";\n}\n\n/*!@.codicon-paintcan:before*/.codicon-paintcan.sc-kol-icon-default:before {\n  content: \"\\eb2a\";\n}\n\n/*!@.codicon-pin:before*/.codicon-pin.sc-kol-icon-default:before {\n  content: \"\\eb2b\";\n}\n\n/*!@.codicon-play:before*/.codicon-play.sc-kol-icon-default:before {\n  content: \"\\eb2c\";\n}\n\n/*!@.codicon-run:before*/.codicon-run.sc-kol-icon-default:before {\n  content: \"\\eb2c\";\n}\n\n/*!@.codicon-plug:before*/.codicon-plug.sc-kol-icon-default:before {\n  content: \"\\eb2d\";\n}\n\n/*!@.codicon-preserve-case:before*/.codicon-preserve-case.sc-kol-icon-default:before {\n  content: \"\\eb2e\";\n}\n\n/*!@.codicon-preview:before*/.codicon-preview.sc-kol-icon-default:before {\n  content: \"\\eb2f\";\n}\n\n/*!@.codicon-project:before*/.codicon-project.sc-kol-icon-default:before {\n  content: \"\\eb30\";\n}\n\n/*!@.codicon-pulse:before*/.codicon-pulse.sc-kol-icon-default:before {\n  content: \"\\eb31\";\n}\n\n/*!@.codicon-question:before*/.codicon-question.sc-kol-icon-default:before {\n  content: \"\\eb32\";\n}\n\n/*!@.codicon-quote:before*/.codicon-quote.sc-kol-icon-default:before {\n  content: \"\\eb33\";\n}\n\n/*!@.codicon-radio-tower:before*/.codicon-radio-tower.sc-kol-icon-default:before {\n  content: \"\\eb34\";\n}\n\n/*!@.codicon-reactions:before*/.codicon-reactions.sc-kol-icon-default:before {\n  content: \"\\eb35\";\n}\n\n/*!@.codicon-references:before*/.codicon-references.sc-kol-icon-default:before {\n  content: \"\\eb36\";\n}\n\n/*!@.codicon-refresh:before*/.codicon-refresh.sc-kol-icon-default:before {\n  content: \"\\eb37\";\n}\n\n/*!@.codicon-regex:before*/.codicon-regex.sc-kol-icon-default:before {\n  content: \"\\eb38\";\n}\n\n/*!@.codicon-remote-explorer:before*/.codicon-remote-explorer.sc-kol-icon-default:before {\n  content: \"\\eb39\";\n}\n\n/*!@.codicon-remote:before*/.codicon-remote.sc-kol-icon-default:before {\n  content: \"\\eb3a\";\n}\n\n/*!@.codicon-remove:before*/.codicon-remove.sc-kol-icon-default:before {\n  content: \"\\eb3b\";\n}\n\n/*!@.codicon-replace-all:before*/.codicon-replace-all.sc-kol-icon-default:before {\n  content: \"\\eb3c\";\n}\n\n/*!@.codicon-replace:before*/.codicon-replace.sc-kol-icon-default:before {\n  content: \"\\eb3d\";\n}\n\n/*!@.codicon-repo-clone:before*/.codicon-repo-clone.sc-kol-icon-default:before {\n  content: \"\\eb3e\";\n}\n\n/*!@.codicon-repo-force-push:before*/.codicon-repo-force-push.sc-kol-icon-default:before {\n  content: \"\\eb3f\";\n}\n\n/*!@.codicon-repo-pull:before*/.codicon-repo-pull.sc-kol-icon-default:before {\n  content: \"\\eb40\";\n}\n\n/*!@.codicon-repo-push:before*/.codicon-repo-push.sc-kol-icon-default:before {\n  content: \"\\eb41\";\n}\n\n/*!@.codicon-report:before*/.codicon-report.sc-kol-icon-default:before {\n  content: \"\\eb42\";\n}\n\n/*!@.codicon-request-changes:before*/.codicon-request-changes.sc-kol-icon-default:before {\n  content: \"\\eb43\";\n}\n\n/*!@.codicon-rocket:before*/.codicon-rocket.sc-kol-icon-default:before {\n  content: \"\\eb44\";\n}\n\n/*!@.codicon-root-folder-opened:before*/.codicon-root-folder-opened.sc-kol-icon-default:before {\n  content: \"\\eb45\";\n}\n\n/*!@.codicon-root-folder:before*/.codicon-root-folder.sc-kol-icon-default:before {\n  content: \"\\eb46\";\n}\n\n/*!@.codicon-rss:before*/.codicon-rss.sc-kol-icon-default:before {\n  content: \"\\eb47\";\n}\n\n/*!@.codicon-ruby:before*/.codicon-ruby.sc-kol-icon-default:before {\n  content: \"\\eb48\";\n}\n\n/*!@.codicon-save-all:before*/.codicon-save-all.sc-kol-icon-default:before {\n  content: \"\\eb49\";\n}\n\n/*!@.codicon-save-as:before*/.codicon-save-as.sc-kol-icon-default:before {\n  content: \"\\eb4a\";\n}\n\n/*!@.codicon-save:before*/.codicon-save.sc-kol-icon-default:before {\n  content: \"\\eb4b\";\n}\n\n/*!@.codicon-screen-full:before*/.codicon-screen-full.sc-kol-icon-default:before {\n  content: \"\\eb4c\";\n}\n\n/*!@.codicon-screen-normal:before*/.codicon-screen-normal.sc-kol-icon-default:before {\n  content: \"\\eb4d\";\n}\n\n/*!@.codicon-search-stop:before*/.codicon-search-stop.sc-kol-icon-default:before {\n  content: \"\\eb4e\";\n}\n\n/*!@.codicon-server:before*/.codicon-server.sc-kol-icon-default:before {\n  content: \"\\eb50\";\n}\n\n/*!@.codicon-settings-gear:before*/.codicon-settings-gear.sc-kol-icon-default:before {\n  content: \"\\eb51\";\n}\n\n/*!@.codicon-settings:before*/.codicon-settings.sc-kol-icon-default:before {\n  content: \"\\eb52\";\n}\n\n/*!@.codicon-shield:before*/.codicon-shield.sc-kol-icon-default:before {\n  content: \"\\eb53\";\n}\n\n/*!@.codicon-smiley:before*/.codicon-smiley.sc-kol-icon-default:before {\n  content: \"\\eb54\";\n}\n\n/*!@.codicon-sort-precedence:before*/.codicon-sort-precedence.sc-kol-icon-default:before {\n  content: \"\\eb55\";\n}\n\n/*!@.codicon-split-horizontal:before*/.codicon-split-horizontal.sc-kol-icon-default:before {\n  content: \"\\eb56\";\n}\n\n/*!@.codicon-split-vertical:before*/.codicon-split-vertical.sc-kol-icon-default:before {\n  content: \"\\eb57\";\n}\n\n/*!@.codicon-squirrel:before*/.codicon-squirrel.sc-kol-icon-default:before {\n  content: \"\\eb58\";\n}\n\n/*!@.codicon-star-full:before*/.codicon-star-full.sc-kol-icon-default:before {\n  content: \"\\eb59\";\n}\n\n/*!@.codicon-star-half:before*/.codicon-star-half.sc-kol-icon-default:before {\n  content: \"\\eb5a\";\n}\n\n/*!@.codicon-symbol-class:before*/.codicon-symbol-class.sc-kol-icon-default:before {\n  content: \"\\eb5b\";\n}\n\n/*!@.codicon-symbol-color:before*/.codicon-symbol-color.sc-kol-icon-default:before {\n  content: \"\\eb5c\";\n}\n\n/*!@.codicon-symbol-constant:before*/.codicon-symbol-constant.sc-kol-icon-default:before {\n  content: \"\\eb5d\";\n}\n\n/*!@.codicon-symbol-enum-member:before*/.codicon-symbol-enum-member.sc-kol-icon-default:before {\n  content: \"\\eb5e\";\n}\n\n/*!@.codicon-symbol-field:before*/.codicon-symbol-field.sc-kol-icon-default:before {\n  content: \"\\eb5f\";\n}\n\n/*!@.codicon-symbol-file:before*/.codicon-symbol-file.sc-kol-icon-default:before {\n  content: \"\\eb60\";\n}\n\n/*!@.codicon-symbol-interface:before*/.codicon-symbol-interface.sc-kol-icon-default:before {\n  content: \"\\eb61\";\n}\n\n/*!@.codicon-symbol-keyword:before*/.codicon-symbol-keyword.sc-kol-icon-default:before {\n  content: \"\\eb62\";\n}\n\n/*!@.codicon-symbol-misc:before*/.codicon-symbol-misc.sc-kol-icon-default:before {\n  content: \"\\eb63\";\n}\n\n/*!@.codicon-symbol-operator:before*/.codicon-symbol-operator.sc-kol-icon-default:before {\n  content: \"\\eb64\";\n}\n\n/*!@.codicon-symbol-property:before*/.codicon-symbol-property.sc-kol-icon-default:before {\n  content: \"\\eb65\";\n}\n\n/*!@.codicon-wrench:before*/.codicon-wrench.sc-kol-icon-default:before {\n  content: \"\\eb65\";\n}\n\n/*!@.codicon-wrench-subaction:before*/.codicon-wrench-subaction.sc-kol-icon-default:before {\n  content: \"\\eb65\";\n}\n\n/*!@.codicon-symbol-snippet:before*/.codicon-symbol-snippet.sc-kol-icon-default:before {\n  content: \"\\eb66\";\n}\n\n/*!@.codicon-tasklist:before*/.codicon-tasklist.sc-kol-icon-default:before {\n  content: \"\\eb67\";\n}\n\n/*!@.codicon-telescope:before*/.codicon-telescope.sc-kol-icon-default:before {\n  content: \"\\eb68\";\n}\n\n/*!@.codicon-text-size:before*/.codicon-text-size.sc-kol-icon-default:before {\n  content: \"\\eb69\";\n}\n\n/*!@.codicon-three-bars:before*/.codicon-three-bars.sc-kol-icon-default:before {\n  content: \"\\eb6a\";\n}\n\n/*!@.codicon-thumbsdown:before*/.codicon-thumbsdown.sc-kol-icon-default:before {\n  content: \"\\eb6b\";\n}\n\n/*!@.codicon-thumbsup:before*/.codicon-thumbsup.sc-kol-icon-default:before {\n  content: \"\\eb6c\";\n}\n\n/*!@.codicon-tools:before*/.codicon-tools.sc-kol-icon-default:before {\n  content: \"\\eb6d\";\n}\n\n/*!@.codicon-triangle-down:before*/.codicon-triangle-down.sc-kol-icon-default:before {\n  content: \"\\eb6e\";\n}\n\n/*!@.codicon-triangle-left:before*/.codicon-triangle-left.sc-kol-icon-default:before {\n  content: \"\\eb6f\";\n}\n\n/*!@.codicon-triangle-right:before*/.codicon-triangle-right.sc-kol-icon-default:before {\n  content: \"\\eb70\";\n}\n\n/*!@.codicon-triangle-up:before*/.codicon-triangle-up.sc-kol-icon-default:before {\n  content: \"\\eb71\";\n}\n\n/*!@.codicon-twitter:before*/.codicon-twitter.sc-kol-icon-default:before {\n  content: \"\\eb72\";\n}\n\n/*!@.codicon-unfold:before*/.codicon-unfold.sc-kol-icon-default:before {\n  content: \"\\eb73\";\n}\n\n/*!@.codicon-unlock:before*/.codicon-unlock.sc-kol-icon-default:before {\n  content: \"\\eb74\";\n}\n\n/*!@.codicon-unmute:before*/.codicon-unmute.sc-kol-icon-default:before {\n  content: \"\\eb75\";\n}\n\n/*!@.codicon-unverified:before*/.codicon-unverified.sc-kol-icon-default:before {\n  content: \"\\eb76\";\n}\n\n/*!@.codicon-verified:before*/.codicon-verified.sc-kol-icon-default:before {\n  content: \"\\eb77\";\n}\n\n/*!@.codicon-versions:before*/.codicon-versions.sc-kol-icon-default:before {\n  content: \"\\eb78\";\n}\n\n/*!@.codicon-vm-active:before*/.codicon-vm-active.sc-kol-icon-default:before {\n  content: \"\\eb79\";\n}\n\n/*!@.codicon-vm-outline:before*/.codicon-vm-outline.sc-kol-icon-default:before {\n  content: \"\\eb7a\";\n}\n\n/*!@.codicon-vm-running:before*/.codicon-vm-running.sc-kol-icon-default:before {\n  content: \"\\eb7b\";\n}\n\n/*!@.codicon-watch:before*/.codicon-watch.sc-kol-icon-default:before {\n  content: \"\\eb7c\";\n}\n\n/*!@.codicon-whitespace:before*/.codicon-whitespace.sc-kol-icon-default:before {\n  content: \"\\eb7d\";\n}\n\n/*!@.codicon-whole-word:before*/.codicon-whole-word.sc-kol-icon-default:before {\n  content: \"\\eb7e\";\n}\n\n/*!@.codicon-window:before*/.codicon-window.sc-kol-icon-default:before {\n  content: \"\\eb7f\";\n}\n\n/*!@.codicon-word-wrap:before*/.codicon-word-wrap.sc-kol-icon-default:before {\n  content: \"\\eb80\";\n}\n\n/*!@.codicon-zoom-in:before*/.codicon-zoom-in.sc-kol-icon-default:before {\n  content: \"\\eb81\";\n}\n\n/*!@.codicon-zoom-out:before*/.codicon-zoom-out.sc-kol-icon-default:before {\n  content: \"\\eb82\";\n}\n\n/*!@.codicon-list-filter:before*/.codicon-list-filter.sc-kol-icon-default:before {\n  content: \"\\eb83\";\n}\n\n/*!@.codicon-list-flat:before*/.codicon-list-flat.sc-kol-icon-default:before {\n  content: \"\\eb84\";\n}\n\n/*!@.codicon-list-selection:before*/.codicon-list-selection.sc-kol-icon-default:before {\n  content: \"\\eb85\";\n}\n\n/*!@.codicon-selection:before*/.codicon-selection.sc-kol-icon-default:before {\n  content: \"\\eb85\";\n}\n\n/*!@.codicon-list-tree:before*/.codicon-list-tree.sc-kol-icon-default:before {\n  content: \"\\eb86\";\n}\n\n/*!@.codicon-debug-breakpoint-function-unverified:before*/.codicon-debug-breakpoint-function-unverified.sc-kol-icon-default:before {\n  content: \"\\eb87\";\n}\n\n/*!@.codicon-debug-breakpoint-function:before*/.codicon-debug-breakpoint-function.sc-kol-icon-default:before {\n  content: \"\\eb88\";\n}\n\n/*!@.codicon-debug-breakpoint-function-disabled:before*/.codicon-debug-breakpoint-function-disabled.sc-kol-icon-default:before {\n  content: \"\\eb88\";\n}\n\n/*!@.codicon-debug-stackframe-active:before*/.codicon-debug-stackframe-active.sc-kol-icon-default:before {\n  content: \"\\eb89\";\n}\n\n/*!@.codicon-circle-small-filled:before*/.codicon-circle-small-filled.sc-kol-icon-default:before {\n  content: \"\\eb8a\";\n}\n\n/*!@.codicon-debug-stackframe-dot:before*/.codicon-debug-stackframe-dot.sc-kol-icon-default:before {\n  content: \"\\eb8a\";\n}\n\n/*!@.codicon-debug-stackframe:before*/.codicon-debug-stackframe.sc-kol-icon-default:before {\n  content: \"\\eb8b\";\n}\n\n/*!@.codicon-debug-stackframe-focused:before*/.codicon-debug-stackframe-focused.sc-kol-icon-default:before {\n  content: \"\\eb8b\";\n}\n\n/*!@.codicon-debug-breakpoint-unsupported:before*/.codicon-debug-breakpoint-unsupported.sc-kol-icon-default:before {\n  content: \"\\eb8c\";\n}\n\n/*!@.codicon-symbol-string:before*/.codicon-symbol-string.sc-kol-icon-default:before {\n  content: \"\\eb8d\";\n}\n\n/*!@.codicon-debug-reverse-continue:before*/.codicon-debug-reverse-continue.sc-kol-icon-default:before {\n  content: \"\\eb8e\";\n}\n\n/*!@.codicon-debug-step-back:before*/.codicon-debug-step-back.sc-kol-icon-default:before {\n  content: \"\\eb8f\";\n}\n\n/*!@.codicon-debug-restart-frame:before*/.codicon-debug-restart-frame.sc-kol-icon-default:before {\n  content: \"\\eb90\";\n}\n\n/*!@.codicon-debug-alt:before*/.codicon-debug-alt.sc-kol-icon-default:before {\n  content: \"\\eb91\";\n}\n\n/*!@.codicon-call-incoming:before*/.codicon-call-incoming.sc-kol-icon-default:before {\n  content: \"\\eb92\";\n}\n\n/*!@.codicon-call-outgoing:before*/.codicon-call-outgoing.sc-kol-icon-default:before {\n  content: \"\\eb93\";\n}\n\n/*!@.codicon-menu:before*/.codicon-menu.sc-kol-icon-default:before {\n  content: \"\\eb94\";\n}\n\n/*!@.codicon-expand-all:before*/.codicon-expand-all.sc-kol-icon-default:before {\n  content: \"\\eb95\";\n}\n\n/*!@.codicon-feedback:before*/.codicon-feedback.sc-kol-icon-default:before {\n  content: \"\\eb96\";\n}\n\n/*!@.codicon-group-by-ref-type:before*/.codicon-group-by-ref-type.sc-kol-icon-default:before {\n  content: \"\\eb97\";\n}\n\n/*!@.codicon-ungroup-by-ref-type:before*/.codicon-ungroup-by-ref-type.sc-kol-icon-default:before {\n  content: \"\\eb98\";\n}\n\n/*!@.codicon-account:before*/.codicon-account.sc-kol-icon-default:before {\n  content: \"\\eb99\";\n}\n\n/*!@.codicon-bell-dot:before*/.codicon-bell-dot.sc-kol-icon-default:before {\n  content: \"\\eb9a\";\n}\n\n/*!@.codicon-debug-console:before*/.codicon-debug-console.sc-kol-icon-default:before {\n  content: \"\\eb9b\";\n}\n\n/*!@.codicon-library:before*/.codicon-library.sc-kol-icon-default:before {\n  content: \"\\eb9c\";\n}\n\n/*!@.codicon-output:before*/.codicon-output.sc-kol-icon-default:before {\n  content: \"\\eb9d\";\n}\n\n/*!@.codicon-run-all:before*/.codicon-run-all.sc-kol-icon-default:before {\n  content: \"\\eb9e\";\n}\n\n/*!@.codicon-sync-ignored:before*/.codicon-sync-ignored.sc-kol-icon-default:before {\n  content: \"\\eb9f\";\n}\n\n/*!@.codicon-pinned:before*/.codicon-pinned.sc-kol-icon-default:before {\n  content: \"\\eba0\";\n}\n\n/*!@.codicon-github-inverted:before*/.codicon-github-inverted.sc-kol-icon-default:before {\n  content: \"\\eba1\";\n}\n\n/*!@.codicon-server-process:before*/.codicon-server-process.sc-kol-icon-default:before {\n  content: \"\\eba2\";\n}\n\n/*!@.codicon-server-environment:before*/.codicon-server-environment.sc-kol-icon-default:before {\n  content: \"\\eba3\";\n}\n\n/*!@.codicon-pass:before*/.codicon-pass.sc-kol-icon-default:before {\n  content: \"\\eba4\";\n}\n\n/*!@.codicon-issue-closed:before*/.codicon-issue-closed.sc-kol-icon-default:before {\n  content: \"\\eba4\";\n}\n\n/*!@.codicon-stop-circle:before*/.codicon-stop-circle.sc-kol-icon-default:before {\n  content: \"\\eba5\";\n}\n\n/*!@.codicon-play-circle:before*/.codicon-play-circle.sc-kol-icon-default:before {\n  content: \"\\eba6\";\n}\n\n/*!@.codicon-record:before*/.codicon-record.sc-kol-icon-default:before {\n  content: \"\\eba7\";\n}\n\n/*!@.codicon-debug-alt-small:before*/.codicon-debug-alt-small.sc-kol-icon-default:before {\n  content: \"\\eba8\";\n}\n\n/*!@.codicon-vm-connect:before*/.codicon-vm-connect.sc-kol-icon-default:before {\n  content: \"\\eba9\";\n}\n\n/*!@.codicon-cloud:before*/.codicon-cloud.sc-kol-icon-default:before {\n  content: \"\\ebaa\";\n}\n\n/*!@.codicon-merge:before*/.codicon-merge.sc-kol-icon-default:before {\n  content: \"\\ebab\";\n}\n\n/*!@.codicon-export:before*/.codicon-export.sc-kol-icon-default:before {\n  content: \"\\ebac\";\n}\n\n/*!@.codicon-graph-left:before*/.codicon-graph-left.sc-kol-icon-default:before {\n  content: \"\\ebad\";\n}\n\n/*!@.codicon-magnet:before*/.codicon-magnet.sc-kol-icon-default:before {\n  content: \"\\ebae\";\n}\n\n/*!@.codicon-notebook:before*/.codicon-notebook.sc-kol-icon-default:before {\n  content: \"\\ebaf\";\n}\n\n/*!@.codicon-redo:before*/.codicon-redo.sc-kol-icon-default:before {\n  content: \"\\ebb0\";\n}\n\n/*!@.codicon-check-all:before*/.codicon-check-all.sc-kol-icon-default:before {\n  content: \"\\ebb1\";\n}\n\n/*!@.codicon-pinned-dirty:before*/.codicon-pinned-dirty.sc-kol-icon-default:before {\n  content: \"\\ebb2\";\n}\n\n/*!@.codicon-pass-filled:before*/.codicon-pass-filled.sc-kol-icon-default:before {\n  content: \"\\ebb3\";\n}\n\n/*!@.codicon-circle-large-filled:before*/.codicon-circle-large-filled.sc-kol-icon-default:before {\n  content: \"\\ebb4\";\n}\n\n/*!@.codicon-circle-large-outline:before*/.codicon-circle-large-outline.sc-kol-icon-default:before {\n  content: \"\\ebb5\";\n}\n\n/*!@.codicon-combine:before*/.codicon-combine.sc-kol-icon-default:before {\n  content: \"\\ebb6\";\n}\n\n/*!@.codicon-gather:before*/.codicon-gather.sc-kol-icon-default:before {\n  content: \"\\ebb6\";\n}\n\n/*!@.codicon-table:before*/.codicon-table.sc-kol-icon-default:before {\n  content: \"\\ebb7\";\n}\n\n/*!@.codicon-variable-group:before*/.codicon-variable-group.sc-kol-icon-default:before {\n  content: \"\\ebb8\";\n}\n\n/*!@.codicon-type-hierarchy:before*/.codicon-type-hierarchy.sc-kol-icon-default:before {\n  content: \"\\ebb9\";\n}\n\n/*!@.codicon-type-hierarchy-sub:before*/.codicon-type-hierarchy-sub.sc-kol-icon-default:before {\n  content: \"\\ebba\";\n}\n\n/*!@.codicon-type-hierarchy-super:before*/.codicon-type-hierarchy-super.sc-kol-icon-default:before {\n  content: \"\\ebbb\";\n}\n\n/*!@.codicon-git-pull-request-create:before*/.codicon-git-pull-request-create.sc-kol-icon-default:before {\n  content: \"\\ebbc\";\n}\n\n/*!@.codicon-run-above:before*/.codicon-run-above.sc-kol-icon-default:before {\n  content: \"\\ebbd\";\n}\n\n/*!@.codicon-run-below:before*/.codicon-run-below.sc-kol-icon-default:before {\n  content: \"\\ebbe\";\n}\n\n/*!@.codicon-notebook-template:before*/.codicon-notebook-template.sc-kol-icon-default:before {\n  content: \"\\ebbf\";\n}\n\n/*!@.codicon-debug-rerun:before*/.codicon-debug-rerun.sc-kol-icon-default:before {\n  content: \"\\ebc0\";\n}\n\n/*!@.codicon-workspace-trusted:before*/.codicon-workspace-trusted.sc-kol-icon-default:before {\n  content: \"\\ebc1\";\n}\n\n/*!@.codicon-workspace-untrusted:before*/.codicon-workspace-untrusted.sc-kol-icon-default:before {\n  content: \"\\ebc2\";\n}\n\n/*!@.codicon-workspace-unknown:before*/.codicon-workspace-unknown.sc-kol-icon-default:before {\n  content: \"\\ebc3\";\n}\n\n/*!@.codicon-terminal-cmd:before*/.codicon-terminal-cmd.sc-kol-icon-default:before {\n  content: \"\\ebc4\";\n}\n\n/*!@.codicon-terminal-debian:before*/.codicon-terminal-debian.sc-kol-icon-default:before {\n  content: \"\\ebc5\";\n}\n\n/*!@.codicon-terminal-linux:before*/.codicon-terminal-linux.sc-kol-icon-default:before {\n  content: \"\\ebc6\";\n}\n\n/*!@.codicon-terminal-powershell:before*/.codicon-terminal-powershell.sc-kol-icon-default:before {\n  content: \"\\ebc7\";\n}\n\n/*!@.codicon-terminal-tmux:before*/.codicon-terminal-tmux.sc-kol-icon-default:before {\n  content: \"\\ebc8\";\n}\n\n/*!@.codicon-terminal-ubuntu:before*/.codicon-terminal-ubuntu.sc-kol-icon-default:before {\n  content: \"\\ebc9\";\n}\n\n/*!@.codicon-terminal-bash:before*/.codicon-terminal-bash.sc-kol-icon-default:before {\n  content: \"\\ebca\";\n}\n\n/*!@.codicon-arrow-swap:before*/.codicon-arrow-swap.sc-kol-icon-default:before {\n  content: \"\\ebcb\";\n}\n\n/*!@.codicon-copy:before*/.codicon-copy.sc-kol-icon-default:before {\n  content: \"\\ebcc\";\n}\n\n/*!@.codicon-person-add:before*/.codicon-person-add.sc-kol-icon-default:before {\n  content: \"\\ebcd\";\n}\n\n/*!@.codicon-filter-filled:before*/.codicon-filter-filled.sc-kol-icon-default:before {\n  content: \"\\ebce\";\n}\n\n/*!@.codicon-wand:before*/.codicon-wand.sc-kol-icon-default:before {\n  content: \"\\ebcf\";\n}\n\n/*!@.codicon-debug-line-by-line:before*/.codicon-debug-line-by-line.sc-kol-icon-default:before {\n  content: \"\\ebd0\";\n}\n\n/*!@.codicon-inspect:before*/.codicon-inspect.sc-kol-icon-default:before {\n  content: \"\\ebd1\";\n}\n\n/*!@.codicon-layers:before*/.codicon-layers.sc-kol-icon-default:before {\n  content: \"\\ebd2\";\n}\n\n/*!@.codicon-layers-dot:before*/.codicon-layers-dot.sc-kol-icon-default:before {\n  content: \"\\ebd3\";\n}\n\n/*!@.codicon-layers-active:before*/.codicon-layers-active.sc-kol-icon-default:before {\n  content: \"\\ebd4\";\n}\n\n/*!@.codicon-compass:before*/.codicon-compass.sc-kol-icon-default:before {\n  content: \"\\ebd5\";\n}\n\n/*!@.codicon-compass-dot:before*/.codicon-compass-dot.sc-kol-icon-default:before {\n  content: \"\\ebd6\";\n}\n\n/*!@.codicon-compass-active:before*/.codicon-compass-active.sc-kol-icon-default:before {\n  content: \"\\ebd7\";\n}\n\n/*!@.codicon-azure:before*/.codicon-azure.sc-kol-icon-default:before {\n  content: \"\\ebd8\";\n}\n\n/*!@.codicon-issue-draft:before*/.codicon-issue-draft.sc-kol-icon-default:before {\n  content: \"\\ebd9\";\n}\n\n/*!@.codicon-git-pull-request-closed:before*/.codicon-git-pull-request-closed.sc-kol-icon-default:before {\n  content: \"\\ebda\";\n}\n\n/*!@.codicon-git-pull-request-draft:before*/.codicon-git-pull-request-draft.sc-kol-icon-default:before {\n  content: \"\\ebdb\";\n}\n\n/*!@.codicon-debug-all:before*/.codicon-debug-all.sc-kol-icon-default:before {\n  content: \"\\ebdc\";\n}\n\n/*!@.codicon-debug-coverage:before*/.codicon-debug-coverage.sc-kol-icon-default:before {\n  content: \"\\ebdd\";\n}\n\n/*!@.codicon-run-errors:before*/.codicon-run-errors.sc-kol-icon-default:before {\n  content: \"\\ebde\";\n}\n\n/*!@.codicon-folder-library:before*/.codicon-folder-library.sc-kol-icon-default:before {\n  content: \"\\ebdf\";\n}\n\n/*!@.codicon-debug-continue-small:before*/.codicon-debug-continue-small.sc-kol-icon-default:before {\n  content: \"\\ebe0\";\n}\n\n/*!@.codicon-beaker-stop:before*/.codicon-beaker-stop.sc-kol-icon-default:before {\n  content: \"\\ebe1\";\n}\n\n/*!@.codicon-graph-line:before*/.codicon-graph-line.sc-kol-icon-default:before {\n  content: \"\\ebe2\";\n}\n\n/*!@.codicon-graph-scatter:before*/.codicon-graph-scatter.sc-kol-icon-default:before {\n  content: \"\\ebe3\";\n}\n\n/*!@.codicon-pie-chart:before*/.codicon-pie-chart.sc-kol-icon-default:before {\n  content: \"\\ebe4\";\n}\n\n/*!@.codicon-bracket:before*/.codicon-bracket.sc-kol-icon-default:before {\n  content: \"\\eb0f\";\n}\n\n/*!@.codicon-bracket-dot:before*/.codicon-bracket-dot.sc-kol-icon-default:before {\n  content: \"\\ebe5\";\n}\n\n/*!@.codicon-bracket-error:before*/.codicon-bracket-error.sc-kol-icon-default:before {\n  content: \"\\ebe6\";\n}\n\n/*!@.codicon-lock-small:before*/.codicon-lock-small.sc-kol-icon-default:before {\n  content: \"\\ebe7\";\n}\n\n/*!@.codicon-azure-devops:before*/.codicon-azure-devops.sc-kol-icon-default:before {\n  content: \"\\ebe8\";\n}\n\n/*!@.codicon-verified-filled:before*/.codicon-verified-filled.sc-kol-icon-default:before {\n  content: \"\\ebe9\";\n}\n\n/*!@.codicon-newline:before*/.codicon-newline.sc-kol-icon-default:before {\n  content: \"\\ebea\";\n}\n\n/*!@.codicon-layout:before*/.codicon-layout.sc-kol-icon-default:before {\n  content: \"\\ebeb\";\n}\n\n/*!@.codicon-layout-activitybar-left:before*/.codicon-layout-activitybar-left.sc-kol-icon-default:before {\n  content: \"\\ebec\";\n}\n\n/*!@.codicon-layout-activitybar-right:before*/.codicon-layout-activitybar-right.sc-kol-icon-default:before {\n  content: \"\\ebed\";\n}\n\n/*!@.codicon-layout-panel-left:before*/.codicon-layout-panel-left.sc-kol-icon-default:before {\n  content: \"\\ebee\";\n}\n\n/*!@.codicon-layout-panel-center:before*/.codicon-layout-panel-center.sc-kol-icon-default:before {\n  content: \"\\ebef\";\n}\n\n/*!@.codicon-layout-panel-justify:before*/.codicon-layout-panel-justify.sc-kol-icon-default:before {\n  content: \"\\ebf0\";\n}\n\n/*!@.codicon-layout-panel-right:before*/.codicon-layout-panel-right.sc-kol-icon-default:before {\n  content: \"\\ebf1\";\n}\n\n/*!@.codicon-layout-panel:before*/.codicon-layout-panel.sc-kol-icon-default:before {\n  content: \"\\ebf2\";\n}\n\n/*!@.codicon-layout-sidebar-left:before*/.codicon-layout-sidebar-left.sc-kol-icon-default:before {\n  content: \"\\ebf3\";\n}\n\n/*!@.codicon-layout-sidebar-right:before*/.codicon-layout-sidebar-right.sc-kol-icon-default:before {\n  content: \"\\ebf4\";\n}\n\n/*!@.codicon-layout-statusbar:before*/.codicon-layout-statusbar.sc-kol-icon-default:before {\n  content: \"\\ebf5\";\n}\n\n/*!@.codicon-layout-menubar:before*/.codicon-layout-menubar.sc-kol-icon-default:before {\n  content: \"\\ebf6\";\n}\n\n/*!@.codicon-layout-centered:before*/.codicon-layout-centered.sc-kol-icon-default:before {\n  content: \"\\ebf7\";\n}\n\n/*!@.codicon-target:before*/.codicon-target.sc-kol-icon-default:before {\n  content: \"\\ebf8\";\n}\n\n/*!@.codicon-indent:before*/.codicon-indent.sc-kol-icon-default:before {\n  content: \"\\ebf9\";\n}\n\n/*!@.codicon-record-small:before*/.codicon-record-small.sc-kol-icon-default:before {\n  content: \"\\ebfa\";\n}\n\n/*!@.codicon-error-small:before*/.codicon-error-small.sc-kol-icon-default:before {\n  content: \"\\ebfb\";\n}\n\n/*!@.codicon-arrow-circle-down:before*/.codicon-arrow-circle-down.sc-kol-icon-default:before {\n  content: \"\\ebfc\";\n}\n\n/*!@.codicon-arrow-circle-left:before*/.codicon-arrow-circle-left.sc-kol-icon-default:before {\n  content: \"\\ebfd\";\n}\n\n/*!@.codicon-arrow-circle-right:before*/.codicon-arrow-circle-right.sc-kol-icon-default:before {\n  content: \"\\ebfe\";\n}\n\n/*!@.codicon-arrow-circle-up:before*/.codicon-arrow-circle-up.sc-kol-icon-default:before {\n  content: \"\\ebff\";\n}\n\n/*!@.codicon-layout-sidebar-right-off:before*/.codicon-layout-sidebar-right-off.sc-kol-icon-default:before {\n  content: \"\\ec00\";\n}\n\n/*!@.codicon-layout-panel-off:before*/.codicon-layout-panel-off.sc-kol-icon-default:before {\n  content: \"\\ec01\";\n}\n\n/*!@.codicon-layout-sidebar-left-off:before*/.codicon-layout-sidebar-left-off.sc-kol-icon-default:before {\n  content: \"\\ec02\";\n}\n\n/*!@.codicon-blank:before*/.codicon-blank.sc-kol-icon-default:before {\n  content: \"\\ec03\";\n}\n\n/*!@.codicon-heart-filled:before*/.codicon-heart-filled.sc-kol-icon-default:before {\n  content: \"\\ec04\";\n}\n\n/*!@.codicon-map:before*/.codicon-map.sc-kol-icon-default:before {\n  content: \"\\ec05\";\n}\n\n/*!@.codicon-map-filled:before*/.codicon-map-filled.sc-kol-icon-default:before {\n  content: \"\\ec06\";\n}\n\n/*!@.codicon-circle-small:before*/.codicon-circle-small.sc-kol-icon-default:before {\n  content: \"\\ec07\";\n}\n\n/*!@.codicon-bell-slash:before*/.codicon-bell-slash.sc-kol-icon-default:before {\n  content: \"\\ec08\";\n}\n\n/*!@.codicon-bell-slash-dot:before*/.codicon-bell-slash-dot.sc-kol-icon-default:before {\n  content: \"\\ec09\";\n}\n\n/*!@.codicon-comment-unresolved:before*/.codicon-comment-unresolved.sc-kol-icon-default:before {\n  content: \"\\ec0a\";\n}\n\n/*!@.codicon-git-pull-request-go-to-changes:before*/.codicon-git-pull-request-go-to-changes.sc-kol-icon-default:before {\n  content: \"\\ec0b\";\n}\n\n/*!@.codicon-git-pull-request-new-changes:before*/.codicon-git-pull-request-new-changes.sc-kol-icon-default:before {\n  content: \"\\ec0c\";\n}\n\n@layer kol-component {\n  .sc-kol-icon-default-h {\n    color: inherit;\n    display: contents;\n    height: 1em;\n    line-height: inherit;\n    width: 1em;\n  }\n  .sc-kol-icon-default-h > i {\n    height: 1em;\n    width: 1em;\n  }\n  \n  .sc-kol-icon-default-h > i,\n  .sc-kol-icon-default-h > i:before {\n    font-size: inherit !important;\n  }\n}";
 var KolIconDefaultStyle0 = defaultStyleCss$y;
 
 class KolIcon {
@@ -14077,7 +14252,7 @@ class KolIcon {
     }
     render() {
         const ariaShow = this.state._label.length > 0;
-        return (hAsync(Host, { exportparts: "icon" }, hAsync("i", { "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
+        return (hAsync(Host, { key: 'bb1b08e5ef77c5b3f47b40cf5e573127892797c7', exportparts: "icon" }, hAsync("i", { key: '4b6922c75b794b9bd1f24a922f4410c1fed0d242', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
     }
     validateIcons(value) {
         watchString(this, '_icons', value, {
@@ -14114,7 +14289,7 @@ class KolIcon {
     }; }
 }
 
-const defaultStyleCss$x = "@layer kol-component {\n\t.sc-kol-image-default-h {\n\t\tdisplay: inline-block;\n\t}\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}";
+const defaultStyleCss$x = "@layer kol-component {\n  .sc-kol-image-default-h {\n    display: inline-block;\n  }\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n}";
 var KolImageDefaultStyle0 = defaultStyleCss$x;
 
 class KolImage {
@@ -14158,7 +14333,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: 'a274fbeb038347870980b95c3bc4f7e0c72b9403' }, hAsync("img", { key: '4188ccb1e37d89b469efdd50c8a9d2039cb3d05b', 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"],
@@ -14187,7 +14362,7 @@ class KolImage {
     }; }
 }
 
-const defaultStyleCss$w = "@layer kol-global {\n\t.sc-kol-indented-text-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-indented-text-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-indented-text-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-indented-text-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-indented-text-default-h > div {\n\t\tborder-left-style: solid;\n\t\tpadding-left: 0.5em;\n\t}\n}";
+const defaultStyleCss$w = "@layer kol-global {\n  .sc-kol-indented-text-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-indented-text-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-indented-text-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-indented-text-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .sc-kol-indented-text-default-h > div {\n    border-left-style: solid;\n    padding-left: 0.5em;\n  }\n}";
 var KolIndentedTextDefaultStyle0 = defaultStyleCss$w;
 
 class KolIndentedText {
@@ -14196,7 +14371,7 @@ class KolIndentedText {
         this.state = {};
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", null, hAsync("slot", null))));
+        return (hAsync(Host, { key: '62a2cc3d0c022eb93fd9661480f129c715f4a434' }, hAsync("div", { key: '32d7c6d57df2684bda333eda04976aded7cd0f4d' }, hAsync("slot", { key: '4db4d1cabe55b45220d1eb42f881ec687df8d6e7' }))));
     }
     static get style() { return {
         default: KolIndentedTextDefaultStyle0
@@ -14255,22 +14430,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: '425833ef3b83f11817c250db934eb4eead3fab32', class: {
                 disabled: this._disabled === true,
                 error: hasError === true,
                 'read-only': this._readOnly === true,
                 required: this._required === true,
                 touched: this._touched === true,
                 'hidden-error': this._hideError === true,
-            } }, hAsync("label", { class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { class: "input-label-span" }, hAsync("slot", { name: "label" }))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { class: {
+            } }, hAsync("label", { key: '47f75e963ba13cc58644feb3214dc65c280cbb72', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: '9021927b01061be0d6c9da8e19e2077ad4921036', class: "input-label-span" }, hAsync("slot", { key: '02a42734edcee2dae5e813ee29bcb8069b475625', name: "label" }))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '6e717081b7779d4657db57bfeac0c4d5e240b1c8', class: {
                 input: true,
                 'icon-left': typeof ((_a = this._icons) === null || _a === void 0 ? void 0 : _a.left) === 'object',
                 'icon-right': typeof ((_b = this._icons) === null || _b === void 0 ? void 0 : _b.right) === 'object',
-            } }, ((_c = this._icons) === null || _c === void 0 ? void 0 : _c.left) && (hAsync("kol-icon", { _label: "", _icons: ((_d = this._icons) === null || _d === void 0 ? void 0 : _d.left).icon, style: this.getIconStyles((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) })), hAsync("div", { ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync("kol-button-wc", { _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) && (hAsync("kol-icon", { _label: "", _icons: ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.right).icon, style: this.getIconStyles((_h = this._icons) === null || _h === void 0 ? void 0 : _h.right) }))), useTooltopInsteadOfLabel && (hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), hasError && hAsync(FormFieldMsg, { _alert: this._alert, _hideError: this._hideError, _error: this._error, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", null, translate('kol-characters'))))));
+            } }, ((_c = this._icons) === null || _c === void 0 ? void 0 : _c.left) && (hAsync("kol-icon", { _label: "", _icons: ((_d = this._icons) === null || _d === void 0 ? void 0 : _d.left).icon, style: this.getIconStyles((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) })), hAsync("div", { key: 'b96b0e1ef626d6f8c13532b0e14da8f32f44f450', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync("kol-button-wc", { _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) && (hAsync("kol-icon", { _label: "", _icons: ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.right).icon, style: this.getIconStyles((_h = this._icons) === null || _h === void 0 ? void 0 : _h.right) }))), useTooltopInsteadOfLabel && (hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), hasError && hAsync(FormFieldMsg, { _alert: this._alert, _hideError: this._hideError, _error: this._error, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", null, translate('kol-characters'))))));
     }
     get host() { return getElement(this); }
     static get cmpMeta() { return {
@@ -14636,7 +14811,7 @@ class InputCheckboxController extends InputCheckboxRadioController {
     }
 }
 
-const defaultStyleCss$v = "@layer kol-global {\n\t.sc-kol-input-checkbox-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-checkbox-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-checkbox-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-checkbox-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tkol-input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tjustify-items: left;\n\t}\n\n\tkol-input.default,\n\tkol-input.switch {\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\tkol-input .input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\torder: 1;\n\t}\n\n\tkol-input .input div {\n\t\tdisplay: inline-flex;\n\t}\n\n\tkol-input .input input {\n\t\tmargin: 0;\n\t}\n\n\tkol-input label {\n\t\torder: 2;\n\t}\n\n\tkol-input .hint,\n\tkol-input.error > kol-alert {\n\t\tgrid-column: span 2;\n\t}\n\n\tkol-input kol-alert.error {\n\t\torder: 3;\n\t}\n\n\tkol-input .hint {\n\t\torder: 4;\n\t}\n\n\tinput {\n\t\tborder-style: solid;\n\t\tborder-width: 2px;\n\t\tline-height: 24px;\n\t}\n\n\tinput[type='checkbox'] {\n\t\tappearance: none;\n\t\tbackground-color: #fff;\n\t\tcursor: pointer;\n\t\ttransition: 0.5s;\n\t}\n\n\tinput[type='checkbox']:before {\n\t\tcontent: '';\n\t\tcursor: pointer;\n\t}\n\n\tinput[type='checkbox']:disabled:before {\n\t\tcursor: not-allowed;\n\t}\n\n\tkol-input.required .tooltip-content .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.button {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--a11y-min-size) auto;\n\t\tgrid-template-areas: 'error error' 'input label' 'hint hint';\n\t}\n\t.button:focus-within {\n\t\t\n\t\tcursor: inherit;\n\t\toutline-color: black;\n\t\toutline-style: solid;\n\t}\n\n\t.button > .error {\n\t\tgrid-area: error;\n\t}\n\n\t.button > label {\n\t\tgrid-area: label;\n\t}\n\n\t.button > .input {\n\t\tgrid-area: input;\n\t}\n\n\t.button > .hint {\n\t\tgrid-area: hint;\n\t}\n\n\t.button .icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t}\n}\n\n@layer kol-component {\n\t.default {\n\t\t& .checkbox-container {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\theight: var(--a11y-min-size);\n\t\t\tjustify-content: center;\n\t\t\tposition: relative;\n\t\t\twidth: var(--a11y-min-size);\n\t\t}\n\n\t\t& .icon {\n\t\t\tdisplay: block;\n\t\t\tinset: auto;\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t}\n\t\t&:not(.checked):not(.indeterminate) .icon::part(icon) {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t& .checkbox-input-element {\n\t\t\twidth: 22px;\n\t\t\theight: 22px;\n\t\t}\n\t}\n}\n\n@layer kol-component {\n\t.switch .input {\n\t\tposition: relative;\n\t}\n\n\t.switch input[type='checkbox'] {\n\t\tdisplay: inline-block;\n\t\theight: 1.7em;\n\t\tmin-width: 3.2em;\n\t\tposition: relative;\n\t\twidth: 3.2em;\n\t}\n\n\t.switch input[type='checkbox']::before {\n\t\tbackground-color: #000;\n\t\theight: 1.2em;\n\t\tleft: calc(0.25em - 2px);\n\t\ttop: calc(0.25em - 2px);\n\t\tposition: absolute;\n\t\ttransition: 0.5s;\n\t\twidth: 1.2em;\n\t}\n\n\t.switch input[type='checkbox']:checked::before {\n\t\ttransform: translateX(1.5em);\n\t}\n\n\t.switch input[type='checkbox']:indeterminate::before {\n\t\ttransform: translateX(0.75em);\n\t}\n\n\t.switch .icon {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 1.2em;\n\t\theight: 1.2em;\n\t\tposition: absolute;\n\t\tz-index: 1;\n\t\ttop: 50%;\n\t\tleft: 4px;\n\t\ttransform: translate(0, -50%);\n\t\ttransition: 0.5s;\n\t\tcolor: #000;\n\t}\n\n\t.switch.checked .icon {\n\t\ttransform: translate(1.5em, -50%);\n\t}\n\n\t.switch.indeterminate .icon {\n\t\ttransform: translate(0.75em, -50%);\n\t}\n}";
+const defaultStyleCss$v = "@layer kol-global {\n  .sc-kol-input-checkbox-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-checkbox-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-checkbox-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-checkbox-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  label {\n    cursor: pointer;\n  }\n  kol-input {\n    align-items: center;\n    display: grid;\n    justify-items: left;\n  }\n  kol-input.default,\n  kol-input.switch {\n    grid-template-columns: auto 1fr;\n  }\n  kol-input .input {\n    align-items: center;\n    display: grid;\n    order: 1;\n  }\n  kol-input .input div {\n    display: inline-flex;\n  }\n  kol-input .input input {\n    margin: 0;\n  }\n  kol-input label {\n    order: 2;\n  }\n  kol-input .hint,\n  kol-input.error > kol-alert {\n    grid-column: span 2;\n  }\n  kol-input kol-alert.error {\n    order: 3;\n  }\n  kol-input .hint {\n    order: 4;\n  }\n  input {\n    border-style: solid;\n    border-width: 2px;\n    line-height: 24px;\n  }\n  input[type=checkbox] {\n    appearance: none;\n    background-color: #fff;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  input[type=checkbox]:before {\n    content: \"\";\n    cursor: pointer;\n  }\n  input[type=checkbox]:disabled:before {\n    cursor: not-allowed;\n  }\n  kol-input.required .tooltip-content .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .button {\n    display: grid;\n    grid-template-columns: var(--a11y-min-size) auto;\n    grid-template-areas: \"error error\" \"input label\" \"hint hint\";\n  }\n  .button:focus-within {\n    \n    cursor: inherit;\n    outline-color: black;\n    outline-style: solid;\n  }\n  .button > .error {\n    grid-area: error;\n  }\n  .button > label {\n    grid-area: label;\n  }\n  .button > .input {\n    grid-area: input;\n  }\n  .button > .hint {\n    grid-area: hint;\n  }\n  .button .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n  }\n}\n@layer kol-component {\n  .default .checkbox-container {\n    align-items: center;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .default .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .default:not(.checked):not(.indeterminate) .icon::part(icon) {\n    display: none;\n  }\n  .default .checkbox-input-element {\n    width: 22px;\n    height: 22px;\n  }\n}\n@layer kol-component {\n  .switch .input {\n    position: relative;\n  }\n  .switch input[type=checkbox] {\n    display: inline-block;\n    height: 1.7em;\n    min-width: 3.2em;\n    position: relative;\n    width: 3.2em;\n  }\n  .switch input[type=checkbox]::before {\n    background-color: #000;\n    height: 1.2em;\n    left: calc(0.25em - 2px);\n    top: calc(0.25em - 2px);\n    position: absolute;\n    transition: 0.5s;\n    width: 1.2em;\n  }\n  .switch input[type=checkbox]:checked::before {\n    transform: translateX(1.5em);\n  }\n  .switch input[type=checkbox]:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .switch .icon {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.2em;\n    height: 1.2em;\n    position: absolute;\n    z-index: 1;\n    top: 50%;\n    left: 4px;\n    transform: translate(0, -50%);\n    transition: 0.5s;\n    color: #000;\n  }\n  .switch.checked .icon {\n    transform: translate(1.5em, -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(0.75em, -50%);\n  }\n}";
 var KolInputCheckboxDefaultStyle0 = defaultStyleCss$v;
 
 class KolInputCheckbox {
@@ -14647,13 +14822,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: '56ef44c372e9db32924bc063271cdb98f7f2a20b' }, hAsync("kol-input", { key: '941305486070ba741354685a7d81c98f76000c0b', class: {
                 checkbox: true,
                 [this.state._variant]: true,
                 'hide-label': !!this.state._hideLabel,
                 checked: this.state._checked,
                 indeterminate: this.state._indeterminate,
-            }, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("label", { slot: "input", class: "checkbox-container" }, hAsync("kol-icon", { class: "icon", _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
+            }, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '0738e9e5b169b9949cc37d644a9d198e24e2dd8b', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: 'fe7c53d763f60daff4e93ad3872885046eefbff8', slot: "input", class: "checkbox-container" }, hAsync("kol-icon", { key: 'e4162872a4b22767fcf23a10408c449d3a14f9a0', 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: '0e8431b50541dea30303538df3ddef749de6ee1a', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -14707,7 +14882,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);
@@ -14900,7 +15075,7 @@ class InputColorController extends InputIconController {
     }
 }
 
-const defaultStyleCss$u = "@layer kol-global {\n\t.sc-kol-input-color-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-color-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-color-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-color-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n}";
+const defaultStyleCss$u = "@layer kol-global {\n  .sc-kol-input-color-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-color-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-color-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-color-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  kol-input {\n    display: grid;\n  }\n  kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  div.input {\n    cursor: pointer;\n  }\n}";
 var KolInputColorDefaultStyle0 = defaultStyleCss$u;
 
 class KolInputColor {
@@ -14912,10 +15087,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: 'da9f665f5cd732043ff9d59dd54645618cb5302e' }, hAsync("kol-input", { key: 'fd1ff2ebda435baf24557b0f489333df3ad8203d', class: {
                 color: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'ba3caa788ca9e9dbd229b18c5584fea4e896a729', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '703c629c355168c8608cb59eef9fb53af7803ac1', slot: "input" }, hAsync("input", Object.assign({ key: '5c73550f4e6a43929920dd774d2a6048d8724d31', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -14950,7 +15125,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);
@@ -15206,7 +15381,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
 InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
 InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
 
-const defaultStyleCss$t = "@layer kol-global {\n\t.sc-kol-input-date-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-date-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-date-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-date-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tkol-input-number {\n\t\tdisplay: block;\n\t}\n}";
+const defaultStyleCss$t = "@layer kol-global {\n  .sc-kol-input-date-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-date-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-date-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-date-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  kol-input {\n    display: grid;\n  }\n  kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  kol-input-number {\n    display: block;\n  }\n}";
 var KolInputDateDefaultStyle0 = defaultStyleCss$t;
 
 class KolInputDate {
@@ -15218,10 +15393,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: '5b901611eaa015b1442930429ff2dd22af646e44', class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: '8317b0bfe654ccfe1fc0af15bee6b52d512a1c0c', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'e35aafc82cc048159767b669fc1a9794e2edbc94', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '6e4866d0dfbe7fe2eab78bed8577145c785b0b59', slot: "input" }, hAsync("input", Object.assign({ key: '95ea0b652f95887cb4eb30e832de1929fc745120', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -15275,7 +15450,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);
@@ -15534,7 +15709,7 @@ class InputEmailController extends InputTextEmailController {
     }
 }
 
-const defaultStyleCss$s = "@layer kol-global {\n\t.sc-kol-input-email-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-email-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-email-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-email-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n}";
+const defaultStyleCss$s = "@layer kol-global {\n  .sc-kol-input-email-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-email-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-email-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-email-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  kol-input {\n    display: grid;\n  }\n  kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}";
 var KolInputEmailDefaultStyle0 = defaultStyleCss$s;
 
 class KolInputEmail {
@@ -15546,9 +15721,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: '17351455294a9fd33dd4f767e925691203b5bcfe', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+            } }, hAsync("kol-input", { key: 'bf17a3ae4af49ca98d13faa0c4587c1ac045ae50', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e2c3622e27997288631f7da599a131b490612278', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '3156021bac4ea17856ee19cc40a5ccdc6a962597', slot: "input" }, hAsync("input", Object.assign({ key: '4178cba968337df4bc30d59268c3dc4f5b28afd8', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -15604,7 +15779,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);
@@ -15790,7 +15965,7 @@ class InputFileController extends InputIconController {
     }
 }
 
-const defaultStyleCss$r = "@layer kol-global {\n\t.sc-kol-input-file-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-file-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-file-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-file-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tlabel input[type='file']::-webkit-file-upload-button {\n\t\tdisplay: none;\n\t}\n\n\tlabel input[type='file']:before {\n\t\tcontent: 'Datei auswählen';\n\t}\n\n\tlabel input[multiple]:before {\n\t\tcontent: 'Dateien auswählen';\n\t}\n\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n}";
+const defaultStyleCss$r = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-input-file-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-file-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-file-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-file-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  kol-input {\n    display: grid;\n  }\n  kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  label input[type=file]::-webkit-file-upload-button {\n    display: none;\n  }\n  label input[type=file]:before {\n    content: \"Datei auswählen\";\n  }\n  label input[multiple]:before {\n    content: \"Dateien auswählen\";\n  }\n  div.input {\n    cursor: pointer;\n  }\n}";
 var KolInputFileDefaultStyle0 = defaultStyleCss$r;
 
 class KolInputFile {
@@ -15801,10 +15976,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: 'bc52c39ddabdb0071b74b66a82b8f75eb4db0102' }, hAsync("kol-input", { key: 'ec451dc6b5acaa7bb406c021620b2f0382c618dc', class: {
                 file: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange }))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'afac200e379d1e616f3064e21c5f0f23ecbd6804', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'ed7f0892e4ff31a800fe43e9c96ec662ffd64556', slot: "input" }, hAsync("input", Object.assign({ key: 'de0a296789ec5f9d53e067d65a5f68ff07ccc77b', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -15850,7 +16025,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);
@@ -16059,7 +16234,7 @@ class InputNumberController extends InputIconController {
     }
 }
 
-const defaultStyleCss$q = "@layer kol-global {\n\t.sc-kol-input-number-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-number-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-number-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-number-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n}";
+const defaultStyleCss$q = "@layer kol-global {\n  .sc-kol-input-number-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-number-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-number-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-number-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  kol-input {\n    display: grid;\n  }\n  kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}";
 var KolInputNumberDefaultStyle0 = defaultStyleCss$q;
 
 class KolInputNumber {
@@ -16071,12 +16246,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: 'd977d1ab0e8a785ea435362bf45acb3db644ddfc', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: {
+            } }, hAsync("kol-input", { key: '4d1befe03612e0590a033d88a5514150af6b3b44', class: {
                 number: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '724fdbdd50c3d1ced96463f9ffc1210c63f61fc9', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '4f340feef2afdbd2891d730e1982339855ce8452', slot: "input" }, hAsync("input", Object.assign({ key: '24bb0a1bfe530c3ce1b5215cff4922bc854b921d', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -16129,7 +16304,7 @@ class KolInputNumber {
             _label: '',
             _suggestions: [],
         };
-        this.controller = new InputNumberController(this, 'input-number', this.host);
+        this.controller = new InputNumberController(this, 'number', this.host);
     }
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
@@ -16287,7 +16462,7 @@ class KolInputNumber {
     }; }
 }
 
-const defaultStyleCss$p = "@layer kol-global {\n\t.sc-kol-input-password-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-password-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-password-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-password-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n}";
+const defaultStyleCss$p = "@layer kol-global {\n  .sc-kol-input-password-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-password-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-password-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-password-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  kol-input {\n    display: grid;\n  }\n  kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}";
 var KolInputPasswordDefaultStyle0 = defaultStyleCss$p;
 
 class KolInputPassword {
@@ -16298,12 +16473,12 @@ class KolInputPassword {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: 'c292a6f136327cd0c8632f1d5898024b30867491', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: {
+            } }, hAsync("kol-input", { key: '2ca341e35ef15053ea4ece21cee98766487a433e', class: {
                 'hide-label': !!this.state._hideLabel,
                 password: true,
-            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '4bc34cc1836b7556daf2c2d5a2b76b42a681fd7b', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '181ca774f4331ebd070871b89b117781be851648', slot: "input" }, hAsync("input", Object.assign({ key: '63a210623f72825be2cd09b44b5b0a0813754486', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -16356,7 +16531,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);
@@ -16508,7 +16683,7 @@ class KolInputPassword {
     }; }
 }
 
-const defaultStyleCss$o = "@layer kol-global {\n\t.sc-kol-input-radio-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-radio-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-radio-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-radio-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-radio-default-h {\n\t\t--border-width: 2px;\n\t\t--input-size: 1.5em;\n\t}\n\n\tkol-input .icons {\n\t\tdisplay: none;\n\t}\n\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tinput {\n\t\tappearance: none;\n\t\tborder-width: var(--border-width);\n\t\tborder-style: solid;\n\t\tborder-radius: 100%;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\theight: var(--input-size);\n\t\tmargin: 0;\n\t\tmin-height: var(--input-size);\n\t\tmin-width: var(--input-size);\n\t\tpadding: 0;\n\t\twidth: var(--input-size);\n\t}\n\n\tinput:before {\n\t\tborder-radius: 100%;\n\t\tcontent: '';\n\t\tmargin: auto;\n\t\theight: calc(var(--input-size) / 2);\n\t\twidth: calc(var(--input-size) / 2);\n\t}\n\n\tinput:checked:before {\n\t\tbackground-color: #000;\n\t}\n\t@media (forced-colors: active) {\n\t\tinput:checked:before {\n\t\t\tbackground: highlight !important; \n\t\t}\n\t}\n\n\tfieldset {\n\t\tdisplay: flex;\n\t}\n\n\tfieldset.vertical {\n\t\tflex-direction: column;\n\t}\n\n\tfieldset .input-slot {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t\n\t.required label > span::after {\n\t\tcontent: '';\n\t}\n}";
+const defaultStyleCss$o = "@layer kol-global {\n  .sc-kol-input-radio-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-radio-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-radio-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-radio-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .sc-kol-input-radio-default-h {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  input {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  input:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\n  }\n  input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    input:checked:before {\n      \n      background: highlight !important;\n    }\n  }\n  fieldset {\n    display: flex;\n  }\n  fieldset.vertical {\n    flex-direction: column;\n  }\n  fieldset .input-slot {\n    align-items: center;\n    display: flex;\n  }\n  \n  .required label > span::after {\n    content: \"\";\n  }\n}";
 var KolInputRadioDefaultStyle0 = defaultStyleCss$o;
 
 class KolInputRadio {
@@ -16518,14 +16693,14 @@ class KolInputRadio {
     render() {
         const { ariaDescribedBy, hasError } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, null, hAsync("fieldset", { class: {
+        return (hAsync(Host, { key: 'd02f2e2ec22f0445e0e6275fea2f2aec5c2c5c9e' }, hAsync("fieldset", { key: '33b887404fd27742308519abbd538aaa844c0381', class: {
                 fieldset: true,
                 disabled: this.state._disabled === true,
                 error: hasError === true,
                 required: this.state._required === true,
                 'hidden-error': this._hideError === true,
                 [this.state._orientation]: true,
-            } }, hAsync("legend", { class: "block w-full mb-1 leading-normal" }, hAsync("span", null, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this._accessKey === 'string' ? (hAsync(InternalUnderlinedAccessKey, { accessKey: this._accessKey, label: this._label })) : (this._label)))), this.state._options.map((option, index) => {
+            } }, hAsync("legend", { key: '3ee697cc0b0a0c65181ab68ed9f14ca9a7c06452', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '5183048350ae5d8f9bf4ebbdca8448c38420904e' }, hAsync("span", { key: '93b82d9a79d6b584c15b642bbda6cb708ed50fcf', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this._accessKey === 'string' ? (hAsync(InternalUnderlinedAccessKey, { accessKey: this._accessKey, label: this._label })) : (this._label)))), this.state._options.map((option, index) => {
             const customId = `${this.state._id}-${index}`;
             const slotName = `radio-${index}`;
             return (hAsync("kol-input", { class: {
@@ -16585,7 +16760,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);
@@ -16738,7 +16913,7 @@ class InputRangeController extends InputIconController {
     }
 }
 
-const defaultStyleCss$n = "@layer kol-global {\n\t.sc-kol-input-range-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-range-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-range-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-range-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.inputs-wrapper {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\tinput[type='number'] {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t\twidth: var(--kolibri-input-range--input-number--width);\n\t}\n\n\t\n\tinput[type='range'] {\n\t\tappearance: none;\n\t\tbackground-color: #d3d3d3;\n\t\tborder: 1px solid #000;\n\t\tdisplay: inline-block;\n\t\tflex-grow: 1;\n\t\theight: 0.5rem;\n\t\tline-height: 1.5em;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\twidth: 0; \n\t}\n\n\tinput[type='range']::-webkit-slider-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-webkit-appearance: none;\n\t}\n\n\tinput[type='range']::-moz-range-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-moz-appearance: none;\n\t}\n}\n\n\n@media (prefers-contrast: more) {\n\t/*!@::-webkit-slider-thumb*/.sc-kol-input-range-default::-webkit-slider-thumb {\n\t\toutline: 1px solid currentColor;\n\t}\n}";
+const defaultStyleCss$n = "@layer kol-global {\n  .sc-kol-input-range-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-range-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-range-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-range-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  kol-input {\n    display: grid;\n  }\n  kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n  }\n  input[type=number] {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  \n  input[type=range] {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: 1px solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: 0.5rem;\n    line-height: 1.5em;\n    padding: 0;\n    margin: 0;\n    \n    width: 0;\n  }\n  input[type=range]::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: 20px;\n    width: 20px;\n    border-radius: 20px;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  input[type=range]::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: 20px;\n    width: 20px;\n    border-radius: 20px;\n    cursor: pointer;\n    -moz-appearance: none;\n  }\n}\n\n@media (prefers-contrast: more) {\n  /*!@::-webkit-slider-thumb*/.sc-kol-input-range-default::-webkit-slider-thumb {\n    outline: 1px solid currentColor;\n  }\n}";
 var KolInputRangeDefaultStyle0 = defaultStyleCss$n;
 
 class KolInputRange {
@@ -16768,12 +16943,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: '42f9641c84242c68e72a969573c3d2e0b45e381f' }, hAsync("kol-input", { key: '9061d58fb8ba1cca9ca1d2b72b4799a7aaed957d', class: {
                 range: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("div", { class: "inputs-wrapper", style: {
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '1aab265fde62061efdae990a19d7d1b7cb8182d8', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'af75568d971bceec1bb50fcf09312b2e41032250', slot: "input" }, hAsync("div", { key: 'f2c91b308a8a72175e8da8507127fcd3f0d00fe0', 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: 'c3bf4f708e76b034c67c20defbb7c4e151f5bef5', 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: 'fdd8c0f9f1f1de87eabf6448fff622a48888afa3', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp, onChange: this.onChange }))), hasSuggestions && [
             hAsync("datalist", { id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
         ]))));
     }
@@ -16843,7 +17018,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);
@@ -16975,7 +17150,7 @@ class KolInputRange {
     }; }
 }
 
-const defaultStyleCss$m = "@layer kol-global {\n\t.sc-kol-input-text-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-text-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-text-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-text-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n}";
+const defaultStyleCss$m = "@layer kol-global {\n  .sc-kol-input-text-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-text-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-input-text-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-input-text-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  kol-input {\n    display: grid;\n  }\n  kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}";
 var KolInputTextDefaultStyle0 = defaultStyleCss$m;
 
 class KolInputText {
@@ -16987,12 +17162,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: '2b367c5e6e030af7698649519766db46c62edd63', class: {
                 'has-value': this.state._hasValue,
-            } }, hAsync("kol-input", { class: {
+            } }, hAsync("kol-input", { key: 'a9cb90af0900d06ef507975759e0550ed040b4e9', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+            }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '51377d8ae7ca31c90d1269629cf247e5491b92d8', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '23fcc1a3d0f5b93a793f162f257ba25732ca4653', slot: "input" }, hAsync("input", Object.assign({ key: 'fbf2db2865639b584396434d80393981f1b47902', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -17059,7 +17234,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);
@@ -17223,7 +17398,7 @@ class KolInputText {
     }; }
 }
 
-const defaultStyleCss$l = "@layer kol-global {\n\t.sc-kol-kolibri-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-kolibri-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-kolibri-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-kolibri-default-h {\n\t\tdisplay: inline-block;\n\t}\n\n\ttext {\n\t\tfont-size: 90px;\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}";
+const defaultStyleCss$l = "@layer kol-global {\n  .sc-kol-kolibri-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-kolibri-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-kolibri-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-kolibri-default-h {\n    display: inline-block;\n  }\n  text {\n    font-size: 90px;\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n  svg {\n    max-height: 100%;\n  }\n}";
 var KolKolibriDefaultStyle0 = defaultStyleCss$l;
 
 class KolKolibri {
@@ -17255,7 +17430,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: 'f03f7417073898df35154fcd53b973c00bce99ff' }, hAsync("svg", { key: 'fe0b28c85894dd1f13bcf2bfb74ec0f380260480', 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: '0361d62e2c79c3853c0d737dada466947b970d2c', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '45c7c71f100a6ba018b04c8873754f09c84bd9d8', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: 'ad094efdbde5e91bb897f2397a50f21ec088a597', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: '5b3b10906e99b6bf905bdb5ed048b269b40f47c5', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '62d983c2a30ecfe9aa06ad472f41318c7def3a6e', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '5f559c30a43472fd9f7d870129539c53b79e66c1', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { x: "250", y: "525", fill: fillColor }, "KoliBri")))));
     }
     validateColor(value) {
         validateColor(this, value, {
@@ -17295,7 +17470,7 @@ class KolKolibri {
     }; }
 }
 
-const defaultStyleCss$k = "@layer kol-global {\n\t.sc-kol-link-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-link-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-link-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-link-default-h {\n\t\tdisplay: inline-block;\n\t}\n\n\t:is(a, button) {\n\t\talign-items: baseline;\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: left;\n\t\ttext-decoration-line: underline;\n\t}\n\n\ta:is(:focus, :hover):not([aria-disabled]),\n\tbutton:is(:focus, :hover):not([disabled]) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.skip {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\t.skip:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tpadding: 1em;\n\t\tposition: unset;\n\t}\n\n\tkol-icon.external-link-icon {\n\t\tdisplay: inline-flex;\n\t}\n}";
+const defaultStyleCss$k = "@layer kol-global {\n  .sc-kol-link-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-link-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-link-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-link-default-h {\n    display: inline-block;\n  }\n  :is(a, button) {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]),\n  button:is(:focus, :hover):not([disabled]) {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background-color: #fff;\n    left: unset;\n    padding: 1em;\n    position: unset;\n  }\n  kol-icon.external-link-icon {\n    display: inline-flex;\n  }\n}";
 var KolLinkDefaultStyle0 = defaultStyleCss$k;
 
 class KolLink {
@@ -17319,7 +17494,7 @@ class KolLink {
         this._tooltipAlign = 'right';
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+        return (hAsync(Host, { key: 'c9efeb960b6b4051608fb646dc0dbac4ec39224f' }, hAsync("kol-link-wc", { key: '9516a28272d5815c95fc714a859c4ae220d5dd08', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'ed81df4aca3b1bcd693c47b6d5b30c3c18910e56', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -17349,7 +17524,7 @@ class KolLink {
     }; }
 }
 
-const defaultStyleCss$j = "@layer kol-global {\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-link-button-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-link-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\n\t\t&::before {\n\t\t\t\n\t\t\tcontent: '\\200B';\n\t\t}\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n}";
+const defaultStyleCss$j = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-link-button-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-link-button-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-link-button-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-link-button-default-h {\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    \n    content: \"​\";\n  }\n  \n  :is(a, button) > kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}";
 var KolLinkButtonDefaultStyle0 = defaultStyleCss$j;
 
 class KolLinkButton {
@@ -17375,11 +17550,11 @@ class KolLinkButton {
         this._variant = 'normal';
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, class: {
+        return (hAsync(Host, { key: '7c21c8157e936685e3b035b03cdfabc59aa2aee6' }, hAsync("kol-link-wc", { key: 'c8896aac21d1cadf62d954a1365830ddcca29b27', ref: this.catchRef, class: {
                 button: true,
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+            }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '780d0774caa05d50b205bb30fdc160ea258d53f4', name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -17411,7 +17586,7 @@ class KolLinkButton {
     }; }
 }
 
-const defaultStyleCss$i = "@layer kol-global {\n\t.sc-kol-link-group-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-link-group-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-link-group-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tnav.horizontal ul {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tnav.horizontal li {\n\t\tmargin-left: 1.25rem;\n\t\tmargin-right: 0.25rem;\n\t}\n\n\tnav.horizontal li:first-child {\n\t\tmargin-left: 0;\n\t}\n\n\tnav.horizontal li:last-child {\n\t\tmargin-right: 0;\n\t}\n\n\tnav.vertical li {\n\t\tmargin-left: 1.75rem;\n\t\tmargin-right: 0.5rem;\n\t}\n\n\tli.list-none {\n\t\tlist-style-type: none !important;\n\t\tmargin-left: 0;\n\t}\n}";
+const defaultStyleCss$i = "@layer kol-global {\n  .sc-kol-link-group-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-link-group-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-link-group-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  nav.horizontal ul {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  nav.horizontal li {\n    margin-left: 1.25rem;\n    margin-right: 0.25rem;\n  }\n  nav.horizontal li:first-child {\n    margin-left: 0;\n  }\n  nav.horizontal li:last-child {\n    margin-right: 0;\n  }\n  nav.vertical li {\n    margin-left: 1.75rem;\n    margin-right: 0.5rem;\n  }\n  li.list-none {\n    list-style-type: none !important;\n    margin-left: 0;\n  }\n}";
 var KolLinkGroupDefaultStyle0 = defaultStyleCss$i;
 
 const ListItem = (props) => {
@@ -17442,7 +17617,7 @@ class KolLinkGroup {
         };
     }
     render() {
-        return (hAsync("nav", { "aria-label": this.state._label, class: {
+        return (hAsync("nav", { key: 'f9cf36c7862b635d4f54caa2e734893e49709a56', "aria-label": this.state._label, class: {
                 vertical: this.state._orientation === 'vertical',
                 horizontal: this.state._orientation === 'horizontal',
             } }, this.isUl === false ? (hAsync("ol", null, hAsync(ListItem, { links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))) : (hAsync("ul", null, hAsync(ListItem, { links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType })))));
@@ -17586,13 +17761,13 @@ class KolLinkWc {
     render() {
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, null, hAsync("a", Object.assign({ ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
+        return (hAsync(Host, { key: '5af118226534baebdc688bbe495e5d1640d485e9' }, hAsync("a", Object.assign({ key: '7327fe25769295d0786ddaf0c60b8758e3411715', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
                 ? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
                 : undefined, class: {
                 disabled: this.state._disabled === true,
                 'external-link': isExternal,
                 'hide-label': this.state._hideLabel === true,
-            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync("kol-span-wc", { _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { name: "expert", slot: "expert" })), isExternal && (hAsync("kol-icon", { class: "external-link-icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
+            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync("kol-span-wc", { key: '5d7506bc04fb5790b1ee3f6dfdc56d309c9c829e', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '7212d1125baffafd781c7bdd9aef082332fa1d58', name: "expert", slot: "expert" })), isExternal && (hAsync("kol-icon", { class: "external-link-icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync("kol-tooltip-wc", { key: '8ad3681d1c91dc44b2282f8ba180d1c1868db92a', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -17866,7 +18041,7 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Mediz
 BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
 BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
 
-const defaultStyleCss$h = "@layer kol-global {\n\t.sc-kol-logo-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-logo-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-logo-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-logo-default-h {\n\t\tdisplay: inline-block;\n\t}\n\n\ttext {\n\t\tfont-size: 16px;\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}";
+const defaultStyleCss$h = "@layer kol-global {\n  .sc-kol-logo-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-logo-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-logo-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-logo-default-h {\n    display: inline-block;\n  }\n  text {\n    font-size: 16px;\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n  svg {\n    max-height: 100%;\n  }\n}";
 var KolLogoDefaultStyle0 = defaultStyleCss$h;
 
 function enumToArray(enumeration, enumAsMap = new Map()) {
@@ -17906,7 +18081,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: '0b8b26ee9dc2de829cc1d79a78e443cc54c2ed71', "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: '17bff08d7f87e2ad8f5e3218733965e3a4d4b3f9', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: '079db07fa768712f7c4d4ac2f25934a29a648fcc', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '672929ab578ff534b2643d621c446303f8e9f0d8' })), hAsync("svg", { key: '8bc65d2dd5b78495a554bdc9747cb676ce6ddca9', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: '62f2cf4466603458b00b56ef7eab5dc78211e833', width: "5", height: "30" }), hAsync("rect", { key: 'f6846742557f9e4168ca7e0a5978428bd575353d', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: 'd37a34ff5b97a13d223be28afc0ff0ce4cda3d18', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '0c3296a55e6d9eacde80a610d94415e9e9a3e9c0', x: "50", y: "0" }, hAsync("text", { key: '724b5a34787bc461a233742312659c48882aa2bc', 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.")))))));
     }
@@ -17929,7 +18104,7 @@ class KolLogo {
     }; }
 }
 
-const defaultStyleCss$g = "@layer kol-global {\n\t.sc-kol-modal-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-modal-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-modal-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.overlay {\n\t\tbackground-color: rgba(0, 0, 0, 0.33);\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\tinset: 0;\n\t\tposition: fixed;\n\t\twidth: 100%;\n\t\tz-index: 100;\n\t}\n\n\t.modal {\n\t\tmargin: auto;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}";
+const defaultStyleCss$g = "@layer kol-global {\n  .sc-kol-modal-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-modal-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-modal-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .overlay {\n    background-color: rgba(0, 0, 0, 0.33);\n    display: flex;\n    height: 100%;\n    inset: 0;\n    position: fixed;\n    width: 100%;\n    z-index: 100;\n  }\n  .modal {\n    margin: auto;\n    max-height: 100%;\n    max-width: 100%;\n  }\n}";
 var KolModalDefaultStyle0 = defaultStyleCss$g;
 
 class KolModal {
@@ -17966,7 +18141,7 @@ class KolModal {
         }
     }
     render() {
-        return (hAsync(Host, { ref: (el) => {
+        return (hAsync(Host, { key: 'c05ba4ba3aba8fc37144832e84f6fb6844199cf3', ref: (el) => {
                 this.hostElement = el;
             } }, this.state._activeElement && (hAsync("div", { class: "overlay" }, hAsync("div", { class: "modal", style: {
                 width: this.state._width,
@@ -18041,7 +18216,7 @@ class KolModal {
     }; }
 }
 
-const defaultStyleCss$f = "@layer kol-global {\n\t.sc-kol-nav-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-nav-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-nav-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-nav-default-h > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t:not(.is-compact) nav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.entry-item {\n\t\tflex-grow: 1;\n\t}\n}";
+const defaultStyleCss$f = "@layer kol-global {\n  .sc-kol-nav-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-nav-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-nav-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-nav-default-h > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}";
 var KolNavDefaultStyle0 = defaultStyleCss$f;
 
 class KolNav {
@@ -18134,11 +18309,11 @@ class KolNav {
         const collapsible = this.state._collapsible === true;
         const hideLabel = this.state._hideLabel === true;
         const orientation = this.state._orientation;
-        return (hAsync(Host, null, hAsync("div", { class: {
+        return (hAsync(Host, { key: '22be44517e27284e0a12eac1e82485464a43f611' }, hAsync("div", { key: '3be89ffcbbf87386b3f994e2787569d28fa65b54', class: {
                 nav: true,
                 [orientation]: true,
                 'is-compact': this.state._hideLabel,
-            } }, hAsync("nav", { "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { class: "compact" }, hAsync("kol-button", { _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
+            } }, hAsync("nav", { key: '17e08a2b8a2b7012d2a9bcc4f9cad0f615f242fe', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'a7a3bb3193d0aeef7d762cec4c7b91dd7e405530', 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 });
                 },
@@ -18219,7 +18394,7 @@ class KolNav {
     }; }
 }
 
-const defaultStyleCss$e = "@layer kol-global {\n\t.sc-kol-pagination-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-pagination-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-pagination-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-pagination-default-h {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}";
+const defaultStyleCss$e = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-pagination-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-pagination-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-pagination-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-pagination-default-h {\n    align-items: center;\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: 1fr auto;\n  }\n  .navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .separator:before {\n    content: \"•••\";\n  }\n}";
 var KolPaginationDefaultStyle0 = defaultStyleCss$e;
 
 const leftDoubleArrowIcon = {
@@ -20537,7 +20712,7 @@ const alignFloatingElements = async ({ floatingElement, referenceElement, arrowE
     }
 };
 
-const styleCss$1 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n";
+const styleCss$1 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  kol-popover {\n    height: 0;\n    position: absolute;\n  }\n  kol-popover .popover {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  kol-popover .show {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  kol-popover .disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  kol-popover .arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}";
 var KolPopoverWcStyle0 = styleCss$1;
 
 class KolPopover {
@@ -20610,7 +20785,7 @@ class KolPopover {
         });
     }
     render() {
-        return (hAsync(Host, { ref: this.catchHostAndTriggerElement }, hAsync("div", { class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", null))));
+        return (hAsync(Host, { key: '1940f4877550060f2888763cbaedf35506d5191e', ref: this.catchHostAndTriggerElement }, hAsync("div", { key: '9efff330b3e098e47ac3f7d7ff469f84cb6b07d8', class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { key: 'e43a4098d668034146799bb817ddc1a0f3a085bb', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '6eacf29d42547567074498c7bb844a2f8f5fff83' }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -20643,7 +20818,7 @@ class KolPopover {
     }; }
 }
 
-const defaultStyleCss$d = "@layer kol-global {\n\t.sc-kol-progress-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-progress-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-progress-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\tprogress {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\twidth: 0;\n\t}\n\n\t.bar .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.bar .background {\n\t\tfill: lightgray;\n\t\tstroke: white;\n\t}\n\n\t.bar .progress {\n\t\tfill: #0075ff;\n\t\tstroke: transparent;\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t.cycle .background {\n\t\tfill: transparent;\n\t\tstroke: lightgray;\n\t}\n\n\t.cycle .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.cycle .whitespace {\n\t\tfill: transparent;\n\t\tstroke: white;\n\t}\n\n\t.cycle .progress {\n\t\tfill: transparent;\n\t\tstroke: #0075ff;\n\t\ttransform-origin: 50% 50%;\n\t\ttransform: rotate(-90deg);\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t\n\t@media (prefers-reduced-motion) {\n\t\t.progress {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t}\n\t}\n}";
+const defaultStyleCss$d = "@layer kol-global {\n  .sc-kol-progress-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-progress-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-progress-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  progress {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    width: 0;\n  }\n  .bar .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .bar .background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .bar .progress {\n    fill: #0075ff;\n    stroke: transparent;\n    transition: 250ms ease-in-out 50ms;\n  }\n  .cycle .background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .cycle .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .cycle .whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .cycle .progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n    transition: 250ms ease-in-out 50ms;\n  }\n  \n  @media (prefers-reduced-motion) {\n    .progress {\n      transition-duration: 0s;\n      transition-delay: 0s;\n    }\n  }\n}";
 var KolProgressDefaultStyle0 = defaultStyleCss$d;
 
 const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
@@ -20683,7 +20858,7 @@ class KolProcess {
         };
     }
     render() {
-        return (hAsync(Host, null, createProgressSVG(this.state), hAsync("progress", { "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
+        return (hAsync(Host, { key: '8810b1a2164a38cca0bc47f55d5304902f99db04' }, createProgressSVG(this.state), hAsync("progress", { key: '5bb89442fffb525da2ea966b67fc7b7817cd15d6', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '2bbb88f6de41a7da91d78dcdbfc6ee805fd0332b', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -20752,7 +20927,7 @@ class KolProcess {
     }; }
 }
 
-const defaultStyleCss$c = "@layer kol-global {\n\t.sc-kol-quote-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-quote-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-quote-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}";
+const defaultStyleCss$c = "@charset \"UTF-8\";\n\n@layer kol-global {\n  .sc-kol-quote-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-quote-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-quote-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  cite,\n  figure,\n  q + figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  blockquote:before {\n    content: open-quote;\n  }\n  blockquote::after {\n    content: close-quote;\n  }\n  cite:before {\n    content: \"—\";\n  }\n  .block cite:before {\n    padding-right: 0.5em;\n  }\n  .inline cite:before {\n    padding: 0.5em;\n  }\n}";
 var KolQuoteDefaultStyle0 = defaultStyleCss$c;
 
 class KolQuote {
@@ -20792,7 +20967,7 @@ class KolQuote {
     }
     render() {
         const hasExpertSlot = showExpertSlot(this.state._quote);
-        return (hAsync(Host, null, hAsync("figure", { class: {
+        return (hAsync(Host, { key: '62f3f48e37d023042e82f0f479c0c8544fee0e67' }, hAsync("figure", { key: '6bbb16352b45460a9f83135297a43204260abe20', 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" })))))));
     }
@@ -20910,7 +21085,7 @@ class SelectController extends InputIconController {
     }
 }
 
-const defaultStyleCss$b = "@layer kol-global {\n\t.sc-kol-select-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-select-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-select-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-select-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n}";
+const defaultStyleCss$b = "@layer kol-global {\n  .sc-kol-select-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-select-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-select-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-select-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  kol-input {\n    display: grid;\n  }\n  kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}";
 var KolSelectDefaultStyle0 = defaultStyleCss$b;
 
 const isSelected = (valueList, optionValue) => {
@@ -20935,10 +21110,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: '7f8dee7aefb2ea2549dac44bb475b00c1fd92b59', class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: 'a394fb7fd693a3de910768f28a924f64d3334107', class: {
                 'hide-label': !!this.state._hideLabel,
                 select: true,
-            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("select", { ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false", onClick: this.controller.onFacade.onClick,
+            }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'cb1a45a2bb71c976e4e39536a54b69642f0df739', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f547683e66df783ef870e1f9c92635f4c280497e', slot: "input" }, hAsync("select", { key: 'bb7cd8ff2332d06c7dba97ea317f71b9645015ea', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false", onClick: this.controller.onFacade.onClick,
             onBlur: this.controller.onFacade.onBlur,
             onFocus: this.controller.onFacade.onFocus, onChange: this.onChange }, this.state._options.map((option, index) => {
             const key = `-${index}`;
@@ -21127,7 +21302,7 @@ class KolSelect {
     }; }
 }
 
-const defaultStyleCss$a = "@layer kol-global {\n\t.sc-kol-skip-nav-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-skip-nav-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-skip-nav-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}";
+const defaultStyleCss$a = "@layer kol-global {\n  .sc-kol-skip-nav-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-skip-nav-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-skip-nav-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  ul {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  ul li {\n    height: 0;\n  }\n  kol-link-wc a {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  kol-link-wc a:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}";
 var KolSkipNavDefaultStyle0 = defaultStyleCss$a;
 
 class KolSkipNav {
@@ -21141,7 +21316,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: '844dd7028e266ff6868958d79177cf7810bbce15', "aria-label": this.state._label }, hAsync("ul", { key: 'fe3ecbc861fc27669dfac7897e71bb4d0b7b4d3a' }, this.state._links.map((link, index) => {
             return (hAsync("li", { key: index }, hAsync("kol-link-wc", Object.assign({}, link))));
         }))));
     }
@@ -21185,7 +21360,7 @@ class KolSkipNav {
     }; }
 }
 
-const defaultStyleCss$9 = "@layer kol-global {\n\t.sc-kol-span-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-span-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-span-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}";
+const defaultStyleCss$9 = "@layer kol-global {\n  .sc-kol-span-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-span-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-span-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}";
 var KolSpanDefaultStyle0 = defaultStyleCss$9;
 
 class KolSpan {
@@ -21197,7 +21372,7 @@ class KolSpan {
         this._label = undefined;
     }
     render() {
-        return (hAsync("kol-span-wc", { _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey }, hAsync("slot", { name: "expert", slot: "expert" })));
+        return (hAsync("kol-span-wc", { key: '142fb2dd8782c92c55991ee4ca39539e846f0c0c', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey }, hAsync("slot", { key: '0764d62f2ebdfca1003610aae70b1c38df3acc61', name: "expert", slot: "expert" })));
     }
     static get style() { return {
         default: KolSpanDefaultStyle0
@@ -29519,9 +29694,9 @@ class KolSpanWc {
     render() {
         var _a, _b, _c, _d, _e;
         const hideExpertSlot = !showExpertSlot(this.state._label);
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: 'be4bc67de506f0e8d720a29b7e44523b9989401f', class: {
                 'hide-label': !!this.state._hideLabel,
-            } }, this.state._icons.top && (hAsync("kol-icon", { class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", null, this.state._icons.left && (hAsync("kol-icon", { class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._accessKey && this.state._label.length ? (hAsync(InternalUnderlinedAccessKey, { label: this.state._label, accessKey: this.state._accessKey })) : ((_c = this.state._label) !== null && _c !== void 0 ? _c : '')))) : (''), hAsync("span", { "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { name: "expert" })), this.state._accessKey && (hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync("kol-icon", { class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync("kol-icon", { class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
+            } }, this.state._icons.top && (hAsync("kol-icon", { class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: '3c9d6a132b97d663b4161a0d25ee764b4bba0af9' }, this.state._icons.left && (hAsync("kol-icon", { class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._accessKey && this.state._label.length ? (hAsync(InternalUnderlinedAccessKey, { label: this.state._label, accessKey: this.state._accessKey })) : ((_c = this.state._label) !== null && _c !== void 0 ? _c : '')))) : (''), hAsync("span", { key: 'c6f24293d68c7e26423e8f9f9f88d9c699ec27f1', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: 'a28ec0669c4c56dc107c9c258ebda888952925bf', name: "expert" })), this.state._accessKey && (hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync("kol-icon", { class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync("kol-icon", { class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -29575,7 +29750,7 @@ class KolSpanWc {
     }; }
 }
 
-const defaultStyleCss$8 = "@layer kol-global {\n\t.sc-kol-spin-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-spin-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-spin-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.spin.cycle {\n\t\twidth: 3rem;\n\t\theight: 3rem;\n\t}\n\n\t.spin.cycle > .loader {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tposition: relative;\n\t\tanimation: 2s linear infinite rotate;\n\t}\n\n\t.spin.cycle > .loader::before {\n\t\tcontent: '';\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset: 0px;\n\t\tborder-radius: 50%;\n\t\tborder: 5px solid #333;\n\t\tanimation: 3s linear infinite prixClipFix;\n\t}\n\n\t@keyframes rotate {\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n\t@keyframes prixClipFix {\n\t\t0% {\n\t\t\tborder-color: #fff;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n\t\t}\n\t\t25% {\n\t\t\tborder-color: #666;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n\t\t}\n\t\t50% {\n\t\t\tborder-color: #fc0;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n\t\t}\n\t\t75% {\n\t\t\tborder-color: red;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n\t\t}\n\t\t100% {\n\t\t\tborder-color: #000;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n\t\t}\n\t} \n\t@media (prefers-reduced-motion) {\n\t\t.spin.cycle > .loader {\n\t\t\tanimation-duration: 4s;\n\t\t}\n\n\t\t.spin.cycle > .loader::before {\n\t\t\tanimation-duration: 6s;\n\t\t}\n\t}\n}\n\n@layer kol-component {\n\t.spin.dot {\n\t\theight: 1rem;\n\t\twidth: 3rem;\n\t}\n\n\t.spin.dot > span {\n\t\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\t\tborder-radius: 50%;\n\t\tborder: 0.1rem solid #fff;\n\t\theight: 0.8rem;\n\t\tposition: absolute;\n\t\ttop: 0.1rem;\n\t\twidth: 0.8rem;\n\t}\n\n\t.spin.dot > span:first-child {\n\t\tbackground-color: #fc0;\n\t\tz-index: 0;\n\t\tanimation: 1s infinite spin1;\n\t\tleft: 0.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(2) {\n\t\tbackground-color: red;\n\t\tz-index: 1;\n\t\tanimation: 1s infinite spin2;\n\t\tleft: 0.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(3) {\n\t\tbackground-color: #000;\n\t\tz-index: 1;\n\t\tanimation: 1s infinite spin2;\n\t\tleft: 1.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(4) {\n\t\tbackground-color: #666;\n\t\tz-index: 0;\n\t\tanimation: 1s infinite spin3;\n\t\tleft: 2.1rem;\n\t}\n\n\t@keyframes spin1 {\n\t\t0% {\n\t\t\ttransform: scale(0);\n\t\t}\n\t\t100% {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n\t@keyframes spin2 {\n\t\t0% {\n\t\t\ttransform: translate(0, 0);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translate(1rem, 0);\n\t\t}\n\t}\n\t@keyframes spin3 {\n\t\t0% {\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t100% {\n\t\t\ttransform: scale(0);\n\t\t}\n\t} \n\t@media (prefers-reduced-motion) {\n\t\t.spin.dot > span:first-child,\n\t\t.spin.dot > span:nth-child(2),\n\t\t.spin.dot > span:nth-child(3),\n\t\t.spin.dot > span:nth-child(4) {\n\t\t\tanimation-duration: 2s;\n\t\t}\n\t}\n}\n\n@layer kol-component {\n\t.spin {\n\t\tdisplay: block;\n\t\tpadding: 0.125rem;\n\t\tposition: relative;\n\t}\n}";
+const defaultStyleCss$8 = "@layer kol-global {\n  .sc-kol-spin-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-spin-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-spin-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .spin.cycle {\n    width: 3rem;\n    height: 3rem;\n  }\n  .spin.cycle > .loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .spin.cycle > .loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0px;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #fc0;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: red;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  } \n  @media (prefers-reduced-motion) {\n    .spin.cycle > .loader {\n      animation-duration: 4s;\n    }\n    .spin.cycle > .loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .spin.dot {\n    height: 1rem;\n    width: 3rem;\n  }\n  .spin.dot > span {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: 0.1rem solid #fff;\n    height: 0.8rem;\n    position: absolute;\n    top: 0.1rem;\n    width: 0.8rem;\n  }\n  .spin.dot > span:first-child {\n    background-color: #fc0;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: 0.1rem;\n  }\n  .spin.dot > span:nth-child(2) {\n    background-color: red;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: 0.1rem;\n  }\n  .spin.dot > span:nth-child(3) {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: 1.1rem;\n  }\n  .spin.dot > span:nth-child(4) {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: 2.1rem;\n  }\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(1rem, 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  } \n  @media (prefers-reduced-motion) {\n    .spin.dot > span:first-child,\n    .spin.dot > span:nth-child(2),\n    .spin.dot > span:nth-child(3),\n    .spin.dot > span:nth-child(4) {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .spin {\n    display: block;\n    padding: 0.125rem;\n    position: relative;\n  }\n}";
 var KolSpinDefaultStyle0 = defaultStyleCss$8;
 
 function renderSpin(variant) {
@@ -29599,7 +29774,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: '5773dc5eb5bacd43b45a7a18ffe30b207ece68f4' }, 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" }))));
@@ -29636,7 +29811,7 @@ class KolSpin {
     }; }
 }
 
-const defaultStyleCss$7 = "@layer kol-global {\n\t.sc-kol-split-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-split-button-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-split-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-split-button-default-h {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t}\n\n\t.main-button {\n\t\tflex-grow: 1;\n\t\ttext-align: left;\n\t}\n\n\t.main-button kol-span-wc {\n\t\tplace-items: start;\n\t}\n\n\t.secondary-button button {\n\t\theight: 100%;\n\t}\n\n\t.horizontal-line {\n\t\tbackground-color: rgba(0, 0, 0, 0.2);\n\t\tborder-radius: 2px;\n\t\theight: 70%;\n\t\tmargin-block: auto;\n\t\twidth: 1px;\n\t}\n\n\t\n\t.popover {\n\t\theight: 0;\n\t\tleft: 0;\n\t\tmin-width: 100%;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\ttransition: height 0.3s ease-in-out;\n\t}\n\n\t.popover-content {\n\t\tinset: 0 0 auto 0;\n\t\tmin-width: 100%;\n\t\tposition: absolute;\n\t}\n}";
+const defaultStyleCss$7 = "@layer kol-global {\n  .sc-kol-split-button-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-split-button-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-split-button-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-split-button-default-h {\n    display: flex;\n    position: relative;\n  }\n  .main-button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .main-button kol-span-wc {\n    place-items: start;\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .horizontal-line {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: 2px;\n    height: 70%;\n    margin-block: auto;\n    width: 1px;\n  }\n  \n  .popover {\n    height: 0;\n    left: 0;\n    min-width: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 100%;\n    transition: height 0.3s ease-in-out;\n  }\n  .popover-content {\n    inset: 0 0 auto 0;\n    min-width: 100%;\n    position: absolute;\n  }\n}";
 var KolSplitButtonDefaultStyle0 = defaultStyleCss$7;
 
 class KolSplitButton {
@@ -29704,12 +29879,12 @@ class KolSplitButton {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-button-wc", { class: {
+        return (hAsync(Host, { key: '03d2f8230a593d5f427ce93a701a5df863976e6d' }, hAsync("kol-button-wc", { key: 'e8021561de055f82a6518dde72d6f9947fb45f69', class: {
                 'main-button': true,
                 button: true,
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { class: "horizontal-line" }), hAsync("kol-button-wc", { class: "secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: `dropdown ${this.state._show ? 'schließen' : 'öffnen'}`, _on: this.clickToggleHandler }), hAsync("div", { class: "popover", ref: this.catchDropdownElements }, hAsync("div", { class: "popover-content" }, hAsync("slot", null)))));
+            }, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '7998272a644f861a3d2c4381331360675c89e7ec', class: "horizontal-line" }), hAsync("kol-button-wc", { key: '053464c5258c457fabd2e422a3ac948ca26d4f26', 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: 'f9289af74804c78bc86799ecc251bdf01d1cc1ec', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: 'c84c68c81e217df8bf201a5350b76e4082114a9c', class: "popover-content" }, hAsync("slot", { key: 'c2cf058e163e96bf0428fb230d01201c321f85e4' })))));
     }
     static get style() { return {
         default: KolSplitButtonDefaultStyle0
@@ -29755,7 +29930,7 @@ class KolSymbol {
         };
     }
     render() {
-        return (hAsync(Host, null, hAsync("span", { "aria-label": this.state._label, role: "term" }, this.state._symbol)));
+        return (hAsync(Host, { key: 'c2f1d807eee08e97e9573ef9e9bf335ea22afb78' }, hAsync("span", { key: 'ced032be84fad5ecafb51bad19c0262102755de8', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -29789,7 +29964,7 @@ class KolSymbol {
     }; }
 }
 
-const defaultStyleCss$6 = "@layer kol-global {\n\t.sc-kol-table-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-table-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-table-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-table-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-table-default-h {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-table-default-h > div.table {\n\t\tmax-width: 100%;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;\n\t}\n\n\t.sc-kol-table-default-h > div.table table {\n\t\twidth: 100%;\n\t}\n\n\tcaption {\n\t\ttext-align: start;\n\t}\n\tcaption:focus {\n\t\toutline: 0 !important;\n\t}\n\n\t.table:has(caption:focus) {\n\t\t\n\t\toutline: 5px auto Highlight;\n\t\toutline: 5px auto -webkit-focus-ring-color;\n\t\toutline-offset: 2px;\n\t}\n\n\t.table-sort-button .button {\n\t\tcolor: inherit;\n\t}\n\n\tth.align-left {\n\t\ttext-align: left;\n\t\t& .table-sort-button .button-inner {\n\t\t\tjustify-items: start;\n\t\t}\n\t}\n\tth.align-center {\n\t\ttext-align: center;\n\t\t& .table-sort-button .button-inner {\n\t\t\tjustify-items: center;\n\t\t}\n\t}\n\tth.align-right {\n\t\ttext-align: right;\n\t\t& .table-sort-button .button-inner {\n\t\t\tjustify-items: end;\n\t\t}\n\t}\n\n\tdiv.pagination kol-pagination {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t@media (max-width: 1024px) {\n\t\tdiv.pagination kol-pagination {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\tdiv.pagination,\n\t\tdiv.pagination > div:last-child {\n\t\t\tgrid-auto-flow: column;\n\t\t}\n\n\t\tdiv.pagination kol-pagination {\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}";
+const defaultStyleCss$6 = "@layer kol-global {\n  .sc-kol-table-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-table-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-table-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-table-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  .sc-kol-table-default-h {\n    display: grid;\n  }\n  .sc-kol-table-default-h > div.table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .sc-kol-table-default-h > div.table table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  caption:focus {\n    outline: 0 !important;\n  }\n  .table:has(caption:focus) {\n    \n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  th.align-left {\n    text-align: left;\n  }\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  div.pagination kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  div.pagination,\n  div.pagination > div:last-child {\n    display: grid;\n    place-items: center;\n  }\n  @media (max-width: 1024px) {\n    div.pagination kol-pagination {\n      flex-direction: column;\n    }\n  }\n  @media (min-width: 1024px) {\n    div.pagination,\n    div.pagination > div:last-child {\n      grid-auto-flow: column;\n    }\n    div.pagination kol-pagination {\n      display: flex;\n    }\n  }\n}";
 var KolTableDefaultStyle0 = defaultStyleCss$6;
 
 const PAGINATION_OPTIONS = [10, 20, 50, 100];
@@ -30359,11 +30534,11 @@ class KolTable {
         const dataField = this.createDataField(displayedData, this.state._headers);
         const paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination() : null;
         const paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination() : null;
-        return (hAsync(Host, null, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync("div", { ref: (element) => (this.tableDivElement = element), class: "table", tabindex: "-1", onMouseDown: (event) => {
+        return (hAsync(Host, { key: 'c80e2161228b007200b23aded2c8b255ffd582dd' }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync("div", { key: '35e2f73b819963d715745efec48af99aad147f15', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: "-1", onMouseDown: (event) => {
                 event.preventDefault();
-            } }, hAsync("table", { style: {
+            } }, hAsync("table", { key: '9545cfeb02836fc388d97b47ac40de61940709d0', 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: '39a640e4b0cf65a1506adc4697753c14a244e07f', tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(this.state._headers.horizontal) && (hAsync("thead", null, this.state._headers.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, cols.map((col, colIndex) => {
             if (col.asTd === true) {
                 return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${col.label}`, class: {
                         [col.textAlign]: typeof col.textAlign === 'string' && col.textAlign.length > 0,
@@ -30416,7 +30591,7 @@ class KolTable {
                         onClick: () => this.changeCellSort(headerCell),
                     } })) : (col.label)));
             }
-        })))))), hAsync("tbody", null, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : '')), this.pageEndSlice > 0 && this.showPagination && paginationBottom));
+        })))))), hAsync("tbody", { key: 'd1fcfe215ffe10354cd944182bdbfb70a55d4106' }, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : '')), this.pageEndSlice > 0 && this.showPagination && paginationBottom));
     }
     static get watchers() { return {
         "_allowMultiSort": ["validateAllowMultiSort"],
@@ -30452,7 +30627,7 @@ class KolTable {
     }; }
 }
 
-const defaultStyleCss$5 = "@layer kol-global {\n\t.sc-kol-tabs-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-tabs-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-tabs-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-tabs-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tkol-button-group-wc {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tkol-button-group-wc button {\n\t\tborder-bottom-color: transparent;\n\t\tborder-bottom-style: solid;\n\t\tdisplay: block;\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-right kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 2;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-left kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 0;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom kol-button-group-wc {\n\t\torder: 2;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-top kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-top > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t.sc-kol-tabs-default-h > div {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-left kol-button-group-wc,\n\t.sc-kol-tabs-default-h > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom kol-button-group-wc,\n\t.sc-kol-tabs-default-h > .tabs-align-right kol-button-group-wc {\n\t\torder: 1;\n\t}\n\n\t.sc-kol-tabs-default-h > div.tabs-align-left kol-button-group-wc > div,\n\t.sc-kol-tabs-default-h > div.tabs-align-left kol-button-group-wc > div > div,\n\t.sc-kol-tabs-default-h > div.tabs-align-right kol-button-group-wc > div,\n\t.sc-kol-tabs-default-h > div.tabs-align-right kol-button-group-wc > div > div {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-tabs-default-h > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n\t.sc-kol-tabs-default-h > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\t\twidth: 100%;\n\t}\n\n\t.sc-kol-tabs-default-h > div.tabs-align-bottom kol-button-group-wc div,\n\t.sc-kol-tabs-default-h > div.tabs-align-top kol-button-group-wc div {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}";
+const defaultStyleCss$5 = "@layer kol-global {\n  .sc-kol-tabs-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-tabs-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-tabs-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .sc-kol-tabs-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  kol-button-group-wc {\n    display: inline-flex;\n    flex-wrap: wrap;\n  }\n  kol-button-group-wc button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  div.grid,\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-right kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-left kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-bottom kol-button-group-wc {\n    order: 2;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-bottom kol-button-group-wc > div {\n    display: flex;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-bottom > kol-button-group-wc > div > div {\n    margin: 0 1em;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-top kol-button-group-wc {\n    order: 0;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-top kol-button-group-wc > div {\n    display: flex;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-top > kol-button-group-wc > div > div {\n    margin: 0 1em;\n  }\n  .sc-kol-tabs-default-h > div {\n    display: grid;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-left kol-button-group-wc,\n  .sc-kol-tabs-default-h > .tabs-align-top kol-button-group-wc {\n    order: 0;\n  }\n  .sc-kol-tabs-default-h > .tabs-align-bottom kol-button-group-wc,\n  .sc-kol-tabs-default-h > .tabs-align-right kol-button-group-wc {\n    order: 1;\n  }\n  .sc-kol-tabs-default-h > div.tabs-align-left kol-button-group-wc > div,\n  .sc-kol-tabs-default-h > div.tabs-align-left kol-button-group-wc > div > div,\n  .sc-kol-tabs-default-h > div.tabs-align-right kol-button-group-wc > div,\n  .sc-kol-tabs-default-h > div.tabs-align-right kol-button-group-wc > div > div {\n    display: grid;\n  }\n  .sc-kol-tabs-default-h > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n  .sc-kol-tabs-default-h > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n    width: 100%;\n  }\n  .sc-kol-tabs-default-h > div.tabs-align-bottom kol-button-group-wc div,\n  .sc-kol-tabs-default-h > div.tabs-align-top kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}";
 var KolTabsDefaultStyle0 = defaultStyleCss$5;
 
 class KolTabs {
@@ -30604,11 +30779,11 @@ class KolTabs {
             } }))));
     }
     render() {
-        return (hAsync(Host, null, hAsync("div", { ref: (el) => {
+        return (hAsync(Host, { key: 'f7b4f739dcf3ddae569791f576949514bd26741d' }, hAsync("div", { key: '1947414f89d74aac62c00f7398aa08241e04987a', ref: (el) => {
                 this.tabPanelsElement = el;
             }, class: {
                 [`tabs-align-${this.state._align}`]: true,
-            } }, this.renderButtonGroup(), hAsync("div", { class: "tabs-content", ref: this.catchTabPanelHost }))));
+            } }, this.renderButtonGroup(), hAsync("div", { key: '8b3086fabad45eb18092d3ce21e5196c90a5273d', class: "tabs-content", ref: this.catchTabPanelHost }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -30798,7 +30973,7 @@ class TextareaController extends InputController {
     }
 }
 
-const defaultStyleCss$4 = "@layer kol-global {\n\t.sc-kol-textarea-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-textarea-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-textarea-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-textarea-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n}";
+const defaultStyleCss$4 = "@layer kol-global {\n  .sc-kol-textarea-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-textarea-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-textarea-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .sc-kol-textarea-default-h {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  \n  \n  \n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  \n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  \n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  kol-input {\n    display: grid;\n  }\n  kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}";
 var KolTextareaDefaultStyle0 = defaultStyleCss$4;
 
 const increaseTextareaHeight = (el) => {
@@ -30818,7 +30993,7 @@ class KolTextarea {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("textarea", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput, style: {
+        return (hAsync(Host, { key: '1f5befb20f2815166e6c1c7f9a09c2a8de142450', class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { key: '3fe2af1e651b2620239c78f40511d9c96e505e52', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '53836837f98fdf4ca7a11d1b0f2ef01503300476', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a497cde428a625b9d93f49334e384ecd083d2773', slot: "input" }, hAsync("textarea", Object.assign({ key: 'b2c7a772bf5342445b1a2f57e8a5c72759946c83', 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 }))))));
     }
@@ -31032,7 +31207,7 @@ const InternalToast = ({ toastState, onClose, key }) => {
             hAsync("div", { ref: handleRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
 };
 
-const defaultStyleCss$3 = "@layer kol-component {\n\t.sc-kol-toast-container-default-h {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t}\n\n\t.close-all {\n\t\talign-self: flex-end;\n\t}\n}";
+const defaultStyleCss$3 = "@layer kol-component {\n  .sc-kol-toast-container-default-h {\n    display: flex;\n    flex-direction: column;\n    position: fixed;\n    z-index: 200;\n  }\n  .close-all {\n    align-self: flex-end;\n  }\n}";
 var KolToastContainerDefaultStyle0 = defaultStyleCss$3;
 
 const TRANSITION_TIMEOUT = 300;
@@ -31117,7 +31292,7 @@ function hideOverlay(overlay) {
     }
 }
 
-const styleCss = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-tooltip-wc {\n\t\tdisplay: contents;\n\t}\n\n\tkol-tooltip-wc .tooltip-floating {\n\t\tanimation-duration: 0.5s;\n\t\tanimation-iteration-count: 1;\n\t\tanimation-name: fadeInOpacity;\n\t\tanimation-timing-function: ease-in;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: fixed;\n\t\tvisibility: hidden;\n\t\t/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tmax-width: 90vw;\n\t\tmax-height: 90vh;\n\t\twidth: var(--kol-tooltip-width); /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n\t}\n\n\t/* Shared between content and arrow */\n\tkol-tooltip-wc .tooltip-area {\n\t\tbackground-color: #fff;\n\t\tcolor: #000;\n\t}\n\n\tkol-tooltip-wc .tooltip-arrow {\n\t\theight: 10px;\n\t\tposition: absolute;\n\t\ttransform: rotate(45deg);\n\t\twidth: 10px;\n\t\tz-index: 999;\n\t}\n\n\tkol-tooltip-wc .tooltip-content {\n\t\tposition: relative;\n\t\tz-index: 1000;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n";
+const styleCss = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  kol-tooltip-wc {\n    display: contents;\n  }\n  kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  kol-tooltip-wc .tooltip-arrow {\n    height: 10px;\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    z-index: 999;\n  }\n  kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}";
 var KolTooltipWcStyle0 = styleCss;
 
 class KolTooltip {
@@ -31230,7 +31405,7 @@ class KolTooltip {
         this.showOrHideTooltip();
     }
     render() {
-        return (hAsync(Host, null, this.state._label !== '' && (hAsync("div", { class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync("kol-span-wc", { class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
+        return (hAsync(Host, { key: '88ed1e69c00d774f3687aa42f681743f343d950f' }, this.state._label !== '' && (hAsync("div", { class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync("kol-span-wc", { class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -31300,7 +31475,7 @@ class KolTooltip {
     }; }
 }
 
-const defaultStyleCss$2 = "@layer kol-global {\n\t.sc-kol-tree-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-tree-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-tree-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.tree {\n\t\t&:focus-within {\n\t\t\toutline: 1px solid;\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n}";
+const defaultStyleCss$2 = "@layer kol-global {\n  .sc-kol-tree-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-tree-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-tree-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}";
 var KolTreeDefaultStyle0 = defaultStyleCss$2;
 
 class KolTree {
@@ -31309,7 +31484,7 @@ class KolTree {
         this._label = undefined;
     }
     render() {
-        return (hAsync("kol-tree-wc", { _label: this._label }, hAsync("slot", null)));
+        return (hAsync("kol-tree-wc", { key: 'c1243e12cbec596a28d57a0b54e6efa6a695e279', _label: this._label }, hAsync("slot", { key: 'f01ba5a15e93367e2033908b37f584168d688ef3' })));
     }
     static get style() { return {
         default: KolTreeDefaultStyle0
@@ -31357,7 +31532,7 @@ class KolTreeItem {
         return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
     }
     render() {
-        return (hAsync("kol-tree-item-wc", { _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", null)));
+        return (hAsync("kol-tree-item-wc", { key: 'b31c2f1633e1aadfce4fb4c80d19cfe16b1f004f', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '27373254af9cdb8c7547799e59d9ffbee7b0a2f5' })));
     }
     static get style() { return {
         default: KolTreeItemDefaultStyle0
@@ -31397,11 +31572,11 @@ class KolTreeItemWc {
         this._href = undefined;
     }
     render() {
-        return (hAsync(Host, { onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { class: "tree-item" }, hAsync("kol-link", { class: {
+        return (hAsync(Host, { key: 'ba7536b4c6f3830d30cf9dfbdce43d0fa4f7c4fc', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: '768094efd223e5213e9db1bc301b98a25cfc8982', class: "tree-item" }, hAsync("kol-link", { key: 'd70178ff1fb10c761ff39c147cad8e5025fb82b8', class: {
                 'tree-link': true,
                 active: Boolean(this.state._active),
-            }, _label: "", _href: this.state._href, ref: (element) => (this.linkElement = element), _tabIndex: this.state._active ? 0 : -1 }, hAsync("span", { slot: "expert" }, this.state._hasChildren &&
-            (this.state._open ? (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleCollapseClick(event) }, "-")) : (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleExpandClick(event) }, "+"))), ' ', this.state._label)), hAsync("ul", { hidden: !this.state._hasChildren || !this.state._open, role: "group" }, hAsync("slot", null)))));
+            }, _label: "", _href: this.state._href, ref: (element) => (this.linkElement = element), _tabIndex: this.state._active ? 0 : -1 }, hAsync("span", { key: '116f34650bbd9ffe172cd508d3782b63379f7b1e', slot: "expert" }, this.state._hasChildren &&
+            (this.state._open ? (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleCollapseClick(event) }, "-")) : (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleExpandClick(event) }, "+"))), ' ', this.state._label)), hAsync("ul", { key: '4ae5cd8eaee46ee7ae1a7404d2bee06bb6a89804', hidden: !this.state._hasChildren || !this.state._open, role: "group" }, hAsync("slot", { key: '6b99c6ab345710c2467cc3c19aa0c9684ae609f4' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);
@@ -31497,7 +31672,7 @@ class KolTreeWc {
         validateLabel(this, value);
     }
     render() {
-        return (hAsync(Host, { onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { class: "tree", "aria-label": this.state._label }, hAsync("ul", { class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", null)))));
+        return (hAsync(Host, { key: 'e60c77ae0b5a99ffcfe98db836cb9ea1cd4c4149', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: 'f192d670742c7e304b5f8b9571e16e4cce60d37b', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '0099533c1bfd1691818656555c92b2caf39770ae', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'e05b65f5929d98f0cab0c76f08622c5b312986bc' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === TREE_ITEM_TAG_NAME.toUpperCase();
@@ -31642,7 +31817,7 @@ class KolTreeWc {
     }; }
 }
 
-const defaultStyleCss = "@layer kol-global {\n\t.sc-kol-version-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-version-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-version-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}";
+const defaultStyleCss = "@layer kol-global {\n  .sc-kol-version-default-h {\n    \n    --a11y-min-size: 44px;\n    \n    background-color: white;\n    color: black;\n    \n    font-family: Verdana;\n  }\n  * {\n    \n    hyphens: auto;\n    \n    letter-spacing: inherit;\n    \n    word-break: break-word;\n    \n    word-spacing: inherit;\n  }\n  \n  \n  \n  \n  \n  [role=button],\n  button:not([role=link]),\n  kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  \n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    \n    font-family: inherit;\n    \n    font-size: inherit;\n  }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-version-default {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  \n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; \n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  .sc-kol-version-default-h {\n    \n    max-width: 100%;\n  }\n  * {\n    \n    box-sizing: border-box;\n  }\n  \n  kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  \n  kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  \n  .hide-label > kol-span-wc > span > span {\n    display: none;\n  }\n  \n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus kol-span-wc,\n  [disabled]:focus kol-span-wc {\n    outline: none !important;\n  }\n}";
 var KolVersionDefaultStyle0 = defaultStyleCss;
 
 class KolVersion {
@@ -31654,7 +31829,7 @@ class KolVersion {
         };
     }
     render() {
-        return (hAsync("kol-badge", { _color: "#bec5c9", _icons: {
+        return (hAsync("kol-badge", { key: 'de61381a4ead0b186ee524165135e461763be225', _color: "#bec5c9", _icons: {
                 left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
             }, _label: this.state._label }));
     }