@public-ui/hydrate 2.0.0-rc.0 → 2.0.0-rc.10

package/dist/index.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v4.3.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v4.7.1 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -1626,6 +1626,14 @@ class MockNodeList {
   }
 }
 class MockElement extends MockNode {
+  attachInternals() {
+    return new Proxy({}, {
+      get: function (_target, prop, _receiver) {
+        console.error(`NOTE: Property ${String(prop)} was accessed on ElementInternals, but this property is not implemented.
+Testing components with ElementInternals is fully supported in e2e tests.`);
+      },
+    });
+  }
   constructor(ownerDocument, nodeName) {
     super(ownerDocument, 1 /* NODE_TYPES.ELEMENT_NODE */, typeof nodeName === 'string' ? nodeName : null, null);
     this.namespaceURI = null;
@@ -4953,7 +4961,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'kolibri';
-const BUILD = /* kolibri */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, patchPseudoShadowDom: false, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* kolibri */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -5267,7 +5275,7 @@ var loglevel = createCommonjsModule(function (module) {
 }));
 });
 
-const STORE="object"==typeof window?window:"object"==typeof global?global:"object"==typeof self?self:{};let lockThemePatching=!0,warrentyWarning=!1;const THEME_NAME_PATTERN=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,isThemeNameValid=e=>"string"==typeof e&&THEME_NAME_PATTERN.test(e),validateThemeName=e=>{if(!1===isThemeNameValid(e))throw new Error(`[Theming] The theme identifier "${"string"==typeof e?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},patchThemeTag=(e,t,o)=>{validateThemeName(e),!0===lockThemePatching&&!1===warrentyWarning&&(warrentyWarning=!0,loglevel.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.\n\nimport { register } from '@a11y-ui/core';\nimport { defineCustomElements } from '...';\nimport { THEME } from '...';\n\nregister(THEME, defineCustomElements)\n\t.then(() => {\n\t\tconst htmlDivElement: HTMLElement | null = document.querySelector<HTMLElement>('#my-app');\n    if (htmlDivElement instanceof HTMLElement) {\n      const root = createRoot(htmlDivElement);\n      root.render(<App />);\n    }\n  })\n  .catch(console.warn);`)),"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={}),"object"!=typeof STORE.A11yUi||null===STORE.A11yUi||"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes||(STORE.A11yUi.Themes={}),"object"!=typeof STORE.A11yUi||null===STORE.A11yUi||"object"!=typeof STORE.A11yUi.Themes||null===STORE.A11yUi.Themes||"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]||(STORE.A11yUi.Themes[e]={}),"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&(STORE.A11yUi.Themes[e][t]=o);},patchTheme=(e,t)=>{if(validateThemeName(e),"object"==typeof t&&null!==t){Object.getOwnPropertyNames(t).forEach((o=>{const s=t[o];"string"==typeof s&&s.length>0&&patchThemeTag(e,o,s);}));}return e},getThemeNode=e=>{if(e instanceof HTMLElement){if("string"==typeof e.dataset.theme)return e;{let t=e.parentNode;for(;t instanceof ShadowRoot;)t=t.host;return getThemeNode(t)}}return null},getEncroachCss=(e={})=>"false"!==e.themeEncroachCss&&"true"!==e.themeReset&&{mode:"after"===e.themeEncroachCssMode||"before"===e.themeEncroachCssMode?e.themeEncroachCssMode:"before"},isTheCurrentThemeConfigValid=()=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Theme&&null!==STORE.A11yUi.Theme&&"boolean"==typeof STORE.A11yUi.Theme.cache&&"object"==typeof STORE.A11yUi.Theme.encroachCss&&null!==typeof STORE.A11yUi.Theme.encroachCss&&"string"==typeof STORE.A11yUi.Theme.encroachCss.mode&&"string"==typeof STORE.A11yUi.Theme.name,getThemeDetails=e=>{if(isTheCurrentThemeConfigValid())return STORE.A11yUi.Theme;{const t={cache:!0,encroachCss:getEncroachCss(),loglevel:"silent",name:null},o=getThemeNode(e);return o instanceof HTMLElement&&(t.cache="false"!==o.dataset.themeCache,t.encroachCss=getEncroachCss(o.dataset),t.loglevel="debug"===o.dataset.themeLoglevel?o.dataset.themeLoglevel:"silent",t.name=o.dataset.theme||null),t}},getThemeOptionDefaults=(e,t)=>({cache:!1!==t.cache,detect:"auto"===t.detect?"auto":"fixed",encroachCss:!1!==t.encroachCss&&("object"!=typeof t.encroachCss||null==t.encroachCss||"after"!==t.encroachCss.mode&&"before"!==t.encroachCss.mode?{mode:"before"}:t.encroachCss),loglevel:"debug"===t.loglevel?t.loglevel:"silent",name:"string"==typeof t.name?t.name:e}),setConfigureTheme=(e,t)=>{!1!==isTheCurrentThemeConfigValid()||0!=("object"==typeof STORE.A11yUi&&null!==STORE.A11yUi)&&0!=("object"==typeof STORE.A11yUi.Theme&&null!==STORE.A11yUi.Theme)&&"default"===STORE.A11yUi.Theme.name||"object"==typeof t&&null!==t&&("fixed"===(t=getThemeOptionDefaults(e,t)).detect?(null===t.name&&"string"==typeof e&&(t.name=e),e===t.name&&("object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={}),STORE.A11yUi.Theme=t,loglevel.info(`[Theming] Theme "${e}" was set as default theme.`))):loglevel.warn("[Theming] The presetting of theme options is only relevant by using 'fixed' detection mode."));};let registered=!1;const register$1=(e,t,o={})=>{!1===registered&&(registered=!0,lockThemePatching=!1),"function"==typeof e?e=new Set([e]):Array.isArray(e)&&(e=new Set(e)),e instanceof Set&&e.forEach((e=>{"function"==typeof e&&1===e.length?setConfigureTheme(e(patchTheme),{cache:o.theme?.cache,detect:o.theme?.detect,encroachCss:o.theme?.encroachCss,name:o.theme?.name}):loglevel.error("[Theming] Es wurde versucht eine nicht kompatibles Theme zu laden.");})),lockThemePatching=!0,"function"==typeof t?t=new Set([t]):Array.isArray(t)&&(t=new Set(t));const s=[];return t.forEach((e=>s.push(e()))),Promise.all(s)};const STYLING_TASK_QUEUE=new Map,HYDRATED_HISTORY=[],CSS_PROPERTIES_REGISTERED=new Set,CSS_STYLE_CACHE=new Map,REGEX_CSS_PROPERTIES=/--[^;]+/g,REGEX_SPLIT_CSS_PROPERTY=/:/;"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={CSS_STYLE_CACHE:CSS_STYLE_CACHE,HYDRATED_HISTORY:HYDRATED_HISTORY,STYLING_TASK_QUEUE:STYLING_TASK_QUEUE});const extractProperties=(e,t)=>{let o=t.match(REGEX_CSS_PROPERTIES);if(Array.isArray(o)){o=o.filter((e=>REGEX_SPLIT_CSS_PROPERTY.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}CSS_PROPERTIES_REGISTERED.add(e);},getCssStyle=(e,t)=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&"string"==typeof STORE.A11yUi.Themes[e][t]?STORE.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",removeStyle=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName))break;e.removeChild(t);}},patchStyle=(e,t)=>{try{const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}catch(o){t.reverse().forEach((t=>{const o=document.createElement("style");o.innerHTML=t,e.insertBefore(o,e.firstChild);}));}},encroachStyles=(e,t,o)=>{if(!1!==o){const s=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch(e){r=[];}"before"===o?.mode?(s.reverse().forEach((e=>t.unshift(e.innerHTML))),r.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(s.forEach((e=>t.push(e.innerHTML))),r.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},setThemeStyleAfterHydrated=(e,t,o)=>{const s=t.name||"default";let r;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch(t){r=e;}if(CSS_STYLE_CACHE.get(s)?.has(e.tagName))switchStyle(e,r,CSS_STYLE_CACHE.get(s)?.get(e.tagName),o);else {const n=getCssStyle(s,"PROPERTIES"),a=getCssStyle(s,"GLOBAL"),l=getCssStyle(s,e.tagName);!1===CSS_PROPERTIES_REGISTERED.has(s)&&extractProperties(s,a);const i=[n,a,l];encroachStyles(r,i,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,i),!0===t.cache&&(!1===CSS_STYLE_CACHE.has(s)&&CSS_STYLE_CACHE.set(s,new Map),CSS_STYLE_CACHE.get(s)?.set(e.tagName,i)),switchStyle(e,r,i,o);}},switchStyle=(e,t,o,s)=>{removeStyle(t),patchStyle(t,o),e.style.display=s;},logHydratedHistory=e=>{"debug"===e.loglevel&&HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:STYLING_TASK_QUEUE.size});},pushToDoTask=(e,t)=>{STYLING_TASK_QUEUE.set(e,{styleDisplay:e.style.display?`${e.style.display}`:null,themeDetails:t});},loggedPushToDoTask=(e,t)=>{pushToDoTask(e,t),logHydratedHistory(t);},deleteDoneTask=e=>{STYLING_TASK_QUEUE.delete(e);},loggedDeleteDoneTask=(e,t)=>{deleteDoneTask(e),logHydratedHistory(t);},waitForHydrated=e=>{const t=setTimeout((()=>{if(clearTimeout(t),STYLING_TASK_QUEUE.has(e)&&e.classList.contains("hydrated")){const{styleDisplay:t,themeDetails:o}=STYLING_TASK_QUEUE.get(e);setThemeStyleAfterHydrated(e,o,t),loggedDeleteDoneTask(e,o);}else waitForHydrated(e);}),25);},observerCallback=e=>{for(const t of e)if(STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=STYLING_TASK_QUEUE.get(t.target);setThemeStyleAfterHydrated(t.target,o,e),loggedDeleteDoneTask(t.target,o);}},observerOptions={attributes:!0,attributeFilter:["class"],childList:!1,subtree:!1};let observer;try{observer=new MutationObserver(observerCallback);}catch(e){observer=null;}const setThemeStyle=(e,t)=>{loggedPushToDoTask(e,t),observer?observer.observe(e,observerOptions):waitForHydrated(e),e.style.display="none";};
+const STORE="object"==typeof window?window:"object"==typeof global?global:"object"==typeof self?self:{};let lockThemePatching=!0,warrentyWarning=!1;const THEME_NAME_PATTERN=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,isThemeNameValid=e=>"string"==typeof e&&THEME_NAME_PATTERN.test(e),validateThemeName=e=>{if(!1===isThemeNameValid(e))throw new Error(`[Theming] The theme identifier "${"string"==typeof e?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},patchThemeTag=(e,t,o,s=!1)=>{validateThemeName(e),!0===lockThemePatching&&!1===warrentyWarning&&(warrentyWarning=!0,loglevel.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.\n\n\timport { register } from 'adopted-style-sheets';\n\timport { defineCustomElements } from '...';\n\timport { THEME } from '...';\n\n\tregister(THEME, defineCustomElements)\n\t.then(() => {\n\t\t// run your app or website\n\t})\n\t.catch(console.warn);`)),"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={}),"object"!=typeof STORE.A11yUi||null===STORE.A11yUi||"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes||(STORE.A11yUi.Themes={}),"object"!=typeof STORE.A11yUi||null===STORE.A11yUi||"object"!=typeof STORE.A11yUi.Themes||null===STORE.A11yUi.Themes||"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]||(STORE.A11yUi.Themes[e]={}),"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&(s&&"string"==typeof STORE.A11yUi.Themes[e][t]?STORE.A11yUi.Themes[e][t]+=o:STORE.A11yUi.Themes[e][t]=o);},patchTheme=(e,t,o=!1)=>{if(validateThemeName(e),"object"==typeof t&&null!==t){Object.getOwnPropertyNames(t).forEach((s=>{const r=t[s];"string"==typeof r&&r.length>0&&patchThemeTag(e,s,r,o);}));}return e},getThemeNode=e=>{if(e instanceof HTMLElement){if("string"==typeof e.dataset.theme)return e;{let t=e.parentNode;for(;t instanceof ShadowRoot;)t=t.host;return getThemeNode(t)}}return null},getEncroachCss=(e={})=>"false"!==e.themeEncroachCss&&"true"!==e.themeReset&&{mode:"after"===e.themeEncroachCssMode||"before"===e.themeEncroachCssMode?e.themeEncroachCssMode:"before"},isTheCurrentThemeConfigValid=()=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Theme&&null!==STORE.A11yUi.Theme&&"boolean"==typeof STORE.A11yUi.Theme.cache&&"object"==typeof STORE.A11yUi.Theme.encroachCss&&null!==typeof STORE.A11yUi.Theme.encroachCss&&"string"==typeof STORE.A11yUi.Theme.encroachCss.mode&&"string"==typeof STORE.A11yUi.Theme.name,isTheCurrentThemeNotDefault=()=>!1==("object"==typeof STORE.A11yUi&&null!==STORE.A11yUi)||!1==("object"==typeof STORE.A11yUi.Theme&&null!==STORE.A11yUi.Theme)||"default"!==STORE.A11yUi.Theme.name,getThemeDetails=e=>{if(isTheCurrentThemeConfigValid())return STORE.A11yUi.Theme;{const t={cache:!0,encroachCss:getEncroachCss(),loglevel:"silent",name:null},o=getThemeNode(e);return o instanceof HTMLElement&&(t.cache="false"!==o.dataset.themeCache,t.encroachCss=getEncroachCss(o.dataset),t.loglevel="debug"===o.dataset.themeLoglevel?o.dataset.themeLoglevel:"silent",t.name=o.dataset.theme||null),t}},getThemeOptionDefaults=(e,t)=>({cache:!1!==t.cache,detect:"auto"===t.detect?"auto":"fixed",encroachCss:!1!==t.encroachCss&&("object"!=typeof t.encroachCss||null==t.encroachCss||"after"!==t.encroachCss.mode&&"before"!==t.encroachCss.mode?{mode:"before"}:t.encroachCss),loglevel:"debug"===t.loglevel?t.loglevel:"silent",name:"string"==typeof t.name?t.name:e}),setConfigureTheme=(e,t)=>{!1===isTheCurrentThemeConfigValid()&&isTheCurrentThemeNotDefault()&&"object"==typeof t&&null!==t&&("fixed"===(t=getThemeOptionDefaults(e,t)).detect?(null===t.name&&"string"==typeof e&&(t.name=e),e===t.name&&("object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={}),STORE.A11yUi.Theme=t,loglevel.info(`[Theming] Theme "${e}" was set as default theme.`))):loglevel.warn("[Theming] The presetting of theme options is only relevant by using 'fixed' detection mode."));};let registered=!1;const register$1=(e,t,o={})=>{!1===registered&&(registered=!0,lockThemePatching=!1),"function"==typeof e?e=new Set([e]):Array.isArray(e)&&(e=new Set(e)),e instanceof Set&&e.forEach((e=>{"function"==typeof e&&1===e.length?setConfigureTheme(e(patchTheme),{cache:o.theme?.cache,detect:o.theme?.detect,encroachCss:o.theme?.encroachCss,name:o.theme?.name}):loglevel.error("[Theming] Es wurde versucht eine nicht kompatibles Theme zu laden.");})),lockThemePatching=!0,"function"==typeof t?t=new Set([t]):Array.isArray(t)&&(t=new Set(t));const s=[];return t.forEach((e=>s.push(e()))),Promise.all(s)};const STYLING_TASK_QUEUE=new Map,HYDRATED_HISTORY=[],CSS_PROPERTIES_REGISTERED=new Set,CSS_STYLE_CACHE=new Map,REGEX_CSS_PROPERTIES=/--[^;]+/g,REGEX_SPLIT_CSS_PROPERTY=/:/;"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={CSS_STYLE_CACHE:CSS_STYLE_CACHE,HYDRATED_HISTORY:HYDRATED_HISTORY,STYLING_TASK_QUEUE:STYLING_TASK_QUEUE});const extractProperties=(e,t)=>{let o=t.match(REGEX_CSS_PROPERTIES);if(Array.isArray(o)){o=o.filter((e=>REGEX_SPLIT_CSS_PROPERTY.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}CSS_PROPERTIES_REGISTERED.add(e);},getCssStyle=(e,t)=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&"string"==typeof STORE.A11yUi.Themes[e][t]?STORE.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",removeStyle=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName))break;e.removeChild(t);}},patchStyle=(e,t)=>{try{const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}catch(o){t.reverse().forEach((t=>{const o=document.createElement("style");o.innerHTML=t,e.insertBefore(o,e.firstChild);}));}},encroachStyles=(e,t,o)=>{if(!1!==o){const s=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch(e){r=[];}"before"===o?.mode?(s.reverse().forEach((e=>t.unshift(e.innerHTML))),r.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(s.forEach((e=>t.push(e.innerHTML))),r.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},setThemeStyleAfterHydrated=(e,t,o)=>{const s=t.name||"default";let r;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch(t){r=e;}if(CSS_STYLE_CACHE.get(s)?.has(e.tagName))switchStyle(e,r,CSS_STYLE_CACHE.get(s)?.get(e.tagName),o);else {const a=getCssStyle(s,"PROPERTIES"),n=getCssStyle(s,"GLOBAL"),l=getCssStyle(s,e.tagName);!1===CSS_PROPERTIES_REGISTERED.has(s)&&extractProperties(s,n);const i=[a,n,l];encroachStyles(r,i,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,i),!0===t.cache&&(!1===CSS_STYLE_CACHE.has(s)&&CSS_STYLE_CACHE.set(s,new Map),CSS_STYLE_CACHE.get(s)?.set(e.tagName,i)),switchStyle(e,r,i,o);}},switchStyle=(e,t,o,s)=>{removeStyle(t),patchStyle(t,o),e.style.display=s;},logHydratedHistory=e=>{"debug"===e.loglevel&&HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:STYLING_TASK_QUEUE.size});},pushToDoTask=(e,t)=>{STYLING_TASK_QUEUE.set(e,{styleDisplay:e.style.display?`${e.style.display}`:null,themeDetails:t});},loggedPushToDoTask=(e,t)=>{pushToDoTask(e,t),logHydratedHistory(t);},deleteDoneTask=e=>{STYLING_TASK_QUEUE.delete(e);},loggedDeleteDoneTask=(e,t)=>{deleteDoneTask(e),logHydratedHistory(t);},waitForHydrated=e=>{const t=setTimeout((()=>{if(clearTimeout(t),STYLING_TASK_QUEUE.has(e)&&e.classList.contains("hydrated")){const{styleDisplay:t,themeDetails:o}=STYLING_TASK_QUEUE.get(e);setThemeStyleAfterHydrated(e,o,t),loggedDeleteDoneTask(e,o);}else waitForHydrated(e);}),25);},observerCallback=e=>{for(const t of e)if(STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=STYLING_TASK_QUEUE.get(t.target);setThemeStyleAfterHydrated(t.target,o,e),loggedDeleteDoneTask(t.target,o);}},observerOptions={attributes:!0,attributeFilter:["class"],childList:!1,subtree:!1};let observer;try{observer=new MutationObserver(observerCallback);}catch(e){observer=null;}const setThemeStyle=(e,t)=>{loggedPushToDoTask(e,t),observer?observer.observe(e,observerOptions):waitForHydrated(e),e.style.display="none";};
 
 const consoleLogger = {
   type: 'logger',
@@ -5756,7 +5764,8 @@ class Translator extends EventEmitter {
             usedKey: key,
             exactUsedKey: key,
             usedLng: lng,
-            usedNS: namespace
+            usedNS: namespace,
+            usedParams: this.getUsedParamsDetails(options)
           };
         }
         return `${namespace}${nsSeparator}${key}`;
@@ -5767,7 +5776,8 @@ class Translator extends EventEmitter {
           usedKey: key,
           exactUsedKey: key,
           usedLng: lng,
-          usedNS: namespace
+          usedNS: namespace,
+          usedParams: this.getUsedParamsDetails(options)
         };
       }
       return key;
@@ -5792,6 +5802,7 @@ class Translator extends EventEmitter {
         }) : `key '${key} (${this.language})' returned an object instead of string.`;
         if (returnDetails) {
           resolved.res = r;
+          resolved.usedParams = this.getUsedParamsDetails(options);
           return resolved;
         }
         return r;
@@ -5892,6 +5903,7 @@ class Translator extends EventEmitter {
     }
     if (returnDetails) {
       resolved.res = res;
+      resolved.usedParams = this.getUsedParamsDetails(options);
       return resolved;
     }
     return res;
@@ -6041,6 +6053,30 @@ class Translator extends EventEmitter {
     if (this.i18nFormat && this.i18nFormat.getResource) return this.i18nFormat.getResource(code, ns, key, options);
     return this.resourceStore.getResource(code, ns, key, options);
   }
+  getUsedParamsDetails() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const optionsKeys = ['defaultValue', 'ordinal', 'context', 'replace', 'lng', 'lngs', 'fallbackLng', 'ns', 'keySeparator', 'nsSeparator', 'returnObjects', 'returnDetails', 'joinArrays', 'postProcess', 'interpolation'];
+    const useOptionsReplaceForData = options.replace && typeof options.replace !== 'string';
+    let data = useOptionsReplaceForData ? options.replace : options;
+    if (useOptionsReplaceForData && typeof options.count !== 'undefined') {
+      data.count = options.count;
+    }
+    if (this.options.interpolation.defaultVariables) {
+      data = {
+        ...this.options.interpolation.defaultVariables,
+        ...data
+      };
+    }
+    if (!useOptionsReplaceForData) {
+      data = {
+        ...data
+      };
+      for (const key of optionsKeys) {
+        delete data[key];
+      }
+    }
+    return data;
+  }
   static hasDefaultValue(options) {
     const prefix = 'defaultValue';
     for (const option in options) {
@@ -7613,15 +7649,19 @@ class ModalService {
     lockedElements.forEach(this.unlockElement.bind(this));
   }
   lockFocus(hostElement, excludeElement) {
-    if (hostElement !== excludeElement && (hostElement instanceof HTMLElement || hostElement instanceof ShadowRoot)) {
-      if (hostElement instanceof HTMLElement) {
-        this.lockElement(hostElement);
-        this.lockFocus(hostElement.shadowRoot, excludeElement);
-      }
-      for (let i = 0; i < hostElement.children.length; i++) {
-        this.lockFocus(hostElement.children[i], excludeElement);
+    try {
+      if (hostElement !== excludeElement && (hostElement instanceof HTMLElement || hostElement instanceof ShadowRoot)) {
+        if (hostElement instanceof HTMLElement) {
+          this.lockElement(hostElement);
+          this.lockFocus(hostElement.shadowRoot, excludeElement);
+        }
+        for (let i = 0; i < hostElement.children.length; i++) {
+          this.lockFocus(hostElement.children[i], excludeElement);
+        }
       }
     }
+    catch (error) {
+    }
   }
   renderModalIfExists(activeElement) {
     if (activeElement instanceof HTMLElement) {
@@ -7810,7 +7850,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.0
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.10
 		`, {
       forceLog: true,
     });
@@ -7848,8 +7888,12 @@ if (processEnv === 'test') {
 
 var appGlobalScript = async () => {
   setMode((elm) => {
-    if (elm.shadowRoot instanceof ShadowRoot) {
-      setThemeStyle(elm, getThemeDetails(elm));
+    try {
+      if (elm.shadowRoot instanceof ShadowRoot) {
+        setThemeStyle(elm, getThemeDetails(elm));
+      }
+    }
+    catch (error) {
     }
     return 'default';
   });
@@ -7902,7 +7946,7 @@ function hydrateApp(e, t, o, n, s) {
  let p, h = !1;
  try {
   function u() {
-   return g(this);
+   return L(this);
   }
   function f(e) {
    if (isValidComponent(e, t) && !getHostRef(e)) {
@@ -7946,7 +7990,14 @@ function hydrateApp(e, t, o, n, s) {
     }(e, t.cmpMeta));
    }
   }
-  function g(n) {
+  function g(e) {
+   if (null != e && 1 === e.nodeType) {
+    f(e);
+    const t = e.children;
+    for (let e = 0, o = t.length; e < o; e++) g(t[e]);
+   }
+  }
+  function L(n) {
    return i.delete(n), isValidComponent(n, t) && o.hydratedCount < t.maxHydrateCount && !r.has(n) && shouldHydrate(n) ? (r.add(n), 
    async function s(e, t, o, n, l) {
     o = o.toLowerCase();
@@ -7972,29 +8023,24 @@ function hydrateApp(e, t, o, n, s) {
     }
    }(e, o, n.nodeName, n, d)) : m;
   }
+  function y() {
+   const e = Array.from(i).filter((e => e.parentElement));
+   return e.length > 0 ? Promise.all(e.map(L)).then(y) : m;
+  }
   e.document.createElement = function t(o) {
    const n = c.call(e.document, o);
    return f(n), n;
   }, e.document.createElementNS = function t(o, n) {
    const s = $.call(e.document, o, n);
    return f(s), s;
-  }, p = global.setTimeout((function L() {
+  }, p = global.setTimeout((function I() {
    a(`Hydrate exceeded timeout${function e(t) {
     return Array.from(t).map(waitingOnElementMsg);
    }(d)}`);
   }), t.timeout), plt.$resourcesUrl$ = new URL(t.resourcesUrl || "./", doc.baseURI).href, 
-  globalScripts(), function e(t) {
-   if (null != t && 1 === t.nodeType) {
-    f(t);
-    const o = t.children;
-    for (let t = 0, n = o.length; t < n; t++) e(o[t]);
-   }
-  }(e.document.body), function e() {
-   const t = Array.from(i).filter((e => e.parentElement));
-   return t.length > 0 ? Promise.all(t.map(g)).then(e) : m;
-  }().then(l).catch(a);
- } catch (y) {
-  a(y);
+  globalScripts(), g(e.document.body), y().then(l).catch(a);
+ } catch (D) {
+  a(D);
  }
 }
 
@@ -8205,10 +8251,13 @@ const createTime = (e, t = "") => {
     r !== (r = r.replace(/^xlink\:?/, "")) && (t = r, d = !0), null == n || !1 === n ? !1 === n && "" !== e.getAttribute(t) || (d ? e.removeAttributeNS(XLINK_NS, t) : e.removeAttribute(t)) : (!a || 4 & l || s) && !i && (n = !0 === n ? "" : n, 
     d ? e.setAttributeNS(XLINK_NS, t, n) : e.setAttribute(t, n));
    }
-  } else t = "-" === t[2] ? t.slice(3) : isMemberInElement(win, r) ? r.slice(2) : r[2] + t.slice(3), 
-  o && plt.rel(e, t, o, !1), n && plt.ael(e, t, n, !1);
+  } else if (t = "-" === t[2] ? t.slice(3) : isMemberInElement(win, r) ? r.slice(2) : r[2] + t.slice(3), 
+  o || n) {
+   const s = t.endsWith(CAPTURE_EVENT_SUFFIX);
+   t = t.replace(CAPTURE_EVENT_REGEX, ""), o && plt.rel(e, t, o, s), n && plt.ael(e, t, n, s);
+  }
  }
-}, parseClassListRegex = /\s/, parseClassList = e => e ? e.split(parseClassListRegex) : [], updateElement = (e, t, o, n) => {
+}, parseClassListRegex = /\s/, parseClassList = e => e ? e.split(parseClassListRegex) : [], CAPTURE_EVENT_SUFFIX = "Capture", CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$"), updateElement = (e, t, o, n) => {
  const s = 11 === t.$elm$.nodeType && t.$elm$.host ? t.$elm$.host : t.$elm$, l = e && e.$attrs$ || EMPTY_OBJ, a = t.$attrs$ || EMPTY_OBJ;
  for (n in l) n in a || setAccessor(s, n, l[n], void 0, o, t.$flags$);
  for (n in a) setAccessor(s, n, l[n], a[n], o, t.$flags$);
@@ -8217,28 +8266,31 @@ const createTime = (e, t = "") => {
 let scopeId, contentRef, hostTagName, useNativeShadowDom = !1, checkSlotFallbackVisibility = !1, checkSlotRelocate = !1, isSvgMode = !1;
 
 const createElm = (e, t, o, n) => {
- const s = t.$children$[o];
- let l, a, r, i = 0;
- if (!useNativeShadowDom && (checkSlotRelocate = !0, "slot" === s.$tag$ && (scopeId && n.classList.add(scopeId + "-s"), 
- s.$flags$ |= s.$children$ ? 2 : 1)), null !== s.$text$) l = s.$elm$ = doc.createTextNode(s.$text$); else if (1 & s.$flags$) l = s.$elm$ = slotReferenceDebugNode(s) ; else {
-  if (!isSvgMode && (isSvgMode = "svg" === s.$tag$), l = s.$elm$ = doc.createElementNS(isSvgMode ? "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml", 2 & s.$flags$ ? "slot-fb" : s.$tag$) , 
-  isSvgMode && "foreignObject" === s.$tag$ && (isSvgMode = !1), updateElement(null, s, isSvgMode), 
-  null != scopeId && l["s-si"] !== scopeId && l.classList.add(l["s-si"] = scopeId), 
-  s.$children$) for (i = 0; i < s.$children$.length; ++i) a = createElm(e, s, i, l), 
-  a && l.appendChild(a);
-  ("svg" === s.$tag$ ? isSvgMode = !1 : "foreignObject" === l.tagName && (isSvgMode = !0));
+ var s;
+ const l = t.$children$[o];
+ let a, r, i, d = 0;
+ if (!useNativeShadowDom && (checkSlotRelocate = !0, "slot" === l.$tag$ && (scopeId && n.classList.add(scopeId + "-s"), 
+ l.$flags$ |= l.$children$ ? 2 : 1)), null !== l.$text$) a = l.$elm$ = doc.createTextNode(l.$text$); else if (1 & l.$flags$) a = l.$elm$ = slotReferenceDebugNode(l) ; else {
+  if (!isSvgMode && (isSvgMode = "svg" === l.$tag$), a = l.$elm$ = doc.createElementNS(isSvgMode ? "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml", 2 & l.$flags$ ? "slot-fb" : l.$tag$) , 
+  isSvgMode && "foreignObject" === l.$tag$ && (isSvgMode = !1), updateElement(null, l, isSvgMode), 
+  null != scopeId && a["s-si"] !== scopeId && a.classList.add(a["s-si"] = scopeId), 
+  l.$children$) for (d = 0; d < l.$children$.length; ++d) r = createElm(e, l, d, a), 
+  r && a.appendChild(r);
+  ("svg" === l.$tag$ ? isSvgMode = !1 : "foreignObject" === a.tagName && (isSvgMode = !0));
  }
- return (l["s-hn"] = hostTagName, 3 & s.$flags$ && (l["s-sr"] = !0, 
- l["s-cr"] = contentRef, l["s-sn"] = s.$name$ || "", r = e && e.$children$ && e.$children$[o], 
- r && r.$tag$ === s.$tag$ && e.$elm$ && putBackInOriginalLocation(e.$elm$, !1))), 
- l;
+ return (a["s-hn"] = hostTagName, 3 & l.$flags$ && (a["s-sr"] = !0, 
+ a["s-fs"] = null === (s = l.$attrs$) || void 0 === s ? void 0 : s.slot, a["s-cr"] = contentRef, 
+ a["s-sn"] = l.$name$ || "", i = e && e.$children$ && e.$children$[o], i && i.$tag$ === l.$tag$ && e.$elm$ && putBackInOriginalLocation(e.$elm$, !1))), 
+ a;
 }, putBackInOriginalLocation = (e, t) => {
+ var o;
  plt.$flags$ |= 1;
- const o = e.childNodes;
- for (let e = o.length - 1; e >= 0; e--) {
-  const n = o[e];
-  n["s-hn"] !== hostTagName && n["s-ol"] && (parentReferenceNode(n).insertBefore(n, referenceNode(n)), 
-  n["s-ol"].remove(), n["s-ol"] = void 0, checkSlotRelocate = !0), t && putBackInOriginalLocation(n, t);
+ const n = e.childNodes;
+ for (let e = n.length - 1; e >= 0; e--) {
+  const s = n[e];
+  s["s-hn"] !== hostTagName && s["s-ol"] && (parentReferenceNode(s).insertBefore(s, referenceNode(s)), 
+  s["s-ol"].remove(), s["s-ol"] = void 0, s["s-sh"] = void 0, 1 === s.nodeType && s.setAttribute("slot", null !== (o = s["s-sn"]) && void 0 !== o ? o : ""), 
+  checkSlotRelocate = !0), t && putBackInOriginalLocation(s, t);
  }
  plt.$flags$ &= -2;
 }, addVnodes = (e, t, o, n, s, l) => {
@@ -8279,67 +8331,87 @@ const createElm = (e, t, o, n) => {
  isSvgMode && "svg" === l && (isSvgMode = !1));
 }, updateFallbackSlotVisibility = e => {
  const t = e.childNodes;
- let o, n, s, l, a, r;
- for (n = 0, s = t.length; n < s; n++) if (o = t[n], 1 === o.nodeType) {
-  if (o["s-sr"]) for (a = o["s-sn"], o.hidden = !1, l = 0; l < s; l++) if (r = t[l].nodeType, 
-  t[l]["s-hn"] !== o["s-hn"] || "" !== a) {
-   if (1 === r && a === t[l].getAttribute("slot")) {
-    o.hidden = !0;
+ for (const e of t) if (1 === e.nodeType) {
+  if (e["s-sr"]) {
+   const o = e["s-sn"];
+   e.hidden = !1;
+   for (const n of t) if (n !== e) if (n["s-hn"] !== e["s-hn"] || "" !== o) {
+    if (1 === n.nodeType && (o === n.getAttribute("slot") || o === n["s-sn"])) {
+     e.hidden = !0;
+     break;
+    }
+   } else if (1 === n.nodeType || 3 === n.nodeType && "" !== n.textContent.trim()) {
+    e.hidden = !0;
     break;
    }
-  } else if (1 === r || 3 === r && "" !== t[l].textContent.trim()) {
-   o.hidden = !0;
-   break;
   }
-  updateFallbackSlotVisibility(o);
+  updateFallbackSlotVisibility(e);
  }
-}, relocateNodes = [], relocateSlotContent = e => {
- let t, o, n, s, l, a, r = 0;
- const i = e.childNodes, d = i.length;
- for (;r < d; r++) {
-  if (t = i[r], t["s-sr"] && (o = t["s-cr"]) && o.parentNode) for (n = o.parentNode.childNodes, 
-  s = t["s-sn"], a = n.length - 1; a >= 0; a--) o = n[a], o["s-cn"] || o["s-nr"] || o["s-hn"] === t["s-hn"] || (isNodeLocatedInSlot(o, s) ? (l = relocateNodes.find((e => e.$nodeToRelocate$ === o)), 
-  checkSlotFallbackVisibility = !0, o["s-sn"] = o["s-sn"] || s, l ? l.$slotRefNode$ = t : relocateNodes.push({
-   $slotRefNode$: t,
-   $nodeToRelocate$: o
-  }), o["s-sr"] && relocateNodes.map((e => {
-   isNodeLocatedInSlot(e.$nodeToRelocate$, o["s-sn"]) && (l = relocateNodes.find((e => e.$nodeToRelocate$ === o)), 
-   l && !e.$slotRefNode$ && (e.$slotRefNode$ = l.$slotRefNode$));
-  }))) : relocateNodes.some((e => e.$nodeToRelocate$ === o)) || relocateNodes.push({
-   $nodeToRelocate$: o
-  }));
-  1 === t.nodeType && relocateSlotContent(t);
+}, relocateNodes = [], markSlotContentForRelocation = e => {
+ let t, o, n;
+ for (const s of e.childNodes) {
+  if (s["s-sr"] && (t = s["s-cr"]) && t.parentNode) {
+   o = t.parentNode.childNodes;
+   const e = s["s-sn"];
+   for (n = o.length - 1; n >= 0; n--) if (t = o[n], !(t["s-cn"] || t["s-nr"] || t["s-hn"] === s["s-hn"] || BUILD.experimentalSlotFixes  )) if (isNodeLocatedInSlot(t, e)) {
+    let o = relocateNodes.find((e => e.$nodeToRelocate$ === t));
+    checkSlotFallbackVisibility = !0, t["s-sn"] = t["s-sn"] || e, o ? (o.$nodeToRelocate$["s-sh"] = s["s-hn"], 
+    o.$slotRefNode$ = s) : (t["s-sh"] = s["s-hn"], relocateNodes.push({
+     $slotRefNode$: s,
+     $nodeToRelocate$: t
+    })), t["s-sr"] && relocateNodes.map((e => {
+     isNodeLocatedInSlot(e.$nodeToRelocate$, t["s-sn"]) && (o = relocateNodes.find((e => e.$nodeToRelocate$ === t)), 
+     o && !e.$slotRefNode$ && (e.$slotRefNode$ = o.$slotRefNode$));
+    }));
+   } else relocateNodes.some((e => e.$nodeToRelocate$ === t)) || relocateNodes.push({
+    $nodeToRelocate$: t
+   });
+  }
+  1 === s.nodeType && markSlotContentForRelocation(s);
  }
 }, isNodeLocatedInSlot = (e, t) => 1 === e.nodeType ? null === e.getAttribute("slot") && "" === t || e.getAttribute("slot") === t : e["s-sn"] === t || "" === t, nullifyVNodeRefs = e => {
  (e.$attrs$ && e.$attrs$.ref && e.$attrs$.ref(null), e.$children$ && e.$children$.map(nullifyVNodeRefs));
 }, renderVdom = (e, t, o = !1) => {
- const n = e.$hostElement$, s = e.$cmpMeta$, l = e.$vnode$ || newVNode(null, null), a = isHost(t) ? t : h(null, null, t);
- if (hostTagName = n.tagName, BUILD.isDev  ) ;
- if (s.$attrsToReflect$ && (a.$attrs$ = a.$attrs$ || {}, s.$attrsToReflect$.map((([e, t]) => a.$attrs$[t] = n[e]))), 
- o && a.$attrs$) for (const e of Object.keys(a.$attrs$)) n.hasAttribute(e) && ![ "key", "ref", "style", "class" ].includes(e) && (a.$attrs$[e] = n[e]);
- if (a.$tag$ = null, a.$flags$ |= 4, e.$vnode$ = a, a.$elm$ = l.$elm$ = n.shadowRoot || n, 
- (scopeId = n["s-sc"]), (contentRef = n["s-cr"], 
- useNativeShadowDom = supportsShadow, checkSlotFallbackVisibility = !1), patch(l, a), 
+ var n, s;
+ const l = e.$hostElement$, a = e.$cmpMeta$, r = e.$vnode$ || newVNode(null, null), i = isHost(t) ? t : h(null, null, t);
+ if (hostTagName = l.tagName, BUILD.isDev  ) ;
+ if (a.$attrsToReflect$ && (i.$attrs$ = i.$attrs$ || {}, a.$attrsToReflect$.map((([e, t]) => i.$attrs$[t] = l[e]))), 
+ o && i.$attrs$) for (const e of Object.keys(i.$attrs$)) l.hasAttribute(e) && ![ "key", "ref", "style", "class" ].includes(e) && (i.$attrs$[e] = l[e]);
+ if (i.$tag$ = null, i.$flags$ |= 4, e.$vnode$ = i, i.$elm$ = r.$elm$ = l.shadowRoot || l, 
+ (scopeId = l["s-sc"]), (contentRef = l["s-cr"], 
+ useNativeShadowDom = supportsShadow, checkSlotFallbackVisibility = !1), patch(r, i), 
  BUILD.slotRelocation) {
   if (plt.$flags$ |= 1, checkSlotRelocate) {
-   let e, t, o, n, s, l;
-   relocateSlotContent(a.$elm$);
-   let r = 0;
-   for (;r < relocateNodes.length; r++) e = relocateNodes[r], t = e.$nodeToRelocate$, 
-   t["s-ol"] || (o = originalLocationDebugNode(t) , 
-   o["s-nr"] = t, t.parentNode.insertBefore(t["s-ol"] = o, t));
-   for (r = 0; r < relocateNodes.length; r++) if (e = relocateNodes[r], t = e.$nodeToRelocate$, 
-   e.$slotRefNode$) {
-    for (n = e.$slotRefNode$.parentNode, s = e.$slotRefNode$.nextSibling, o = t["s-ol"]; o = o.previousSibling; ) if (l = o["s-nr"], 
-    l && l["s-sn"] === t["s-sn"] && n === l.parentNode && (l = l.nextSibling, !l || !l["s-nr"])) {
-     s = l;
-     break;
+   markSlotContentForRelocation(i.$elm$);
+   for (const e of relocateNodes) {
+    const t = e.$nodeToRelocate$;
+    if (!t["s-ol"]) {
+     const e = originalLocationDebugNode(t) ;
+     e["s-nr"] = t, t.parentNode.insertBefore(t["s-ol"] = e, t);
     }
-    (!s && n !== t.parentNode || t.nextSibling !== s) && t !== s && (!t["s-hn"] && t["s-ol"] && (t["s-hn"] = t["s-ol"].parentNode.nodeName), 
-    n.insertBefore(t, s));
-   } else 1 === t.nodeType && (t.hidden = !0);
+   }
+   for (const e of relocateNodes) {
+    const t = e.$nodeToRelocate$, o = e.$slotRefNode$;
+    if (o) {
+     const e = o.parentNode;
+     let l = o.nextSibling;
+     {
+      let o = null === (n = t["s-ol"]) || void 0 === n ? void 0 : n.previousSibling;
+      for (;o; ) {
+       let n = null !== (s = o["s-nr"]) && void 0 !== s ? s : null;
+       if (n && n["s-sn"] === t["s-sn"] && e === n.parentNode && (n = n.nextSibling, !n || !n["s-nr"])) {
+        l = n;
+        break;
+       }
+       o = o.previousSibling;
+      }
+     }
+     (!l && e !== t.parentNode || t.nextSibling !== l) && t !== l && (!t["s-hn"] && t["s-ol"] && (t["s-hn"] = t["s-ol"].parentNode.nodeName), 
+     e.insertBefore(t, l));
+    } else 1 === t.nodeType && (t.hidden = !0);
+   }
   }
-  checkSlotFallbackVisibility && updateFallbackSlotVisibility(a.$elm$), plt.$flags$ &= -2, 
+  checkSlotFallbackVisibility && updateFallbackSlotVisibility(i.$elm$), plt.$flags$ &= -2, 
   relocateNodes.length = 0;
  }
 }, slotReferenceDebugNode = e => doc.createComment(`<slot${e.$name$ ? ' name="' + e.$name$ + '"' : ""}> (host=${hostTagName.toLowerCase()})`), originalLocationDebugNode = e => doc.createComment("org-location for " + (e.localName ? `<${e.localName}> (host=${e["s-hn"]})` : `[${e.textContent}]`)), attachToAncestor = (e, t) => {
@@ -8387,9 +8459,9 @@ const callRender = (e, t, o, n) => {
  (safeCall(s, "componentDidRender"), 
  BUILD.isDev ), 64 & e.$flags$ ? (n()) : (e.$flags$ |= 64, addHydratedFlag(o), 
  (safeCall(s, "componentDidLoad"), 
- BUILD.isDev ), n(), (e.$onReadyResolve$(o), l || appDidLoad())), e.$onInstanceResolve$(o), (e.$onRenderResolve$ && (e.$onRenderResolve$(), 
- e.$onRenderResolve$ = void 0), 512 & e.$flags$ && nextTick((() => scheduleUpdate(e, !1))), 
- e.$flags$ &= -517);
+ BUILD.isDev ), n(), (e.$onReadyResolve$(o), l || appDidLoad())), e.$onInstanceResolve$(o), 
+ (e.$onRenderResolve$ && (e.$onRenderResolve$(), e.$onRenderResolve$ = void 0), 
+ 512 & e.$flags$ && nextTick((() => scheduleUpdate(e, !1))), e.$flags$ &= -517);
 }, appDidLoad = e => {
  addHydratedFlag(doc.documentElement), nextTick((() => emitEvent(win, "appload", {
   detail: {
@@ -8477,10 +8549,11 @@ const callRender = (e, t, o, n) => {
   }
  }
  return e;
-}, initializeComponent = async (e, t, o, n, s) => {
+}, initializeComponent = async (e, t, o, n) => {
+ let s;
  if (0 == (32 & t.$flags$)) {
   if (t.$flags$ |= 32, BUILD.lazyLoad ) {
-   if ((s = loadModule(o)).then) {
+   if (s = loadModule(o), s.then) {
     const e = (() => {});
     s = await s, e();
    }
@@ -9973,6 +10046,7 @@ const ariaCurrentSubject = new Subject();
 class KoliBriDevHelper {
 }
 KoliBriDevHelper.patchTheme = patchTheme;
+KoliBriDevHelper.patchThemeTag = patchThemeTag;
 KoliBriDevHelper.querySelector = koliBriQuerySelector;
 KoliBriDevHelper.querySelectorAll = koliBriQuerySelectorAll;
 KoliBriDevHelper.stringifyJson = stringifyJson;
@@ -10015,18 +10089,24 @@ const validateLabel = (component, value, options = {}) => {
 };
 const validateLabelWithExpertSlot = validateLabel;
 
-const AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['"left", "right"']);
-const AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['"bottom", "top"']);
-const AVAILABLE_ALIGNMENT_VALUES = new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, ...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]);
+const horizontalAlignOptions = ['left', 'right'];
+const verticalAlignOptions = ['top', 'bottom'];
+const alignPropTypeOptions = [...horizontalAlignOptions, ...verticalAlignOptions];
+const validateAlign = (component, value) => {
+  validateAlignment(component, '_align', value);
+};
+
 const validateAlignment = (component, propName, value) => {
-  watchValidator(component, propName, (value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top', AVAILABLE_ALIGNMENT_VALUES, value, { defaultValue: 'top' });
+  watchValidator(component, propName, (value) => typeof value === 'string' && alignPropTypeOptions.includes(value), new Set(alignPropTypeOptions), value, {
+    defaultValue: 'top',
+  });
 };
 
 const validateTooltipAlign = (component, value) => {
   validateAlignment(component, '_tooltipAlign', value);
 };
 
-const defaultStyleCss$J = "/*!@:host*/.sc-kol-abbr-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-abbr-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-abbr-default,button.sc-kol-abbr-default:not([role='link']),kol-input.sc-kol-abbr-default .input.sc-kol-abbr-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-abbr-default,button.sc-kol-abbr-default,h1.sc-kol-abbr-default,h2.sc-kol-abbr-default,h3.sc-kol-abbr-default,h4.sc-kol-abbr-default,h5.sc-kol-abbr-default,h6.sc-kol-abbr-default,input.sc-kol-abbr-default,option.sc-kol-abbr-default,select.sc-kol-abbr-default,textarea.sc-kol-abbr-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-abbr-default:is(a,button).sc-kol-abbr-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-abbr-default-h{max-width:100%}/*!@**/*.sc-kol-abbr-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-abbr-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-abbr-default>span.sc-kol-abbr-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-abbr-default,button.sc-kol-abbr-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-abbr-default,input.sc-kol-abbr-default,option.sc-kol-abbr-default,select.sc-kol-abbr-default,textarea.sc-kol-abbr-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-abbr-default>kol-span-wc.sc-kol-abbr-default>span.sc-kol-abbr-default>span.sc-kol-abbr-default{display:none}/*!@:host > abbr*/.sc-kol-abbr-default-h>abbr.sc-kol-abbr-default{cursor:help}";
+const defaultStyleCss$I = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-abbr-default-h > abbr {\n\t\tcursor: help;\n\t}\n}";
 
 class KolAbbr {
   constructor(hostRef) {
@@ -10057,7 +10137,7 @@ class KolAbbr {
     "_tooltipAlign": ["validateTooltipAlign"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$J
+    default: defaultStyleCss$I
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -10077,16 +10157,18 @@ const validateOpen = (component, value, options) => {
   watchBoolean(component, '_open', value, options);
 };
 
+const headingLevelOptions = [0, 1, 2, 3, 4, 5, 6];
+
 const watchHeadingLevel = (component, value) => {
   watchValidator(component, '_level', (value) => {
-    return typeof value === 'number' && 0 <= value && value <= 6;
-  }, new Set(['Number {0, 1, 2, 3, 4, 5, 6}']), value, {
+    return typeof value === 'number' && headingLevelOptions.includes(value);
+  }, new Set([`Number {${headingLevelOptions.join(', ')}`]), value, {
     defaultValue: 1,
     required: true,
   });
 };
 
-const defaultStyleCss$I = "/*!@:host*/.sc-kol-accordion-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-accordion-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-accordion-default,button.sc-kol-accordion-default:not([role='link']),kol-input.sc-kol-accordion-default .input.sc-kol-accordion-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-accordion-default,button.sc-kol-accordion-default,h1.sc-kol-accordion-default,h2.sc-kol-accordion-default,h3.sc-kol-accordion-default,h4.sc-kol-accordion-default,h5.sc-kol-accordion-default,h6.sc-kol-accordion-default,input.sc-kol-accordion-default,option.sc-kol-accordion-default,select.sc-kol-accordion-default,textarea.sc-kol-accordion-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-accordion-default:is(a,button).sc-kol-accordion-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-accordion-default-h{max-width:100%}/*!@**/*.sc-kol-accordion-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-accordion-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-accordion-default>span.sc-kol-accordion-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-accordion-default,button.sc-kol-accordion-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-accordion-default,input.sc-kol-accordion-default,option.sc-kol-accordion-default,select.sc-kol-accordion-default,textarea.sc-kol-accordion-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-accordion-default>kol-span-wc.sc-kol-accordion-default>span.sc-kol-accordion-default>span.sc-kol-accordion-default{display:none}/*!@:host*/.sc-kol-accordion-default-h{display:block}/*!@.wrapper*/.wrapper.sc-kol-accordion-default{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows 0.3s}/*!@.accordion.open .wrapper*/.accordion.open.sc-kol-accordion-default .wrapper.sc-kol-accordion-default{grid-template-rows:1fr}/*!@.animation-wrapper*/.animation-wrapper.sc-kol-accordion-default{min-height:0;transition:visibility 0.3s;visibility:hidden}/*!@.accordion.open .animation-wrapper*/.accordion.open.sc-kol-accordion-default .animation-wrapper.sc-kol-accordion-default{visibility:visible}@media (prefers-reduced-motion){/*!@.animation-wrapper,\n\t.wrapper*/.animation-wrapper.sc-kol-accordion-default,.wrapper.sc-kol-accordion-default{transition-duration:0s}}/*!@.accordion kol-heading-wc kol-button-wc button kol-span-wc*/.accordion.sc-kol-accordion-default kol-heading-wc.sc-kol-accordion-default kol-button-wc.sc-kol-accordion-default button.sc-kol-accordion-default kol-span-wc.sc-kol-accordion-default{justify-items:start}";
+const defaultStyleCss$H = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\t.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}";
 
 featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
 
@@ -10098,6 +10180,9 @@ class KolAccordion {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.nonce = nonce();
+    this.catchRef = (ref) => {
+      propagateFocus(this.host, ref);
+    };
     this.onClick = (event) => {
       this._open = !this._open;
       setTimeout(() => {
@@ -10120,7 +10205,7 @@ class KolAccordion {
     return (hAsync(Host, null, hAsync("div", { class: {
         accordion: true,
         open: this.state._open === true,
-      } }, hAsync("kol-heading-wc", { _label: "", _level: this.state._level }, hAsync("kol-button-wc", { _ariaControls: this.nonce, _ariaExpanded: this.state._open, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { class: "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", { _label: "", _level: this.state._level }, hAsync("kol-button-wc", { ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { class: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", null)))))));
   }
   validateLabel(value) {
     validateLabel(this, value);
@@ -10142,6 +10227,7 @@ class KolAccordion {
     this.validateOn(this._on);
     this.validateOpen(this._open);
   }
+  get host() { return getElement(this); }
   static get watchers() { return {
     "_label": ["validateLabel"],
     "_level": ["validateLevel"],
@@ -10149,7 +10235,7 @@ class KolAccordion {
     "_open": ["validateOpen"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$I
+    default: defaultStyleCss$H
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -10167,7 +10253,7 @@ class KolAccordion {
   }; }
 }
 
-const defaultStyleCss$H = "/*!@:host*/.sc-kol-alert-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-alert-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-alert-default,button.sc-kol-alert-default:not([role='link']),kol-input.sc-kol-alert-default .input.sc-kol-alert-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-alert-default,button.sc-kol-alert-default,h1.sc-kol-alert-default,h2.sc-kol-alert-default,h3.sc-kol-alert-default,h4.sc-kol-alert-default,h5.sc-kol-alert-default,h6.sc-kol-alert-default,input.sc-kol-alert-default,option.sc-kol-alert-default,select.sc-kol-alert-default,textarea.sc-kol-alert-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-alert-default:is(a,button).sc-kol-alert-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-alert-default-h{max-width:100%}/*!@**/*.sc-kol-alert-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-alert-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-alert-default>span.sc-kol-alert-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-alert-default,button.sc-kol-alert-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-alert-default,input.sc-kol-alert-default,option.sc-kol-alert-default,select.sc-kol-alert-default,textarea.sc-kol-alert-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-alert-default>kol-span-wc.sc-kol-alert-default>span.sc-kol-alert-default>span.sc-kol-alert-default{display:none}/*!@:host*/.sc-kol-alert-default-h{display:block}/*!@kol-alert-wc*/kol-alert-wc.sc-kol-alert-default{display:grid}/*!@kol-alert-wc .heading*/kol-alert-wc.sc-kol-alert-default .heading.sc-kol-alert-default{display:flex;place-items:center}/*!@kol-alert-wc .heading > div*/kol-alert-wc.sc-kol-alert-default .heading.sc-kol-alert-default>div.sc-kol-alert-default{flex-grow:1}";
+const defaultStyleCss$G = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 class KolAlert {
   constructor(hostRef) {
@@ -10187,7 +10273,7 @@ class KolAlert {
     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))));
   }
   static get style() { return {
-    default: defaultStyleCss$H
+    default: defaultStyleCss$G
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -10232,6 +10318,8 @@ var locale_de = {
   'page-current': 'Seite {{page}}',
   'page-selected': 'Seite {{page}} ist ausgewählt',
   'page-per-site': '{{entries}} Einträge pro Seite',
+  'nav-maximize': 'Navigation maximieren',
+  'nav-minimize': 'Navigation minimieren',
   'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
   'open-link-in-tab': 'Der Link wird in einem neuen Tab geöffnet.',
   'kolibri-logo': 'Logo von KoliBri',
@@ -10267,6 +10355,8 @@ var locale_en = {
   'page-current': 'Page {{page}}',
   'page-selected': 'Page {{page}} is selected',
   'page-per-site': '{{entries}} entries per page',
+  'nav-maximize': 'Maximize navigation',
+  'nav-minimize': 'Minimize navigation',
   'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
   'open-link-in-tab': 'The link will open in a new tab.',
   'kolibri-logo': 'KoliBri logo',
@@ -10305,6 +10395,9 @@ const validateHasCloser = (component, value) => {
   watchBoolean(component, '_hasCloser', value);
 };
 
+const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'];
+const alertVariantOptions = ['card', 'msg'];
+
 const Icon = (props) => {
   return hAsync("kol-icon", { class: "heading-icon", _label: typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel, _icons: props.icon });
 };
@@ -10389,10 +10482,10 @@ class KolAlertWc {
     }
   }
   validateType(value) {
-    watchValidator(this, '_type', (value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'), new Set('String {success, info, warning, error}'), value);
+    watchValidator(this, '_type', (value) => typeof value === 'string' && alertTypeOptions.includes(value), new Set(`String {${alertTypeOptions.join(', ')}`), value);
   }
   validateVariant(value) {
-    watchValidator(this, '_variant', (value) => value === 'card' || value === 'msg', new Set('AlertVariant {card, msg}'), value);
+    watchValidator(this, '_variant', (value) => typeof value === 'string' && alertVariantOptions.includes(value), new Set(`AlertVariant {${alertVariantOptions.join(', ')}`), value);
   }
   componentWillLoad() {
     this.validateAlert(this._alert);
@@ -10431,7 +10524,7 @@ class KolAlertWc {
   }; }
 }
 
-const defaultStyleCss$G = "/*!@:host*/.sc-kol-avatar-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-avatar-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-avatar-default,button.sc-kol-avatar-default:not([role='link']),kol-input.sc-kol-avatar-default .input.sc-kol-avatar-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-avatar-default,button.sc-kol-avatar-default,h1.sc-kol-avatar-default,h2.sc-kol-avatar-default,h3.sc-kol-avatar-default,h4.sc-kol-avatar-default,h5.sc-kol-avatar-default,h6.sc-kol-avatar-default,input.sc-kol-avatar-default,option.sc-kol-avatar-default,select.sc-kol-avatar-default,textarea.sc-kol-avatar-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-avatar-default:is(a,button).sc-kol-avatar-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-avatar-default-h{max-width:100%}/*!@**/*.sc-kol-avatar-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-avatar-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-avatar-default>span.sc-kol-avatar-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-avatar-default,button.sc-kol-avatar-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-avatar-default,input.sc-kol-avatar-default,option.sc-kol-avatar-default,select.sc-kol-avatar-default,textarea.sc-kol-avatar-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-avatar-default>kol-span-wc.sc-kol-avatar-default>span.sc-kol-avatar-default>span.sc-kol-avatar-default{display:none}/*!@:host*/.sc-kol-avatar-default-h{display:block}/*!@.container*/.container.sc-kol-avatar-default{border-radius:50%;overflow:hidden;width:100px;height:100px}/*!@.image*/.image.sc-kol-avatar-default{width:100%;height:100%}/*!@.initials*/.initials.sc-kol-avatar-default{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#d3d3d3;font-size:2rem}";
+const defaultStyleCss$F = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\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}";
 
 class KolAvatar {
   constructor(hostRef) {
@@ -10443,7 +10536,7 @@ class KolAvatar {
     return (hAsync(Host, null, hAsync("kol-avatar-wc", { _src: this._src, _label: this._label })));
   }
   static get style() { return {
-    default: defaultStyleCss$G
+    default: defaultStyleCss$F
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -11041,7 +11134,7 @@ const handleColorChange = (value) => {
   };
 };
 
-const defaultStyleCss$F = "/*!@:host*/.sc-kol-badge-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-badge-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-badge-default,button.sc-kol-badge-default:not([role='link']),kol-input.sc-kol-badge-default .input.sc-kol-badge-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-badge-default,button.sc-kol-badge-default,h1.sc-kol-badge-default,h2.sc-kol-badge-default,h3.sc-kol-badge-default,h4.sc-kol-badge-default,h5.sc-kol-badge-default,h6.sc-kol-badge-default,input.sc-kol-badge-default,option.sc-kol-badge-default,select.sc-kol-badge-default,textarea.sc-kol-badge-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-badge-default:is(a,button).sc-kol-badge-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-badge-default-h{max-width:100%}/*!@**/*.sc-kol-badge-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-badge-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-badge-default>span.sc-kol-badge-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-badge-default,button.sc-kol-badge-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-badge-default,input.sc-kol-badge-default,option.sc-kol-badge-default,select.sc-kol-badge-default,textarea.sc-kol-badge-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-badge-default>kol-span-wc.sc-kol-badge-default>span.sc-kol-badge-default>span.sc-kol-badge-default{display:none}/*!@:host > span*/.sc-kol-badge-default-h>span.sc-kol-badge-default{display:inline-flex;place-items:center}/*!@:host > span > kol-button-wc button*/.sc-kol-badge-default-h>span.sc-kol-badge-default>kol-button-wc.sc-kol-badge-default button.sc-kol-badge-default{color:inherit}";
+const defaultStyleCss$E = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}\n\n\t.sc-kol-badge-default-h > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}";
 
 featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
 class KolBadge {
@@ -11105,7 +11198,7 @@ class KolBadge {
     "_smartButton": ["validateSmartButton"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$F
+    default: defaultStyleCss$E
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -11141,7 +11234,7 @@ const watchNavLinks = (className, component, value) => {
   uiUxHintMillerscheZahl(className, component.state._links.length);
 };
 
-const defaultStyleCss$E = "/*!@:host*/.sc-kol-breadcrumb-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-breadcrumb-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-breadcrumb-default,button.sc-kol-breadcrumb-default:not([role='link']),kol-input.sc-kol-breadcrumb-default .input.sc-kol-breadcrumb-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-breadcrumb-default,button.sc-kol-breadcrumb-default,h1.sc-kol-breadcrumb-default,h2.sc-kol-breadcrumb-default,h3.sc-kol-breadcrumb-default,h4.sc-kol-breadcrumb-default,h5.sc-kol-breadcrumb-default,h6.sc-kol-breadcrumb-default,input.sc-kol-breadcrumb-default,option.sc-kol-breadcrumb-default,select.sc-kol-breadcrumb-default,textarea.sc-kol-breadcrumb-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-breadcrumb-default:is(a,button).sc-kol-breadcrumb-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-breadcrumb-default-h{max-width:100%}/*!@**/*.sc-kol-breadcrumb-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-breadcrumb-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-breadcrumb-default>span.sc-kol-breadcrumb-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-breadcrumb-default,button.sc-kol-breadcrumb-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-breadcrumb-default,input.sc-kol-breadcrumb-default,option.sc-kol-breadcrumb-default,select.sc-kol-breadcrumb-default,textarea.sc-kol-breadcrumb-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-breadcrumb-default>kol-span-wc.sc-kol-breadcrumb-default>span.sc-kol-breadcrumb-default>span.sc-kol-breadcrumb-default{display:none}/*!@li,\nul*/li.sc-kol-breadcrumb-default,ul.sc-kol-breadcrumb-default{margin:0;padding:0;list-style:none;display:flex;gap:0.5em;flex-wrap:wrap;place-items:center}/*!@kol-icon::part(separator)*/kol-icon.sc-kol-breadcrumb-default::part(separator){font-weight:900;font-size:0.7em}/*!@kol-icon::part(separator):before*/kol-icon.sc-kol-breadcrumb-default::part(separator):before{content:'\\f054';font-family:'Font Awesome 6 Free'}";
+const defaultStyleCss$D = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 class KolBreadcrumb {
   constructor(hostRef) {
@@ -11183,7 +11276,7 @@ class KolBreadcrumb {
     "_links": ["validateLinks"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$E
+    default: defaultStyleCss$D
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -11199,15 +11292,15 @@ class KolBreadcrumb {
   }; }
 }
 
-const defaultStyleCss$D = "/*!@:host*/.sc-kol-button-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-button-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-button-default,button.sc-kol-button-default:not([role='link']),kol-input.sc-kol-button-default .input.sc-kol-button-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-button-default,button.sc-kol-button-default,h1.sc-kol-button-default,h2.sc-kol-button-default,h3.sc-kol-button-default,h4.sc-kol-button-default,h5.sc-kol-button-default,h6.sc-kol-button-default,input.sc-kol-button-default,option.sc-kol-button-default,select.sc-kol-button-default,textarea.sc-kol-button-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-button-default:is(a,button).sc-kol-button-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-button-default-h{max-width:100%}/*!@**/*.sc-kol-button-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-button-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-button-default>span.sc-kol-button-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-button-default,button.sc-kol-button-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-button-default,input.sc-kol-button-default,option.sc-kol-button-default,select.sc-kol-button-default,textarea.sc-kol-button-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-button-default>kol-span-wc.sc-kol-button-default>span.sc-kol-button-default>span.sc-kol-button-default{display:none}/*!@:host*/.sc-kol-button-default-h{display:inline-block}/*!@:is(a, button)*/.sc-kol-button-default:is(a,button).sc-kol-button-default{display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}/*!@:is(a, button) > kol-span-wc*/.sc-kol-button-default:is(a,button).sc-kol-button-default>kol-span-wc.sc-kol-button-default{margin:auto;width:100%}/*!@:is(button):disabled*/.sc-kol-button-default:is(button):disabled{cursor:not-allowed;opacity:0.5}";
+const defaultStyleCss$C = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
 
 class KolButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
+    this._accessKey = undefined;
     this._ariaControls = undefined;
     this._ariaExpanded = undefined;
     this._ariaSelected = undefined;
@@ -11232,16 +11325,17 @@ class KolButton {
         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, _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", { name: "expert", slot: "expert" }))));
   }
   get host() { return getElement(this); }
   static get style() { return {
-    default: defaultStyleCss$D
+    default: defaultStyleCss$C
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
     "$tagName$": "kol-button",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_ariaControls": [1, "_aria-controls"],
       "_ariaExpanded": [4, "_aria-expanded"],
       "_ariaSelected": [4, "_aria-selected"],
@@ -11267,7 +11361,7 @@ class KolButton {
   }; }
 }
 
-const defaultStyleCss$C = "/*!@:host*/.sc-kol-button-group-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-button-group-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-button-group-default,button.sc-kol-button-group-default:not([role='link']),kol-input.sc-kol-button-group-default .input.sc-kol-button-group-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-button-group-default,button.sc-kol-button-group-default,h1.sc-kol-button-group-default,h2.sc-kol-button-group-default,h3.sc-kol-button-group-default,h4.sc-kol-button-group-default,h5.sc-kol-button-group-default,h6.sc-kol-button-group-default,input.sc-kol-button-group-default,option.sc-kol-button-group-default,select.sc-kol-button-group-default,textarea.sc-kol-button-group-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-button-group-default:is(a,button).sc-kol-button-group-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-button-group-default-h{max-width:100%}/*!@**/*.sc-kol-button-group-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-button-group-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-button-group-default>span.sc-kol-button-group-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-button-group-default,button.sc-kol-button-group-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-button-group-default,input.sc-kol-button-group-default,option.sc-kol-button-group-default,select.sc-kol-button-group-default,textarea.sc-kol-button-group-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-button-group-default>kol-span-wc.sc-kol-button-group-default>span.sc-kol-button-group-default>span.sc-kol-button-group-default{display:none}/*!@:host > kol-button-group-wc*/.sc-kol-button-group-default-h>kol-button-group-wc.sc-kol-button-group-default{display:flex;flex-wrap:wrap}";
+const defaultStyleCss$B = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 class KolButtonGroup {
   constructor(hostRef) {
@@ -11277,7 +11371,7 @@ class KolButtonGroup {
     return (hAsync(Host, null, hAsync("kol-button-group-wc", null, hAsync("slot", null))));
   }
   static get style() { return {
-    default: defaultStyleCss$C
+    default: defaultStyleCss$B
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -11309,15 +11403,15 @@ class KolButtonGroupWc {
   }; }
 }
 
-const defaultStyleCss$B = "/*!@:host*/.sc-kol-button-link-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-button-link-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-button-link-default,button.sc-kol-button-link-default:not([role='link']),kol-input.sc-kol-button-link-default .input.sc-kol-button-link-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-button-link-default,button.sc-kol-button-link-default,h1.sc-kol-button-link-default,h2.sc-kol-button-link-default,h3.sc-kol-button-link-default,h4.sc-kol-button-link-default,h5.sc-kol-button-link-default,h6.sc-kol-button-link-default,input.sc-kol-button-link-default,option.sc-kol-button-link-default,select.sc-kol-button-link-default,textarea.sc-kol-button-link-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-button-link-default:is(a,button).sc-kol-button-link-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-button-link-default-h{max-width:100%}/*!@**/*.sc-kol-button-link-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-button-link-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-button-link-default>span.sc-kol-button-link-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-button-link-default,button.sc-kol-button-link-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-button-link-default,input.sc-kol-button-link-default,option.sc-kol-button-link-default,select.sc-kol-button-link-default,textarea.sc-kol-button-link-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-button-link-default>kol-span-wc.sc-kol-button-link-default>span.sc-kol-button-link-default>span.sc-kol-button-link-default{display:none}/*!@:host*/.sc-kol-button-link-default-h{display:inline-block}/*!@:is(a, button)*/.sc-kol-button-link-default:is(a,button).sc-kol-button-link-default{align-items:baseline;display:inline-flex;place-items:center;text-align:left;text-decoration-line:underline}/*!@:is(a, button):is(:focus, :hover)*/.sc-kol-button-link-default:is(a,button).sc-kol-button-link-default:is(:focus,.sc-kol-button-link-default:hover){text-decoration-thickness:0.2em}/*!@.hidden*/.hidden.sc-kol-button-link-default{display:none;visibility:hidden}/*!@.skip*/.skip.sc-kol-button-link-default{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}/*!@.skip:focus*/.skip.sc-kol-button-link-default:focus{background-color:#fff;left:unset;padding:1em;position:unset}/*!@kol-icon.external-link-icon*/kol-icon.external-link-icon.sc-kol-button-link-default{display:inline-flex}";
+const defaultStyleCss$A = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\t:is(a, button):is(:focus, :hover) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\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}";
 
 class KolButtonLink {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
+    this._accessKey = undefined;
     this._ariaControls = undefined;
     this._ariaExpanded = undefined;
     this._ariaSelected = undefined;
@@ -11336,16 +11430,17 @@ class KolButtonLink {
     this._value = undefined;
   }
   render() {
-    return (hAsync(Host, null, hAsync("kol-button-wc", { ref: this.catchRef, _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, 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" }))));
   }
   get host() { return getElement(this); }
   static get style() { return {
-    default: defaultStyleCss$B
+    default: defaultStyleCss$A
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
     "$tagName$": "kol-button-link",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_ariaControls": [1, "_aria-controls"],
       "_ariaExpanded": [4, "_aria-expanded"],
       "_ariaSelected": [4, "_aria-selected"],
@@ -11373,7 +11468,7 @@ class KolButtonLinkTextSwitch {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.button = (button) => hAsync("kol-button-wc", Object.assign({}, button));
-    this.link = (link) => hAsync("kol-link-wc", Object.assign({}, link));
+    this.link = (link) => hAsync("kol-link-wc", Object.assign({ _label: link._href }, link));
     this.text = (text) => hAsync("kol-span-wc", Object.assign({}, text));
     this._link = undefined;
   }
@@ -11422,12 +11517,14 @@ const validateButtonCallbacks = (component, value) => {
   watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']), value);
 };
 
+const buttonTypePropTypeOptions = ['button', 'reset', 'submit'];
 const validateButtonType = (component, value) => {
-  watchValidator(component, `_type`, (value) => value === 'button' || value === 'reset' || value === 'submit', new Set(['KoliBriButtonType {button, reset, submit}']), value);
+  watchValidator(component, `_type`, (value) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value), new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]), value);
 };
 
+const buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'];
 const validateButtonVariant = (component, value) => {
-  watchValidator(component, `_variant`, (value) => value === 'primary' || value === 'secondary' || value === 'normal' || value === 'danger' || value === 'ghost' || value === 'custom', new Set(['KoliBriButtonVariant {primary, secondary, normal, danger, ghost, custom}']), value, {
+  watchValidator(component, `_variant`, (value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value), new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]), value, {
     defaultValue: 'normal',
   });
 };
@@ -11558,22 +11655,24 @@ const searchFormElement = (el) => {
     console.log(el);
   }
   while (el instanceof HTMLElement && el.tagName !== 'FORM' && el.tagName !== 'KOL-FORM') {
-    if (el.parentElement instanceof HTMLElement) {
-      el = el.parentElement;
-    }
-    else if (el.parentNode instanceof ShadowRoot) {
-      el = el.parentNode.host;
+    try {
+      if (el.parentElement instanceof HTMLElement) {
+        el = el.parentElement;
+      }
+      else if (el.parentNode instanceof ShadowRoot) {
+        el = el.parentNode.host;
+      }
+      else {
+        el = null;
+      }
     }
-    else {
-      el = null;
+    catch (error) {
     }
     if (getExperimentalMode()) {
       console.log(el);
+      devHint(`↑ Search form element finished.`);
     }
   }
-  if (getExperimentalMode()) {
-    devHint(`↑ Search form element finished.`);
-  }
   return el;
 };
 const propagateResetEventToForm = (options = {}) => {
@@ -11609,6 +11708,7 @@ const propagateSubmitEventToForm = (options = {}) => {
     if (form.tagName === 'FORM') {
       setEventTarget(event, form);
       form.dispatchEvent(event);
+      form.submit();
     }
     else if (form.tagName === 'KOL-FORM') {
       setEventTarget(event, KoliBriDevHelper.querySelector('form', form));
@@ -11763,15 +11863,20 @@ const validateAriaSelected = (component, value) => {
   watchBoolean(component, '_ariaSelected', value);
 };
 
+const validateAccessKey = (component, value) => {
+  watchString(component, '_accessKey', value);
+};
+
 class KolButtonWc {
   render() {
     const hasExpertSlot = showExpertSlot(this.state._label);
-    return (hAsync(Host, null, hAsync("button", Object.assign({ ref: this.catchRef, "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, 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: {
+        button: true,
         [this.state._variant]: this.state._variant !== 'custom',
         [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
         'icon-only': this.state._hideLabel === true,
         'hide-label': this.state._hideLabel === true,
-      }, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync("kol-span-wc", { _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { name: "expert", slot: "expert" }))), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
+      }, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync("kol-span-wc", { 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 : '' })));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -11803,6 +11908,7 @@ class KolButtonWc {
         }
       }
     };
+    this._accessKey = undefined;
     this._ariaControls = undefined;
     this._ariaExpanded = undefined;
     this._ariaSelected = undefined;
@@ -11830,6 +11936,9 @@ class KolButtonWc {
     };
     this.controller = new AssociatedInputController(this, 'button', this.host);
   }
+  validateAccessKey(value) {
+    validateAccessKey(this, value);
+  }
   validateAriaControls(value) {
     validateAriaControls(this, value);
   }
@@ -11889,6 +11998,7 @@ class KolButtonWc {
     validateButtonVariant(this, value);
   }
   componentWillLoad() {
+    this.validateAccessKey(this._accessKey);
     this.validateAriaControls(this._ariaControls);
     this.validateAriaExpanded(this._ariaExpanded);
     this.validateAriaSelected(this._ariaSelected);
@@ -11910,6 +12020,7 @@ class KolButtonWc {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_ariaControls": ["validateAriaControls"],
     "_ariaExpanded": ["validateAriaExpanded"],
     "_ariaSelected": ["validateAriaSelected"],
@@ -11933,6 +12044,7 @@ class KolButtonWc {
     "$flags$": 4,
     "$tagName$": "kol-button-wc",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_ariaControls": [1, "_aria-controls"],
       "_ariaExpanded": [4, "_aria-expanded"],
       "_ariaSelected": [4, "_aria-selected"],
@@ -11959,7 +12071,7 @@ class KolButtonWc {
   }; }
 }
 
-const defaultStyleCss$A = "/*!@:host*/.sc-kol-card-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-card-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-card-default,button.sc-kol-card-default:not([role='link']),kol-input.sc-kol-card-default .input.sc-kol-card-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-card-default,button.sc-kol-card-default,h1.sc-kol-card-default,h2.sc-kol-card-default,h3.sc-kol-card-default,h4.sc-kol-card-default,h5.sc-kol-card-default,h6.sc-kol-card-default,input.sc-kol-card-default,option.sc-kol-card-default,select.sc-kol-card-default,textarea.sc-kol-card-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-card-default:is(a,button).sc-kol-card-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-card-default-h{max-width:100%}/*!@**/*.sc-kol-card-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-card-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-card-default>span.sc-kol-card-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-card-default,button.sc-kol-card-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-card-default,input.sc-kol-card-default,option.sc-kol-card-default,select.sc-kol-card-default,textarea.sc-kol-card-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-card-default>kol-span-wc.sc-kol-card-default>span.sc-kol-card-default>span.sc-kol-card-default{display:none}/*!@:host > div.card*/.sc-kol-card-default-h>div.card.sc-kol-card-default{height:100%;position:relative}/*!@.close*/.close.sc-kol-card-default{position:absolute;top:0;right:0}";
+const defaultStyleCss$z = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}\n\n\t.close {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t}\n}";
 
 class KolCard {
   constructor(hostRef) {
@@ -12018,7 +12130,7 @@ class KolCard {
     "_level": ["validateLevel"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$A
+    default: defaultStyleCss$z
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -12047,7 +12159,6 @@ class DetailsAnimationController {
   }
   handleSummaryClick(event) {
     event.preventDefault();
-    this.detailsElement.style.overflow = 'hidden';
     if (this.isClosing || !this.detailsElement.open) {
       this.open();
     }
@@ -12056,25 +12167,28 @@ class DetailsAnimationController {
     }
   }
   open() {
-    var _a;
-    this.detailsElement.style.height = `${(_a = this.detailsElement.offsetHeight) !== null && _a !== void 0 ? _a : 0}px`;
     this.detailsElement.open = true;
     window.requestAnimationFrame(this.expand.bind(this));
   }
   expand() {
     this.isExpanding = true;
-    this.animateDetailsHeight(this.summaryElement.offsetHeight + this.contentElement.offsetHeight, 'expand');
+    this.animateContentHeight('expand');
   }
   collapse() {
     this.isClosing = true;
-    this.animateDetailsHeight(this.summaryElement.offsetHeight, 'collapse');
+    this.animateContentHeight('collapse');
   }
-  animateDetailsHeight(endHeight, direction) {
-    const startHeight = this.detailsElement.offsetHeight;
+  animateContentHeight(direction) {
+    let startHeight = direction === 'expand' ? 0 : this.contentElement.offsetHeight;
+    let endHeight = direction === 'expand' ? this.contentElement.offsetHeight : 0;
     if (this.animation) {
+      startHeight = this.contentElement.offsetHeight;
       this.animation.cancel();
+      if (direction === 'expand') {
+        endHeight = this.contentElement.offsetHeight;
+      }
     }
-    this.animation = this.detailsElement.animate({
+    this.animation = this.contentElement.animate({
       height: [`${startHeight}px`, `${endHeight}px`],
     }, {
       duration: matchMedia('(prefers-reduced-motion)').matches ? 0 : 250,
@@ -12097,16 +12211,18 @@ class DetailsAnimationController {
     this.animation = undefined;
     this.isClosing = false;
     this.isExpanding = false;
-    this.detailsElement.style.removeProperty('height');
-    this.detailsElement.style.removeProperty('overview');
   }
 }
 
-const defaultStyleCss$z = "/*!@:host*/.sc-kol-details-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-details-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-details-default,button.sc-kol-details-default:not([role='link']),kol-input.sc-kol-details-default .input.sc-kol-details-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-details-default,button.sc-kol-details-default,h1.sc-kol-details-default,h2.sc-kol-details-default,h3.sc-kol-details-default,h4.sc-kol-details-default,h5.sc-kol-details-default,h6.sc-kol-details-default,input.sc-kol-details-default,option.sc-kol-details-default,select.sc-kol-details-default,textarea.sc-kol-details-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-details-default:is(a,button).sc-kol-details-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-details-default-h{max-width:100%}/*!@**/*.sc-kol-details-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-details-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-details-default>span.sc-kol-details-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-details-default,button.sc-kol-details-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-details-default,input.sc-kol-details-default,option.sc-kol-details-default,select.sc-kol-details-default,textarea.sc-kol-details-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-details-default>kol-span-wc.sc-kol-details-default>span.sc-kol-details-default>span.sc-kol-details-default{display:none}/*!@:host*/.sc-kol-details-default-h{display:block}/*!@details*/details.sc-kol-details-default{display:grid}/*!@details > summary*/details.sc-kol-details-default>summary.sc-kol-details-default{cursor:pointer;display:flex;place-items:center}/*!@details > summary > span*/details.sc-kol-details-default>summary.sc-kol-details-default>span.sc-kol-details-default{border-bottom-color:grey;border-bottom-style:solid}/*!@details > summary:focus > span,\ndetails > summary:hover > span,\ndetails[open] > summary > span*/details.sc-kol-details-default>summary.sc-kol-details-default:focus>span.sc-kol-details-default,details.sc-kol-details-default>summary.sc-kol-details-default:hover>span.sc-kol-details-default,details[open].sc-kol-details-default>summary.sc-kol-details-default>span.sc-kol-details-default{border-bottom-color:#000}/*!@details > kol-indented-text*/details.sc-kol-details-default>kol-indented-text.sc-kol-details-default{margin:0.25em 0 0 0.5em}";
+const defaultStyleCss$y = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 class KolDetails {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.catchRef = (ref) => {
+      this.summaryElement = ref;
+      propagateFocus(this.host, this.summaryElement);
+    };
     this.handleToggle = (event) => {
       clearTimeout(this.toggleTimeout);
       this.toggleTimeout = setTimeout(() => {
@@ -12132,7 +12248,7 @@ class KolDetails {
   render() {
     return (hAsync(Host, null, hAsync("details", { ref: (el) => {
         this.detailsElement = el;
-      }, onToggle: this.handleToggle }, hAsync("summary", { ref: (element) => (this.summaryElement = element) }, this.state._open ? hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-down" }) : hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right" }), hAsync("span", null, this.state._label)), hAsync("div", { class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", null, hAsync("slot", null))))));
+      }, onToggle: this.handleToggle }, hAsync("summary", { ref: this.catchRef }, 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))))));
   }
   validateLabel(value) {
     validateLabel(this, value);
@@ -12165,7 +12281,7 @@ class KolDetails {
     "_open": ["validateOpen"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$z
+    default: defaultStyleCss$y
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -12243,7 +12359,7 @@ class KolForm {
   }; }
 }
 
-const defaultStyleCss$y = "/*!@:host*/.sc-kol-heading-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-heading-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-heading-default,button.sc-kol-heading-default:not([role='link']),kol-input.sc-kol-heading-default .input.sc-kol-heading-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-heading-default,button.sc-kol-heading-default,h1.sc-kol-heading-default,h2.sc-kol-heading-default,h3.sc-kol-heading-default,h4.sc-kol-heading-default,h5.sc-kol-heading-default,h6.sc-kol-heading-default,input.sc-kol-heading-default,option.sc-kol-heading-default,select.sc-kol-heading-default,textarea.sc-kol-heading-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-heading-default:is(a,button).sc-kol-heading-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-heading-default-h{max-width:100%}/*!@**/*.sc-kol-heading-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-heading-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-heading-default>span.sc-kol-heading-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-heading-default,button.sc-kol-heading-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-heading-default,input.sc-kol-heading-default,option.sc-kol-heading-default,select.sc-kol-heading-default,textarea.sc-kol-heading-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-heading-default>kol-span-wc.sc-kol-heading-default>span.sc-kol-heading-default>span.sc-kol-heading-default{display:none}/*!@:host > kol-heading-wc*/.sc-kol-heading-default-h>kol-heading-wc.sc-kol-heading-default{display:grid}/*!@:host > kol-heading-wc > .overline*/.sc-kol-heading-default-h>kol-heading-wc.sc-kol-heading-default>.overline.sc-kol-heading-default{order:1}/*!@:host > kol-heading-wc > .headline*/.sc-kol-heading-default-h>kol-heading-wc.sc-kol-heading-default>.headline.sc-kol-heading-default{order:2}";
+const defaultStyleCss$x = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-heading-default-h > kol-heading-wc {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-heading-default-h > kol-heading-wc > .overline {\n\t\torder: 1;\n\t}\n\n\t.sc-kol-heading-default-h > kol-heading-wc > .headline {\n\t\torder: 2;\n\t}\n}";
 
 class KolHeading {
   constructor(hostRef) {
@@ -12253,10 +12369,10 @@ class KolHeading {
     this._secondaryHeadline = undefined;
   }
   render() {
-    return (hAsync("kol-heading-wc", { _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline }, hAsync("slot", null)));
+    return (hAsync("kol-heading-wc", { _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline }, hAsync("slot", { name: "expert", slot: "expert" })));
   }
   static get style() { return {
-    default: defaultStyleCss$y
+    default: defaultStyleCss$x
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -12278,19 +12394,19 @@ class KolHeadingWc {
     this.renderHeadline = (headline, level) => {
       switch (level) {
         case 1:
-          return (hAsync("h1", { class: "headline" }, headline, hAsync("slot", null)));
+          return (hAsync("h1", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
         case 2:
-          return (hAsync("h2", { class: "headline" }, headline, hAsync("slot", null)));
+          return (hAsync("h2", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
         case 3:
-          return (hAsync("h3", { class: "headline" }, headline, hAsync("slot", null)));
+          return (hAsync("h3", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
         case 4:
-          return (hAsync("h4", { class: "headline" }, headline, hAsync("slot", null)));
+          return (hAsync("h4", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
         case 5:
-          return (hAsync("h5", { class: "headline" }, headline, hAsync("slot", null)));
+          return (hAsync("h5", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
         case 6:
-          return (hAsync("h6", { class: "headline" }, headline, hAsync("slot", null)));
+          return (hAsync("h6", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
         default:
-          return (hAsync("strong", { class: "headline" }, headline, hAsync("slot", null)));
+          return (hAsync("strong", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
       }
     };
     this.renderSecondaryHeadline = (headline, level) => {
@@ -12356,7 +12472,7 @@ class KolHeadingWc {
   }; }
 }
 
-const defaultStyleCss$x = "@font-face{font-family:\"codicon\";font-display:block;src:url(\"./codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa\") format(\"truetype\")}/*!@.codicon[class*='codicon-']*/.codicon[class*='codicon-'].sc-kol-icon-default{font:normal normal normal 16px/1 codicon;display:inline-block;text-decoration:none;text-rendering:auto;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none;-ms-user-select:none}@keyframes codicon-spin{100%{transform:rotate(360deg)}}/*!@.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{animation:codicon-spin 1.5s steps(30) infinite}/*!@.codicon-modifier-disabled*/.codicon-modifier-disabled.sc-kol-icon-default{opacity:0.5}/*!@.codicon-modifier-hidden*/.codicon-modifier-hidden.sc-kol-icon-default{opacity:0}/*!@.codicon-loading*/.codicon-loading.sc-kol-icon-default{animation-duration:1s !important;animation-timing-function:cubic-bezier(0.53, 0.21, 0.29, 0.67) !important}/*!@.codicon-add:before*/.codicon-add.sc-kol-icon-default:before{content:\"\\ea60\"}/*!@.codicon-plus:before*/.codicon-plus.sc-kol-icon-default:before{content:\"\\ea60\"}/*!@.codicon-gist-new:before*/.codicon-gist-new.sc-kol-icon-default:before{content:\"\\ea60\"}/*!@.codicon-repo-create:before*/.codicon-repo-create.sc-kol-icon-default:before{content:\"\\ea60\"}/*!@.codicon-lightbulb:before*/.codicon-lightbulb.sc-kol-icon-default:before{content:\"\\ea61\"}/*!@.codicon-light-bulb:before*/.codicon-light-bulb.sc-kol-icon-default:before{content:\"\\ea61\"}/*!@.codicon-repo:before*/.codicon-repo.sc-kol-icon-default:before{content:\"\\ea62\"}/*!@.codicon-repo-delete:before*/.codicon-repo-delete.sc-kol-icon-default:before{content:\"\\ea62\"}/*!@.codicon-gist-fork:before*/.codicon-gist-fork.sc-kol-icon-default:before{content:\"\\ea63\"}/*!@.codicon-repo-forked:before*/.codicon-repo-forked.sc-kol-icon-default:before{content:\"\\ea63\"}/*!@.codicon-git-pull-request:before*/.codicon-git-pull-request.sc-kol-icon-default:before{content:\"\\ea64\"}/*!@.codicon-git-pull-request-abandoned:before*/.codicon-git-pull-request-abandoned.sc-kol-icon-default:before{content:\"\\ea64\"}/*!@.codicon-record-keys:before*/.codicon-record-keys.sc-kol-icon-default:before{content:\"\\ea65\"}/*!@.codicon-keyboard:before*/.codicon-keyboard.sc-kol-icon-default:before{content:\"\\ea65\"}/*!@.codicon-tag:before*/.codicon-tag.sc-kol-icon-default:before{content:\"\\ea66\"}/*!@.codicon-tag-add:before*/.codicon-tag-add.sc-kol-icon-default:before{content:\"\\ea66\"}/*!@.codicon-tag-remove:before*/.codicon-tag-remove.sc-kol-icon-default:before{content:\"\\ea66\"}/*!@.codicon-person:before*/.codicon-person.sc-kol-icon-default:before{content:\"\\ea67\"}/*!@.codicon-person-follow:before*/.codicon-person-follow.sc-kol-icon-default:before{content:\"\\ea67\"}/*!@.codicon-person-outline:before*/.codicon-person-outline.sc-kol-icon-default:before{content:\"\\ea67\"}/*!@.codicon-person-filled:before*/.codicon-person-filled.sc-kol-icon-default:before{content:\"\\ea67\"}/*!@.codicon-git-branch:before*/.codicon-git-branch.sc-kol-icon-default:before{content:\"\\ea68\"}/*!@.codicon-git-branch-create:before*/.codicon-git-branch-create.sc-kol-icon-default:before{content:\"\\ea68\"}/*!@.codicon-git-branch-delete:before*/.codicon-git-branch-delete.sc-kol-icon-default:before{content:\"\\ea68\"}/*!@.codicon-source-control:before*/.codicon-source-control.sc-kol-icon-default:before{content:\"\\ea68\"}/*!@.codicon-mirror:before*/.codicon-mirror.sc-kol-icon-default:before{content:\"\\ea69\"}/*!@.codicon-mirror-public:before*/.codicon-mirror-public.sc-kol-icon-default:before{content:\"\\ea69\"}/*!@.codicon-star:before*/.codicon-star.sc-kol-icon-default:before{content:\"\\ea6a\"}/*!@.codicon-star-add:before*/.codicon-star-add.sc-kol-icon-default:before{content:\"\\ea6a\"}/*!@.codicon-star-delete:before*/.codicon-star-delete.sc-kol-icon-default:before{content:\"\\ea6a\"}/*!@.codicon-star-empty:before*/.codicon-star-empty.sc-kol-icon-default:before{content:\"\\ea6a\"}/*!@.codicon-comment:before*/.codicon-comment.sc-kol-icon-default:before{content:\"\\ea6b\"}/*!@.codicon-comment-add:before*/.codicon-comment-add.sc-kol-icon-default:before{content:\"\\ea6b\"}/*!@.codicon-alert:before*/.codicon-alert.sc-kol-icon-default:before{content:\"\\ea6c\"}/*!@.codicon-warning:before*/.codicon-warning.sc-kol-icon-default:before{content:\"\\ea6c\"}/*!@.codicon-search:before*/.codicon-search.sc-kol-icon-default:before{content:\"\\ea6d\"}/*!@.codicon-search-save:before*/.codicon-search-save.sc-kol-icon-default:before{content:\"\\ea6d\"}/*!@.codicon-log-out:before*/.codicon-log-out.sc-kol-icon-default:before{content:\"\\ea6e\"}/*!@.codicon-sign-out:before*/.codicon-sign-out.sc-kol-icon-default:before{content:\"\\ea6e\"}/*!@.codicon-log-in:before*/.codicon-log-in.sc-kol-icon-default:before{content:\"\\ea6f\"}/*!@.codicon-sign-in:before*/.codicon-sign-in.sc-kol-icon-default:before{content:\"\\ea6f\"}/*!@.codicon-eye:before*/.codicon-eye.sc-kol-icon-default:before{content:\"\\ea70\"}/*!@.codicon-eye-unwatch:before*/.codicon-eye-unwatch.sc-kol-icon-default:before{content:\"\\ea70\"}/*!@.codicon-eye-watch:before*/.codicon-eye-watch.sc-kol-icon-default:before{content:\"\\ea70\"}/*!@.codicon-circle-filled:before*/.codicon-circle-filled.sc-kol-icon-default:before{content:\"\\ea71\"}/*!@.codicon-primitive-dot:before*/.codicon-primitive-dot.sc-kol-icon-default:before{content:\"\\ea71\"}/*!@.codicon-close-dirty:before*/.codicon-close-dirty.sc-kol-icon-default:before{content:\"\\ea71\"}/*!@.codicon-debug-breakpoint:before*/.codicon-debug-breakpoint.sc-kol-icon-default:before{content:\"\\ea71\"}/*!@.codicon-debug-breakpoint-disabled:before*/.codicon-debug-breakpoint-disabled.sc-kol-icon-default:before{content:\"\\ea71\"}/*!@.codicon-debug-hint:before*/.codicon-debug-hint.sc-kol-icon-default:before{content:\"\\ea71\"}/*!@.codicon-primitive-square:before*/.codicon-primitive-square.sc-kol-icon-default:before{content:\"\\ea72\"}/*!@.codicon-edit:before*/.codicon-edit.sc-kol-icon-default:before{content:\"\\ea73\"}/*!@.codicon-pencil:before*/.codicon-pencil.sc-kol-icon-default:before{content:\"\\ea73\"}/*!@.codicon-info:before*/.codicon-info.sc-kol-icon-default:before{content:\"\\ea74\"}/*!@.codicon-issue-opened:before*/.codicon-issue-opened.sc-kol-icon-default:before{content:\"\\ea74\"}/*!@.codicon-gist-private:before*/.codicon-gist-private.sc-kol-icon-default:before{content:\"\\ea75\"}/*!@.codicon-git-fork-private:before*/.codicon-git-fork-private.sc-kol-icon-default:before{content:\"\\ea75\"}/*!@.codicon-lock:before*/.codicon-lock.sc-kol-icon-default:before{content:\"\\ea75\"}/*!@.codicon-mirror-private:before*/.codicon-mirror-private.sc-kol-icon-default:before{content:\"\\ea75\"}/*!@.codicon-close:before*/.codicon-close.sc-kol-icon-default:before{content:\"\\ea76\"}/*!@.codicon-remove-close:before*/.codicon-remove-close.sc-kol-icon-default:before{content:\"\\ea76\"}/*!@.codicon-x:before*/.codicon-x.sc-kol-icon-default:before{content:\"\\ea76\"}/*!@.codicon-repo-sync:before*/.codicon-repo-sync.sc-kol-icon-default:before{content:\"\\ea77\"}/*!@.codicon-sync:before*/.codicon-sync.sc-kol-icon-default:before{content:\"\\ea77\"}/*!@.codicon-clone:before*/.codicon-clone.sc-kol-icon-default:before{content:\"\\ea78\"}/*!@.codicon-desktop-download:before*/.codicon-desktop-download.sc-kol-icon-default:before{content:\"\\ea78\"}/*!@.codicon-beaker:before*/.codicon-beaker.sc-kol-icon-default:before{content:\"\\ea79\"}/*!@.codicon-microscope:before*/.codicon-microscope.sc-kol-icon-default:before{content:\"\\ea79\"}/*!@.codicon-vm:before*/.codicon-vm.sc-kol-icon-default:before{content:\"\\ea7a\"}/*!@.codicon-device-desktop:before*/.codicon-device-desktop.sc-kol-icon-default:before{content:\"\\ea7a\"}/*!@.codicon-file:before*/.codicon-file.sc-kol-icon-default:before{content:\"\\ea7b\"}/*!@.codicon-file-text:before*/.codicon-file-text.sc-kol-icon-default:before{content:\"\\ea7b\"}/*!@.codicon-more:before*/.codicon-more.sc-kol-icon-default:before{content:\"\\ea7c\"}/*!@.codicon-ellipsis:before*/.codicon-ellipsis.sc-kol-icon-default:before{content:\"\\ea7c\"}/*!@.codicon-kebab-horizontal:before*/.codicon-kebab-horizontal.sc-kol-icon-default:before{content:\"\\ea7c\"}/*!@.codicon-mail-reply:before*/.codicon-mail-reply.sc-kol-icon-default:before{content:\"\\ea7d\"}/*!@.codicon-reply:before*/.codicon-reply.sc-kol-icon-default:before{content:\"\\ea7d\"}/*!@.codicon-organization:before*/.codicon-organization.sc-kol-icon-default:before{content:\"\\ea7e\"}/*!@.codicon-organization-filled:before*/.codicon-organization-filled.sc-kol-icon-default:before{content:\"\\ea7e\"}/*!@.codicon-organization-outline:before*/.codicon-organization-outline.sc-kol-icon-default:before{content:\"\\ea7e\"}/*!@.codicon-new-file:before*/.codicon-new-file.sc-kol-icon-default:before{content:\"\\ea7f\"}/*!@.codicon-file-add:before*/.codicon-file-add.sc-kol-icon-default:before{content:\"\\ea7f\"}/*!@.codicon-new-folder:before*/.codicon-new-folder.sc-kol-icon-default:before{content:\"\\ea80\"}/*!@.codicon-file-directory-create:before*/.codicon-file-directory-create.sc-kol-icon-default:before{content:\"\\ea80\"}/*!@.codicon-trash:before*/.codicon-trash.sc-kol-icon-default:before{content:\"\\ea81\"}/*!@.codicon-trashcan:before*/.codicon-trashcan.sc-kol-icon-default:before{content:\"\\ea81\"}/*!@.codicon-history:before*/.codicon-history.sc-kol-icon-default:before{content:\"\\ea82\"}/*!@.codicon-clock:before*/.codicon-clock.sc-kol-icon-default:before{content:\"\\ea82\"}/*!@.codicon-folder:before*/.codicon-folder.sc-kol-icon-default:before{content:\"\\ea83\"}/*!@.codicon-file-directory:before*/.codicon-file-directory.sc-kol-icon-default:before{content:\"\\ea83\"}/*!@.codicon-symbol-folder:before*/.codicon-symbol-folder.sc-kol-icon-default:before{content:\"\\ea83\"}/*!@.codicon-logo-github:before*/.codicon-logo-github.sc-kol-icon-default:before{content:\"\\ea84\"}/*!@.codicon-mark-github:before*/.codicon-mark-github.sc-kol-icon-default:before{content:\"\\ea84\"}/*!@.codicon-github:before*/.codicon-github.sc-kol-icon-default:before{content:\"\\ea84\"}/*!@.codicon-terminal:before*/.codicon-terminal.sc-kol-icon-default:before{content:\"\\ea85\"}/*!@.codicon-console:before*/.codicon-console.sc-kol-icon-default:before{content:\"\\ea85\"}/*!@.codicon-repl:before*/.codicon-repl.sc-kol-icon-default:before{content:\"\\ea85\"}/*!@.codicon-zap:before*/.codicon-zap.sc-kol-icon-default:before{content:\"\\ea86\"}/*!@.codicon-symbol-event:before*/.codicon-symbol-event.sc-kol-icon-default:before{content:\"\\ea86\"}/*!@.codicon-error:before*/.codicon-error.sc-kol-icon-default:before{content:\"\\ea87\"}/*!@.codicon-stop:before*/.codicon-stop.sc-kol-icon-default:before{content:\"\\ea87\"}/*!@.codicon-variable:before*/.codicon-variable.sc-kol-icon-default:before{content:\"\\ea88\"}/*!@.codicon-symbol-variable:before*/.codicon-symbol-variable.sc-kol-icon-default:before{content:\"\\ea88\"}/*!@.codicon-array:before*/.codicon-array.sc-kol-icon-default:before{content:\"\\ea8a\"}/*!@.codicon-symbol-array:before*/.codicon-symbol-array.sc-kol-icon-default:before{content:\"\\ea8a\"}/*!@.codicon-symbol-module:before*/.codicon-symbol-module.sc-kol-icon-default:before{content:\"\\ea8b\"}/*!@.codicon-symbol-package:before*/.codicon-symbol-package.sc-kol-icon-default:before{content:\"\\ea8b\"}/*!@.codicon-symbol-namespace:before*/.codicon-symbol-namespace.sc-kol-icon-default:before{content:\"\\ea8b\"}/*!@.codicon-symbol-object:before*/.codicon-symbol-object.sc-kol-icon-default:before{content:\"\\ea8b\"}/*!@.codicon-symbol-method:before*/.codicon-symbol-method.sc-kol-icon-default:before{content:\"\\ea8c\"}/*!@.codicon-symbol-function:before*/.codicon-symbol-function.sc-kol-icon-default:before{content:\"\\ea8c\"}/*!@.codicon-symbol-constructor:before*/.codicon-symbol-constructor.sc-kol-icon-default:before{content:\"\\ea8c\"}/*!@.codicon-symbol-boolean:before*/.codicon-symbol-boolean.sc-kol-icon-default:before{content:\"\\ea8f\"}/*!@.codicon-symbol-null:before*/.codicon-symbol-null.sc-kol-icon-default:before{content:\"\\ea8f\"}/*!@.codicon-symbol-numeric:before*/.codicon-symbol-numeric.sc-kol-icon-default:before{content:\"\\ea90\"}/*!@.codicon-symbol-number:before*/.codicon-symbol-number.sc-kol-icon-default:before{content:\"\\ea90\"}/*!@.codicon-symbol-structure:before*/.codicon-symbol-structure.sc-kol-icon-default:before{content:\"\\ea91\"}/*!@.codicon-symbol-struct:before*/.codicon-symbol-struct.sc-kol-icon-default:before{content:\"\\ea91\"}/*!@.codicon-symbol-parameter:before*/.codicon-symbol-parameter.sc-kol-icon-default:before{content:\"\\ea92\"}/*!@.codicon-symbol-type-parameter:before*/.codicon-symbol-type-parameter.sc-kol-icon-default:before{content:\"\\ea92\"}/*!@.codicon-symbol-key:before*/.codicon-symbol-key.sc-kol-icon-default:before{content:\"\\ea93\"}/*!@.codicon-symbol-text:before*/.codicon-symbol-text.sc-kol-icon-default:before{content:\"\\ea93\"}/*!@.codicon-symbol-reference:before*/.codicon-symbol-reference.sc-kol-icon-default:before{content:\"\\ea94\"}/*!@.codicon-go-to-file:before*/.codicon-go-to-file.sc-kol-icon-default:before{content:\"\\ea94\"}/*!@.codicon-symbol-enum:before*/.codicon-symbol-enum.sc-kol-icon-default:before{content:\"\\ea95\"}/*!@.codicon-symbol-value:before*/.codicon-symbol-value.sc-kol-icon-default:before{content:\"\\ea95\"}/*!@.codicon-symbol-ruler:before*/.codicon-symbol-ruler.sc-kol-icon-default:before{content:\"\\ea96\"}/*!@.codicon-symbol-unit:before*/.codicon-symbol-unit.sc-kol-icon-default:before{content:\"\\ea96\"}/*!@.codicon-activate-breakpoints:before*/.codicon-activate-breakpoints.sc-kol-icon-default:before{content:\"\\ea97\"}/*!@.codicon-archive:before*/.codicon-archive.sc-kol-icon-default:before{content:\"\\ea98\"}/*!@.codicon-arrow-both:before*/.codicon-arrow-both.sc-kol-icon-default:before{content:\"\\ea99\"}/*!@.codicon-arrow-down:before*/.codicon-arrow-down.sc-kol-icon-default:before{content:\"\\ea9a\"}/*!@.codicon-arrow-left:before*/.codicon-arrow-left.sc-kol-icon-default:before{content:\"\\ea9b\"}/*!@.codicon-arrow-right:before*/.codicon-arrow-right.sc-kol-icon-default:before{content:\"\\ea9c\"}/*!@.codicon-arrow-small-down:before*/.codicon-arrow-small-down.sc-kol-icon-default:before{content:\"\\ea9d\"}/*!@.codicon-arrow-small-left:before*/.codicon-arrow-small-left.sc-kol-icon-default:before{content:\"\\ea9e\"}/*!@.codicon-arrow-small-right:before*/.codicon-arrow-small-right.sc-kol-icon-default:before{content:\"\\ea9f\"}/*!@.codicon-arrow-small-up:before*/.codicon-arrow-small-up.sc-kol-icon-default:before{content:\"\\eaa0\"}/*!@.codicon-arrow-up:before*/.codicon-arrow-up.sc-kol-icon-default:before{content:\"\\eaa1\"}/*!@.codicon-bell:before*/.codicon-bell.sc-kol-icon-default:before{content:\"\\eaa2\"}/*!@.codicon-bold:before*/.codicon-bold.sc-kol-icon-default:before{content:\"\\eaa3\"}/*!@.codicon-book:before*/.codicon-book.sc-kol-icon-default:before{content:\"\\eaa4\"}/*!@.codicon-bookmark:before*/.codicon-bookmark.sc-kol-icon-default:before{content:\"\\eaa5\"}/*!@.codicon-debug-breakpoint-conditional-unverified:before*/.codicon-debug-breakpoint-conditional-unverified.sc-kol-icon-default:before{content:\"\\eaa6\"}/*!@.codicon-debug-breakpoint-conditional:before*/.codicon-debug-breakpoint-conditional.sc-kol-icon-default:before{content:\"\\eaa7\"}/*!@.codicon-debug-breakpoint-conditional-disabled:before*/.codicon-debug-breakpoint-conditional-disabled.sc-kol-icon-default:before{content:\"\\eaa7\"}/*!@.codicon-debug-breakpoint-data-unverified:before*/.codicon-debug-breakpoint-data-unverified.sc-kol-icon-default:before{content:\"\\eaa8\"}/*!@.codicon-debug-breakpoint-data:before*/.codicon-debug-breakpoint-data.sc-kol-icon-default:before{content:\"\\eaa9\"}/*!@.codicon-debug-breakpoint-data-disabled:before*/.codicon-debug-breakpoint-data-disabled.sc-kol-icon-default:before{content:\"\\eaa9\"}/*!@.codicon-debug-breakpoint-log-unverified:before*/.codicon-debug-breakpoint-log-unverified.sc-kol-icon-default:before{content:\"\\eaaa\"}/*!@.codicon-debug-breakpoint-log:before*/.codicon-debug-breakpoint-log.sc-kol-icon-default:before{content:\"\\eaab\"}/*!@.codicon-debug-breakpoint-log-disabled:before*/.codicon-debug-breakpoint-log-disabled.sc-kol-icon-default:before{content:\"\\eaab\"}/*!@.codicon-briefcase:before*/.codicon-briefcase.sc-kol-icon-default:before{content:\"\\eaac\"}/*!@.codicon-broadcast:before*/.codicon-broadcast.sc-kol-icon-default:before{content:\"\\eaad\"}/*!@.codicon-browser:before*/.codicon-browser.sc-kol-icon-default:before{content:\"\\eaae\"}/*!@.codicon-bug:before*/.codicon-bug.sc-kol-icon-default:before{content:\"\\eaaf\"}/*!@.codicon-calendar:before*/.codicon-calendar.sc-kol-icon-default:before{content:\"\\eab0\"}/*!@.codicon-case-sensitive:before*/.codicon-case-sensitive.sc-kol-icon-default:before{content:\"\\eab1\"}/*!@.codicon-check:before*/.codicon-check.sc-kol-icon-default:before{content:\"\\eab2\"}/*!@.codicon-checklist:before*/.codicon-checklist.sc-kol-icon-default:before{content:\"\\eab3\"}/*!@.codicon-chevron-down:before*/.codicon-chevron-down.sc-kol-icon-default:before{content:\"\\eab4\"}/*!@.codicon-chevron-left:before*/.codicon-chevron-left.sc-kol-icon-default:before{content:\"\\eab5\"}/*!@.codicon-chevron-right:before*/.codicon-chevron-right.sc-kol-icon-default:before{content:\"\\eab6\"}/*!@.codicon-chevron-up:before*/.codicon-chevron-up.sc-kol-icon-default:before{content:\"\\eab7\"}/*!@.codicon-chrome-close:before*/.codicon-chrome-close.sc-kol-icon-default:before{content:\"\\eab8\"}/*!@.codicon-chrome-maximize:before*/.codicon-chrome-maximize.sc-kol-icon-default:before{content:\"\\eab9\"}/*!@.codicon-chrome-minimize:before*/.codicon-chrome-minimize.sc-kol-icon-default:before{content:\"\\eaba\"}/*!@.codicon-chrome-restore:before*/.codicon-chrome-restore.sc-kol-icon-default:before{content:\"\\eabb\"}/*!@.codicon-circle-outline:before*/.codicon-circle-outline.sc-kol-icon-default:before{content:\"\\eabc\"}/*!@.codicon-debug-breakpoint-unverified:before*/.codicon-debug-breakpoint-unverified.sc-kol-icon-default:before{content:\"\\eabc\"}/*!@.codicon-circle-slash:before*/.codicon-circle-slash.sc-kol-icon-default:before{content:\"\\eabd\"}/*!@.codicon-circuit-board:before*/.codicon-circuit-board.sc-kol-icon-default:before{content:\"\\eabe\"}/*!@.codicon-clear-all:before*/.codicon-clear-all.sc-kol-icon-default:before{content:\"\\eabf\"}/*!@.codicon-clippy:before*/.codicon-clippy.sc-kol-icon-default:before{content:\"\\eac0\"}/*!@.codicon-close-all:before*/.codicon-close-all.sc-kol-icon-default:before{content:\"\\eac1\"}/*!@.codicon-cloud-download:before*/.codicon-cloud-download.sc-kol-icon-default:before{content:\"\\eac2\"}/*!@.codicon-cloud-upload:before*/.codicon-cloud-upload.sc-kol-icon-default:before{content:\"\\eac3\"}/*!@.codicon-code:before*/.codicon-code.sc-kol-icon-default:before{content:\"\\eac4\"}/*!@.codicon-collapse-all:before*/.codicon-collapse-all.sc-kol-icon-default:before{content:\"\\eac5\"}/*!@.codicon-color-mode:before*/.codicon-color-mode.sc-kol-icon-default:before{content:\"\\eac6\"}/*!@.codicon-comment-discussion:before*/.codicon-comment-discussion.sc-kol-icon-default:before{content:\"\\eac7\"}/*!@.codicon-credit-card:before*/.codicon-credit-card.sc-kol-icon-default:before{content:\"\\eac9\"}/*!@.codicon-dash:before*/.codicon-dash.sc-kol-icon-default:before{content:\"\\eacc\"}/*!@.codicon-dashboard:before*/.codicon-dashboard.sc-kol-icon-default:before{content:\"\\eacd\"}/*!@.codicon-database:before*/.codicon-database.sc-kol-icon-default:before{content:\"\\eace\"}/*!@.codicon-debug-continue:before*/.codicon-debug-continue.sc-kol-icon-default:before{content:\"\\eacf\"}/*!@.codicon-debug-disconnect:before*/.codicon-debug-disconnect.sc-kol-icon-default:before{content:\"\\ead0\"}/*!@.codicon-debug-pause:before*/.codicon-debug-pause.sc-kol-icon-default:before{content:\"\\ead1\"}/*!@.codicon-debug-restart:before*/.codicon-debug-restart.sc-kol-icon-default:before{content:\"\\ead2\"}/*!@.codicon-debug-start:before*/.codicon-debug-start.sc-kol-icon-default:before{content:\"\\ead3\"}/*!@.codicon-debug-step-into:before*/.codicon-debug-step-into.sc-kol-icon-default:before{content:\"\\ead4\"}/*!@.codicon-debug-step-out:before*/.codicon-debug-step-out.sc-kol-icon-default:before{content:\"\\ead5\"}/*!@.codicon-debug-step-over:before*/.codicon-debug-step-over.sc-kol-icon-default:before{content:\"\\ead6\"}/*!@.codicon-debug-stop:before*/.codicon-debug-stop.sc-kol-icon-default:before{content:\"\\ead7\"}/*!@.codicon-debug:before*/.codicon-debug.sc-kol-icon-default:before{content:\"\\ead8\"}/*!@.codicon-device-camera-video:before*/.codicon-device-camera-video.sc-kol-icon-default:before{content:\"\\ead9\"}/*!@.codicon-device-camera:before*/.codicon-device-camera.sc-kol-icon-default:before{content:\"\\eada\"}/*!@.codicon-device-mobile:before*/.codicon-device-mobile.sc-kol-icon-default:before{content:\"\\eadb\"}/*!@.codicon-diff-added:before*/.codicon-diff-added.sc-kol-icon-default:before{content:\"\\eadc\"}/*!@.codicon-diff-ignored:before*/.codicon-diff-ignored.sc-kol-icon-default:before{content:\"\\eadd\"}/*!@.codicon-diff-modified:before*/.codicon-diff-modified.sc-kol-icon-default:before{content:\"\\eade\"}/*!@.codicon-diff-removed:before*/.codicon-diff-removed.sc-kol-icon-default:before{content:\"\\eadf\"}/*!@.codicon-diff-renamed:before*/.codicon-diff-renamed.sc-kol-icon-default:before{content:\"\\eae0\"}/*!@.codicon-diff:before*/.codicon-diff.sc-kol-icon-default:before{content:\"\\eae1\"}/*!@.codicon-discard:before*/.codicon-discard.sc-kol-icon-default:before{content:\"\\eae2\"}/*!@.codicon-editor-layout:before*/.codicon-editor-layout.sc-kol-icon-default:before{content:\"\\eae3\"}/*!@.codicon-empty-window:before*/.codicon-empty-window.sc-kol-icon-default:before{content:\"\\eae4\"}/*!@.codicon-exclude:before*/.codicon-exclude.sc-kol-icon-default:before{content:\"\\eae5\"}/*!@.codicon-extensions:before*/.codicon-extensions.sc-kol-icon-default:before{content:\"\\eae6\"}/*!@.codicon-eye-closed:before*/.codicon-eye-closed.sc-kol-icon-default:before{content:\"\\eae7\"}/*!@.codicon-file-binary:before*/.codicon-file-binary.sc-kol-icon-default:before{content:\"\\eae8\"}/*!@.codicon-file-code:before*/.codicon-file-code.sc-kol-icon-default:before{content:\"\\eae9\"}/*!@.codicon-file-media:before*/.codicon-file-media.sc-kol-icon-default:before{content:\"\\eaea\"}/*!@.codicon-file-pdf:before*/.codicon-file-pdf.sc-kol-icon-default:before{content:\"\\eaeb\"}/*!@.codicon-file-submodule:before*/.codicon-file-submodule.sc-kol-icon-default:before{content:\"\\eaec\"}/*!@.codicon-file-symlink-directory:before*/.codicon-file-symlink-directory.sc-kol-icon-default:before{content:\"\\eaed\"}/*!@.codicon-file-symlink-file:before*/.codicon-file-symlink-file.sc-kol-icon-default:before{content:\"\\eaee\"}/*!@.codicon-file-zip:before*/.codicon-file-zip.sc-kol-icon-default:before{content:\"\\eaef\"}/*!@.codicon-files:before*/.codicon-files.sc-kol-icon-default:before{content:\"\\eaf0\"}/*!@.codicon-filter:before*/.codicon-filter.sc-kol-icon-default:before{content:\"\\eaf1\"}/*!@.codicon-flame:before*/.codicon-flame.sc-kol-icon-default:before{content:\"\\eaf2\"}/*!@.codicon-fold-down:before*/.codicon-fold-down.sc-kol-icon-default:before{content:\"\\eaf3\"}/*!@.codicon-fold-up:before*/.codicon-fold-up.sc-kol-icon-default:before{content:\"\\eaf4\"}/*!@.codicon-fold:before*/.codicon-fold.sc-kol-icon-default:before{content:\"\\eaf5\"}/*!@.codicon-folder-active:before*/.codicon-folder-active.sc-kol-icon-default:before{content:\"\\eaf6\"}/*!@.codicon-folder-opened:before*/.codicon-folder-opened.sc-kol-icon-default:before{content:\"\\eaf7\"}/*!@.codicon-gear:before*/.codicon-gear.sc-kol-icon-default:before{content:\"\\eaf8\"}/*!@.codicon-gift:before*/.codicon-gift.sc-kol-icon-default:before{content:\"\\eaf9\"}/*!@.codicon-gist-secret:before*/.codicon-gist-secret.sc-kol-icon-default:before{content:\"\\eafa\"}/*!@.codicon-gist:before*/.codicon-gist.sc-kol-icon-default:before{content:\"\\eafb\"}/*!@.codicon-git-commit:before*/.codicon-git-commit.sc-kol-icon-default:before{content:\"\\eafc\"}/*!@.codicon-git-compare:before*/.codicon-git-compare.sc-kol-icon-default:before{content:\"\\eafd\"}/*!@.codicon-compare-changes:before*/.codicon-compare-changes.sc-kol-icon-default:before{content:\"\\eafd\"}/*!@.codicon-git-merge:before*/.codicon-git-merge.sc-kol-icon-default:before{content:\"\\eafe\"}/*!@.codicon-github-action:before*/.codicon-github-action.sc-kol-icon-default:before{content:\"\\eaff\"}/*!@.codicon-github-alt:before*/.codicon-github-alt.sc-kol-icon-default:before{content:\"\\eb00\"}/*!@.codicon-globe:before*/.codicon-globe.sc-kol-icon-default:before{content:\"\\eb01\"}/*!@.codicon-grabber:before*/.codicon-grabber.sc-kol-icon-default:before{content:\"\\eb02\"}/*!@.codicon-graph:before*/.codicon-graph.sc-kol-icon-default:before{content:\"\\eb03\"}/*!@.codicon-gripper:before*/.codicon-gripper.sc-kol-icon-default:before{content:\"\\eb04\"}/*!@.codicon-heart:before*/.codicon-heart.sc-kol-icon-default:before{content:\"\\eb05\"}/*!@.codicon-home:before*/.codicon-home.sc-kol-icon-default:before{content:\"\\eb06\"}/*!@.codicon-horizontal-rule:before*/.codicon-horizontal-rule.sc-kol-icon-default:before{content:\"\\eb07\"}/*!@.codicon-hubot:before*/.codicon-hubot.sc-kol-icon-default:before{content:\"\\eb08\"}/*!@.codicon-inbox:before*/.codicon-inbox.sc-kol-icon-default:before{content:\"\\eb09\"}/*!@.codicon-issue-reopened:before*/.codicon-issue-reopened.sc-kol-icon-default:before{content:\"\\eb0b\"}/*!@.codicon-issues:before*/.codicon-issues.sc-kol-icon-default:before{content:\"\\eb0c\"}/*!@.codicon-italic:before*/.codicon-italic.sc-kol-icon-default:before{content:\"\\eb0d\"}/*!@.codicon-jersey:before*/.codicon-jersey.sc-kol-icon-default:before{content:\"\\eb0e\"}/*!@.codicon-json:before*/.codicon-json.sc-kol-icon-default:before{content:\"\\eb0f\"}/*!@.codicon-kebab-vertical:before*/.codicon-kebab-vertical.sc-kol-icon-default:before{content:\"\\eb10\"}/*!@.codicon-key:before*/.codicon-key.sc-kol-icon-default:before{content:\"\\eb11\"}/*!@.codicon-law:before*/.codicon-law.sc-kol-icon-default:before{content:\"\\eb12\"}/*!@.codicon-lightbulb-autofix:before*/.codicon-lightbulb-autofix.sc-kol-icon-default:before{content:\"\\eb13\"}/*!@.codicon-link-external:before*/.codicon-link-external.sc-kol-icon-default:before{content:\"\\eb14\"}/*!@.codicon-link:before*/.codicon-link.sc-kol-icon-default:before{content:\"\\eb15\"}/*!@.codicon-list-ordered:before*/.codicon-list-ordered.sc-kol-icon-default:before{content:\"\\eb16\"}/*!@.codicon-list-unordered:before*/.codicon-list-unordered.sc-kol-icon-default:before{content:\"\\eb17\"}/*!@.codicon-live-share:before*/.codicon-live-share.sc-kol-icon-default:before{content:\"\\eb18\"}/*!@.codicon-loading:before*/.codicon-loading.sc-kol-icon-default:before{content:\"\\eb19\"}/*!@.codicon-location:before*/.codicon-location.sc-kol-icon-default:before{content:\"\\eb1a\"}/*!@.codicon-mail-read:before*/.codicon-mail-read.sc-kol-icon-default:before{content:\"\\eb1b\"}/*!@.codicon-mail:before*/.codicon-mail.sc-kol-icon-default:before{content:\"\\eb1c\"}/*!@.codicon-markdown:before*/.codicon-markdown.sc-kol-icon-default:before{content:\"\\eb1d\"}/*!@.codicon-megaphone:before*/.codicon-megaphone.sc-kol-icon-default:before{content:\"\\eb1e\"}/*!@.codicon-mention:before*/.codicon-mention.sc-kol-icon-default:before{content:\"\\eb1f\"}/*!@.codicon-milestone:before*/.codicon-milestone.sc-kol-icon-default:before{content:\"\\eb20\"}/*!@.codicon-mortar-board:before*/.codicon-mortar-board.sc-kol-icon-default:before{content:\"\\eb21\"}/*!@.codicon-move:before*/.codicon-move.sc-kol-icon-default:before{content:\"\\eb22\"}/*!@.codicon-multiple-windows:before*/.codicon-multiple-windows.sc-kol-icon-default:before{content:\"\\eb23\"}/*!@.codicon-mute:before*/.codicon-mute.sc-kol-icon-default:before{content:\"\\eb24\"}/*!@.codicon-no-newline:before*/.codicon-no-newline.sc-kol-icon-default:before{content:\"\\eb25\"}/*!@.codicon-note:before*/.codicon-note.sc-kol-icon-default:before{content:\"\\eb26\"}/*!@.codicon-octoface:before*/.codicon-octoface.sc-kol-icon-default:before{content:\"\\eb27\"}/*!@.codicon-open-preview:before*/.codicon-open-preview.sc-kol-icon-default:before{content:\"\\eb28\"}/*!@.codicon-package:before*/.codicon-package.sc-kol-icon-default:before{content:\"\\eb29\"}/*!@.codicon-paintcan:before*/.codicon-paintcan.sc-kol-icon-default:before{content:\"\\eb2a\"}/*!@.codicon-pin:before*/.codicon-pin.sc-kol-icon-default:before{content:\"\\eb2b\"}/*!@.codicon-play:before*/.codicon-play.sc-kol-icon-default:before{content:\"\\eb2c\"}/*!@.codicon-run:before*/.codicon-run.sc-kol-icon-default:before{content:\"\\eb2c\"}/*!@.codicon-plug:before*/.codicon-plug.sc-kol-icon-default:before{content:\"\\eb2d\"}/*!@.codicon-preserve-case:before*/.codicon-preserve-case.sc-kol-icon-default:before{content:\"\\eb2e\"}/*!@.codicon-preview:before*/.codicon-preview.sc-kol-icon-default:before{content:\"\\eb2f\"}/*!@.codicon-project:before*/.codicon-project.sc-kol-icon-default:before{content:\"\\eb30\"}/*!@.codicon-pulse:before*/.codicon-pulse.sc-kol-icon-default:before{content:\"\\eb31\"}/*!@.codicon-question:before*/.codicon-question.sc-kol-icon-default:before{content:\"\\eb32\"}/*!@.codicon-quote:before*/.codicon-quote.sc-kol-icon-default:before{content:\"\\eb33\"}/*!@.codicon-radio-tower:before*/.codicon-radio-tower.sc-kol-icon-default:before{content:\"\\eb34\"}/*!@.codicon-reactions:before*/.codicon-reactions.sc-kol-icon-default:before{content:\"\\eb35\"}/*!@.codicon-references:before*/.codicon-references.sc-kol-icon-default:before{content:\"\\eb36\"}/*!@.codicon-refresh:before*/.codicon-refresh.sc-kol-icon-default:before{content:\"\\eb37\"}/*!@.codicon-regex:before*/.codicon-regex.sc-kol-icon-default:before{content:\"\\eb38\"}/*!@.codicon-remote-explorer:before*/.codicon-remote-explorer.sc-kol-icon-default:before{content:\"\\eb39\"}/*!@.codicon-remote:before*/.codicon-remote.sc-kol-icon-default:before{content:\"\\eb3a\"}/*!@.codicon-remove:before*/.codicon-remove.sc-kol-icon-default:before{content:\"\\eb3b\"}/*!@.codicon-replace-all:before*/.codicon-replace-all.sc-kol-icon-default:before{content:\"\\eb3c\"}/*!@.codicon-replace:before*/.codicon-replace.sc-kol-icon-default:before{content:\"\\eb3d\"}/*!@.codicon-repo-clone:before*/.codicon-repo-clone.sc-kol-icon-default:before{content:\"\\eb3e\"}/*!@.codicon-repo-force-push:before*/.codicon-repo-force-push.sc-kol-icon-default:before{content:\"\\eb3f\"}/*!@.codicon-repo-pull:before*/.codicon-repo-pull.sc-kol-icon-default:before{content:\"\\eb40\"}/*!@.codicon-repo-push:before*/.codicon-repo-push.sc-kol-icon-default:before{content:\"\\eb41\"}/*!@.codicon-report:before*/.codicon-report.sc-kol-icon-default:before{content:\"\\eb42\"}/*!@.codicon-request-changes:before*/.codicon-request-changes.sc-kol-icon-default:before{content:\"\\eb43\"}/*!@.codicon-rocket:before*/.codicon-rocket.sc-kol-icon-default:before{content:\"\\eb44\"}/*!@.codicon-root-folder-opened:before*/.codicon-root-folder-opened.sc-kol-icon-default:before{content:\"\\eb45\"}/*!@.codicon-root-folder:before*/.codicon-root-folder.sc-kol-icon-default:before{content:\"\\eb46\"}/*!@.codicon-rss:before*/.codicon-rss.sc-kol-icon-default:before{content:\"\\eb47\"}/*!@.codicon-ruby:before*/.codicon-ruby.sc-kol-icon-default:before{content:\"\\eb48\"}/*!@.codicon-save-all:before*/.codicon-save-all.sc-kol-icon-default:before{content:\"\\eb49\"}/*!@.codicon-save-as:before*/.codicon-save-as.sc-kol-icon-default:before{content:\"\\eb4a\"}/*!@.codicon-save:before*/.codicon-save.sc-kol-icon-default:before{content:\"\\eb4b\"}/*!@.codicon-screen-full:before*/.codicon-screen-full.sc-kol-icon-default:before{content:\"\\eb4c\"}/*!@.codicon-screen-normal:before*/.codicon-screen-normal.sc-kol-icon-default:before{content:\"\\eb4d\"}/*!@.codicon-search-stop:before*/.codicon-search-stop.sc-kol-icon-default:before{content:\"\\eb4e\"}/*!@.codicon-server:before*/.codicon-server.sc-kol-icon-default:before{content:\"\\eb50\"}/*!@.codicon-settings-gear:before*/.codicon-settings-gear.sc-kol-icon-default:before{content:\"\\eb51\"}/*!@.codicon-settings:before*/.codicon-settings.sc-kol-icon-default:before{content:\"\\eb52\"}/*!@.codicon-shield:before*/.codicon-shield.sc-kol-icon-default:before{content:\"\\eb53\"}/*!@.codicon-smiley:before*/.codicon-smiley.sc-kol-icon-default:before{content:\"\\eb54\"}/*!@.codicon-sort-precedence:before*/.codicon-sort-precedence.sc-kol-icon-default:before{content:\"\\eb55\"}/*!@.codicon-split-horizontal:before*/.codicon-split-horizontal.sc-kol-icon-default:before{content:\"\\eb56\"}/*!@.codicon-split-vertical:before*/.codicon-split-vertical.sc-kol-icon-default:before{content:\"\\eb57\"}/*!@.codicon-squirrel:before*/.codicon-squirrel.sc-kol-icon-default:before{content:\"\\eb58\"}/*!@.codicon-star-full:before*/.codicon-star-full.sc-kol-icon-default:before{content:\"\\eb59\"}/*!@.codicon-star-half:before*/.codicon-star-half.sc-kol-icon-default:before{content:\"\\eb5a\"}/*!@.codicon-symbol-class:before*/.codicon-symbol-class.sc-kol-icon-default:before{content:\"\\eb5b\"}/*!@.codicon-symbol-color:before*/.codicon-symbol-color.sc-kol-icon-default:before{content:\"\\eb5c\"}/*!@.codicon-symbol-constant:before*/.codicon-symbol-constant.sc-kol-icon-default:before{content:\"\\eb5d\"}/*!@.codicon-symbol-enum-member:before*/.codicon-symbol-enum-member.sc-kol-icon-default:before{content:\"\\eb5e\"}/*!@.codicon-symbol-field:before*/.codicon-symbol-field.sc-kol-icon-default:before{content:\"\\eb5f\"}/*!@.codicon-symbol-file:before*/.codicon-symbol-file.sc-kol-icon-default:before{content:\"\\eb60\"}/*!@.codicon-symbol-interface:before*/.codicon-symbol-interface.sc-kol-icon-default:before{content:\"\\eb61\"}/*!@.codicon-symbol-keyword:before*/.codicon-symbol-keyword.sc-kol-icon-default:before{content:\"\\eb62\"}/*!@.codicon-symbol-misc:before*/.codicon-symbol-misc.sc-kol-icon-default:before{content:\"\\eb63\"}/*!@.codicon-symbol-operator:before*/.codicon-symbol-operator.sc-kol-icon-default:before{content:\"\\eb64\"}/*!@.codicon-symbol-property:before*/.codicon-symbol-property.sc-kol-icon-default:before{content:\"\\eb65\"}/*!@.codicon-wrench:before*/.codicon-wrench.sc-kol-icon-default:before{content:\"\\eb65\"}/*!@.codicon-wrench-subaction:before*/.codicon-wrench-subaction.sc-kol-icon-default:before{content:\"\\eb65\"}/*!@.codicon-symbol-snippet:before*/.codicon-symbol-snippet.sc-kol-icon-default:before{content:\"\\eb66\"}/*!@.codicon-tasklist:before*/.codicon-tasklist.sc-kol-icon-default:before{content:\"\\eb67\"}/*!@.codicon-telescope:before*/.codicon-telescope.sc-kol-icon-default:before{content:\"\\eb68\"}/*!@.codicon-text-size:before*/.codicon-text-size.sc-kol-icon-default:before{content:\"\\eb69\"}/*!@.codicon-three-bars:before*/.codicon-three-bars.sc-kol-icon-default:before{content:\"\\eb6a\"}/*!@.codicon-thumbsdown:before*/.codicon-thumbsdown.sc-kol-icon-default:before{content:\"\\eb6b\"}/*!@.codicon-thumbsup:before*/.codicon-thumbsup.sc-kol-icon-default:before{content:\"\\eb6c\"}/*!@.codicon-tools:before*/.codicon-tools.sc-kol-icon-default:before{content:\"\\eb6d\"}/*!@.codicon-triangle-down:before*/.codicon-triangle-down.sc-kol-icon-default:before{content:\"\\eb6e\"}/*!@.codicon-triangle-left:before*/.codicon-triangle-left.sc-kol-icon-default:before{content:\"\\eb6f\"}/*!@.codicon-triangle-right:before*/.codicon-triangle-right.sc-kol-icon-default:before{content:\"\\eb70\"}/*!@.codicon-triangle-up:before*/.codicon-triangle-up.sc-kol-icon-default:before{content:\"\\eb71\"}/*!@.codicon-twitter:before*/.codicon-twitter.sc-kol-icon-default:before{content:\"\\eb72\"}/*!@.codicon-unfold:before*/.codicon-unfold.sc-kol-icon-default:before{content:\"\\eb73\"}/*!@.codicon-unlock:before*/.codicon-unlock.sc-kol-icon-default:before{content:\"\\eb74\"}/*!@.codicon-unmute:before*/.codicon-unmute.sc-kol-icon-default:before{content:\"\\eb75\"}/*!@.codicon-unverified:before*/.codicon-unverified.sc-kol-icon-default:before{content:\"\\eb76\"}/*!@.codicon-verified:before*/.codicon-verified.sc-kol-icon-default:before{content:\"\\eb77\"}/*!@.codicon-versions:before*/.codicon-versions.sc-kol-icon-default:before{content:\"\\eb78\"}/*!@.codicon-vm-active:before*/.codicon-vm-active.sc-kol-icon-default:before{content:\"\\eb79\"}/*!@.codicon-vm-outline:before*/.codicon-vm-outline.sc-kol-icon-default:before{content:\"\\eb7a\"}/*!@.codicon-vm-running:before*/.codicon-vm-running.sc-kol-icon-default:before{content:\"\\eb7b\"}/*!@.codicon-watch:before*/.codicon-watch.sc-kol-icon-default:before{content:\"\\eb7c\"}/*!@.codicon-whitespace:before*/.codicon-whitespace.sc-kol-icon-default:before{content:\"\\eb7d\"}/*!@.codicon-whole-word:before*/.codicon-whole-word.sc-kol-icon-default:before{content:\"\\eb7e\"}/*!@.codicon-window:before*/.codicon-window.sc-kol-icon-default:before{content:\"\\eb7f\"}/*!@.codicon-word-wrap:before*/.codicon-word-wrap.sc-kol-icon-default:before{content:\"\\eb80\"}/*!@.codicon-zoom-in:before*/.codicon-zoom-in.sc-kol-icon-default:before{content:\"\\eb81\"}/*!@.codicon-zoom-out:before*/.codicon-zoom-out.sc-kol-icon-default:before{content:\"\\eb82\"}/*!@.codicon-list-filter:before*/.codicon-list-filter.sc-kol-icon-default:before{content:\"\\eb83\"}/*!@.codicon-list-flat:before*/.codicon-list-flat.sc-kol-icon-default:before{content:\"\\eb84\"}/*!@.codicon-list-selection:before*/.codicon-list-selection.sc-kol-icon-default:before{content:\"\\eb85\"}/*!@.codicon-selection:before*/.codicon-selection.sc-kol-icon-default:before{content:\"\\eb85\"}/*!@.codicon-list-tree:before*/.codicon-list-tree.sc-kol-icon-default:before{content:\"\\eb86\"}/*!@.codicon-debug-breakpoint-function-unverified:before*/.codicon-debug-breakpoint-function-unverified.sc-kol-icon-default:before{content:\"\\eb87\"}/*!@.codicon-debug-breakpoint-function:before*/.codicon-debug-breakpoint-function.sc-kol-icon-default:before{content:\"\\eb88\"}/*!@.codicon-debug-breakpoint-function-disabled:before*/.codicon-debug-breakpoint-function-disabled.sc-kol-icon-default:before{content:\"\\eb88\"}/*!@.codicon-debug-stackframe-active:before*/.codicon-debug-stackframe-active.sc-kol-icon-default:before{content:\"\\eb89\"}/*!@.codicon-circle-small-filled:before*/.codicon-circle-small-filled.sc-kol-icon-default:before{content:\"\\eb8a\"}/*!@.codicon-debug-stackframe-dot:before*/.codicon-debug-stackframe-dot.sc-kol-icon-default:before{content:\"\\eb8a\"}/*!@.codicon-debug-stackframe:before*/.codicon-debug-stackframe.sc-kol-icon-default:before{content:\"\\eb8b\"}/*!@.codicon-debug-stackframe-focused:before*/.codicon-debug-stackframe-focused.sc-kol-icon-default:before{content:\"\\eb8b\"}/*!@.codicon-debug-breakpoint-unsupported:before*/.codicon-debug-breakpoint-unsupported.sc-kol-icon-default:before{content:\"\\eb8c\"}/*!@.codicon-symbol-string:before*/.codicon-symbol-string.sc-kol-icon-default:before{content:\"\\eb8d\"}/*!@.codicon-debug-reverse-continue:before*/.codicon-debug-reverse-continue.sc-kol-icon-default:before{content:\"\\eb8e\"}/*!@.codicon-debug-step-back:before*/.codicon-debug-step-back.sc-kol-icon-default:before{content:\"\\eb8f\"}/*!@.codicon-debug-restart-frame:before*/.codicon-debug-restart-frame.sc-kol-icon-default:before{content:\"\\eb90\"}/*!@.codicon-debug-alt:before*/.codicon-debug-alt.sc-kol-icon-default:before{content:\"\\eb91\"}/*!@.codicon-call-incoming:before*/.codicon-call-incoming.sc-kol-icon-default:before{content:\"\\eb92\"}/*!@.codicon-call-outgoing:before*/.codicon-call-outgoing.sc-kol-icon-default:before{content:\"\\eb93\"}/*!@.codicon-menu:before*/.codicon-menu.sc-kol-icon-default:before{content:\"\\eb94\"}/*!@.codicon-expand-all:before*/.codicon-expand-all.sc-kol-icon-default:before{content:\"\\eb95\"}/*!@.codicon-feedback:before*/.codicon-feedback.sc-kol-icon-default:before{content:\"\\eb96\"}/*!@.codicon-group-by-ref-type:before*/.codicon-group-by-ref-type.sc-kol-icon-default:before{content:\"\\eb97\"}/*!@.codicon-ungroup-by-ref-type:before*/.codicon-ungroup-by-ref-type.sc-kol-icon-default:before{content:\"\\eb98\"}/*!@.codicon-account:before*/.codicon-account.sc-kol-icon-default:before{content:\"\\eb99\"}/*!@.codicon-bell-dot:before*/.codicon-bell-dot.sc-kol-icon-default:before{content:\"\\eb9a\"}/*!@.codicon-debug-console:before*/.codicon-debug-console.sc-kol-icon-default:before{content:\"\\eb9b\"}/*!@.codicon-library:before*/.codicon-library.sc-kol-icon-default:before{content:\"\\eb9c\"}/*!@.codicon-output:before*/.codicon-output.sc-kol-icon-default:before{content:\"\\eb9d\"}/*!@.codicon-run-all:before*/.codicon-run-all.sc-kol-icon-default:before{content:\"\\eb9e\"}/*!@.codicon-sync-ignored:before*/.codicon-sync-ignored.sc-kol-icon-default:before{content:\"\\eb9f\"}/*!@.codicon-pinned:before*/.codicon-pinned.sc-kol-icon-default:before{content:\"\\eba0\"}/*!@.codicon-github-inverted:before*/.codicon-github-inverted.sc-kol-icon-default:before{content:\"\\eba1\"}/*!@.codicon-server-process:before*/.codicon-server-process.sc-kol-icon-default:before{content:\"\\eba2\"}/*!@.codicon-server-environment:before*/.codicon-server-environment.sc-kol-icon-default:before{content:\"\\eba3\"}/*!@.codicon-pass:before*/.codicon-pass.sc-kol-icon-default:before{content:\"\\eba4\"}/*!@.codicon-issue-closed:before*/.codicon-issue-closed.sc-kol-icon-default:before{content:\"\\eba4\"}/*!@.codicon-stop-circle:before*/.codicon-stop-circle.sc-kol-icon-default:before{content:\"\\eba5\"}/*!@.codicon-play-circle:before*/.codicon-play-circle.sc-kol-icon-default:before{content:\"\\eba6\"}/*!@.codicon-record:before*/.codicon-record.sc-kol-icon-default:before{content:\"\\eba7\"}/*!@.codicon-debug-alt-small:before*/.codicon-debug-alt-small.sc-kol-icon-default:before{content:\"\\eba8\"}/*!@.codicon-vm-connect:before*/.codicon-vm-connect.sc-kol-icon-default:before{content:\"\\eba9\"}/*!@.codicon-cloud:before*/.codicon-cloud.sc-kol-icon-default:before{content:\"\\ebaa\"}/*!@.codicon-merge:before*/.codicon-merge.sc-kol-icon-default:before{content:\"\\ebab\"}/*!@.codicon-export:before*/.codicon-export.sc-kol-icon-default:before{content:\"\\ebac\"}/*!@.codicon-graph-left:before*/.codicon-graph-left.sc-kol-icon-default:before{content:\"\\ebad\"}/*!@.codicon-magnet:before*/.codicon-magnet.sc-kol-icon-default:before{content:\"\\ebae\"}/*!@.codicon-notebook:before*/.codicon-notebook.sc-kol-icon-default:before{content:\"\\ebaf\"}/*!@.codicon-redo:before*/.codicon-redo.sc-kol-icon-default:before{content:\"\\ebb0\"}/*!@.codicon-check-all:before*/.codicon-check-all.sc-kol-icon-default:before{content:\"\\ebb1\"}/*!@.codicon-pinned-dirty:before*/.codicon-pinned-dirty.sc-kol-icon-default:before{content:\"\\ebb2\"}/*!@.codicon-pass-filled:before*/.codicon-pass-filled.sc-kol-icon-default:before{content:\"\\ebb3\"}/*!@.codicon-circle-large-filled:before*/.codicon-circle-large-filled.sc-kol-icon-default:before{content:\"\\ebb4\"}/*!@.codicon-circle-large-outline:before*/.codicon-circle-large-outline.sc-kol-icon-default:before{content:\"\\ebb5\"}/*!@.codicon-combine:before*/.codicon-combine.sc-kol-icon-default:before{content:\"\\ebb6\"}/*!@.codicon-gather:before*/.codicon-gather.sc-kol-icon-default:before{content:\"\\ebb6\"}/*!@.codicon-table:before*/.codicon-table.sc-kol-icon-default:before{content:\"\\ebb7\"}/*!@.codicon-variable-group:before*/.codicon-variable-group.sc-kol-icon-default:before{content:\"\\ebb8\"}/*!@.codicon-type-hierarchy:before*/.codicon-type-hierarchy.sc-kol-icon-default:before{content:\"\\ebb9\"}/*!@.codicon-type-hierarchy-sub:before*/.codicon-type-hierarchy-sub.sc-kol-icon-default:before{content:\"\\ebba\"}/*!@.codicon-type-hierarchy-super:before*/.codicon-type-hierarchy-super.sc-kol-icon-default:before{content:\"\\ebbb\"}/*!@.codicon-git-pull-request-create:before*/.codicon-git-pull-request-create.sc-kol-icon-default:before{content:\"\\ebbc\"}/*!@.codicon-run-above:before*/.codicon-run-above.sc-kol-icon-default:before{content:\"\\ebbd\"}/*!@.codicon-run-below:before*/.codicon-run-below.sc-kol-icon-default:before{content:\"\\ebbe\"}/*!@.codicon-notebook-template:before*/.codicon-notebook-template.sc-kol-icon-default:before{content:\"\\ebbf\"}/*!@.codicon-debug-rerun:before*/.codicon-debug-rerun.sc-kol-icon-default:before{content:\"\\ebc0\"}/*!@.codicon-workspace-trusted:before*/.codicon-workspace-trusted.sc-kol-icon-default:before{content:\"\\ebc1\"}/*!@.codicon-workspace-untrusted:before*/.codicon-workspace-untrusted.sc-kol-icon-default:before{content:\"\\ebc2\"}/*!@.codicon-workspace-unknown:before*/.codicon-workspace-unknown.sc-kol-icon-default:before{content:\"\\ebc3\"}/*!@.codicon-terminal-cmd:before*/.codicon-terminal-cmd.sc-kol-icon-default:before{content:\"\\ebc4\"}/*!@.codicon-terminal-debian:before*/.codicon-terminal-debian.sc-kol-icon-default:before{content:\"\\ebc5\"}/*!@.codicon-terminal-linux:before*/.codicon-terminal-linux.sc-kol-icon-default:before{content:\"\\ebc6\"}/*!@.codicon-terminal-powershell:before*/.codicon-terminal-powershell.sc-kol-icon-default:before{content:\"\\ebc7\"}/*!@.codicon-terminal-tmux:before*/.codicon-terminal-tmux.sc-kol-icon-default:before{content:\"\\ebc8\"}/*!@.codicon-terminal-ubuntu:before*/.codicon-terminal-ubuntu.sc-kol-icon-default:before{content:\"\\ebc9\"}/*!@.codicon-terminal-bash:before*/.codicon-terminal-bash.sc-kol-icon-default:before{content:\"\\ebca\"}/*!@.codicon-arrow-swap:before*/.codicon-arrow-swap.sc-kol-icon-default:before{content:\"\\ebcb\"}/*!@.codicon-copy:before*/.codicon-copy.sc-kol-icon-default:before{content:\"\\ebcc\"}/*!@.codicon-person-add:before*/.codicon-person-add.sc-kol-icon-default:before{content:\"\\ebcd\"}/*!@.codicon-filter-filled:before*/.codicon-filter-filled.sc-kol-icon-default:before{content:\"\\ebce\"}/*!@.codicon-wand:before*/.codicon-wand.sc-kol-icon-default:before{content:\"\\ebcf\"}/*!@.codicon-debug-line-by-line:before*/.codicon-debug-line-by-line.sc-kol-icon-default:before{content:\"\\ebd0\"}/*!@.codicon-inspect:before*/.codicon-inspect.sc-kol-icon-default:before{content:\"\\ebd1\"}/*!@.codicon-layers:before*/.codicon-layers.sc-kol-icon-default:before{content:\"\\ebd2\"}/*!@.codicon-layers-dot:before*/.codicon-layers-dot.sc-kol-icon-default:before{content:\"\\ebd3\"}/*!@.codicon-layers-active:before*/.codicon-layers-active.sc-kol-icon-default:before{content:\"\\ebd4\"}/*!@.codicon-compass:before*/.codicon-compass.sc-kol-icon-default:before{content:\"\\ebd5\"}/*!@.codicon-compass-dot:before*/.codicon-compass-dot.sc-kol-icon-default:before{content:\"\\ebd6\"}/*!@.codicon-compass-active:before*/.codicon-compass-active.sc-kol-icon-default:before{content:\"\\ebd7\"}/*!@.codicon-azure:before*/.codicon-azure.sc-kol-icon-default:before{content:\"\\ebd8\"}/*!@.codicon-issue-draft:before*/.codicon-issue-draft.sc-kol-icon-default:before{content:\"\\ebd9\"}/*!@.codicon-git-pull-request-closed:before*/.codicon-git-pull-request-closed.sc-kol-icon-default:before{content:\"\\ebda\"}/*!@.codicon-git-pull-request-draft:before*/.codicon-git-pull-request-draft.sc-kol-icon-default:before{content:\"\\ebdb\"}/*!@.codicon-debug-all:before*/.codicon-debug-all.sc-kol-icon-default:before{content:\"\\ebdc\"}/*!@.codicon-debug-coverage:before*/.codicon-debug-coverage.sc-kol-icon-default:before{content:\"\\ebdd\"}/*!@.codicon-run-errors:before*/.codicon-run-errors.sc-kol-icon-default:before{content:\"\\ebde\"}/*!@.codicon-folder-library:before*/.codicon-folder-library.sc-kol-icon-default:before{content:\"\\ebdf\"}/*!@.codicon-debug-continue-small:before*/.codicon-debug-continue-small.sc-kol-icon-default:before{content:\"\\ebe0\"}/*!@.codicon-beaker-stop:before*/.codicon-beaker-stop.sc-kol-icon-default:before{content:\"\\ebe1\"}/*!@.codicon-graph-line:before*/.codicon-graph-line.sc-kol-icon-default:before{content:\"\\ebe2\"}/*!@.codicon-graph-scatter:before*/.codicon-graph-scatter.sc-kol-icon-default:before{content:\"\\ebe3\"}/*!@.codicon-pie-chart:before*/.codicon-pie-chart.sc-kol-icon-default:before{content:\"\\ebe4\"}/*!@.codicon-bracket:before*/.codicon-bracket.sc-kol-icon-default:before{content:\"\\eb0f\"}/*!@.codicon-bracket-dot:before*/.codicon-bracket-dot.sc-kol-icon-default:before{content:\"\\ebe5\"}/*!@.codicon-bracket-error:before*/.codicon-bracket-error.sc-kol-icon-default:before{content:\"\\ebe6\"}/*!@.codicon-lock-small:before*/.codicon-lock-small.sc-kol-icon-default:before{content:\"\\ebe7\"}/*!@.codicon-azure-devops:before*/.codicon-azure-devops.sc-kol-icon-default:before{content:\"\\ebe8\"}/*!@.codicon-verified-filled:before*/.codicon-verified-filled.sc-kol-icon-default:before{content:\"\\ebe9\"}/*!@.codicon-newline:before*/.codicon-newline.sc-kol-icon-default:before{content:\"\\ebea\"}/*!@.codicon-layout:before*/.codicon-layout.sc-kol-icon-default:before{content:\"\\ebeb\"}/*!@.codicon-layout-activitybar-left:before*/.codicon-layout-activitybar-left.sc-kol-icon-default:before{content:\"\\ebec\"}/*!@.codicon-layout-activitybar-right:before*/.codicon-layout-activitybar-right.sc-kol-icon-default:before{content:\"\\ebed\"}/*!@.codicon-layout-panel-left:before*/.codicon-layout-panel-left.sc-kol-icon-default:before{content:\"\\ebee\"}/*!@.codicon-layout-panel-center:before*/.codicon-layout-panel-center.sc-kol-icon-default:before{content:\"\\ebef\"}/*!@.codicon-layout-panel-justify:before*/.codicon-layout-panel-justify.sc-kol-icon-default:before{content:\"\\ebf0\"}/*!@.codicon-layout-panel-right:before*/.codicon-layout-panel-right.sc-kol-icon-default:before{content:\"\\ebf1\"}/*!@.codicon-layout-panel:before*/.codicon-layout-panel.sc-kol-icon-default:before{content:\"\\ebf2\"}/*!@.codicon-layout-sidebar-left:before*/.codicon-layout-sidebar-left.sc-kol-icon-default:before{content:\"\\ebf3\"}/*!@.codicon-layout-sidebar-right:before*/.codicon-layout-sidebar-right.sc-kol-icon-default:before{content:\"\\ebf4\"}/*!@.codicon-layout-statusbar:before*/.codicon-layout-statusbar.sc-kol-icon-default:before{content:\"\\ebf5\"}/*!@.codicon-layout-menubar:before*/.codicon-layout-menubar.sc-kol-icon-default:before{content:\"\\ebf6\"}/*!@.codicon-layout-centered:before*/.codicon-layout-centered.sc-kol-icon-default:before{content:\"\\ebf7\"}/*!@.codicon-target:before*/.codicon-target.sc-kol-icon-default:before{content:\"\\ebf8\"}/*!@.codicon-indent:before*/.codicon-indent.sc-kol-icon-default:before{content:\"\\ebf9\"}/*!@.codicon-record-small:before*/.codicon-record-small.sc-kol-icon-default:before{content:\"\\ebfa\"}/*!@.codicon-error-small:before*/.codicon-error-small.sc-kol-icon-default:before{content:\"\\ebfb\"}/*!@.codicon-arrow-circle-down:before*/.codicon-arrow-circle-down.sc-kol-icon-default:before{content:\"\\ebfc\"}/*!@.codicon-arrow-circle-left:before*/.codicon-arrow-circle-left.sc-kol-icon-default:before{content:\"\\ebfd\"}/*!@.codicon-arrow-circle-right:before*/.codicon-arrow-circle-right.sc-kol-icon-default:before{content:\"\\ebfe\"}/*!@.codicon-arrow-circle-up:before*/.codicon-arrow-circle-up.sc-kol-icon-default:before{content:\"\\ebff\"}/*!@.codicon-layout-sidebar-right-off:before*/.codicon-layout-sidebar-right-off.sc-kol-icon-default:before{content:\"\\ec00\"}/*!@.codicon-layout-panel-off:before*/.codicon-layout-panel-off.sc-kol-icon-default:before{content:\"\\ec01\"}/*!@.codicon-layout-sidebar-left-off:before*/.codicon-layout-sidebar-left-off.sc-kol-icon-default:before{content:\"\\ec02\"}/*!@.codicon-blank:before*/.codicon-blank.sc-kol-icon-default:before{content:\"\\ec03\"}/*!@.codicon-heart-filled:before*/.codicon-heart-filled.sc-kol-icon-default:before{content:\"\\ec04\"}/*!@.codicon-map:before*/.codicon-map.sc-kol-icon-default:before{content:\"\\ec05\"}/*!@.codicon-map-filled:before*/.codicon-map-filled.sc-kol-icon-default:before{content:\"\\ec06\"}/*!@.codicon-circle-small:before*/.codicon-circle-small.sc-kol-icon-default:before{content:\"\\ec07\"}/*!@.codicon-bell-slash:before*/.codicon-bell-slash.sc-kol-icon-default:before{content:\"\\ec08\"}/*!@.codicon-bell-slash-dot:before*/.codicon-bell-slash-dot.sc-kol-icon-default:before{content:\"\\ec09\"}/*!@.codicon-comment-unresolved:before*/.codicon-comment-unresolved.sc-kol-icon-default:before{content:\"\\ec0a\"}/*!@.codicon-git-pull-request-go-to-changes:before*/.codicon-git-pull-request-go-to-changes.sc-kol-icon-default:before{content:\"\\ec0b\"}/*!@.codicon-git-pull-request-new-changes:before*/.codicon-git-pull-request-new-changes.sc-kol-icon-default:before{content:\"\\ec0c\"}/*!@:host*/.sc-kol-icon-default-h{color:inherit;display:contents;height:1em;line-height:inherit;width:1em}/*!@:host > i*/.sc-kol-icon-default-h>i.sc-kol-icon-default{height:1em;width:1em}/*!@:host > i,\n:host > i:before*/.sc-kol-icon-default-h>i.sc-kol-icon-default,.sc-kol-icon-default-h>i.sc-kol-icon-default:before{font-size:inherit !important}";
+const defaultStyleCss$w = "@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}";
 
 class KolIcon {
   constructor(hostRef) {
@@ -12387,7 +12503,7 @@ class KolIcon {
     "_label": ["validateLabel"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$x
+    default: defaultStyleCss$w
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -12403,12 +12519,12 @@ class KolIcon {
   }; }
 }
 
-const AVAILABLE_LOADING_VALUES = new Set(['"eager", "lazy"']);
+const loadingOptions = ['eager', 'lazy'];
 function validateLoading(component, value) {
-  watchValidator(component, '_loading', (value) => value === 'eager' || value === 'lazy', AVAILABLE_LOADING_VALUES, value);
+  watchValidator(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value);
 }
 
-const defaultStyleCss$w = "/*!@img*/img.sc-kol-image-default{max-height:100%;max-width:100%}";
+const defaultStyleCss$v = "@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}";
 
 class KolImage {
   constructor(hostRef) {
@@ -12461,7 +12577,7 @@ class KolImage {
     "_srcset": ["validateSrcset"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$w
+    default: defaultStyleCss$v
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -12480,7 +12596,7 @@ class KolImage {
   }; }
 }
 
-const defaultStyleCss$v = "/*!@:host*/.sc-kol-indented-text-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-indented-text-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-indented-text-default,button.sc-kol-indented-text-default:not([role='link']),kol-input.sc-kol-indented-text-default .input.sc-kol-indented-text-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-indented-text-default,button.sc-kol-indented-text-default,h1.sc-kol-indented-text-default,h2.sc-kol-indented-text-default,h3.sc-kol-indented-text-default,h4.sc-kol-indented-text-default,h5.sc-kol-indented-text-default,h6.sc-kol-indented-text-default,input.sc-kol-indented-text-default,option.sc-kol-indented-text-default,select.sc-kol-indented-text-default,textarea.sc-kol-indented-text-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-indented-text-default:is(a,button).sc-kol-indented-text-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-indented-text-default-h{max-width:100%}/*!@**/*.sc-kol-indented-text-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-indented-text-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-indented-text-default>span.sc-kol-indented-text-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-indented-text-default,button.sc-kol-indented-text-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-indented-text-default,input.sc-kol-indented-text-default,option.sc-kol-indented-text-default,select.sc-kol-indented-text-default,textarea.sc-kol-indented-text-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-indented-text-default>kol-span-wc.sc-kol-indented-text-default>span.sc-kol-indented-text-default>span.sc-kol-indented-text-default{display:none}/*!@:host*/.sc-kol-indented-text-default-h{display:block}/*!@:host > div*/.sc-kol-indented-text-default-h>div.sc-kol-indented-text-default{border-left-style:solid;padding-left:0.5em}";
+const defaultStyleCss$u = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 class KolIndentedText {
   constructor(hostRef) {
@@ -12491,7 +12607,7 @@ class KolIndentedText {
     return (hAsync(Host, null, hAsync("div", null, hAsync("slot", null))));
   }
   static get style() { return {
-    default: defaultStyleCss$v
+    default: defaultStyleCss$u
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -12512,6 +12628,7 @@ class KolInput {
     this.catchInputSlot = (slot) => {
       handleSlotContent(this.host, slot, this.slotName);
     };
+    this._accessKey = undefined;
     this._alert = true;
     this._currentLength = undefined;
     this._disabled = false;
@@ -12556,13 +12673,14 @@ class KolInput {
         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", _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), hasError && (hAsync("kol-alert", { _alert: this._alert, _type: "error", _variant: "msg", "aria-hidden": this._hideError, class: `error${this._hideError ? ' hidden' : ''}`, id: `${this._id}-error` }, this._error)), 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", { 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("kol-alert", { _alert: this._alert, _type: "error", _variant: "msg", "aria-hidden": this._hideError, class: `error${this._hideError ? ' hidden' : ''}`, id: `${this._id}-error` }, this._error)), 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 {
     "$flags$": 4,
     "$tagName$": "kol-input",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_alert": [4],
       "_currentLength": [2, "_current-length"],
       "_disabled": [4],
@@ -12615,6 +12733,8 @@ const validateIndeterminate = (component, value) => {
   watchBoolean(component, '_indeterminate', value);
 };
 
+const orientationOptions = ['horizontal', 'vertical'];
+
 const validateInputSelectOptions = (option) => {
   if (typeof option === 'object' && option !== null) {
     if (typeof option.label === 'string' && option.label.length > 0) {
@@ -12874,7 +12994,7 @@ class InputRadioController extends InputCheckboxRadioController {
     this.component = component;
   }
   validateOrientation(value) {
-    watchValidator(this.component, '_orientation', (value) => value === 'horizontal' || value === 'vertical', new Set(['Orientation {horizontal, vertical}']), value, {
+    watchValidator(this.component, '_orientation', (value) => typeof value === 'string' && orientationOptions.includes(value), new Set([`Orientation {${orientationOptions.join(', ')}`]), value, {
       defaultValue: 'vertical',
     });
   }
@@ -12910,6 +13030,8 @@ class InputRadioController extends InputCheckboxRadioController {
   }
 }
 
+const inputCheckboxVariantOptions = ['button', 'default', 'switch'];
+
 class InputCheckboxController extends InputCheckboxRadioController {
   constructor(component, name, host) {
     super(component, name, host);
@@ -12957,7 +13079,7 @@ class InputCheckboxController extends InputCheckboxRadioController {
     this.setFormAssociatedCheckboxValue(this.component.state._value);
   }
   validateVariant(value) {
-    watchValidator(this.component, '_variant', (value) => typeof value === 'string' && (value === 'button' || value === 'default' || value === 'switch'), new Set(['String {button, default, switch}']), value);
+    watchValidator(this.component, '_variant', (value) => typeof value === 'string' && inputCheckboxVariantOptions.includes(value), new Set([`String {${inputCheckboxVariantOptions.join(', ')}`]), value);
   }
   componentWillLoad() {
     super.componentWillLoad();
@@ -12970,7 +13092,24 @@ class InputCheckboxController extends InputCheckboxRadioController {
   }
 }
 
-const defaultStyleCss$u = "/*!@:host*/.sc-kol-input-checkbox-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-checkbox-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-checkbox-default,button.sc-kol-input-checkbox-default:not([role='link']),kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-checkbox-default,button.sc-kol-input-checkbox-default,h1.sc-kol-input-checkbox-default,h2.sc-kol-input-checkbox-default,h3.sc-kol-input-checkbox-default,h4.sc-kol-input-checkbox-default,h5.sc-kol-input-checkbox-default,h6.sc-kol-input-checkbox-default,input.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-checkbox-default:is(a,button).sc-kol-input-checkbox-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-checkbox-default-h{max-width:100%}/*!@**/*.sc-kol-input-checkbox-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-checkbox-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-checkbox-default,button.sc-kol-input-checkbox-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-checkbox-default,input.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-checkbox-default>kol-span-wc.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-checkbox-default label.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default::after,.required.sc-kol-input-checkbox-default legend.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default::after{content:'*'}/*!@:host*/.sc-kol-input-checkbox-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-checkbox-default,input[type='color'].sc-kol-input-checkbox-default,input[type='file'].sc-kol-input-checkbox-default,input[type='radio'].sc-kol-input-checkbox-default,input[type='range'].sc-kol-input-checkbox-default,label.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-checkbox-default,input[type='date'].sc-kol-input-checkbox-default,input[type='datetime-local'].sc-kol-input-checkbox-default,input[type='email'].sc-kol-input-checkbox-default,input[type='file'].sc-kol-input-checkbox-default,input[type='month'].sc-kol-input-checkbox-default,input[type='number'].sc-kol-input-checkbox-default,input[type='password'].sc-kol-input-checkbox-default,input[type='search'].sc-kol-input-checkbox-default,input[type='tel'].sc-kol-input-checkbox-default,input[type='text'].sc-kol-input-checkbox-default,input[type='time'].sc-kol-input-checkbox-default,input[type='url'].sc-kol-input-checkbox-default,input[type='week'].sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,select[multiple].sc-kol-input-checkbox-default option.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-checkbox-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-checkbox-default option.sc-kol-input-checkbox-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-checkbox-default .sc-kol-input-checkbox-default:is(button,input.sc-kol-input-checkbox-default,label.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,textarea).sc-kol-input-checkbox-default{cursor:not-allowed;opacity:0.5}/*!@label*/label.sc-kol-input-checkbox-default{cursor:pointer}/*!@kol-input*/kol-input.sc-kol-input-checkbox-default{align-items:center;display:grid;justify-items:left}/*!@kol-input.default,\nkol-input.switch*/kol-input.default.sc-kol-input-checkbox-default,kol-input.switch.sc-kol-input-checkbox-default{grid-template-columns:auto 1fr}/*!@kol-input .input*/kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default{align-items:center;display:grid;order:1}/*!@kol-input .input div*/kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default div.sc-kol-input-checkbox-default{display:inline-flex}/*!@kol-input .input input*/kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default input.sc-kol-input-checkbox-default{margin:0}/*!@kol-input label*/kol-input.sc-kol-input-checkbox-default label.sc-kol-input-checkbox-default{order:2}/*!@kol-input .hint,\nkol-input.error > kol-alert*/kol-input.sc-kol-input-checkbox-default .hint.sc-kol-input-checkbox-default,kol-input.error.sc-kol-input-checkbox-default>kol-alert.sc-kol-input-checkbox-default{grid-column:span 2}/*!@kol-input kol-alert.error*/kol-input.sc-kol-input-checkbox-default kol-alert.error.sc-kol-input-checkbox-default{order:3}/*!@kol-input .hint*/kol-input.sc-kol-input-checkbox-default .hint.sc-kol-input-checkbox-default{order:4}/*!@.error.hidden*/.error.hidden.sc-kol-input-checkbox-default{display:none}/*!@input*/input.sc-kol-input-checkbox-default{border-style:solid;border-width:2px;line-height:24px}/*!@input[type='checkbox']*/input[type='checkbox'].sc-kol-input-checkbox-default{appearance:none;background-color:#fff;cursor:pointer;transition:0.5s}/*!@input[type='checkbox'].kol-disabled:before*/input[type='checkbox'].kol-disabled.sc-kol-input-checkbox-default:before{cursor:not-allowed}/*!@input[type='checkbox']:before*/input[type='checkbox'].sc-kol-input-checkbox-default:before{content:'';cursor:pointer}/*!@.default kol-icon*/.default.sc-kol-input-checkbox-default kol-icon.sc-kol-input-checkbox-default{display:none}/*!@kol-input.required .tooltip-content .span-label::after*/kol-input.required.sc-kol-input-checkbox-default .tooltip-content.sc-kol-input-checkbox-default .span-label.sc-kol-input-checkbox-default::after{content:'*'}/*!@.button*/.button.sc-kol-input-checkbox-default{display:grid;grid-template-columns:var(--a11y-min-size) auto;grid-template-areas:'error error' 'input label' 'hint hint'}/*!@.button[tabindex]:focus*/.button[tabindex].sc-kol-input-checkbox-default:focus{cursor:inherit}/*!@.button input*/.button.sc-kol-input-checkbox-default input.sc-kol-input-checkbox-default{display:none}/*!@.button > .error*/.button.sc-kol-input-checkbox-default>.error.sc-kol-input-checkbox-default{grid-area:error}/*!@.button > label*/.button.sc-kol-input-checkbox-default>label.sc-kol-input-checkbox-default{grid-area:label}/*!@.button > .input*/.button.sc-kol-input-checkbox-default>.input.sc-kol-input-checkbox-default{grid-area:input}/*!@.button > .hint*/.button.sc-kol-input-checkbox-default>.hint.sc-kol-input-checkbox-default{grid-area:hint}/*!@.button .icon*/.button.sc-kol-input-checkbox-default .icon.sc-kol-input-checkbox-default{display:flex;align-items:center;justify-content:center;width:var(--a11y-min-size);height:var(--a11y-min-size)}/*!@.default input[type='checkbox']*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default{height:1.5em;width:1.5em}/*!@.default input[type='checkbox']:before*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:before{display:block;height:1.5em;position:relative;width:1.5em}/*!@.default input[type='checkbox']:checked:before*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:checked:before{border-radius:1px;border-style:solid;border-width:0 3px 3px 0;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}/*!@.default input[type='checkbox']:indeterminate:before*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:indeterminate:before{background-color:#000;height:0.2em;left:0.24em;top:0.575em;width:0.8em}/*!@.switch .input*/.switch.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default{position:relative}/*!@.switch input[type='checkbox']*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}/*!@.switch input[type='checkbox']::before*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default::before{background-color:#000;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;transition:0.5s;width:1.2em}/*!@.switch input[type='checkbox']:checked::before*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:checked::before{transform:translateX(1.5em)}/*!@.switch input[type='checkbox']:indeterminate::before*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:indeterminate::before{transform:translateX(0.75em)}/*!@.switch .icon*/.switch.sc-kol-input-checkbox-default .icon.sc-kol-input-checkbox-default{cursor:pointer;display:flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;position:absolute;z-index:1;top:50%;left:4px;transform:translate(0, -50%);transition:0.5s;color:#000}/*!@.switch:has(input:checked) .icon*/.switch.sc-kol-input-checkbox-default:has(input:checked) .icon.sc-kol-input-checkbox-default{transform:translate(1.5em, -50%)}/*!@.switch:has(input:indeterminate) .icon*/.switch.sc-kol-input-checkbox-default:has(input:indeterminate) .icon.sc-kol-input-checkbox-default{transform:translate(0.75em, -50%)}";
+const InternalUnderlinedAccessKey = ({ accessKey, label }) => {
+  let [first, ...rest] = label.split(accessKey);
+  if (rest.length === 0) {
+    accessKey = accessKey.toUpperCase();
+    [first, ...rest] = label.split(accessKey);
+  }
+  if (rest.length === 0) {
+    accessKey = accessKey.toLowerCase();
+    [first, ...rest] = label.split(accessKey);
+  }
+  return (hAsync(Fragment, null,
+    first,
+    rest.length ? (hAsync(Fragment, null,
+      hAsync("u", null, accessKey),
+      rest.join(accessKey))) : null));
+};
+
+const defaultStyleCss$t = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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\t.error.hidden {\n\t\tdisplay: none;\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'].kol-disabled:before {\n\t\tcursor: not-allowed;\n\t}\n\n\tinput[type='checkbox']:before {\n\t\tcontent: '';\n\t\tcursor: pointer;\n\t}\n\n\t.default kol-icon {\n\t\tdisplay: none;\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\n\t.button[tabindex]:focus {\n\t\t\n\t\tcursor: inherit;\n\t}\n\n\t.button input {\n\t\tdisplay: none;\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 input[type='checkbox'] {\n\t\theight: 1.5em;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:before {\n\t\tdisplay: block;\n\t\theight: 1.5em;\n\t\tposition: relative;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:checked:before {\n\t\tborder-radius: 1px;\n\t\tborder-style: solid;\n\t\tborder-width: 0 3px 3px 0;\n\t\theight: 0.75em;\n\t\tleft: calc(0.375em - 2px);\n\t\ttransform: rotate(40deg) translate(-50%, -50%);\n\t\ttop: calc(0.7125em - 2px);\n\t\twidth: 0.375em;\n\t}\n\n\t.default input[type='checkbox']:indeterminate:before {\n\t\tbackground-color: #000;\n\t\theight: 0.2em;\n\t\tleft: 0.24em;\n\t\ttop: 0.575em;\n\t\twidth: 0.8em;\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:has(input:checked) .icon {\n\t\ttransform: translate(1.5em, -50%);\n\t}\n\n\t.switch:has(input:indeterminate) .icon {\n\t\ttransform: translate(0.75em, -50%);\n\t}\n}";
 
 class KolInputCheckbox {
   render() {
@@ -12981,13 +13120,12 @@ class KolInputCheckbox {
         [this.state._variant]: true,
         'hide-label': !!this.state._hideLabel,
         checked: this.state._checked,
-      }, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' ? 0 : undefined, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : this.state._label), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), 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, 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, tabIndex: this.state._variant === 'button' && !this.state._disabled ? 0 : 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("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), 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, 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);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this.onChange = (event) => {
       var _a;
@@ -13132,7 +13270,7 @@ class KolInputCheckbox {
     "_variant": ["validateVariant"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$u
+    default: defaultStyleCss$t
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -13167,6 +13305,8 @@ class KolInputCheckbox {
   }; }
 }
 
+const inputTypeOnOffOptions = ['on', 'off'];
+
 const validateSuggestions = (component, value) => {
   watchJsonArrayString(component, '_suggestions', (item) => typeof item === 'string' || typeof item === 'number', value, undefined, {
     hooks: {
@@ -13228,7 +13368,7 @@ class InputColorController extends InputIconController {
     this.component = component;
   }
   validateAutoComplete(value) {
-    watchValidator(this.component, '_autoComplete', (value) => typeof value === 'string' && (value === 'on' || value === 'off'), new Set(['on | off']), value);
+    watchValidator(this.component, '_autoComplete', (value) => typeof value === 'string' && inputTypeOnOffOptions.includes(value), new Set(inputTypeOnOffOptions), value);
   }
   validateSuggestions(value) {
     validateSuggestions(this.component, value);
@@ -13257,7 +13397,7 @@ class InputColorController extends InputIconController {
   }
 }
 
-const defaultStyleCss$t = "/*!@:host*/.sc-kol-input-color-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-color-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-color-default,button.sc-kol-input-color-default:not([role='link']),kol-input.sc-kol-input-color-default .input.sc-kol-input-color-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-color-default,button.sc-kol-input-color-default,h1.sc-kol-input-color-default,h2.sc-kol-input-color-default,h3.sc-kol-input-color-default,h4.sc-kol-input-color-default,h5.sc-kol-input-color-default,h6.sc-kol-input-color-default,input.sc-kol-input-color-default,option.sc-kol-input-color-default,select.sc-kol-input-color-default,textarea.sc-kol-input-color-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-color-default:is(a,button).sc-kol-input-color-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-color-default-h{max-width:100%}/*!@**/*.sc-kol-input-color-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-color-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-color-default>span.sc-kol-input-color-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-color-default,button.sc-kol-input-color-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-color-default,input.sc-kol-input-color-default,option.sc-kol-input-color-default,select.sc-kol-input-color-default,textarea.sc-kol-input-color-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-color-default>kol-span-wc.sc-kol-input-color-default>span.sc-kol-input-color-default>span.sc-kol-input-color-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-color-default label.sc-kol-input-color-default>span.sc-kol-input-color-default::after,.required.sc-kol-input-color-default legend.sc-kol-input-color-default>span.sc-kol-input-color-default::after{content:'*'}/*!@:host*/.sc-kol-input-color-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-color-default,textarea.sc-kol-input-color-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-color-default,input[type='color'].sc-kol-input-color-default,input[type='file'].sc-kol-input-color-default,input[type='radio'].sc-kol-input-color-default,input[type='range'].sc-kol-input-color-default,label.sc-kol-input-color-default,option.sc-kol-input-color-default,select.sc-kol-input-color-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-color-default,input[type='date'].sc-kol-input-color-default,input[type='datetime-local'].sc-kol-input-color-default,input[type='email'].sc-kol-input-color-default,input[type='file'].sc-kol-input-color-default,input[type='month'].sc-kol-input-color-default,input[type='number'].sc-kol-input-color-default,input[type='password'].sc-kol-input-color-default,input[type='search'].sc-kol-input-color-default,input[type='tel'].sc-kol-input-color-default,input[type='text'].sc-kol-input-color-default,input[type='time'].sc-kol-input-color-default,input[type='url'].sc-kol-input-color-default,input[type='week'].sc-kol-input-color-default,select.sc-kol-input-color-default,select[multiple].sc-kol-input-color-default option.sc-kol-input-color-default,textarea.sc-kol-input-color-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-color-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-color-default option.sc-kol-input-color-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-color-default .sc-kol-input-color-default:is(button,input.sc-kol-input-color-default,label.sc-kol-input-color-default,option.sc-kol-input-color-default,select.sc-kol-input-color-default,textarea).sc-kol-input-color-default{cursor:not-allowed;opacity:0.5}/*!@kol-input*/kol-input.sc-kol-input-color-default{display:grid}/*!@kol-input .input-slot*/kol-input.sc-kol-input-color-default .input-slot.sc-kol-input-color-default{flex-grow:1}/*!@input:not([type='checkbox'], [type='radio']),\nselect:not([multiple], [size])*/input.sc-kol-input-color-default:not([type='checkbox'],[type='radio']).sc-kol-input-color-default,select.sc-kol-input-color-default:not([multiple],[size]).sc-kol-input-color-default{height:2.75em}/*!@input:focus,\noption:focus,\nselect:focus,\ntextarea:focus*/input.sc-kol-input-color-default:focus,option.sc-kol-input-color-default:focus,select.sc-kol-input-color-default:focus,textarea.sc-kol-input-color-default:focus{outline:0}/*!@.input*/.input.sc-kol-input-color-default{display:flex;align-items:center}/*!@.input > kol-icon*/.input.sc-kol-input-color-default>kol-icon.sc-kol-input-color-default{display:grid;height:var(--a11y-min-size);place-items:center}/*!@kol-input.required .input-tooltip .span-label::after*/kol-input.required.sc-kol-input-color-default .input-tooltip.sc-kol-input-color-default .span-label.sc-kol-input-color-default::after{content:'*'}/*!@div.input*/div.input.sc-kol-input-color-default{cursor:pointer}/*!@.error.hidden*/.error.hidden.sc-kol-input-color-default{display:none}";
+const defaultStyleCss$s = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputColor {
   render() {
@@ -13267,7 +13407,7 @@ class KolInputColor {
     return (hAsync(Host, null, hAsync("kol-input", { class: {
         color: true,
         'hide-label': !!this.state._hideLabel,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : 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(); } }, 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))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -13389,7 +13529,7 @@ class KolInputColor {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$t
+    default: defaultStyleCss$s
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -13423,6 +13563,8 @@ class KolInputColor {
   }; }
 }
 
+const inputDateTypeOptions = ['date', 'datetime-local', 'month', 'time', 'week'];
+
 const validateReadOnly = (component, value) => {
   watchBoolean(component, '_readOnly', value);
 };
@@ -13541,8 +13683,7 @@ class InputDateController extends InputIconController {
     watchNumber(this.component, '_step', value);
   }
   validateType(value) {
-    watchValidator(this.component, '_type', (value) => typeof value === 'string' &&
-      (value === 'date' || value === 'datetime-local' || value === 'month' || value === 'number' || value === 'time' || value === 'week'), new Set(['String {date, datetime-local, month, number, time, week}']), value);
+    watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputDateTypeOptions.includes(value), new Set([`String {${inputDateTypeOptions.join(', ')}`]), value);
   }
   validateValue(value) {
     this.validateValueEx(value);
@@ -13574,7 +13715,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$s = "/*!@:host*/.sc-kol-input-date-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-date-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-date-default,button.sc-kol-input-date-default:not([role='link']),kol-input.sc-kol-input-date-default .input.sc-kol-input-date-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-date-default,button.sc-kol-input-date-default,h1.sc-kol-input-date-default,h2.sc-kol-input-date-default,h3.sc-kol-input-date-default,h4.sc-kol-input-date-default,h5.sc-kol-input-date-default,h6.sc-kol-input-date-default,input.sc-kol-input-date-default,option.sc-kol-input-date-default,select.sc-kol-input-date-default,textarea.sc-kol-input-date-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-date-default:is(a,button).sc-kol-input-date-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-date-default-h{max-width:100%}/*!@**/*.sc-kol-input-date-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-date-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-date-default>span.sc-kol-input-date-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-date-default,button.sc-kol-input-date-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-date-default,input.sc-kol-input-date-default,option.sc-kol-input-date-default,select.sc-kol-input-date-default,textarea.sc-kol-input-date-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-date-default>kol-span-wc.sc-kol-input-date-default>span.sc-kol-input-date-default>span.sc-kol-input-date-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-date-default label.sc-kol-input-date-default>span.sc-kol-input-date-default::after,.required.sc-kol-input-date-default legend.sc-kol-input-date-default>span.sc-kol-input-date-default::after{content:'*'}/*!@:host*/.sc-kol-input-date-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-date-default,textarea.sc-kol-input-date-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-date-default,input[type='color'].sc-kol-input-date-default,input[type='file'].sc-kol-input-date-default,input[type='radio'].sc-kol-input-date-default,input[type='range'].sc-kol-input-date-default,label.sc-kol-input-date-default,option.sc-kol-input-date-default,select.sc-kol-input-date-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-date-default,input[type='date'].sc-kol-input-date-default,input[type='datetime-local'].sc-kol-input-date-default,input[type='email'].sc-kol-input-date-default,input[type='file'].sc-kol-input-date-default,input[type='month'].sc-kol-input-date-default,input[type='number'].sc-kol-input-date-default,input[type='password'].sc-kol-input-date-default,input[type='search'].sc-kol-input-date-default,input[type='tel'].sc-kol-input-date-default,input[type='text'].sc-kol-input-date-default,input[type='time'].sc-kol-input-date-default,input[type='url'].sc-kol-input-date-default,input[type='week'].sc-kol-input-date-default,select.sc-kol-input-date-default,select[multiple].sc-kol-input-date-default option.sc-kol-input-date-default,textarea.sc-kol-input-date-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-date-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-date-default option.sc-kol-input-date-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-date-default .sc-kol-input-date-default:is(button,input.sc-kol-input-date-default,label.sc-kol-input-date-default,option.sc-kol-input-date-default,select.sc-kol-input-date-default,textarea).sc-kol-input-date-default{cursor:not-allowed;opacity:0.5}/*!@kol-input*/kol-input.sc-kol-input-date-default{display:grid}/*!@kol-input .input-slot*/kol-input.sc-kol-input-date-default .input-slot.sc-kol-input-date-default{flex-grow:1}/*!@input:not([type='checkbox'], [type='radio']),\nselect:not([multiple], [size])*/input.sc-kol-input-date-default:not([type='checkbox'],[type='radio']).sc-kol-input-date-default,select.sc-kol-input-date-default:not([multiple],[size]).sc-kol-input-date-default{height:2.75em}/*!@input:focus,\noption:focus,\nselect:focus,\ntextarea:focus*/input.sc-kol-input-date-default:focus,option.sc-kol-input-date-default:focus,select.sc-kol-input-date-default:focus,textarea.sc-kol-input-date-default:focus{outline:0}/*!@.input*/.input.sc-kol-input-date-default{display:flex;align-items:center}/*!@.input > kol-icon*/.input.sc-kol-input-date-default>kol-icon.sc-kol-input-date-default{display:grid;height:var(--a11y-min-size);place-items:center}/*!@kol-input.required .input-tooltip .span-label::after*/kol-input.required.sc-kol-input-date-default .input-tooltip.sc-kol-input-date-default .span-label.sc-kol-input-date-default::after{content:'*'}/*!@kol-input-number*/kol-input-number.sc-kol-input-date-default{display:block}/*!@.error.hidden*/.error.hidden.sc-kol-input-date-default{display:none}";
+const defaultStyleCss$r = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputDate {
   render() {
@@ -13584,7 +13725,7 @@ class KolInputDate {
     return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: {
         [this.state._type]: true,
         'hide-label': !!this.state._hideLabel,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : 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", { 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 }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -13755,7 +13896,7 @@ class KolInputDate {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$s
+    default: defaultStyleCss$r
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -13799,6 +13940,8 @@ const validateMultiple = (component, value) => {
   watchBoolean(component, '_multiple', value);
 };
 
+const inputTextTypeOptions = ['text', 'search', 'url', 'tel'];
+
 const validateHasCounter = (component, value) => {
   watchBoolean(component, '_hasCounter', value);
 };
@@ -13901,7 +14044,7 @@ class InputTextController extends InputTextEmailController {
     this.component = component;
   }
   validateType(value) {
-    watchValidator(this.component, '_type', (value) => typeof value === 'string' && (value === 'text' || value === 'search' || value === 'url' || value === 'tel'), new Set(['String {text, search, url, tel}']), value);
+    watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputTextTypeOptions.includes(value), new Set([`String {${inputTextTypeOptions.join(', ')}`]), value);
   }
   validateHasCounter(value) {
     validateHasCounter(this.component, value);
@@ -13940,7 +14083,7 @@ class InputEmailController extends InputTextEmailController {
   }
 }
 
-const defaultStyleCss$r = "/*!@:host*/.sc-kol-input-email-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-email-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-email-default,button.sc-kol-input-email-default:not([role='link']),kol-input.sc-kol-input-email-default .input.sc-kol-input-email-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-email-default,button.sc-kol-input-email-default,h1.sc-kol-input-email-default,h2.sc-kol-input-email-default,h3.sc-kol-input-email-default,h4.sc-kol-input-email-default,h5.sc-kol-input-email-default,h6.sc-kol-input-email-default,input.sc-kol-input-email-default,option.sc-kol-input-email-default,select.sc-kol-input-email-default,textarea.sc-kol-input-email-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-email-default:is(a,button).sc-kol-input-email-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-email-default-h{max-width:100%}/*!@**/*.sc-kol-input-email-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-email-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-email-default>span.sc-kol-input-email-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-email-default,button.sc-kol-input-email-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-email-default,input.sc-kol-input-email-default,option.sc-kol-input-email-default,select.sc-kol-input-email-default,textarea.sc-kol-input-email-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-email-default>kol-span-wc.sc-kol-input-email-default>span.sc-kol-input-email-default>span.sc-kol-input-email-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-email-default label.sc-kol-input-email-default>span.sc-kol-input-email-default::after,.required.sc-kol-input-email-default legend.sc-kol-input-email-default>span.sc-kol-input-email-default::after{content:'*'}/*!@:host*/.sc-kol-input-email-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-email-default,textarea.sc-kol-input-email-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-email-default,input[type='color'].sc-kol-input-email-default,input[type='file'].sc-kol-input-email-default,input[type='radio'].sc-kol-input-email-default,input[type='range'].sc-kol-input-email-default,label.sc-kol-input-email-default,option.sc-kol-input-email-default,select.sc-kol-input-email-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-email-default,input[type='date'].sc-kol-input-email-default,input[type='datetime-local'].sc-kol-input-email-default,input[type='email'].sc-kol-input-email-default,input[type='file'].sc-kol-input-email-default,input[type='month'].sc-kol-input-email-default,input[type='number'].sc-kol-input-email-default,input[type='password'].sc-kol-input-email-default,input[type='search'].sc-kol-input-email-default,input[type='tel'].sc-kol-input-email-default,input[type='text'].sc-kol-input-email-default,input[type='time'].sc-kol-input-email-default,input[type='url'].sc-kol-input-email-default,input[type='week'].sc-kol-input-email-default,select.sc-kol-input-email-default,select[multiple].sc-kol-input-email-default option.sc-kol-input-email-default,textarea.sc-kol-input-email-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-email-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-email-default option.sc-kol-input-email-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-email-default .sc-kol-input-email-default:is(button,input.sc-kol-input-email-default,label.sc-kol-input-email-default,option.sc-kol-input-email-default,select.sc-kol-input-email-default,textarea).sc-kol-input-email-default{cursor:not-allowed;opacity:0.5}/*!@kol-input*/kol-input.sc-kol-input-email-default{display:grid}/*!@kol-input .input-slot*/kol-input.sc-kol-input-email-default .input-slot.sc-kol-input-email-default{flex-grow:1}/*!@input:not([type='checkbox'], [type='radio']),\nselect:not([multiple], [size])*/input.sc-kol-input-email-default:not([type='checkbox'],[type='radio']).sc-kol-input-email-default,select.sc-kol-input-email-default:not([multiple],[size]).sc-kol-input-email-default{height:2.75em}/*!@input:focus,\noption:focus,\nselect:focus,\ntextarea:focus*/input.sc-kol-input-email-default:focus,option.sc-kol-input-email-default:focus,select.sc-kol-input-email-default:focus,textarea.sc-kol-input-email-default:focus{outline:0}/*!@.input*/.input.sc-kol-input-email-default{display:flex;align-items:center}/*!@.input > kol-icon*/.input.sc-kol-input-email-default>kol-icon.sc-kol-input-email-default{display:grid;height:var(--a11y-min-size);place-items:center}/*!@kol-input.required .input-tooltip .span-label::after*/kol-input.required.sc-kol-input-email-default .input-tooltip.sc-kol-input-email-default .span-label.sc-kol-input-email-default::after{content:'*'}/*!@.error.hidden*/.error.hidden.sc-kol-input-email-default{display:none}";
+const defaultStyleCss$q = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputEmail {
   render() {
@@ -13949,7 +14092,7 @@ class KolInputEmail {
     const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, { class: {
         'has-value': this.state._hasValue,
-      } }, hAsync("kol-input", { class: { email: true, 'hide-label': !!this.state._hideLabel }, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : 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", { 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(); } }, 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 }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -14122,7 +14265,7 @@ class KolInputEmail {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$r
+    default: defaultStyleCss$q
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -14202,7 +14345,7 @@ class InputFileController extends InputIconController {
   }
 }
 
-const defaultStyleCss$q = "/*!@:host*/.sc-kol-input-file-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-file-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-file-default,button.sc-kol-input-file-default:not([role='link']),kol-input.sc-kol-input-file-default .input.sc-kol-input-file-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-file-default,button.sc-kol-input-file-default,h1.sc-kol-input-file-default,h2.sc-kol-input-file-default,h3.sc-kol-input-file-default,h4.sc-kol-input-file-default,h5.sc-kol-input-file-default,h6.sc-kol-input-file-default,input.sc-kol-input-file-default,option.sc-kol-input-file-default,select.sc-kol-input-file-default,textarea.sc-kol-input-file-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-file-default:is(a,button).sc-kol-input-file-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-file-default-h{max-width:100%}/*!@**/*.sc-kol-input-file-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-file-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-file-default>span.sc-kol-input-file-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-file-default,button.sc-kol-input-file-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-file-default,input.sc-kol-input-file-default,option.sc-kol-input-file-default,select.sc-kol-input-file-default,textarea.sc-kol-input-file-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-file-default>kol-span-wc.sc-kol-input-file-default>span.sc-kol-input-file-default>span.sc-kol-input-file-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-file-default label.sc-kol-input-file-default>span.sc-kol-input-file-default::after,.required.sc-kol-input-file-default legend.sc-kol-input-file-default>span.sc-kol-input-file-default::after{content:'*'}/*!@:host*/.sc-kol-input-file-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-file-default,textarea.sc-kol-input-file-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-file-default,input[type='color'].sc-kol-input-file-default,input[type='file'].sc-kol-input-file-default,input[type='radio'].sc-kol-input-file-default,input[type='range'].sc-kol-input-file-default,label.sc-kol-input-file-default,option.sc-kol-input-file-default,select.sc-kol-input-file-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-file-default,input[type='date'].sc-kol-input-file-default,input[type='datetime-local'].sc-kol-input-file-default,input[type='email'].sc-kol-input-file-default,input[type='file'].sc-kol-input-file-default,input[type='month'].sc-kol-input-file-default,input[type='number'].sc-kol-input-file-default,input[type='password'].sc-kol-input-file-default,input[type='search'].sc-kol-input-file-default,input[type='tel'].sc-kol-input-file-default,input[type='text'].sc-kol-input-file-default,input[type='time'].sc-kol-input-file-default,input[type='url'].sc-kol-input-file-default,input[type='week'].sc-kol-input-file-default,select.sc-kol-input-file-default,select[multiple].sc-kol-input-file-default option.sc-kol-input-file-default,textarea.sc-kol-input-file-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-file-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-file-default option.sc-kol-input-file-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-file-default .sc-kol-input-file-default:is(button,input.sc-kol-input-file-default,label.sc-kol-input-file-default,option.sc-kol-input-file-default,select.sc-kol-input-file-default,textarea).sc-kol-input-file-default{cursor:not-allowed;opacity:0.5}/*!@kol-input*/kol-input.sc-kol-input-file-default{display:grid}/*!@kol-input .input-slot*/kol-input.sc-kol-input-file-default .input-slot.sc-kol-input-file-default{flex-grow:1}/*!@input:not([type='checkbox'], [type='radio']),\nselect:not([multiple], [size])*/input.sc-kol-input-file-default:not([type='checkbox'],[type='radio']).sc-kol-input-file-default,select.sc-kol-input-file-default:not([multiple],[size]).sc-kol-input-file-default{height:2.75em}/*!@input:focus,\noption:focus,\nselect:focus,\ntextarea:focus*/input.sc-kol-input-file-default:focus,option.sc-kol-input-file-default:focus,select.sc-kol-input-file-default:focus,textarea.sc-kol-input-file-default:focus{outline:0}/*!@.input*/.input.sc-kol-input-file-default{display:flex;align-items:center}/*!@.input > kol-icon*/.input.sc-kol-input-file-default>kol-icon.sc-kol-input-file-default{display:grid;height:var(--a11y-min-size);place-items:center}/*!@kol-input.required .input-tooltip .span-label::after*/kol-input.required.sc-kol-input-file-default .input-tooltip.sc-kol-input-file-default .span-label.sc-kol-input-file-default::after{content:'*'}/*!@label input[type='file']::-webkit-file-upload-button*/label.sc-kol-input-file-default input[type='file'].sc-kol-input-file-default::-webkit-file-upload-button{display:none}/*!@label input[type='file']:before*/label.sc-kol-input-file-default input[type='file'].sc-kol-input-file-default:before{content:'Datei auswählen'}/*!@label input[multiple]:before*/label.sc-kol-input-file-default input[multiple].sc-kol-input-file-default:before{content:'Dateien auswählen'}/*!@div.input*/div.input.sc-kol-input-file-default{cursor:pointer}/*!@.error.hidden*/.error.hidden.sc-kol-input-file-default{display:none}";
+const defaultStyleCss$p = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputFile {
   render() {
@@ -14211,7 +14354,7 @@ class KolInputFile {
     return (hAsync(Host, null, hAsync("kol-input", { class: {
         file: true,
         'hide-label': !!this.state._hideLabel,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : 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(); } }, 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 }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -14348,7 +14491,7 @@ class KolInputFile {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$q
+    default: defaultStyleCss$p
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -14477,7 +14620,7 @@ class InputNumberController extends InputIconController {
   }
 }
 
-const defaultStyleCss$p = "/*!@:host*/.sc-kol-input-number-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-number-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-number-default,button.sc-kol-input-number-default:not([role='link']),kol-input.sc-kol-input-number-default .input.sc-kol-input-number-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-number-default,button.sc-kol-input-number-default,h1.sc-kol-input-number-default,h2.sc-kol-input-number-default,h3.sc-kol-input-number-default,h4.sc-kol-input-number-default,h5.sc-kol-input-number-default,h6.sc-kol-input-number-default,input.sc-kol-input-number-default,option.sc-kol-input-number-default,select.sc-kol-input-number-default,textarea.sc-kol-input-number-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-number-default:is(a,button).sc-kol-input-number-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-number-default-h{max-width:100%}/*!@**/*.sc-kol-input-number-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-number-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-number-default>span.sc-kol-input-number-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-number-default,button.sc-kol-input-number-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-number-default,input.sc-kol-input-number-default,option.sc-kol-input-number-default,select.sc-kol-input-number-default,textarea.sc-kol-input-number-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-number-default>kol-span-wc.sc-kol-input-number-default>span.sc-kol-input-number-default>span.sc-kol-input-number-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-number-default label.sc-kol-input-number-default>span.sc-kol-input-number-default::after,.required.sc-kol-input-number-default legend.sc-kol-input-number-default>span.sc-kol-input-number-default::after{content:'*'}/*!@:host*/.sc-kol-input-number-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-number-default,textarea.sc-kol-input-number-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-number-default,input[type='color'].sc-kol-input-number-default,input[type='file'].sc-kol-input-number-default,input[type='radio'].sc-kol-input-number-default,input[type='range'].sc-kol-input-number-default,label.sc-kol-input-number-default,option.sc-kol-input-number-default,select.sc-kol-input-number-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-number-default,input[type='date'].sc-kol-input-number-default,input[type='datetime-local'].sc-kol-input-number-default,input[type='email'].sc-kol-input-number-default,input[type='file'].sc-kol-input-number-default,input[type='month'].sc-kol-input-number-default,input[type='number'].sc-kol-input-number-default,input[type='password'].sc-kol-input-number-default,input[type='search'].sc-kol-input-number-default,input[type='tel'].sc-kol-input-number-default,input[type='text'].sc-kol-input-number-default,input[type='time'].sc-kol-input-number-default,input[type='url'].sc-kol-input-number-default,input[type='week'].sc-kol-input-number-default,select.sc-kol-input-number-default,select[multiple].sc-kol-input-number-default option.sc-kol-input-number-default,textarea.sc-kol-input-number-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-number-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-number-default option.sc-kol-input-number-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-number-default .sc-kol-input-number-default:is(button,input.sc-kol-input-number-default,label.sc-kol-input-number-default,option.sc-kol-input-number-default,select.sc-kol-input-number-default,textarea).sc-kol-input-number-default{cursor:not-allowed;opacity:0.5}/*!@kol-input*/kol-input.sc-kol-input-number-default{display:grid}/*!@kol-input .input-slot*/kol-input.sc-kol-input-number-default .input-slot.sc-kol-input-number-default{flex-grow:1}/*!@input:not([type='checkbox'], [type='radio']),\nselect:not([multiple], [size])*/input.sc-kol-input-number-default:not([type='checkbox'],[type='radio']).sc-kol-input-number-default,select.sc-kol-input-number-default:not([multiple],[size]).sc-kol-input-number-default{height:2.75em}/*!@input:focus,\noption:focus,\nselect:focus,\ntextarea:focus*/input.sc-kol-input-number-default:focus,option.sc-kol-input-number-default:focus,select.sc-kol-input-number-default:focus,textarea.sc-kol-input-number-default:focus{outline:0}/*!@.input*/.input.sc-kol-input-number-default{display:flex;align-items:center}/*!@.input > kol-icon*/.input.sc-kol-input-number-default>kol-icon.sc-kol-input-number-default{display:grid;height:var(--a11y-min-size);place-items:center}/*!@kol-input.required .input-tooltip .span-label::after*/kol-input.required.sc-kol-input-number-default .input-tooltip.sc-kol-input-number-default .span-label.sc-kol-input-number-default::after{content:'*'}/*!@.error.hidden*/.error.hidden.sc-kol-input-number-default{display:none}";
+const defaultStyleCss$o = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputNumber {
   render() {
@@ -14489,7 +14632,7 @@ class KolInputNumber {
       } }, hAsync("kol-input", { class: {
         number: true,
         'hide-label': !!this.state._hideLabel,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : 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", { 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 }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -14659,7 +14802,7 @@ class KolInputNumber {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$p
+    default: defaultStyleCss$o
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -14699,7 +14842,7 @@ class KolInputNumber {
   }; }
 }
 
-const defaultStyleCss$o = "/*!@:host*/.sc-kol-input-password-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-password-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-password-default,button.sc-kol-input-password-default:not([role='link']),kol-input.sc-kol-input-password-default .input.sc-kol-input-password-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-password-default,button.sc-kol-input-password-default,h1.sc-kol-input-password-default,h2.sc-kol-input-password-default,h3.sc-kol-input-password-default,h4.sc-kol-input-password-default,h5.sc-kol-input-password-default,h6.sc-kol-input-password-default,input.sc-kol-input-password-default,option.sc-kol-input-password-default,select.sc-kol-input-password-default,textarea.sc-kol-input-password-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-password-default:is(a,button).sc-kol-input-password-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-password-default-h{max-width:100%}/*!@**/*.sc-kol-input-password-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-password-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-password-default>span.sc-kol-input-password-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-password-default,button.sc-kol-input-password-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-password-default,input.sc-kol-input-password-default,option.sc-kol-input-password-default,select.sc-kol-input-password-default,textarea.sc-kol-input-password-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-password-default>kol-span-wc.sc-kol-input-password-default>span.sc-kol-input-password-default>span.sc-kol-input-password-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-password-default label.sc-kol-input-password-default>span.sc-kol-input-password-default::after,.required.sc-kol-input-password-default legend.sc-kol-input-password-default>span.sc-kol-input-password-default::after{content:'*'}/*!@:host*/.sc-kol-input-password-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-password-default,textarea.sc-kol-input-password-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-password-default,input[type='color'].sc-kol-input-password-default,input[type='file'].sc-kol-input-password-default,input[type='radio'].sc-kol-input-password-default,input[type='range'].sc-kol-input-password-default,label.sc-kol-input-password-default,option.sc-kol-input-password-default,select.sc-kol-input-password-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-password-default,input[type='date'].sc-kol-input-password-default,input[type='datetime-local'].sc-kol-input-password-default,input[type='email'].sc-kol-input-password-default,input[type='file'].sc-kol-input-password-default,input[type='month'].sc-kol-input-password-default,input[type='number'].sc-kol-input-password-default,input[type='password'].sc-kol-input-password-default,input[type='search'].sc-kol-input-password-default,input[type='tel'].sc-kol-input-password-default,input[type='text'].sc-kol-input-password-default,input[type='time'].sc-kol-input-password-default,input[type='url'].sc-kol-input-password-default,input[type='week'].sc-kol-input-password-default,select.sc-kol-input-password-default,select[multiple].sc-kol-input-password-default option.sc-kol-input-password-default,textarea.sc-kol-input-password-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-password-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-password-default option.sc-kol-input-password-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-password-default .sc-kol-input-password-default:is(button,input.sc-kol-input-password-default,label.sc-kol-input-password-default,option.sc-kol-input-password-default,select.sc-kol-input-password-default,textarea).sc-kol-input-password-default{cursor:not-allowed;opacity:0.5}/*!@kol-input*/kol-input.sc-kol-input-password-default{display:grid}/*!@kol-input .input-slot*/kol-input.sc-kol-input-password-default .input-slot.sc-kol-input-password-default{flex-grow:1}/*!@input:not([type='checkbox'], [type='radio']),\nselect:not([multiple], [size])*/input.sc-kol-input-password-default:not([type='checkbox'],[type='radio']).sc-kol-input-password-default,select.sc-kol-input-password-default:not([multiple],[size]).sc-kol-input-password-default{height:2.75em}/*!@input:focus,\noption:focus,\nselect:focus,\ntextarea:focus*/input.sc-kol-input-password-default:focus,option.sc-kol-input-password-default:focus,select.sc-kol-input-password-default:focus,textarea.sc-kol-input-password-default:focus{outline:0}/*!@.input*/.input.sc-kol-input-password-default{display:flex;align-items:center}/*!@.input > kol-icon*/.input.sc-kol-input-password-default>kol-icon.sc-kol-input-password-default{display:grid;height:var(--a11y-min-size);place-items:center}/*!@kol-input.required .input-tooltip .span-label::after*/kol-input.required.sc-kol-input-password-default .input-tooltip.sc-kol-input-password-default .span-label.sc-kol-input-password-default::after{content:'*'}/*!@.error.hidden*/.error.hidden.sc-kol-input-password-default{display:none}";
+const defaultStyleCss$n = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputPassword {
   render() {
@@ -14710,7 +14853,7 @@ class KolInputPassword {
       } }, hAsync("kol-input", { class: {
         'hide-label': !!this.state._hideLabel,
         password: true,
-      }, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : 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(); } }, 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 }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -14875,7 +15018,7 @@ class KolInputPassword {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$o
+    default: defaultStyleCss$n
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -14914,7 +15057,7 @@ class KolInputPassword {
   }; }
 }
 
-const defaultStyleCss$n = "/*!@:host*/.sc-kol-input-radio-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-radio-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-radio-default,button.sc-kol-input-radio-default:not([role='link']),kol-input.sc-kol-input-radio-default .input.sc-kol-input-radio-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-radio-default,button.sc-kol-input-radio-default,h1.sc-kol-input-radio-default,h2.sc-kol-input-radio-default,h3.sc-kol-input-radio-default,h4.sc-kol-input-radio-default,h5.sc-kol-input-radio-default,h6.sc-kol-input-radio-default,input.sc-kol-input-radio-default,option.sc-kol-input-radio-default,select.sc-kol-input-radio-default,textarea.sc-kol-input-radio-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-radio-default:is(a,button).sc-kol-input-radio-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-radio-default-h{max-width:100%}/*!@**/*.sc-kol-input-radio-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-radio-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-radio-default>span.sc-kol-input-radio-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-radio-default,button.sc-kol-input-radio-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-radio-default,input.sc-kol-input-radio-default,option.sc-kol-input-radio-default,select.sc-kol-input-radio-default,textarea.sc-kol-input-radio-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-radio-default>kol-span-wc.sc-kol-input-radio-default>span.sc-kol-input-radio-default>span.sc-kol-input-radio-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-radio-default label.sc-kol-input-radio-default>span.sc-kol-input-radio-default::after,.required.sc-kol-input-radio-default legend.sc-kol-input-radio-default>span.sc-kol-input-radio-default::after{content:'*'}/*!@:host*/.sc-kol-input-radio-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-radio-default,textarea.sc-kol-input-radio-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-radio-default,input[type='color'].sc-kol-input-radio-default,input[type='file'].sc-kol-input-radio-default,input[type='radio'].sc-kol-input-radio-default,input[type='range'].sc-kol-input-radio-default,label.sc-kol-input-radio-default,option.sc-kol-input-radio-default,select.sc-kol-input-radio-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-radio-default,input[type='date'].sc-kol-input-radio-default,input[type='datetime-local'].sc-kol-input-radio-default,input[type='email'].sc-kol-input-radio-default,input[type='file'].sc-kol-input-radio-default,input[type='month'].sc-kol-input-radio-default,input[type='number'].sc-kol-input-radio-default,input[type='password'].sc-kol-input-radio-default,input[type='search'].sc-kol-input-radio-default,input[type='tel'].sc-kol-input-radio-default,input[type='text'].sc-kol-input-radio-default,input[type='time'].sc-kol-input-radio-default,input[type='url'].sc-kol-input-radio-default,input[type='week'].sc-kol-input-radio-default,select.sc-kol-input-radio-default,select[multiple].sc-kol-input-radio-default option.sc-kol-input-radio-default,textarea.sc-kol-input-radio-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-radio-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-radio-default option.sc-kol-input-radio-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-radio-default .sc-kol-input-radio-default:is(button,input.sc-kol-input-radio-default,label.sc-kol-input-radio-default,option.sc-kol-input-radio-default,select.sc-kol-input-radio-default,textarea).sc-kol-input-radio-default{cursor:not-allowed;opacity:0.5}/*!@:host*/.sc-kol-input-radio-default-h{--border-width:2px;--input-size:1.5em}/*!@kol-input .icons*/kol-input.sc-kol-input-radio-default .icons.sc-kol-input-radio-default{display:none}/*!@label*/label.sc-kol-input-radio-default{cursor:pointer}/*!@input*/input.sc-kol-input-radio-default{appearance:none;border-width:var(--border-width);border-style:solid;border-radius:100%;cursor:pointer;display:flex;height:var(--input-size);margin:0;min-height:var(--input-size);min-width:var(--input-size);padding:0;width:var(--input-size)}/*!@input:before*/input.sc-kol-input-radio-default:before{border-radius:100%;content:'';margin:auto;height:calc(var(--input-size) / 2);width:calc(var(--input-size) / 2)}/*!@input:checked:before*/input.sc-kol-input-radio-default:checked:before{background-color:#000}/*!@fieldset*/fieldset.sc-kol-input-radio-default{display:flex}/*!@fieldset.vertical*/fieldset.vertical.sc-kol-input-radio-default{flex-direction:column}/*!@fieldset .input-slot*/fieldset.sc-kol-input-radio-default .input-slot.sc-kol-input-radio-default{align-items:center;display:flex}/*!@.required label > span::after*/.required.sc-kol-input-radio-default label.sc-kol-input-radio-default>span.sc-kol-input-radio-default::after{content:''}/*!@.error.hidden*/.error.hidden.sc-kol-input-radio-default{display:none}";
+const defaultStyleCss$m = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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\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\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputRadio {
   render() {
@@ -14926,10 +15069,10 @@ class KolInputRadio {
         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" }) : this.state._label))), this.state._options.map((option, index) => {
+      } }, 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) => {
       const customId = `${this.state._id}-${index}`;
       const slotName = `radio-${index}`;
-      return (hAsync("kol-input", { class: "radio", key: customId, _disabled: this.state._disabled || option.disabled, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: customId, _label: option.label, _renderNoLabel: true, _required: this.state._required, _slotName: slotName, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("div", { slot: slotName, class: "radio-input-wrapper" }, hAsync("input", Object.assign({ ref: this.state._value === option.value ? this.catchRef : undefined, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: "radio", id: customId, checked: this.state._value === option.value, name: this.state._name || this.state._id, disabled: this.state._disabled || option.disabled, required: this.state._required, tabIndex: this.state._tabIndex, value: `-${index}` }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined })), hAsync("label", { class: "radio-label", htmlFor: `${customId}`, style: {
+      return (hAsync("kol-input", { class: "radio", key: customId, _accessKey: this.state._accessKey, _disabled: this.state._disabled || option.disabled, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: customId, _label: option.label, _renderNoLabel: true, _required: this.state._required, _slotName: slotName, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("div", { slot: slotName, class: "radio-input-wrapper" }, hAsync("input", Object.assign({ ref: this.state._value === option.value ? this.catchRef : undefined, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: "radio", id: customId, checked: this.state._value === option.value, name: this.state._name || this.state._id, disabled: this.state._disabled || option.disabled, required: this.state._required, tabIndex: this.state._tabIndex, value: `-${index}` }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined })), hAsync("label", { class: "radio-label", htmlFor: `${customId}`, style: {
           height: this.state._hideLabel ? '0' : undefined,
           margin: this.state._hideLabel ? '0' : undefined,
           padding: this.state._hideLabel ? '0' : undefined,
@@ -14940,8 +15083,7 @@ class KolInputRadio {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this.onChange = (event) => {
       var _a;
@@ -15067,7 +15209,7 @@ class KolInputRadio {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$n
+    default: defaultStyleCss$m
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -15147,7 +15289,7 @@ class InputRangeController extends InputIconController {
   }
 }
 
-const defaultStyleCss$m = "/*!@:host*/.sc-kol-input-range-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-range-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-range-default,button.sc-kol-input-range-default:not([role='link']),kol-input.sc-kol-input-range-default .input.sc-kol-input-range-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-range-default,button.sc-kol-input-range-default,h1.sc-kol-input-range-default,h2.sc-kol-input-range-default,h3.sc-kol-input-range-default,h4.sc-kol-input-range-default,h5.sc-kol-input-range-default,h6.sc-kol-input-range-default,input.sc-kol-input-range-default,option.sc-kol-input-range-default,select.sc-kol-input-range-default,textarea.sc-kol-input-range-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-range-default:is(a,button).sc-kol-input-range-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-range-default-h{max-width:100%}/*!@**/*.sc-kol-input-range-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-range-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-range-default>span.sc-kol-input-range-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-range-default,button.sc-kol-input-range-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-range-default,input.sc-kol-input-range-default,option.sc-kol-input-range-default,select.sc-kol-input-range-default,textarea.sc-kol-input-range-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-range-default>kol-span-wc.sc-kol-input-range-default>span.sc-kol-input-range-default>span.sc-kol-input-range-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-range-default label.sc-kol-input-range-default>span.sc-kol-input-range-default::after,.required.sc-kol-input-range-default legend.sc-kol-input-range-default>span.sc-kol-input-range-default::after{content:'*'}/*!@:host*/.sc-kol-input-range-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-range-default,textarea.sc-kol-input-range-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-range-default,input[type='color'].sc-kol-input-range-default,input[type='file'].sc-kol-input-range-default,input[type='radio'].sc-kol-input-range-default,input[type='range'].sc-kol-input-range-default,label.sc-kol-input-range-default,option.sc-kol-input-range-default,select.sc-kol-input-range-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-range-default,input[type='date'].sc-kol-input-range-default,input[type='datetime-local'].sc-kol-input-range-default,input[type='email'].sc-kol-input-range-default,input[type='file'].sc-kol-input-range-default,input[type='month'].sc-kol-input-range-default,input[type='number'].sc-kol-input-range-default,input[type='password'].sc-kol-input-range-default,input[type='search'].sc-kol-input-range-default,input[type='tel'].sc-kol-input-range-default,input[type='text'].sc-kol-input-range-default,input[type='time'].sc-kol-input-range-default,input[type='url'].sc-kol-input-range-default,input[type='week'].sc-kol-input-range-default,select.sc-kol-input-range-default,select[multiple].sc-kol-input-range-default option.sc-kol-input-range-default,textarea.sc-kol-input-range-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-range-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-range-default option.sc-kol-input-range-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-range-default .sc-kol-input-range-default:is(button,input.sc-kol-input-range-default,label.sc-kol-input-range-default,option.sc-kol-input-range-default,select.sc-kol-input-range-default,textarea).sc-kol-input-range-default{cursor:not-allowed;opacity:0.5}/*!@kol-input*/kol-input.sc-kol-input-range-default{display:grid}/*!@kol-input .input-slot*/kol-input.sc-kol-input-range-default .input-slot.sc-kol-input-range-default{flex-grow:1}/*!@input:not([type='checkbox'], [type='radio']),\nselect:not([multiple], [size])*/input.sc-kol-input-range-default:not([type='checkbox'],[type='radio']).sc-kol-input-range-default,select.sc-kol-input-range-default:not([multiple],[size]).sc-kol-input-range-default{height:2.75em}/*!@input:focus,\noption:focus,\nselect:focus,\ntextarea:focus*/input.sc-kol-input-range-default:focus,option.sc-kol-input-range-default:focus,select.sc-kol-input-range-default:focus,textarea.sc-kol-input-range-default:focus{outline:0}/*!@.input*/.input.sc-kol-input-range-default{display:flex;align-items:center}/*!@.input > kol-icon*/.input.sc-kol-input-range-default>kol-icon.sc-kol-input-range-default{display:grid;height:var(--a11y-min-size);place-items:center}/*!@kol-input.required .input-tooltip .span-label::after*/kol-input.required.sc-kol-input-range-default .input-tooltip.sc-kol-input-range-default .span-label.sc-kol-input-range-default::after{content:'*'}/*!@.inputs-wrapper*/.inputs-wrapper.sc-kol-input-range-default{align-items:center;display:flex;flex-direction:row}/*!@input[type='number']*/input[type='number'].sc-kol-input-range-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size);width:var(--kolibri-input-range--input-number--width)}/*!@input[type='range']*/input[type='range'].sc-kol-input-range-default{appearance:none;background-color:#d3d3d3;border:1px solid #000;display:inline-block;flex-grow:1;height:0.5rem;line-height:1.5em;padding:0;margin:0;width:0}/*!@input[type='range']::-webkit-slider-thumb*/input[type='range'].sc-kol-input-range-default::-webkit-slider-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-webkit-appearance:none}/*!@input[type='range']::-moz-range-thumb*/input[type='range'].sc-kol-input-range-default::-moz-range-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-moz-appearance:none}/*!@.error.hidden*/.error.hidden.sc-kol-input-range-default{display:none}@media (prefers-contrast: more){/*!@::-webkit-slider-thumb*/.sc-kol-input-range-default::-webkit-slider-thumb{outline:1px solid currentColor}}";
+const defaultStyleCss$l = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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\t.error.hidden {\n\t\tdisplay: 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}";
 
 class KolInputRange {
   render() {
@@ -15157,7 +15299,7 @@ class KolInputRange {
     return (hAsync(Host, null, hAsync("kol-input", { class: {
         range: true,
         'hide-label': !!this.state._hideLabel,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : 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", { 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: {
         '--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
       } }, hAsync("input", Object.assign({ 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, 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("datalist", { id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
@@ -15322,7 +15464,7 @@ class KolInputRange {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$m
+    default: defaultStyleCss$l
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -15362,7 +15504,7 @@ const validateAlert = (component, value) => {
   watchBoolean(component, '_alert', value);
 };
 
-const defaultStyleCss$l = "/*!@:host*/.sc-kol-input-text-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-text-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-text-default,button.sc-kol-input-text-default:not([role='link']),kol-input.sc-kol-input-text-default .input.sc-kol-input-text-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-text-default,button.sc-kol-input-text-default,h1.sc-kol-input-text-default,h2.sc-kol-input-text-default,h3.sc-kol-input-text-default,h4.sc-kol-input-text-default,h5.sc-kol-input-text-default,h6.sc-kol-input-text-default,input.sc-kol-input-text-default,option.sc-kol-input-text-default,select.sc-kol-input-text-default,textarea.sc-kol-input-text-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-text-default:is(a,button).sc-kol-input-text-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-text-default-h{max-width:100%}/*!@**/*.sc-kol-input-text-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-text-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-text-default>span.sc-kol-input-text-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-text-default,button.sc-kol-input-text-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-text-default,input.sc-kol-input-text-default,option.sc-kol-input-text-default,select.sc-kol-input-text-default,textarea.sc-kol-input-text-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-text-default>kol-span-wc.sc-kol-input-text-default>span.sc-kol-input-text-default>span.sc-kol-input-text-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-text-default label.sc-kol-input-text-default>span.sc-kol-input-text-default::after,.required.sc-kol-input-text-default legend.sc-kol-input-text-default>span.sc-kol-input-text-default::after{content:'*'}/*!@:host*/.sc-kol-input-text-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-text-default,textarea.sc-kol-input-text-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-text-default,input[type='color'].sc-kol-input-text-default,input[type='file'].sc-kol-input-text-default,input[type='radio'].sc-kol-input-text-default,input[type='range'].sc-kol-input-text-default,label.sc-kol-input-text-default,option.sc-kol-input-text-default,select.sc-kol-input-text-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-text-default,input[type='date'].sc-kol-input-text-default,input[type='datetime-local'].sc-kol-input-text-default,input[type='email'].sc-kol-input-text-default,input[type='file'].sc-kol-input-text-default,input[type='month'].sc-kol-input-text-default,input[type='number'].sc-kol-input-text-default,input[type='password'].sc-kol-input-text-default,input[type='search'].sc-kol-input-text-default,input[type='tel'].sc-kol-input-text-default,input[type='text'].sc-kol-input-text-default,input[type='time'].sc-kol-input-text-default,input[type='url'].sc-kol-input-text-default,input[type='week'].sc-kol-input-text-default,select.sc-kol-input-text-default,select[multiple].sc-kol-input-text-default option.sc-kol-input-text-default,textarea.sc-kol-input-text-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-text-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-text-default option.sc-kol-input-text-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-text-default .sc-kol-input-text-default:is(button,input.sc-kol-input-text-default,label.sc-kol-input-text-default,option.sc-kol-input-text-default,select.sc-kol-input-text-default,textarea).sc-kol-input-text-default{cursor:not-allowed;opacity:0.5}/*!@kol-input*/kol-input.sc-kol-input-text-default{display:grid}/*!@kol-input .input-slot*/kol-input.sc-kol-input-text-default .input-slot.sc-kol-input-text-default{flex-grow:1}/*!@input:not([type='checkbox'], [type='radio']),\nselect:not([multiple], [size])*/input.sc-kol-input-text-default:not([type='checkbox'],[type='radio']).sc-kol-input-text-default,select.sc-kol-input-text-default:not([multiple],[size]).sc-kol-input-text-default{height:2.75em}/*!@input:focus,\noption:focus,\nselect:focus,\ntextarea:focus*/input.sc-kol-input-text-default:focus,option.sc-kol-input-text-default:focus,select.sc-kol-input-text-default:focus,textarea.sc-kol-input-text-default:focus{outline:0}/*!@.input*/.input.sc-kol-input-text-default{display:flex;align-items:center}/*!@.input > kol-icon*/.input.sc-kol-input-text-default>kol-icon.sc-kol-input-text-default{display:grid;height:var(--a11y-min-size);place-items:center}/*!@kol-input.required .input-tooltip .span-label::after*/kol-input.required.sc-kol-input-text-default .input-tooltip.sc-kol-input-text-default .span-label.sc-kol-input-text-default::after{content:'*'}/*!@.error.hidden*/.error.hidden.sc-kol-input-text-default{display:none}";
+const defaultStyleCss$k = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 featureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);
 class KolInputText {
@@ -15375,7 +15517,7 @@ class KolInputText {
       } }, hAsync("kol-input", { class: {
         [this.state._type]: true,
         'hide-label': !!this.state._hideLabel,
-      }, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : 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(); } }, 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 }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -15564,7 +15706,7 @@ class KolInputText {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$l
+    default: defaultStyleCss$k
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -15605,7 +15747,7 @@ class KolInputText {
   }; }
 }
 
-const defaultStyleCss$k = "/*!@:host*/.sc-kol-kolibri-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-kolibri-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-kolibri-default,button.sc-kol-kolibri-default:not([role='link']),kol-input.sc-kol-kolibri-default .input.sc-kol-kolibri-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-kolibri-default,button.sc-kol-kolibri-default,h1.sc-kol-kolibri-default,h2.sc-kol-kolibri-default,h3.sc-kol-kolibri-default,h4.sc-kol-kolibri-default,h5.sc-kol-kolibri-default,h6.sc-kol-kolibri-default,input.sc-kol-kolibri-default,option.sc-kol-kolibri-default,select.sc-kol-kolibri-default,textarea.sc-kol-kolibri-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-kolibri-default:is(a,button).sc-kol-kolibri-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-kolibri-default-h{max-width:100%}/*!@**/*.sc-kol-kolibri-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-kolibri-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-kolibri-default>span.sc-kol-kolibri-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-kolibri-default,button.sc-kol-kolibri-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-kolibri-default,input.sc-kol-kolibri-default,option.sc-kol-kolibri-default,select.sc-kol-kolibri-default,textarea.sc-kol-kolibri-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-kolibri-default>kol-span-wc.sc-kol-kolibri-default>span.sc-kol-kolibri-default>span.sc-kol-kolibri-default{display:none}/*!@:host*/.sc-kol-kolibri-default-h{display:inline-block}/*!@text*/text.sc-kol-kolibri-default{font-size:90px;letter-spacing:normal;word-spacing:normal}/*!@svg*/svg.sc-kol-kolibri-default{max-height:100%}";
+const defaultStyleCss$j = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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 max$1 = 360;
 function degreeToRadians(degree) {
@@ -15689,7 +15831,7 @@ class KolKolibri {
     "_labeled": ["validateLabeled"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$k
+    default: defaultStyleCss$j
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -15706,15 +15848,15 @@ class KolKolibri {
   }; }
 }
 
-const defaultStyleCss$j = "/*!@:host*/.sc-kol-link-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-link-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-link-default,button.sc-kol-link-default:not([role='link']),kol-input.sc-kol-link-default .input.sc-kol-link-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-link-default,button.sc-kol-link-default,h1.sc-kol-link-default,h2.sc-kol-link-default,h3.sc-kol-link-default,h4.sc-kol-link-default,h5.sc-kol-link-default,h6.sc-kol-link-default,input.sc-kol-link-default,option.sc-kol-link-default,select.sc-kol-link-default,textarea.sc-kol-link-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-link-default:is(a,button).sc-kol-link-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-link-default-h{max-width:100%}/*!@**/*.sc-kol-link-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-link-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-link-default>span.sc-kol-link-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-link-default,button.sc-kol-link-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-link-default,input.sc-kol-link-default,option.sc-kol-link-default,select.sc-kol-link-default,textarea.sc-kol-link-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-link-default>kol-span-wc.sc-kol-link-default>span.sc-kol-link-default>span.sc-kol-link-default{display:none}/*!@:host*/.sc-kol-link-default-h{display:inline-block}/*!@:is(a, button)*/.sc-kol-link-default:is(a,button).sc-kol-link-default{align-items:baseline;display:inline-flex;place-items:center;text-align:left;text-decoration-line:underline}/*!@:is(a, button):is(:focus, :hover)*/.sc-kol-link-default:is(a,button).sc-kol-link-default:is(:focus,.sc-kol-link-default:hover){text-decoration-thickness:0.2em}/*!@.hidden*/.hidden.sc-kol-link-default{display:none;visibility:hidden}/*!@.skip*/.skip.sc-kol-link-default{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}/*!@.skip:focus*/.skip.sc-kol-link-default:focus{background-color:#fff;left:unset;padding:1em;position:unset}/*!@kol-icon.external-link-icon*/kol-icon.external-link-icon.sc-kol-link-default{display:inline-flex}";
+const defaultStyleCss$i = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\t:is(a, button):is(:focus, :hover) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\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}";
 
 class KolLink {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
+    this._accessKey = undefined;
     this._download = undefined;
     this._hideLabel = false;
     this._href = undefined;
@@ -15729,16 +15871,17 @@ class KolLink {
     this._tooltipAlign = 'right';
   }
   render() {
-    return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+    return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, _accessKey: this._accessKey, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
   }
   get host() { return getElement(this); }
   static get style() { return {
-    default: defaultStyleCss$j
+    default: defaultStyleCss$i
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
     "$tagName$": "kol-link",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
@@ -15758,15 +15901,15 @@ class KolLink {
   }; }
 }
 
-const defaultStyleCss$i = "/*!@:host*/.sc-kol-link-button-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-link-button-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-link-button-default,button.sc-kol-link-button-default:not([role='link']),kol-input.sc-kol-link-button-default .input.sc-kol-link-button-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-link-button-default,button.sc-kol-link-button-default,h1.sc-kol-link-button-default,h2.sc-kol-link-button-default,h3.sc-kol-link-button-default,h4.sc-kol-link-button-default,h5.sc-kol-link-button-default,h6.sc-kol-link-button-default,input.sc-kol-link-button-default,option.sc-kol-link-button-default,select.sc-kol-link-button-default,textarea.sc-kol-link-button-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-link-button-default:is(a,button).sc-kol-link-button-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-link-button-default-h{max-width:100%}/*!@**/*.sc-kol-link-button-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-link-button-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-link-button-default>span.sc-kol-link-button-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-link-button-default,button.sc-kol-link-button-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-link-button-default,input.sc-kol-link-button-default,option.sc-kol-link-button-default,select.sc-kol-link-button-default,textarea.sc-kol-link-button-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-link-button-default>kol-span-wc.sc-kol-link-button-default>span.sc-kol-link-button-default>span.sc-kol-link-button-default{display:none}/*!@:host*/.sc-kol-link-button-default-h{display:inline-block}/*!@:is(a, button)*/.sc-kol-link-button-default:is(a,button).sc-kol-link-button-default{display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}/*!@:is(a, button) > kol-span-wc*/.sc-kol-link-button-default:is(a,button).sc-kol-link-button-default>kol-span-wc.sc-kol-link-button-default{margin:auto;width:100%}/*!@:is(button):disabled*/.sc-kol-link-button-default:is(button):disabled{cursor:not-allowed;opacity:0.5}";
+const defaultStyleCss$h = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
 
 class KolLinkButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
+    this._accessKey = undefined;
     this._customClass = undefined;
     this._download = undefined;
     this._hideLabel = false;
@@ -15787,16 +15930,17 @@ class KolLinkButton {
         button: true,
         [this._variant]: this._variant !== 'custom',
         [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-      }, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+      }, _accessKey: this._accessKey, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
   }
   get host() { return getElement(this); }
   static get style() { return {
-    default: defaultStyleCss$i
+    default: defaultStyleCss$h
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
     "$tagName$": "kol-link-button",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_customClass": [1, "_custom-class"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
@@ -15818,7 +15962,7 @@ class KolLinkButton {
   }; }
 }
 
-const defaultStyleCss$h = "/*!@:host*/.sc-kol-link-group-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-link-group-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-link-group-default,button.sc-kol-link-group-default:not([role='link']),kol-input.sc-kol-link-group-default .input.sc-kol-link-group-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-link-group-default,button.sc-kol-link-group-default,h1.sc-kol-link-group-default,h2.sc-kol-link-group-default,h3.sc-kol-link-group-default,h4.sc-kol-link-group-default,h5.sc-kol-link-group-default,h6.sc-kol-link-group-default,input.sc-kol-link-group-default,option.sc-kol-link-group-default,select.sc-kol-link-group-default,textarea.sc-kol-link-group-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-link-group-default:is(a,button).sc-kol-link-group-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-link-group-default-h{max-width:100%}/*!@**/*.sc-kol-link-group-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-link-group-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-link-group-default>span.sc-kol-link-group-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-link-group-default,button.sc-kol-link-group-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-link-group-default,input.sc-kol-link-group-default,option.sc-kol-link-group-default,select.sc-kol-link-group-default,textarea.sc-kol-link-group-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-link-group-default>kol-span-wc.sc-kol-link-group-default>span.sc-kol-link-group-default>span.sc-kol-link-group-default{display:none}/*!@ul*/ul.sc-kol-link-group-default{list-style:none;margin:0;padding:0}/*!@nav.horizontal ul*/nav.horizontal.sc-kol-link-group-default ul.sc-kol-link-group-default{display:flex;flex-wrap:wrap}/*!@nav.horizontal li*/nav.horizontal.sc-kol-link-group-default li.sc-kol-link-group-default{margin-left:1.25rem;margin-right:0.25rem}/*!@nav.horizontal li:first-child*/nav.horizontal.sc-kol-link-group-default li.sc-kol-link-group-default:first-child{margin-left:0}/*!@nav.horizontal li:last-child*/nav.horizontal.sc-kol-link-group-default li.sc-kol-link-group-default:last-child{margin-right:0}/*!@nav.vertical li*/nav.vertical.sc-kol-link-group-default li.sc-kol-link-group-default{margin-left:1.75rem;margin-right:0.5rem}/*!@li.list-none*/li.list-none.sc-kol-link-group-default{list-style-type:none !important;margin-left:0}";
+const defaultStyleCss$g = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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 ListItem = (props) => {
   const list = [];
@@ -15909,7 +16053,7 @@ class KolLinkGroup {
     "_orientation": ["validateOrientation"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$h
+    default: defaultStyleCss$g
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -15927,8 +16071,9 @@ class KolLinkGroup {
   }; }
 }
 
+const ariaCurrentPropTypeOptions = ['date', 'location', 'page', 'step', 'time', true, false];
 const validate = (component, propName, value) => {
-  watchValidator(component, propName, (value) => value === 'date' || value === 'location' || value === 'page' || value === 'step' || value === 'time' || value === true || value === false, new Set(['String {data, location, page, step, time}', 'boolean']), value);
+  watchValidator(component, propName, (value) => (typeof value === 'string' || typeof value === 'boolean') && ariaCurrentPropTypeOptions.includes(value), new Set([`String {${ariaCurrentPropTypeOptions.filter((option) => typeof option === 'string').join(', ')}`, 'true', 'false']), value);
 };
 const validateAriaCurrent = (component, value) => {
   validate(component, '_ariaCurrent', value);
@@ -15999,6 +16144,7 @@ class KolLinkWc {
         devWarning(`The aria-current event is not valid.`);
       }
     });
+    this._accessKey = undefined;
     this._download = undefined;
     this._hideLabel = false;
     this._href = undefined;
@@ -16019,10 +16165,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, { "aria-current": this.state._ariaCurrent, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, class: {
+    return (hAsync(Host, null, hAsync("a", Object.assign({ ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, class: {
         '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._tabIndex }), hAsync("kol-span-wc", { _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { name: "expert", slot: "expert" })), isExternal && hAsync("kol-icon", { class: "external-link-icon", _label: this.state._targetDescription, _icons: 'codicon codicon-link-external' })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
+      } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: 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._targetDescription, _icons: 'codicon codicon-link-external' })), 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 })));
+  }
+  validateAccessKey(value) {
+    validateAccessKey(this, value);
   }
   validateAriaCurrent(value) {
     validateAriaCurrent(this, value);
@@ -16064,6 +16213,7 @@ class KolLinkWc {
     validateTooltipAlign(this, value);
   }
   componentWillLoad() {
+    this.validateAccessKey(this._accessKey);
     this.validateDownload(this._download);
     this.validateHideLabel(this._hideLabel);
     this.validateHref(this._href);
@@ -16082,6 +16232,7 @@ class KolLinkWc {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_download": ["validateDownload"],
     "_hideLabel": ["validateHideLabel"],
     "_href": ["validateHref"],
@@ -16099,6 +16250,7 @@ class KolLinkWc {
     "$flags$": 4,
     "$tagName$": "kol-link-wc",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
@@ -16286,7 +16438,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$g = "/*!@:host*/.sc-kol-logo-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-logo-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-logo-default,button.sc-kol-logo-default:not([role='link']),kol-input.sc-kol-logo-default .input.sc-kol-logo-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-logo-default,button.sc-kol-logo-default,h1.sc-kol-logo-default,h2.sc-kol-logo-default,h3.sc-kol-logo-default,h4.sc-kol-logo-default,h5.sc-kol-logo-default,h6.sc-kol-logo-default,input.sc-kol-logo-default,option.sc-kol-logo-default,select.sc-kol-logo-default,textarea.sc-kol-logo-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-logo-default:is(a,button).sc-kol-logo-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-logo-default-h{max-width:100%}/*!@**/*.sc-kol-logo-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-logo-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-logo-default>span.sc-kol-logo-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-logo-default,button.sc-kol-logo-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-logo-default,input.sc-kol-logo-default,option.sc-kol-logo-default,select.sc-kol-logo-default,textarea.sc-kol-logo-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-logo-default>kol-span-wc.sc-kol-logo-default>span.sc-kol-logo-default>span.sc-kol-logo-default{display:none}/*!@:host*/.sc-kol-logo-default-h{display:inline-block}/*!@text*/text.sc-kol-logo-default{font-size:16px;letter-spacing:normal;word-spacing:normal}/*!@svg*/svg.sc-kol-logo-default{max-height:100%}";
+const defaultStyleCss$f = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 function enumToArray(enumeration, enumAsMap = new Map()) {
   Object.entries(enumeration).map(([key, value]) => {
@@ -16333,7 +16485,7 @@ class KolLogo {
     "_org": ["validateOrg"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$g
+    default: defaultStyleCss$f
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -16348,7 +16500,7 @@ class KolLogo {
   }; }
 }
 
-const defaultStyleCss$f = "/*!@:host*/.sc-kol-modal-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-modal-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-modal-default,button.sc-kol-modal-default:not([role='link']),kol-input.sc-kol-modal-default .input.sc-kol-modal-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-modal-default,button.sc-kol-modal-default,h1.sc-kol-modal-default,h2.sc-kol-modal-default,h3.sc-kol-modal-default,h4.sc-kol-modal-default,h5.sc-kol-modal-default,h6.sc-kol-modal-default,input.sc-kol-modal-default,option.sc-kol-modal-default,select.sc-kol-modal-default,textarea.sc-kol-modal-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-modal-default:is(a,button).sc-kol-modal-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-modal-default-h{max-width:100%}/*!@**/*.sc-kol-modal-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-modal-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-modal-default>span.sc-kol-modal-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-modal-default,button.sc-kol-modal-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-modal-default,input.sc-kol-modal-default,option.sc-kol-modal-default,select.sc-kol-modal-default,textarea.sc-kol-modal-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-modal-default>kol-span-wc.sc-kol-modal-default>span.sc-kol-modal-default>span.sc-kol-modal-default{display:none}/*!@.overlay*/.overlay.sc-kol-modal-default{background-color:rgba(0, 0, 0, 0.33);display:flex;height:100%;inset:0;position:fixed;width:100%;z-index:100}/*!@.modal*/.modal.sc-kol-modal-default{margin:auto;max-height:100%;max-width:100%}";
+const defaultStyleCss$e = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 class KolModal {
   constructor(hostRef) {
@@ -16439,7 +16591,7 @@ class KolModal {
     "_width": ["validateWidth"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$f
+    default: defaultStyleCss$e
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -16461,7 +16613,11 @@ const validateCollapsible = (component, value) => {
   watchBoolean(component, '_collapsible', value);
 };
 
-const defaultStyleCss$e = "/*!@:host*/.sc-kol-nav-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-nav-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-nav-default,button.sc-kol-nav-default:not([role='link']),kol-input.sc-kol-nav-default .input.sc-kol-nav-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-nav-default,button.sc-kol-nav-default,h1.sc-kol-nav-default,h2.sc-kol-nav-default,h3.sc-kol-nav-default,h4.sc-kol-nav-default,h5.sc-kol-nav-default,h6.sc-kol-nav-default,input.sc-kol-nav-default,option.sc-kol-nav-default,select.sc-kol-nav-default,textarea.sc-kol-nav-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-nav-default:is(a,button).sc-kol-nav-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-nav-default-h{max-width:100%}/*!@**/*.sc-kol-nav-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-nav-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-nav-default>span.sc-kol-nav-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-nav-default,button.sc-kol-nav-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-nav-default,input.sc-kol-nav-default,option.sc-kol-nav-default,select.sc-kol-nav-default,textarea.sc-kol-nav-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-nav-default>kol-span-wc.sc-kol-nav-default>span.sc-kol-nav-default>span.sc-kol-nav-default{display:none}/*!@:host > div*/.sc-kol-nav-default-h>div.sc-kol-nav-default{display:grid;place-items:center}/*!@nav*/nav.sc-kol-nav-default{width:100%}/*!@.list*/.list.sc-kol-nav-default{display:flex;list-style:none;margin:0;padding:0}/*!@.list.vertical*/.list.vertical.sc-kol-nav-default{flex-direction:column}/*!@.entry*/.entry.sc-kol-nav-default{display:flex}/*!@.entry kol-button-wc:first-child,\n.entry kol-link-wc,\n.entry kol-span-wc*/.entry.sc-kol-nav-default kol-button-wc.sc-kol-nav-default:first-child,.entry.sc-kol-nav-default kol-link-wc.sc-kol-nav-default,.entry.sc-kol-nav-default kol-span-wc.sc-kol-nav-default{flex-grow:1}/*!@.entry kol-span-wc*/.entry.sc-kol-nav-default kol-span-wc.sc-kol-nav-default{justify-items:start}";
+const validateHasCompactButton = (component, value) => {
+  watchBoolean(component, '_hasCompactButton', value);
+};
+
+const defaultStyleCss$d = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tnav {\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.button-link-text-switch {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}";
 
 class KolNav {
   constructor(hostRef) {
@@ -16483,6 +16639,7 @@ class KolNav {
     };
     this._ariaCurrentValue = false;
     this._collapsible = true;
+    this._hasCompactButton = false;
     this._hideLabel = false;
     this._label = undefined;
     this._links = undefined;
@@ -16490,6 +16647,7 @@ class KolNav {
     this.state = {
       _ariaCurrentValue: false,
       _collapsible: true,
+      _hasCompactButton: false,
       _hideLabel: false,
       _label: '…',
       _links: [],
@@ -16497,7 +16655,7 @@ class KolNav {
     };
   }
   entry(collapsible, hideLabel, hasChildren, link, expanded) {
-    return (hAsync("div", { class: { entry: true, 'hide-label': hideLabel } }, hAsync("kol-button-link-text-switch", { _link: Object.assign(Object.assign({}, link), { _hideLabel: hideLabel }) }), hasChildren ? this.expandButton(collapsible, link, expanded) : ''));
+    return (hAsync("div", { class: { entry: true, 'hide-label': hideLabel } }, hAsync("kol-button-link-text-switch", { class: "button-link-text-switch", _link: Object.assign(Object.assign({}, link), { _hideLabel: hideLabel }) }), hasChildren ? this.expandButton(collapsible, link, expanded) : ''));
   }
   expandButton(collapsible, link, expanded) {
     return (hAsync("kol-button-wc", { class: "expand-button", _ariaExpanded: expanded, _disabled: !collapsible, _icons: 'codicon codicon-' + (expanded ? 'remove' : 'add'), _hideLabel: true, _label: `Untermenü zu ${link._label} ${expanded ? 'schließen' : 'öffnen'}`, _on: { onClick: () => this.onClick(link) } }));
@@ -16513,12 +16671,21 @@ class KolNav {
       }, key: index }, this.entry(collapsible, hideLabel, hasChildren, link, active), expanded ? (hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: deep + 1, links: link._children || [], orientation: orientation })) : ('')));
   }
   render() {
+    let hasCompactButton = this.state._hasCompactButton;
+    if (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {
+      hasCompactButton = false;
+      devWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);
+    }
     const collapsible = this.state._collapsible === true;
     const hideLabel = this.state._hideLabel === true;
     const orientation = this.state._orientation;
     return (hAsync(Host, null, hAsync("div", { class: {
         [orientation]: true,
-      } }, hAsync("nav", { "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })))));
+      } }, 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: {
+        onClick: () => {
+          this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
+        },
+      }, _tooltipAlign: "right", _variant: "ghost" }))))));
   }
   validateAriaCurrentValue(value) {
     watchValidator(this, '_ariaCurrentValue', (value) => value === true || value === 'date' || value === 'location' || value === 'page' || value === 'step' || value === 'time', new Set(['boolean', 'String {data, location, page, step, time}']), value);
@@ -16526,6 +16693,9 @@ class KolNav {
   validateCollapsible(value) {
     validateCollapsible(this, value);
   }
+  validateHasCompactButton(value) {
+    validateHasCompactButton(this, value);
+  }
   validateHideLabel(value) {
     validateHideLabel(this, value);
   }
@@ -16550,6 +16720,7 @@ class KolNav {
     this.validateAriaCurrentValue(this._ariaCurrentValue);
     this.validateCollapsible(this._collapsible);
     this.validateHideLabel(this._hideLabel);
+    this.validateHasCompactButton(this._hasCompactButton);
     this.validateLabel(this._label, undefined, true);
     this.validateLinks(this._links);
     this.validateOrientation(this._orientation);
@@ -16560,13 +16731,14 @@ class KolNav {
   static get watchers() { return {
     "_ariaCurrentValue": ["validateAriaCurrentValue"],
     "_collapsible": ["validateCollapsible"],
+    "_hasCompactButton": ["validateHasCompactButton"],
     "_hideLabel": ["validateHideLabel"],
     "_label": ["validateLabel"],
     "_links": ["validateLinks"],
     "_orientation": ["validateOrientation"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$e
+    default: defaultStyleCss$d
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -16574,6 +16746,7 @@ class KolNav {
     "$members$": {
       "_ariaCurrentValue": [8, "_aria-current-value"],
       "_collapsible": [4],
+      "_hasCompactButton": [4, "_has-compact-button"],
       "_hideLabel": [4, "_hide-label"],
       "_label": [1],
       "_links": [1],
@@ -16590,7 +16763,7 @@ const validateMax = (component, value, options) => {
   watchNumber(component, '_max', value, options);
 };
 
-const defaultStyleCss$d = "/*!@:host*/.sc-kol-pagination-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-pagination-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-pagination-default,button.sc-kol-pagination-default:not([role='link']),kol-input.sc-kol-pagination-default .input.sc-kol-pagination-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-pagination-default,button.sc-kol-pagination-default,h1.sc-kol-pagination-default,h2.sc-kol-pagination-default,h3.sc-kol-pagination-default,h4.sc-kol-pagination-default,h5.sc-kol-pagination-default,h6.sc-kol-pagination-default,input.sc-kol-pagination-default,option.sc-kol-pagination-default,select.sc-kol-pagination-default,textarea.sc-kol-pagination-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-pagination-default:is(a,button).sc-kol-pagination-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-pagination-default-h{max-width:100%}/*!@**/*.sc-kol-pagination-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-pagination-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-pagination-default>span.sc-kol-pagination-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-pagination-default,button.sc-kol-pagination-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-pagination-default,input.sc-kol-pagination-default,option.sc-kol-pagination-default,select.sc-kol-pagination-default,textarea.sc-kol-pagination-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-pagination-default>kol-span-wc.sc-kol-pagination-default>span.sc-kol-pagination-default>span.sc-kol-pagination-default{display:none}/*!@.navigation-list*/.navigation-list.sc-kol-pagination-default{list-style:none}/*!@.separator:before*/.separator.sc-kol-pagination-default:before{content:'•••'}";
+const defaultStyleCss$c = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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 leftDoubleArrowIcon = {
   left: 'codicon codicon-debug-reverse-continue',
@@ -16714,7 +16887,6 @@ class KolPagination {
     this._siblingCount = 1;
     this._tooltipAlign = 'top';
     this._max = undefined;
-    this._variant = 'normal';
     this.state = {
       _boundaryCount: 1,
       _label: translate('kol-pagination'),
@@ -16732,7 +16904,6 @@ class KolPagination {
       _pageSizeOptions: [],
       _siblingCount: 1,
       _max: 0,
-      _variant: 'normal',
     };
   }
   render() {
@@ -16761,19 +16932,19 @@ class KolPagination {
         return null;
       }
     });
-    return (hAsync(Host, null, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync("kol-button", { class: "first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-first'), _on: this.onGoToFirst, _variant: this.state._variant, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync("kol-button", { class: "previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: translate('kol-page-back'), _on: this.onGoBackward, _variant: this.state._variant, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync("kol-button", { class: "next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: translate('kol-page-next'), _on: this.onGoForward, _variant: this.state._variant, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync("kol-button", { class: "last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-last'), _on: this.onGoToEnd, _variant: this.state._variant, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync("kol-select", { _hideLabel: true, _id: `pagination-size-${this.nonce}`, _label: translate('kol-entries-per-site'), _options: this.state._pageSizeOptions, _on: {
+    return (hAsync(Host, null, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync("kol-button-wc", { class: "first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-first'), _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync("kol-button-wc", { class: "previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: translate('kol-page-back'), _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync("kol-button-wc", { class: "next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: translate('kol-page-next'), _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync("kol-button-wc", { class: "last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-last'), _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync("kol-select", { _hideLabel: true, _id: `pagination-size-${this.nonce}`, _label: translate('kol-entries-per-site'), _options: this.state._pageSizeOptions, _on: {
         onChange: this.onChangePageSize,
       }, _value: [this.state._pageSize] }))));
   }
   getUnselectedPageButton(page) {
-    return (hAsync("li", null, hAsync("kol-button", { exportparts: "icon", key: `${this.nonce}-${page}`, _customClass: this.state._customClass, _label: `${page}`, _on: {
+    return (hAsync("li", null, hAsync("kol-button-wc", { exportparts: "icon", key: `${this.nonce}-${page}`, _customClass: this.state._customClass, _label: `${page}`, _on: {
         onClick: (event) => {
           this.onClick(event, page);
         },
-      }, _variant: this.state._variant })));
+      } })));
   }
   getSelectedPageButton(page) {
-    return (hAsync("li", null, hAsync("kol-button-wc", { class: "selected", key: `${this.nonce}-selected`, _customClass: this.state._customClass, _disabled: true, _label: `${page}`, _variant: this.state._variant })));
+    return (hAsync("li", null, hAsync("kol-button-wc", { class: "selected", key: `${this.nonce}-selected`, _customClass: this.state._customClass, _disabled: true, _label: `${page}` })));
   }
   validateBoundaryCount(value) {
     watchNumber(this, '_boundaryCount', Math.max(0, value !== null && value !== void 0 ? value : 1));
@@ -16872,9 +17043,6 @@ class KolPagination {
   validateTooltipAlign(value) {
     validateTooltipAlign(this, value);
   }
-  validateVariant(value) {
-    validateButtonVariant(this, value);
-  }
   componentWillLoad() {
     this.validateBoundaryCount(this._boundaryCount);
     this.validateCustomClass(this._customClass);
@@ -16887,7 +17055,6 @@ class KolPagination {
     this.validateSiblingCount(this._siblingCount);
     this.validateTooltipAlign(this._tooltipAlign);
     this.validateMax(this._max);
-    this.validateVariant(this._variant);
     this.validatePage(this._page);
   }
   disconnectedCallback() {
@@ -16904,11 +17071,10 @@ class KolPagination {
     "_pageSizeOptions": ["validatePageSizeOptions"],
     "_siblingCount": ["validateSiblingCount"],
     "_max": ["validateMax"],
-    "_tooltipAlign": ["validateTooltipAlign"],
-    "_variant": ["validateVariant"]
+    "_tooltipAlign": ["validateTooltipAlign"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$d
+    default: defaultStyleCss$c
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -16925,7 +17091,6 @@ class KolPagination {
       "_siblingCount": [2, "_sibling-count"],
       "_tooltipAlign": [1, "_tooltip-align"],
       "_max": [2],
-      "_variant": [1],
       "state": [32]
     },
     "$listeners$": undefined,
@@ -16934,6 +17099,10 @@ class KolPagination {
   }; }
 }
 
+const validateShow = (component, value, hooks) => {
+  watchBoolean(component, '_show', value, hooks);
+};
+
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -18317,45 +18486,46 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-const validateAlign = (component, value) => {
-  validateAlignment(component, '_align', value);
-};
-
-const validateShow = (component, value, hooks) => {
-  watchBoolean(component, '_show', value, hooks);
+const alignFloatingElements = async ({ floatingElement, referenceElement, arrowElement, align = 'top' }) => {
+  var _a, _b, _c;
+  if (processEnv !== 'test') {
+    const middleware = [offset((_a = arrowElement === null || arrowElement === void 0 ? void 0 : arrowElement.offsetHeight) !== null && _a !== void 0 ? _a : 10), flip(), shift()];
+    if (arrowElement) {
+      middleware.push(arrow({ element: arrowElement }));
+    }
+    const { x, y, middlewareData, placement } = await computePosition(referenceElement, floatingElement, {
+      placement: align,
+      middleware: middleware,
+    });
+    Object.assign(floatingElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      visibility: 'visible',
+    });
+    if (arrowElement) {
+      if ((_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x) {
+        Object.assign(arrowElement.style, {
+          left: `${middlewareData.arrow.x}px`,
+          top: placement === 'bottom' ? `${-arrowElement.offsetHeight / 2}px` : '',
+          bottom: placement === 'top' ? `${-arrowElement.offsetHeight / 2}px` : '',
+        });
+      }
+      else if ((_c = middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y) {
+        Object.assign(arrowElement.style, {
+          left: placement === 'right' ? `${-arrowElement.offsetWidth / 2}px` : '',
+          right: placement === 'left' ? `${-arrowElement.offsetWidth / 2}px` : '',
+          top: `${middlewareData.arrow.y}px`,
+        });
+      }
+    }
+  }
 };
 
-const styleCss$1 = ":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-popover{height:0;position:absolute}kol-popover .popover{background-color:#fff;min-height:max-content;min-width:max-content;opacity:0;position:absolute}kol-popover .hidden{display:none}kol-popover .show{animation:0.3s ease-in forwards fadeInOpacity}kol-popover .disappear{animation:0.3s ease-in backwards fadeInOpacity}kol-popover .arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}";
+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 * 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@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\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/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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 .hidden {\n\t\tdisplay: none;\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";
 
 class KolPopover {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.alignPopover = (callBack) => {
-      setTimeout(() => {
-        var _a;
-        if (processEnv !== 'test' && this.triggerElement && this.popoverElement) {
-          const trigger = this.triggerElement;
-          const popoverEl = this.popoverElement;
-          const arrowEl = this.arrowElement;
-          const middleware = [offset((_a = arrowEl === null || arrowEl === void 0 ? void 0 : arrowEl.offsetHeight) !== null && _a !== void 0 ? _a : 10), flip(), shift()];
-          if (arrowEl) {
-            middleware.push(arrow({ element: arrowEl }));
-          }
-          void computePosition(trigger, popoverEl, {
-            placement: this.state._align,
-            middleware: middleware,
-          }).then(({ x, y, middlewareData, placement }) => {
-            this.setPosition(x, y, middlewareData, placement, callBack);
-          });
-        }
-      });
-    };
-    this.showPopover = () => {
-      this.addListenersToBody();
-      this.alignPopover(() => {
-        this.state = Object.assign(Object.assign({}, this.state), { _visible: true });
-      });
-    };
     this.hidePopoverByEscape = (event) => {
       if (event.key === 'Escape')
         this.hidePopover();
@@ -18385,42 +18555,16 @@ class KolPopover {
       _visible: false,
     };
   }
-  setPosition(x, y, middlewareData, placement, callBack) {
-    if (this.popoverElement) {
-      const oldPos = {
-        left: this.popoverElement.style.left,
-        top: this.popoverElement.style.top,
-      };
-      Object.assign(this.popoverElement.style, {
-        left: `${x}px`,
-        top: `${y}px`,
+  async showPopover() {
+    this.addListenersToBody();
+    if (this.triggerElement && this.popoverElement) {
+      await alignFloatingElements({
+        align: this._align,
+        referenceElement: this.triggerElement,
+        arrowElement: this.arrowElement,
+        floatingElement: this.popoverElement,
       });
-      if (this.arrowElement && middlewareData.arrow) {
-        switch (placement) {
-          case 'top':
-            this.arrowElement.style.inset = `100% auto auto ${middlewareData.arrow.x || 0}px`;
-            this.arrowElement.style.translate = '0 -50%';
-            break;
-          case 'right':
-            this.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px 100% auto auto`;
-            this.arrowElement.style.translate = '50% 0';
-            break;
-          case 'bottom':
-            this.arrowElement.style.inset = `auto auto 100% ${middlewareData.arrow.x || 0}px`;
-            this.arrowElement.style.translate = '0 50%';
-            break;
-          case 'left':
-            this.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px auto auto 100%`;
-            this.arrowElement.style.translate = '-50% 0';
-            break;
-        }
-      }
-      if (oldPos.left !== this.popoverElement.style.left || oldPos.top !== this.popoverElement.style.top) {
-        this.alignPopover(callBack);
-      }
-      else if (typeof callBack === 'function') {
-        callBack();
-      }
+      this.state = Object.assign(Object.assign({}, this.state), { _visible: true });
     }
   }
   hidePopover() {
@@ -18435,14 +18579,18 @@ class KolPopover {
     const body = getDocument().body;
     body.addEventListener('keyup', this.hidePopoverByEscape);
     body.addEventListener('click', this.hidePopoverByClickOutside);
-    (_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', this.showPopover, { passive: true });
+    (_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', () => {
+      void this.showPopover();
+    }, { passive: true });
   }
   removeListenersToBody() {
     var _a;
     const body = getDocument().body;
     body.removeEventListener('keyup', this.hidePopoverByEscape);
     body.removeEventListener('click', this.hidePopoverByClickOutside);
-    (_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.showPopover);
+    (_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', () => {
+      void this.showPopover();
+    });
   }
   render() {
     return (hAsync(Host, { ref: this.catchHostAndTriggerElement }, hAsync("div", { class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", null))));
@@ -18453,7 +18601,7 @@ class KolPopover {
   validateShow(value) {
     validateShow(this, value);
     if (value)
-      this.showPopover();
+      void this.showPopover();
   }
   componentWillLoad() {
     this.validateAlign(this._align);
@@ -18466,7 +18614,7 @@ class KolPopover {
   static get style() { return styleCss$1; }
   static get cmpMeta() { return {
     "$flags$": 4,
-    "$tagName$": "kol-popover",
+    "$tagName$": "kol-popover-wc",
     "$members$": {
       "_align": [1],
       "_show": [1540],
@@ -18486,7 +18634,7 @@ var KoliBriProgressVariantEnum;
   KoliBriProgressVariantEnum["cycle-label-value"] = "cycle-label-value";
 })(KoliBriProgressVariantEnum || (KoliBriProgressVariantEnum = {}));
 
-const defaultStyleCss$c = "/*!@:host*/.sc-kol-progress-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-progress-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-progress-default,button.sc-kol-progress-default:not([role='link']),kol-input.sc-kol-progress-default .input.sc-kol-progress-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-progress-default,button.sc-kol-progress-default,h1.sc-kol-progress-default,h2.sc-kol-progress-default,h3.sc-kol-progress-default,h4.sc-kol-progress-default,h5.sc-kol-progress-default,h6.sc-kol-progress-default,input.sc-kol-progress-default,option.sc-kol-progress-default,select.sc-kol-progress-default,textarea.sc-kol-progress-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-progress-default:is(a,button).sc-kol-progress-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-progress-default-h{max-width:100%}/*!@**/*.sc-kol-progress-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-progress-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-progress-default>span.sc-kol-progress-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-progress-default,button.sc-kol-progress-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-progress-default,input.sc-kol-progress-default,option.sc-kol-progress-default,select.sc-kol-progress-default,textarea.sc-kol-progress-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-progress-default>kol-span-wc.sc-kol-progress-default>span.sc-kol-progress-default>span.sc-kol-progress-default{display:none}/*!@progress*/progress.sc-kol-progress-default{display:block;height:0;overflow:hidden;width:0}/*!@.bar .border*/.bar.sc-kol-progress-default .border.sc-kol-progress-default{fill:transparent;stroke:black}/*!@.bar .background*/.bar.sc-kol-progress-default .background.sc-kol-progress-default{fill:lightgray;stroke:white}/*!@.bar .progress*/.bar.sc-kol-progress-default .progress.sc-kol-progress-default{fill:#0075ff;stroke:transparent;transition:250ms ease-in-out 50ms}/*!@.cycle .background*/.cycle.sc-kol-progress-default .background.sc-kol-progress-default{fill:transparent;stroke:lightgray}/*!@.cycle .border*/.cycle.sc-kol-progress-default .border.sc-kol-progress-default{fill:transparent;stroke:black}/*!@.cycle .whitespace*/.cycle.sc-kol-progress-default .whitespace.sc-kol-progress-default{fill:transparent;stroke:white}/*!@.cycle .progress*/.cycle.sc-kol-progress-default .progress.sc-kol-progress-default{fill:transparent;stroke:#0075ff;transform-origin:50% 50%;transform:rotate(-90deg);transition:250ms ease-in-out 50ms}@media (prefers-reduced-motion){/*!@.progress*/.progress.sc-kol-progress-default{transition-duration:0s;transition-delay:0s}}";
+const defaultStyleCss$b = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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 VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
 const createProgressSVG = (state) => {
@@ -18575,7 +18723,7 @@ class KolProcess {
     "_variant": ["validateVariant"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$c
+    default: defaultStyleCss$b
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -18594,7 +18742,9 @@ class KolProcess {
   }; }
 }
 
-const defaultStyleCss$b = "/*!@:host*/.sc-kol-quote-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-quote-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-quote-default,button.sc-kol-quote-default:not([role='link']),kol-input.sc-kol-quote-default .input.sc-kol-quote-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-quote-default,button.sc-kol-quote-default,h1.sc-kol-quote-default,h2.sc-kol-quote-default,h3.sc-kol-quote-default,h4.sc-kol-quote-default,h5.sc-kol-quote-default,h6.sc-kol-quote-default,input.sc-kol-quote-default,option.sc-kol-quote-default,select.sc-kol-quote-default,textarea.sc-kol-quote-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-quote-default:is(a,button).sc-kol-quote-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-quote-default-h{max-width:100%}/*!@**/*.sc-kol-quote-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-quote-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-quote-default>span.sc-kol-quote-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-quote-default,button.sc-kol-quote-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-quote-default,input.sc-kol-quote-default,option.sc-kol-quote-default,select.sc-kol-quote-default,textarea.sc-kol-quote-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-quote-default>kol-span-wc.sc-kol-quote-default>span.sc-kol-quote-default>span.sc-kol-quote-default{display:none}/*!@cite,\nfigure,\nq + figcaption*/cite.sc-kol-quote-default,figure.sc-kol-quote-default,q.sc-kol-quote-default+figcaption.sc-kol-quote-default{display:inline;margin:0;padding:0}/*!@blockquote:before*/blockquote.sc-kol-quote-default:before{content:open-quote}/*!@blockquote::after*/blockquote.sc-kol-quote-default::after{content:close-quote}/*!@cite:before*/cite.sc-kol-quote-default:before{content:'—'}/*!@.block cite:before*/.block.sc-kol-quote-default cite.sc-kol-quote-default:before{padding-right:0.5em}/*!@.inline cite:before*/.inline.sc-kol-quote-default cite.sc-kol-quote-default:before{padding:0.5em}";
+const koliBriQuoteVariantOptions = ['block', 'inline'];
+
+const defaultStyleCss$a = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 class KolQuote {
   constructor(hostRef) {
@@ -18623,7 +18773,7 @@ class KolQuote {
     });
   }
   validateVariant(value) {
-    watchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value);
+    watchValidator(this, '_variant', (value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value), new Set(koliBriQuoteVariantOptions), value);
   }
   componentWillLoad() {
     this.validateHref(this._href);
@@ -18644,7 +18794,7 @@ class KolQuote {
     "_variant": ["validateVariant"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$b
+    default: defaultStyleCss$a
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -18760,7 +18910,7 @@ class SelectController extends InputIconController {
   }
 }
 
-const defaultStyleCss$a = "/*!@:host*/.sc-kol-select-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-select-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-select-default,button.sc-kol-select-default:not([role='link']),kol-input.sc-kol-select-default .input.sc-kol-select-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-select-default,button.sc-kol-select-default,h1.sc-kol-select-default,h2.sc-kol-select-default,h3.sc-kol-select-default,h4.sc-kol-select-default,h5.sc-kol-select-default,h6.sc-kol-select-default,input.sc-kol-select-default,option.sc-kol-select-default,select.sc-kol-select-default,textarea.sc-kol-select-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-select-default:is(a,button).sc-kol-select-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-select-default-h{max-width:100%}/*!@**/*.sc-kol-select-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-select-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-select-default>span.sc-kol-select-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-select-default,button.sc-kol-select-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-select-default,input.sc-kol-select-default,option.sc-kol-select-default,select.sc-kol-select-default,textarea.sc-kol-select-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-select-default>kol-span-wc.sc-kol-select-default>span.sc-kol-select-default>span.sc-kol-select-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-select-default label.sc-kol-select-default>span.sc-kol-select-default::after,.required.sc-kol-select-default legend.sc-kol-select-default>span.sc-kol-select-default::after{content:'*'}/*!@:host*/.sc-kol-select-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-select-default,textarea.sc-kol-select-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-select-default,input[type='color'].sc-kol-select-default,input[type='file'].sc-kol-select-default,input[type='radio'].sc-kol-select-default,input[type='range'].sc-kol-select-default,label.sc-kol-select-default,option.sc-kol-select-default,select.sc-kol-select-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-select-default,input[type='date'].sc-kol-select-default,input[type='datetime-local'].sc-kol-select-default,input[type='email'].sc-kol-select-default,input[type='file'].sc-kol-select-default,input[type='month'].sc-kol-select-default,input[type='number'].sc-kol-select-default,input[type='password'].sc-kol-select-default,input[type='search'].sc-kol-select-default,input[type='tel'].sc-kol-select-default,input[type='text'].sc-kol-select-default,input[type='time'].sc-kol-select-default,input[type='url'].sc-kol-select-default,input[type='week'].sc-kol-select-default,select.sc-kol-select-default,select[multiple].sc-kol-select-default option.sc-kol-select-default,textarea.sc-kol-select-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-select-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-select-default option.sc-kol-select-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-select-default .sc-kol-select-default:is(button,input.sc-kol-select-default,label.sc-kol-select-default,option.sc-kol-select-default,select.sc-kol-select-default,textarea).sc-kol-select-default{cursor:not-allowed;opacity:0.5}/*!@kol-input*/kol-input.sc-kol-select-default{display:grid}/*!@kol-input .input-slot*/kol-input.sc-kol-select-default .input-slot.sc-kol-select-default{flex-grow:1}/*!@input:not([type='checkbox'], [type='radio']),\nselect:not([multiple], [size])*/input.sc-kol-select-default:not([type='checkbox'],[type='radio']).sc-kol-select-default,select.sc-kol-select-default:not([multiple],[size]).sc-kol-select-default{height:2.75em}/*!@input:focus,\noption:focus,\nselect:focus,\ntextarea:focus*/input.sc-kol-select-default:focus,option.sc-kol-select-default:focus,select.sc-kol-select-default:focus,textarea.sc-kol-select-default:focus{outline:0}/*!@.input*/.input.sc-kol-select-default{display:flex;align-items:center}/*!@.input > kol-icon*/.input.sc-kol-select-default>kol-icon.sc-kol-select-default{display:grid;height:var(--a11y-min-size);place-items:center}/*!@kol-input.required .input-tooltip .span-label::after*/kol-input.required.sc-kol-select-default .input-tooltip.sc-kol-select-default .span-label.sc-kol-select-default::after{content:'*'}/*!@.error.hidden*/.error.hidden.sc-kol-select-default{display:none}";
+const defaultStyleCss$9 = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 const isSelected = (valueList, optionValue) => {
   return Array.isArray(valueList) && valueList.includes(optionValue);
@@ -18784,7 +18934,7 @@ class KolSelect {
     return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: {
         'hide-label': !!this.state._hideLabel,
         select: true,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : 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(); } }, 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,
       onBlur: this.controller.onFacade.onBlur,
       onFocus: this.controller.onFacade.onFocus, onChange: this.onChange }, this.state._options.map((option, index) => {
       const key = `-${index}`;
@@ -18937,7 +19087,7 @@ class KolSelect {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$a
+    default: defaultStyleCss$9
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -18972,7 +19122,7 @@ class KolSelect {
   }; }
 }
 
-const defaultStyleCss$9 = "/*!@:host*/.sc-kol-skip-nav-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-skip-nav-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-skip-nav-default,button.sc-kol-skip-nav-default:not([role='link']),kol-input.sc-kol-skip-nav-default .input.sc-kol-skip-nav-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-skip-nav-default,button.sc-kol-skip-nav-default,h1.sc-kol-skip-nav-default,h2.sc-kol-skip-nav-default,h3.sc-kol-skip-nav-default,h4.sc-kol-skip-nav-default,h5.sc-kol-skip-nav-default,h6.sc-kol-skip-nav-default,input.sc-kol-skip-nav-default,option.sc-kol-skip-nav-default,select.sc-kol-skip-nav-default,textarea.sc-kol-skip-nav-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-skip-nav-default:is(a,button).sc-kol-skip-nav-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-skip-nav-default-h{max-width:100%}/*!@**/*.sc-kol-skip-nav-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-skip-nav-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-skip-nav-default>span.sc-kol-skip-nav-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-skip-nav-default,button.sc-kol-skip-nav-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-skip-nav-default,input.sc-kol-skip-nav-default,option.sc-kol-skip-nav-default,select.sc-kol-skip-nav-default,textarea.sc-kol-skip-nav-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-skip-nav-default>kol-span-wc.sc-kol-skip-nav-default>span.sc-kol-skip-nav-default>span.sc-kol-skip-nav-default{display:none}/*!@ul*/ul.sc-kol-skip-nav-default{display:grid;list-style:none;place-items:center}/*!@ul li*/ul.sc-kol-skip-nav-default li.sc-kol-skip-nav-default{height:0}/*!@kol-link-wc a*/kol-link-wc.sc-kol-skip-nav-default a.sc-kol-skip-nav-default{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}/*!@kol-link-wc a:focus*/kol-link-wc.sc-kol-skip-nav-default a.sc-kol-skip-nav-default:focus{background-color:#fff;left:unset;position:unset}";
+const defaultStyleCss$8 = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 class KolSkipNav {
   constructor(hostRef) {
@@ -19011,7 +19161,7 @@ class KolSkipNav {
     "_links": ["validateLinks"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$9
+    default: defaultStyleCss$8
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -19027,25 +19177,27 @@ class KolSkipNav {
   }; }
 }
 
-const defaultStyleCss$8 = "/*!@:host*/.sc-kol-span-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-span-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-span-default,button.sc-kol-span-default:not([role='link']),kol-input.sc-kol-span-default .input.sc-kol-span-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-span-default,button.sc-kol-span-default,h1.sc-kol-span-default,h2.sc-kol-span-default,h3.sc-kol-span-default,h4.sc-kol-span-default,h5.sc-kol-span-default,h6.sc-kol-span-default,input.sc-kol-span-default,option.sc-kol-span-default,select.sc-kol-span-default,textarea.sc-kol-span-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-span-default:is(a,button).sc-kol-span-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-span-default-h{max-width:100%}/*!@**/*.sc-kol-span-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-span-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-span-default>span.sc-kol-span-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-span-default,button.sc-kol-span-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-span-default,input.sc-kol-span-default,option.sc-kol-span-default,select.sc-kol-span-default,textarea.sc-kol-span-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-span-default>kol-span-wc.sc-kol-span-default>span.sc-kol-span-default>span.sc-kol-span-default{display:none}";
+const defaultStyleCss$7 = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolSpan {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this._accessKey = undefined;
     this._hideLabel = false;
     this._icons = undefined;
     this._label = undefined;
   }
   render() {
-    return (hAsync("kol-span-wc", { _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label }, hAsync("slot", { name: "expert", slot: "expert" })));
+    return (hAsync("kol-span-wc", { _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey }, hAsync("slot", { name: "expert", slot: "expert" })));
   }
   static get style() { return {
-    default: defaultStyleCss$8
+    default: defaultStyleCss$7
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
     "$tagName$": "kol-span",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_hideLabel": [4, "_hide-label"],
       "_icons": [1],
       "_label": [1]
@@ -31273,6 +31425,7 @@ const md = (str) => markdown.renderInline(str);
 class KolSpanWc {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this._accessKey = undefined;
     this._allowMarkdown = false;
     this._hideLabel = false;
     this._icons = undefined;
@@ -31289,7 +31442,10 @@ class KolSpanWc {
     const hideExpertSlot = !showExpertSlot(this.state._label);
     return (hAsync(Host, { class: {
         'hide-label': !!this.state._hideLabel,
-      } }, this.state._icons.top && hAsync("kol-icon", { class: "icon top", style: this.state._icons.top.style, _label: "", _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: "", _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" }, (_a = this.state._label) !== null && _a !== void 0 ? _a : ''))) : (''), hAsync("span", { "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { name: "expert" })), this.state._icons.right && hAsync("kol-icon", { class: "icon right", style: this.state._icons.right.style, _label: "", _icons: this.state._icons.right.icon })), this.state._icons.bottom && hAsync("kol-icon", { class: "icon bottom", style: this.state._icons.bottom.style, _label: "", _icons: this.state._icons.bottom.icon })));
+      } }, this.state._icons.top && hAsync("kol-icon", { class: "icon top", style: this.state._icons.top.style, _label: "", _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: "", _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 })) : ((_a = this.state._label) !== null && _a !== void 0 ? _a : '')))) : (''), 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: "", _icons: this.state._icons.right.icon })), this.state._icons.bottom && hAsync("kol-icon", { class: "icon bottom", style: this.state._icons.bottom.style, _label: "", _icons: this.state._icons.bottom.icon })));
+  }
+  validateAccessKey(value) {
+    validateAccessKey(this, value);
   }
   validateAllowMarkdown(value) {
     watchBoolean(this, '_allowMarkdown', value, {
@@ -31306,12 +31462,14 @@ class KolSpanWc {
     validateLabelWithExpertSlot(this, value);
   }
   componentWillLoad() {
+    this.validateAccessKey(this._accessKey);
     this.validateAllowMarkdown(this._allowMarkdown);
     this.validateHideLabel(this._hideLabel);
     this.validateIcons(this._icons);
     this.validateLabel(this._label);
   }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_allowMarkdown": ["validateAllowMarkdown"],
     "_hideLabel": ["validateHideLabel"],
     "_icons": ["validateIcons"],
@@ -31321,6 +31479,7 @@ class KolSpanWc {
     "$flags$": 4,
     "$tagName$": "kol-span-wc",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_allowMarkdown": [4, "_allow-markdown"],
       "_hideLabel": [4, "_hide-label"],
       "_icons": [1],
@@ -31333,11 +31492,12 @@ class KolSpanWc {
   }; }
 }
 
+const spinVariantPropTypeOptions = ['cycle', 'dot', 'none'];
 const validateSpinVariant = (component, value) => {
-  watchValidator(component, '_variant', (value) => value === 'cycle' || value === 'dot' || value === 'none', new Set(['cycle', 'dot', 'none']), value);
+  watchValidator(component, '_variant', (value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value), new Set(spinVariantPropTypeOptions), value);
 };
 
-const defaultStyleCss$7 = "/*!@:host*/.sc-kol-spin-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-spin-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-spin-default,button.sc-kol-spin-default:not([role='link']),kol-input.sc-kol-spin-default .input.sc-kol-spin-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-spin-default,button.sc-kol-spin-default,h1.sc-kol-spin-default,h2.sc-kol-spin-default,h3.sc-kol-spin-default,h4.sc-kol-spin-default,h5.sc-kol-spin-default,h6.sc-kol-spin-default,input.sc-kol-spin-default,option.sc-kol-spin-default,select.sc-kol-spin-default,textarea.sc-kol-spin-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-spin-default:is(a,button).sc-kol-spin-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-spin-default-h{max-width:100%}/*!@**/*.sc-kol-spin-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-spin-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-spin-default>span.sc-kol-spin-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-spin-default,button.sc-kol-spin-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-spin-default,input.sc-kol-spin-default,option.sc-kol-spin-default,select.sc-kol-spin-default,textarea.sc-kol-spin-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-spin-default>kol-span-wc.sc-kol-spin-default>span.sc-kol-spin-default>span.sc-kol-spin-default{display:none}/*!@.spin.cycle*/.spin.cycle.sc-kol-spin-default{width:3rem;height:3rem}/*!@.spin.cycle > .loader*/.spin.cycle.sc-kol-spin-default>.loader.sc-kol-spin-default{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}/*!@.spin.cycle > .loader::before*/.spin.cycle.sc-kol-spin-default>.loader.sc-kol-spin-default::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){/*!@.spin.cycle > .loader*/.spin.cycle.sc-kol-spin-default>.loader.sc-kol-spin-default{animation-duration:4s}/*!@.spin.cycle > .loader::before*/.spin.cycle.sc-kol-spin-default>.loader.sc-kol-spin-default::before{animation-duration:6s}}/*!@.spin.dot*/.spin.dot.sc-kol-spin-default{height:1rem;width:3rem}/*!@.spin.dot > span*/.spin.dot.sc-kol-spin-default>span.sc-kol-spin-default{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}/*!@.spin.dot > span:first-child*/.spin.dot.sc-kol-spin-default>span.sc-kol-spin-default:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}/*!@.spin.dot > span:nth-child(2)*/.spin.dot.sc-kol-spin-default>span.sc-kol-spin-default:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}/*!@.spin.dot > span:nth-child(3)*/.spin.dot.sc-kol-spin-default>span.sc-kol-spin-default:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}/*!@.spin.dot > span:nth-child(4)*/.spin.dot.sc-kol-spin-default>span.sc-kol-spin-default:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}@media (prefers-reduced-motion){/*!@.spin.dot > span:first-child,\n\t.spin.dot > span:nth-child(2),\n\t.spin.dot > span:nth-child(3),\n\t.spin.dot > span:nth-child(4)*/.spin.dot.sc-kol-spin-default>span.sc-kol-spin-default:first-child,.spin.dot.sc-kol-spin-default>span.sc-kol-spin-default:nth-child(2),.spin.dot.sc-kol-spin-default>span.sc-kol-spin-default:nth-child(3),.spin.dot.sc-kol-spin-default>span.sc-kol-spin-default:nth-child(4){animation-duration:2s}}/*!@.spin*/.spin.sc-kol-spin-default{display:block;padding:0.125rem;position:relative}";
+const defaultStyleCss$6 = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 function renderSpin(variant) {
   switch (variant) {
@@ -31381,7 +31541,7 @@ class KolSpin {
     "_variant": ["validateVariant"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$7
+    default: defaultStyleCss$6
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -31397,7 +31557,7 @@ class KolSpin {
   }; }
 }
 
-const defaultStyleCss$6 = "/*!@:host*/.sc-kol-split-button-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-split-button-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-split-button-default,button.sc-kol-split-button-default:not([role='link']),kol-input.sc-kol-split-button-default .input.sc-kol-split-button-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-split-button-default,button.sc-kol-split-button-default,h1.sc-kol-split-button-default,h2.sc-kol-split-button-default,h3.sc-kol-split-button-default,h4.sc-kol-split-button-default,h5.sc-kol-split-button-default,h6.sc-kol-split-button-default,input.sc-kol-split-button-default,option.sc-kol-split-button-default,select.sc-kol-split-button-default,textarea.sc-kol-split-button-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-split-button-default:is(a,button).sc-kol-split-button-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-split-button-default-h{max-width:100%}/*!@**/*.sc-kol-split-button-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-split-button-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-split-button-default>span.sc-kol-split-button-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-split-button-default,button.sc-kol-split-button-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-split-button-default,input.sc-kol-split-button-default,option.sc-kol-split-button-default,select.sc-kol-split-button-default,textarea.sc-kol-split-button-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-split-button-default>kol-span-wc.sc-kol-split-button-default>span.sc-kol-split-button-default>span.sc-kol-split-button-default{display:none}/*!@:host*/.sc-kol-split-button-default-h{display:flex;position:relative}/*!@.main-button*/.main-button.sc-kol-split-button-default{flex-grow:1;text-align:left}/*!@.main-button kol-span-wc*/.main-button.sc-kol-split-button-default kol-span-wc.sc-kol-split-button-default{place-items:start}/*!@.secondary-button button*/.secondary-button.sc-kol-split-button-default button.sc-kol-split-button-default{height:100%}/*!@.horizontal-line*/.horizontal-line.sc-kol-split-button-default{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}/*!@.popover*/.popover.sc-kol-split-button-default{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}/*!@.popover-content*/.popover-content.sc-kol-split-button-default{inset:0 0 auto 0;min-width:100%;position:absolute}";
+const defaultStyleCss$5 = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 class KolSplitButton {
   constructor(hostRef) {
@@ -31472,7 +31632,7 @@ class KolSplitButton {
       }, _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)))));
   }
   static get style() { return {
-    default: defaultStyleCss$6
+    default: defaultStyleCss$5
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -31547,7 +31707,7 @@ class KolSymbol {
   }; }
 }
 
-const defaultStyleCss$5 = "/*!@:host*/.sc-kol-table-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-table-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-table-default,button.sc-kol-table-default:not([role='link']),kol-input.sc-kol-table-default .input.sc-kol-table-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-table-default,button.sc-kol-table-default,h1.sc-kol-table-default,h2.sc-kol-table-default,h3.sc-kol-table-default,h4.sc-kol-table-default,h5.sc-kol-table-default,h6.sc-kol-table-default,input.sc-kol-table-default,option.sc-kol-table-default,select.sc-kol-table-default,textarea.sc-kol-table-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-table-default:is(a,button).sc-kol-table-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-table-default-h{max-width:100%}/*!@**/*.sc-kol-table-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-table-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-table-default>span.sc-kol-table-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-table-default,button.sc-kol-table-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-table-default,input.sc-kol-table-default,option.sc-kol-table-default,select.sc-kol-table-default,textarea.sc-kol-table-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-table-default>kol-span-wc.sc-kol-table-default>span.sc-kol-table-default>span.sc-kol-table-default{display:none}/*!@:host*/.sc-kol-table-default-h{display:block}/*!@:host*/.sc-kol-table-default-h{display:grid}/*!@:host > div.table*/.sc-kol-table-default-h>div.table.sc-kol-table-default{max-width:100%;order:1;overflow-x:auto;overflow-y:hidden}/*!@:host > div.table table*/.sc-kol-table-default-h>div.table.sc-kol-table-default table.sc-kol-table-default{width:100%}/*!@th > div*/th.sc-kol-table-default>div.sc-kol-table-default{display:grid;grid-template-columns:1fr auto;place-items:center}/*!@div.pagination*/div.pagination.sc-kol-table-default{order:2}/*!@div.pagination,\ndiv.pagination > div:last-child*/div.pagination.sc-kol-table-default,div.pagination.sc-kol-table-default>div.sc-kol-table-default:last-child{display:grid;place-items:center}@media (min-width: 1024px){/*!@div.pagination,\n\tdiv.pagination > div:last-child*/div.pagination.sc-kol-table-default,div.pagination.sc-kol-table-default>div.sc-kol-table-default:last-child{grid-auto-flow:column}/*!@div.pagination kol-pagination*/div.pagination.sc-kol-table-default kol-pagination.sc-kol-table-default{display:flex}}";
+const defaultStyleCss$4 = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\torder: 1;\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\tth > div {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t\tplace-items: center;\n\t}\n\n\tdiv.pagination {\n\t\torder: 2;\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 (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 PAGINATION_OPTIONS = [10, 20, 50, 100];
 const CELL_REFS = new Map();
@@ -32059,7 +32219,7 @@ class KolTable {
     "_pagination": ["validatePagination"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$5
+    default: defaultStyleCss$4
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -32079,7 +32239,7 @@ class KolTable {
   }; }
 }
 
-const defaultStyleCss$4 = "/*!@:host*/.sc-kol-tabs-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-tabs-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-tabs-default,button.sc-kol-tabs-default:not([role='link']),kol-input.sc-kol-tabs-default .input.sc-kol-tabs-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-tabs-default,button.sc-kol-tabs-default,h1.sc-kol-tabs-default,h2.sc-kol-tabs-default,h3.sc-kol-tabs-default,h4.sc-kol-tabs-default,h5.sc-kol-tabs-default,h6.sc-kol-tabs-default,input.sc-kol-tabs-default,option.sc-kol-tabs-default,select.sc-kol-tabs-default,textarea.sc-kol-tabs-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-tabs-default:is(a,button).sc-kol-tabs-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-tabs-default-h{max-width:100%}/*!@**/*.sc-kol-tabs-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-tabs-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-tabs-default>span.sc-kol-tabs-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-tabs-default,button.sc-kol-tabs-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-tabs-default,input.sc-kol-tabs-default,option.sc-kol-tabs-default,select.sc-kol-tabs-default,textarea.sc-kol-tabs-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-tabs-default>kol-span-wc.sc-kol-tabs-default>span.sc-kol-tabs-default>span.sc-kol-tabs-default{display:none}/*!@:host*/.sc-kol-tabs-default-h{display:block}/*!@kol-button-group-wc*/kol-button-group-wc.sc-kol-tabs-default{display:inline-flex;flex-wrap:wrap}/*!@kol-button-group-wc button*/kol-button-group-wc.sc-kol-tabs-default button.sc-kol-tabs-default{border-bottom-color:transparent;border-bottom-style:solid;display:block}/*!@div.grid,\ndiv[role='tabpanel']*/div.grid.sc-kol-tabs-default,div[role='tabpanel'].sc-kol-tabs-default{height:100%}/*!@:host > .tabs-align-right*/.sc-kol-tabs-default-h>.tabs-align-right.sc-kol-tabs-default{display:grid;grid-template-columns:1fr auto}/*!@:host > .tabs-align-right kol-button-group-wc*/.sc-kol-tabs-default-h>.tabs-align-right.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default{display:grid;order:2}/*!@:host > .tabs-align-left*/.sc-kol-tabs-default-h>.tabs-align-left.sc-kol-tabs-default{display:grid;grid-template-columns:auto 1fr}/*!@:host > .tabs-align-left kol-button-group-wc*/.sc-kol-tabs-default-h>.tabs-align-left.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default{display:grid;order:0}/*!@:host > .tabs-align-bottom*/.sc-kol-tabs-default-h>.tabs-align-bottom.sc-kol-tabs-default{display:grid;grid-template-rows:1fr auto}/*!@:host > .tabs-align-bottom kol-button-group-wc*/.sc-kol-tabs-default-h>.tabs-align-bottom.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default{order:2}/*!@:host > .tabs-align-bottom kol-button-group-wc > div*/.sc-kol-tabs-default-h>.tabs-align-bottom.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default{display:flex}/*!@:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child*/.sc-kol-tabs-default-h>.tabs-align-bottom.sc-kol-tabs-default>kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default>div.sc-kol-tabs-default:first-child{margin:0 1em 0 0}/*!@:host > .tabs-align-bottom > kol-button-group-wc > div > div*/.sc-kol-tabs-default-h>.tabs-align-bottom.sc-kol-tabs-default>kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default>div.sc-kol-tabs-default{margin:0 1em}/*!@:host > .tabs-align-top*/.sc-kol-tabs-default-h>.tabs-align-top.sc-kol-tabs-default{display:grid;grid-template-rows:auto 1fr}/*!@:host > .tabs-align-top kol-button-group-wc*/.sc-kol-tabs-default-h>.tabs-align-top.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default{order:0}/*!@:host > .tabs-align-top kol-button-group-wc > div*/.sc-kol-tabs-default-h>.tabs-align-top.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default{display:flex}/*!@:host > .tabs-align-top > kol-button-group-wc > div > div:first-child*/.sc-kol-tabs-default-h>.tabs-align-top.sc-kol-tabs-default>kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default>div.sc-kol-tabs-default:first-child{margin:0 1em 0 0}/*!@:host > .tabs-align-top > kol-button-group-wc > div > div*/.sc-kol-tabs-default-h>.tabs-align-top.sc-kol-tabs-default>kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default>div.sc-kol-tabs-default{margin:0 1em}/*!@:host > div*/.sc-kol-tabs-default-h>div.sc-kol-tabs-default{display:grid}/*!@:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc*/.sc-kol-tabs-default-h>.tabs-align-left.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default,.sc-kol-tabs-default-h>.tabs-align-top.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default{order:0}/*!@:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc*/.sc-kol-tabs-default-h>.tabs-align-bottom.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default,.sc-kol-tabs-default-h>.tabs-align-right.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default{order:1}/*!@:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div*/.sc-kol-tabs-default-h>div.tabs-align-left.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default,.sc-kol-tabs-default-h>div.tabs-align-left.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default>div.sc-kol-tabs-default,.sc-kol-tabs-default-h>div.tabs-align-right.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default,.sc-kol-tabs-default-h>div.tabs-align-right.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default>div.sc-kol-tabs-default{display:grid}/*!@:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc*/.sc-kol-tabs-default-h>div.tabs-align-left.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default>div.sc-kol-tabs-default kol-button-wc.sc-kol-tabs-default,.sc-kol-tabs-default-h>div.tabs-align-right.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default>div.sc-kol-tabs-default>div.sc-kol-tabs-default kol-button-wc.sc-kol-tabs-default{width:100%}/*!@:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div*/.sc-kol-tabs-default-h>div.tabs-align-bottom.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default div.sc-kol-tabs-default,.sc-kol-tabs-default-h>div.tabs-align-top.sc-kol-tabs-default kol-button-group-wc.sc-kol-tabs-default div.sc-kol-tabs-default{display:flex;flex-wrap:wrap}";
+const defaultStyleCss$3 = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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}";
 
 class KolTabs {
   constructor(hostRef) {
@@ -32342,7 +32502,7 @@ class KolTabs {
     "_tabs": ["validateTabs"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$4
+    default: defaultStyleCss$3
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -32361,6 +32521,8 @@ class KolTabs {
   }; }
 }
 
+const cssResizeOptions = ['both', 'horizontal', 'vertical', 'none'];
+
 class TextareaController extends InputController {
   constructor(component, name, host) {
     super(component, name, host);
@@ -32404,7 +32566,7 @@ class TextareaController extends InputController {
     watchBoolean(this.component, '_readOnly', value);
   }
   validateResize(value) {
-    watchValidator(this.component, '_resize', (value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'), new Set('String {both, horizontal, vertical, none}'), value);
+    watchValidator(this.component, '_resize', (value) => typeof value === 'string' && cssResizeOptions.includes(value), new Set(`String {${cssResizeOptions.join(', ')}`), value);
   }
   validateRequired(value) {
     watchBoolean(this.component, '_required', value);
@@ -32434,7 +32596,7 @@ class TextareaController extends InputController {
   }
 }
 
-const defaultStyleCss$3 = "/*!@:host*/.sc-kol-textarea-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-textarea-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-textarea-default,button.sc-kol-textarea-default:not([role='link']),kol-input.sc-kol-textarea-default .input.sc-kol-textarea-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-textarea-default,button.sc-kol-textarea-default,h1.sc-kol-textarea-default,h2.sc-kol-textarea-default,h3.sc-kol-textarea-default,h4.sc-kol-textarea-default,h5.sc-kol-textarea-default,h6.sc-kol-textarea-default,input.sc-kol-textarea-default,option.sc-kol-textarea-default,select.sc-kol-textarea-default,textarea.sc-kol-textarea-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-textarea-default:is(a,button).sc-kol-textarea-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-textarea-default-h{max-width:100%}/*!@**/*.sc-kol-textarea-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-textarea-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-textarea-default>span.sc-kol-textarea-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-textarea-default,button.sc-kol-textarea-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-textarea-default,input.sc-kol-textarea-default,option.sc-kol-textarea-default,select.sc-kol-textarea-default,textarea.sc-kol-textarea-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-textarea-default>kol-span-wc.sc-kol-textarea-default>span.sc-kol-textarea-default>span.sc-kol-textarea-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-textarea-default label.sc-kol-textarea-default>span.sc-kol-textarea-default::after,.required.sc-kol-textarea-default legend.sc-kol-textarea-default>span.sc-kol-textarea-default::after{content:'*'}/*!@:host*/.sc-kol-textarea-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-textarea-default,textarea.sc-kol-textarea-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-textarea-default,input[type='color'].sc-kol-textarea-default,input[type='file'].sc-kol-textarea-default,input[type='radio'].sc-kol-textarea-default,input[type='range'].sc-kol-textarea-default,label.sc-kol-textarea-default,option.sc-kol-textarea-default,select.sc-kol-textarea-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-textarea-default,input[type='date'].sc-kol-textarea-default,input[type='datetime-local'].sc-kol-textarea-default,input[type='email'].sc-kol-textarea-default,input[type='file'].sc-kol-textarea-default,input[type='month'].sc-kol-textarea-default,input[type='number'].sc-kol-textarea-default,input[type='password'].sc-kol-textarea-default,input[type='search'].sc-kol-textarea-default,input[type='tel'].sc-kol-textarea-default,input[type='text'].sc-kol-textarea-default,input[type='time'].sc-kol-textarea-default,input[type='url'].sc-kol-textarea-default,input[type='week'].sc-kol-textarea-default,select.sc-kol-textarea-default,select[multiple].sc-kol-textarea-default option.sc-kol-textarea-default,textarea.sc-kol-textarea-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-textarea-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-textarea-default option.sc-kol-textarea-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-textarea-default .sc-kol-textarea-default:is(button,input.sc-kol-textarea-default,label.sc-kol-textarea-default,option.sc-kol-textarea-default,select.sc-kol-textarea-default,textarea).sc-kol-textarea-default{cursor:not-allowed;opacity:0.5}/*!@kol-input*/kol-input.sc-kol-textarea-default{display:grid}/*!@kol-input .input-slot*/kol-input.sc-kol-textarea-default .input-slot.sc-kol-textarea-default{flex-grow:1}/*!@input:not([type='checkbox'], [type='radio']),\nselect:not([multiple], [size])*/input.sc-kol-textarea-default:not([type='checkbox'],[type='radio']).sc-kol-textarea-default,select.sc-kol-textarea-default:not([multiple],[size]).sc-kol-textarea-default{height:2.75em}/*!@input:focus,\noption:focus,\nselect:focus,\ntextarea:focus*/input.sc-kol-textarea-default:focus,option.sc-kol-textarea-default:focus,select.sc-kol-textarea-default:focus,textarea.sc-kol-textarea-default:focus{outline:0}/*!@.input*/.input.sc-kol-textarea-default{display:flex;align-items:center}/*!@.input > kol-icon*/.input.sc-kol-textarea-default>kol-icon.sc-kol-textarea-default{display:grid;height:var(--a11y-min-size);place-items:center}/*!@kol-input.required .input-tooltip .span-label::after*/kol-input.required.sc-kol-textarea-default .input-tooltip.sc-kol-textarea-default .span-label.sc-kol-textarea-default::after{content:'*'}/*!@.error.hidden*/.error.hidden.sc-kol-textarea-default{display:none}";
+const defaultStyleCss$2 = "@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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: 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\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\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.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 const increaseTextareaHeight = (el) => {
   el.style.overflow = 'hidden';
@@ -32449,7 +32611,7 @@ class KolTextarea {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasExpertSlot = showExpertSlot(this.state._label);
-    return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : 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, { onKeyUp: this.onKeyUp, style: {
+    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(); } }, 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, { onKeyUp: this.onKeyUp, style: {
         resize: this.state._resize,
       }, value: this.state._value }))))));
   }
@@ -32605,7 +32767,7 @@ class KolTextarea {
     "_value": ["validateValue"]
   }; }
   static get style() { return {
-    default: defaultStyleCss$3
+    default: defaultStyleCss$2
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
@@ -32643,80 +32805,18 @@ class KolTextarea {
   }; }
 }
 
-const toastStatusOptions = ['adding', 'settled', 'removing'];
-
-const defaultStyleCss$2 = "";
-
-class KolToast {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.close = () => {
-      var _a;
-      if (((_a = this._on) === null || _a === void 0 ? void 0 : _a.onClose) !== undefined) {
-        this._on.onClose(new Event('Close'));
-      }
-    };
-    this.on = {
-      onClose: this.close,
-    };
-    this._label = undefined;
-    this._on = undefined;
-    this._status = undefined;
-    this._type = 'default';
-    this.state = {
-      _label: '...',
-      _status: 'adding',
-    };
-  }
-  validateLabel(value) {
-    validateLabel(this, value);
-  }
-  validateOn(value) {
-    if (typeof value === 'object' && (typeof (value === null || value === void 0 ? void 0 : value.onClose) === 'function' || value.onClose === true)) {
-      setState(this, '_on', { onClose: value.onClose });
+const InternalToast = ({ toastState, onClose, key }) => {
+  const handleRef = (element) => {
+    if (typeof toastState.toast.render === 'function' && element) {
+      toastState.toast.render(element, { close: () => onClose() });
     }
-  }
-  validateStatus(status) {
-    watchValidator(this, '_status', (status) => typeof status === 'string' && toastStatusOptions.includes(status), new Set('String {adding, settled, removing}'), status);
-  }
-  validateType(value) {
-    watchValidator(this, '_type', (value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'), new Set('String {success, info, warning, error}'), value);
-  }
-  componentWillLoad() {
-    this.validateLabel(this._label);
-    this.validateOn(this._on);
-    this.validateStatus(this._status);
-    this.validateType(this._type);
-  }
-  render() {
-    return (hAsync("div", { class: `toast ${this.state._status}` }, hAsync("kol-alert", { class: "alert", _alert: true, _label: this.state._label, _level: 0, _hasCloser: true, _type: this.state._type, _variant: "card", _on: this.on }, hAsync("slot", null))));
-  }
-  static get watchers() { return {
-    "_label": ["validateLabel"],
-    "_on": ["validateOn"],
-    "_status": ["validateStatus"],
-    "_type": ["validateType"]
-  }; }
-  static get style() { return {
-    default: defaultStyleCss$2
-  }; }
-  static get cmpMeta() { return {
-    "$flags$": 41,
-    "$tagName$": "kol-toast",
-    "$members$": {
-      "_label": [1],
-      "_on": [16],
-      "_status": [1],
-      "_type": [1],
-      "state": [32]
-    },
-    "$listeners$": undefined,
-    "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
-  }; }
-}
+  };
+  return (hAsync("div", { class: `toast ${toastState.status}`, key: key },
+    hAsync("kol-alert", { class: "alert", _alert: true, _label: toastState.toast.label, _level: 0, _hasCloser: true, _type: toastState.toast.type, _variant: "card", _on: { onClose } },
+      hAsync("div", { ref: handleRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
+};
 
-const defaultStyleCss$1 = "/*!@:host*/.sc-kol-toast-container-default-h{display:flex;flex-direction:column;position:fixed;z-index:200}/*!@.close-all*/.close-all.sc-kol-toast-container-default{align-self:flex-end}";
+const defaultStyleCss$1 = "@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 TRANSITION_TIMEOUT = 300;
 class KolToastContainer {
@@ -32734,29 +32834,36 @@ class KolToastContainer {
     };
     this.state = Object.assign(Object.assign({}, this.state), { _toastStates: [newToastState, ...this.state._toastStates] });
     setTimeout(() => {
-      this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => localToastState === newToastState
+      this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => localToastState.id === newToastState.id
           ? Object.assign(Object.assign({}, localToastState), { status: 'settled' }) : localToastState) });
     }, TRANSITION_TIMEOUT);
+    return () => {
+      this.handleClose(newToastState);
+    };
   }
   handleClose(toastState) {
     this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => {
-        if (localToastState === toastState) {
+        if (localToastState.id === toastState.id) {
           localToastState.status = 'removing';
         }
         return localToastState;
       }) });
     setTimeout(() => {
-      this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.filter((localToastState) => localToastState !== toastState) });
+      this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id) });
     }, TRANSITION_TIMEOUT);
   }
-  handleCloseAllClick() {
+  async closeAll() {
     this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => (Object.assign(Object.assign({}, localToastState), { status: 'removing' }))) });
     setTimeout(() => {
       this.state = Object.assign(Object.assign({}, this.state), { _toastStates: [] });
     }, TRANSITION_TIMEOUT);
   }
   render() {
-    return (hAsync(Fragment, null, this.state._toastStates.length > 1 && (hAsync("kol-button", { _label: translate('kol-toast-close-all'), class: "close-all", _on: { onClick: this.handleCloseAllClick.bind(this) } })), this.state._toastStates.map((toastState) => (hAsync("kol-toast", { _label: toastState.toast.label, _status: toastState.status, _type: toastState.toast.type, _on: { onClose: () => this.handleClose(toastState) }, key: toastState.id }, toastState.toast.description)))));
+    return (hAsync(Fragment, null, this.state._toastStates.length > 1 && (hAsync("kol-button", { _label: translate('kol-toast-close-all'), class: "close-all", _on: {
+        onClick: () => {
+          void this.closeAll();
+        },
+      } })), this.state._toastStates.map((toastState) => (hAsync(InternalToast, { toastState: toastState, onClose: () => this.handleClose(toastState), key: toastState.id })))));
   }
   static get style() { return {
     default: defaultStyleCss$1
@@ -32766,7 +32873,8 @@ class KolToastContainer {
     "$tagName$": "kol-toast-container",
     "$members$": {
       "state": [32],
-      "enqueue": [64]
+      "enqueue": [64],
+      "closeAll": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -32796,50 +32904,11 @@ function hideOverlay(overlay) {
   }
 }
 
-const styleCss = ":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-tooltip-wc .tooltip-floating{animation-duration:0.5s;animation-iteration-count:1;animation-name:fadeInOpacity;animation-timing-function:ease-in;box-sizing:border-box;display:none;position:absolute;visibility:hidden;top:0;left:0;max-width:90vw;max-height:90vh}kol-tooltip-wc .tooltip-area{background-color:#fff;color:#000}kol-tooltip-wc .tooltip-arrow{height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip-wc .tooltip-content{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}";
+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 * 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@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\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/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\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: absolute;\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}\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";
 
 class KolTooltip {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.alignTooltip = () => {
-      var _a;
-      if (processEnv !== 'test' && this.previousSibling && this.tooltipElement) {
-        const target = this.previousSibling;
-        const tooltipEl = this.tooltipElement;
-        const arrowEl = this.arrowElement;
-        const middleware = [offset((_a = arrowEl === null || arrowEl === void 0 ? void 0 : arrowEl.offsetHeight) !== null && _a !== void 0 ? _a : 10), flip(), shift()];
-        if (arrowEl) {
-          middleware.push(arrow({ element: arrowEl }));
-        }
-        void computePosition(target, tooltipEl, {
-          placement: this.state._align,
-          middleware: middleware,
-        }).then(({ x, y, middlewareData, placement }) => {
-          var _a, _b;
-          Object.assign(tooltipEl.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-            visibility: 'visible',
-          });
-          if (arrowEl) {
-            if ((_a = middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.x) {
-              Object.assign(arrowEl.style, {
-                left: `${middlewareData.arrow.x}px`,
-                top: placement === 'bottom' ? `${-arrowEl.offsetHeight / 2}px` : '',
-                bottom: placement === 'top' ? `${-arrowEl.offsetHeight / 2}px` : '',
-              });
-            }
-            else if ((_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.y) {
-              Object.assign(arrowEl.style, {
-                left: placement === 'right' ? `${-arrowEl.offsetWidth / 2}px` : '',
-                right: placement === 'left' ? `${-arrowEl.offsetWidth / 2}px` : '',
-                top: `${middlewareData.arrow.y}px`,
-              });
-            }
-          }
-        });
-      }
-    };
     this.showTooltip = () => {
       if (this.previousSibling && this.tooltipElement) {
         showOverlay(this.tooltipElement);
@@ -32847,7 +32916,9 @@ class KolTooltip {
         getDocument().body.addEventListener('keyup', this.hideTooltipByEscape);
         const target = this.previousSibling;
         const tooltipEl = this.tooltipElement;
-        this.cleanupAutoPositioning = autoUpdate(target, tooltipEl, this.alignTooltip);
+        this.cleanupAutoPositioning = autoUpdate(target, tooltipEl, () => {
+          void this.alignTooltip();
+        });
       }
     };
     this.hideTooltip = () => {
@@ -32921,6 +32992,7 @@ class KolTooltip {
         }
       }, 250);
     };
+    this._accessKey = undefined;
     this._align = 'top';
     this._id = undefined;
     this._label = undefined;
@@ -32930,8 +33002,21 @@ class KolTooltip {
       _label: '…',
     };
   }
+  async alignTooltip() {
+    if (this.tooltipElement && this.previousSibling) {
+      await alignFloatingElements({
+        align: this._align,
+        referenceElement: this.previousSibling,
+        arrowElement: this.arrowElement,
+        floatingElement: this.tooltipElement,
+      });
+    }
+  }
   render() {
-    return (hAsync(Host, null, this.state._label !== '' && (hAsync("div", { class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync("kol-span-wc", { class: "tooltip-area tooltip-content", id: this.state._id, _label: this.state._label })))));
+    return (hAsync(Host, 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 })))));
+  }
+  validateAccessKey(value) {
+    validateAccessKey(this, value);
   }
   validateAlign(value) {
     validateAlign(this, value);
@@ -32943,6 +33028,7 @@ class KolTooltip {
     validateLabel(this, value);
   }
   componentWillLoad() {
+    this.validateAccessKey(this._accessKey);
     this.validateAlign(this._align);
     this.validateId(this._id);
     this.validateLabel(this._label);
@@ -32974,6 +33060,7 @@ class KolTooltip {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_align": ["validateAlign"],
     "_id": ["validateId"],
     "_label": ["validateLabel"]
@@ -32983,6 +33070,7 @@ class KolTooltip {
     "$flags$": 0,
     "$tagName$": "kol-tooltip-wc",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_align": [1],
       "_id": [1],
       "_label": [1],
@@ -32994,7 +33082,7 @@ class KolTooltip {
   }; }
 }
 
-const defaultStyleCss = "/*!@:host*/.sc-kol-version-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-version-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-version-default,button.sc-kol-version-default:not([role='link']),kol-input.sc-kol-version-default .input.sc-kol-version-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-version-default,button.sc-kol-version-default,h1.sc-kol-version-default,h2.sc-kol-version-default,h3.sc-kol-version-default,h4.sc-kol-version-default,h5.sc-kol-version-default,h6.sc-kol-version-default,input.sc-kol-version-default,option.sc-kol-version-default,select.sc-kol-version-default,textarea.sc-kol-version-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-version-default:is(a,button).sc-kol-version-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-version-default-h{max-width:100%}/*!@**/*.sc-kol-version-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-version-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-version-default>span.sc-kol-version-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-version-default,button.sc-kol-version-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-version-default,input.sc-kol-version-default,option.sc-kol-version-default,select.sc-kol-version-default,textarea.sc-kol-version-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-version-default>kol-span-wc.sc-kol-version-default>span.sc-kol-version-default>span.sc-kol-version-default{display:none}";
+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\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@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\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\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolVersion {
   constructor(hostRef) {
@@ -33088,7 +33176,6 @@ registerComponents([
   KolTable,
   KolTabs,
   KolTextarea,
-  KolToast,
   KolToastContainer,
   KolTooltip,
   KolVersion,
@@ -33199,9 +33286,15 @@ class ToasterService {
       console.warn('Toaster service is already disposed.');
     }
   }
-  async enqueue(toast) {
-    var _a;
-    await ((_a = this.toastContainerElement) === null || _a === void 0 ? void 0 : _a.enqueue(toast));
+  enqueue(toast) {
+    if (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') {
+      return this.toastContainerElement.enqueue(toast);
+    }
+  }
+  closeAll() {
+    if (this.toastContainerElement && typeof this.toastContainerElement.closeAll === 'function') {
+      void this.toastContainerElement.closeAll();
+    }
   }
 }
 ToasterService.instances = new Map();
@@ -33258,16 +33351,20 @@ var reprodAccordionDoesNotToggleWithOpen$1 = /*#__PURE__*/Object.freeze({
 
 const detailsElement = document.getElementById('details');
 const buttonElement = document.getElementById('button');
-detailsElement._on = {
-  onToggle: (_event, open) => {
-    buttonElement._label = `👆Details ${open ? 'schließen' : 'öffnen'}`;
-  },
-};
-buttonElement._on = {
-  onClick: () => {
-    detailsElement._open = !detailsElement._open;
-  },
-};
+if (detailsElement) {
+  detailsElement._on = {
+    onToggle: (_event, open) => {
+      buttonElement._label = `👆Details ${open ? 'schließen' : 'öffnen'}`;
+    },
+  };
+}
+if (buttonElement) {
+  buttonElement._on = {
+    onClick: () => {
+      detailsElement._open = !detailsElement._open;
+    },
+  };
+}
 var detailsSyncedOpenState = {};
 
 var detailsSyncedOpenState$1 = /*#__PURE__*/Object.freeze({