@public-ui/hydrate 2.0.0 → 2.0.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-// Generated by dts-bundle-generator v8.1.2
+// Generated by dts-bundle-generator v9.0.0
 
 export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
 export interface HydrateDocumentOptions {

package/dist/index.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v4.8.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v4.8.2 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -5287,7 +5287,17 @@ 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,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 o$1=typeof window=="object"?window:typeof global=="object"?global:typeof self=="object"?self:{};let p=!0,T=!1;const D=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,I=e=>typeof e=="string"&&D.test(e),g=e=>{if(I(e)===!1)throw new Error(`[Theming] The theme identifier "${typeof e=="string"?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},A=(e,t,s,a)=>{a=a??{},a.append=a.append??!1,g(e),p===!0&&T===!1&&(T=!0,loglevel.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.
+
+	import { register } from 'adopted-style-sheets';
+	import { defineCustomElements } from '...';
+	import { THEME } from '...';
+
+	register(THEME, defineCustomElements)
+	.then(() => {
+		// run your app or website
+	})
+	.catch(console.warn);`)),(typeof o$1.A11yUi!="object"||o$1.A11yUi===null)&&(o$1.A11yUi={}),typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&(typeof o$1.A11yUi.Themes!="object"||o$1.A11yUi.Themes===null)&&(o$1.A11yUi.Themes={}),typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&(typeof o$1.A11yUi.Themes[e]!="object"||o$1.A11yUi.Themes[e]===null)&&(o$1.A11yUi.Themes[e]={}),typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&typeof o$1.A11yUi.Themes[e]=="object"&&o$1.A11yUi.Themes[e]!==null&&(a.append&&typeof o$1.A11yUi.Themes[e][t]=="string"?o$1.A11yUi.Themes[e][t]+=s:o$1.A11yUi.Themes[e][t]=s);},b=(e,t,s)=>(g(e),typeof t=="object"&&t!==null&&Object.getOwnPropertyNames(t).forEach(a=>{const r=t[a];typeof r=="string"&&r.length>0&&A(e,a,r,s);}),e),U=e=>{if(e instanceof HTMLElement){if(typeof e.dataset.theme=="string")return e;{let t=e.parentNode;for(;t instanceof ShadowRoot;)t=t.host;return U(t)}}else return null},E=(e={})=>e.themeEncroachCss==="false"||e.themeReset==="true"?!1:{mode:e.themeEncroachCssMode==="after"||e.themeEncroachCssMode==="before"?e.themeEncroachCssMode:"before"},w=()=>typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Theme=="object"&&o$1.A11yUi.Theme!==null&&typeof o$1.A11yUi.Theme.cache=="boolean"&&typeof o$1.A11yUi.Theme.encroachCss=="object"&&o$1.A11yUi.Theme.encroachCss!==null&&typeof o$1.A11yUi.Theme.encroachCss.mode=="string"&&typeof o$1.A11yUi.Theme.name=="string",z=()=>!(typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null)||!(typeof o$1.A11yUi.Theme=="object"&&o$1.A11yUi.Theme!==null)||o$1.A11yUi.Theme.name!=="default",S=e=>{if(w())return o$1.A11yUi.Theme;{const t={cache:!0,encroachCss:E(),loglevel:"silent",name:null},s=U(e);return s instanceof HTMLElement&&(t.cache=s.dataset.themeCache!=="false",t.encroachCss=E(s.dataset),t.loglevel=s.dataset.themeLoglevel==="debug"?s.dataset.themeLoglevel:"silent",t.name=s.dataset.theme||null),t}},Y=(e,t)=>({cache:t.cache!==!1,detect:t.detect==="auto"?"auto":"fixed",encroachCss:t.encroachCss===!1?!1:typeof t.encroachCss=="object"&&t.encroachCss!=null&&(t.encroachCss.mode==="after"||t.encroachCss.mode==="before")?t.encroachCss:{mode:"before"},loglevel:t.loglevel==="debug"?t.loglevel:"silent",name:typeof t.name=="string"?t.name:e}),k=(e,t)=>{w()===!1&&z()&&typeof t=="object"&&t!==null&&(t=Y(e,t),t.detect==="fixed"?(t.name===null&&typeof e=="string"&&(t.name=e),e===t.name&&((typeof o$1.A11yUi!="object"||o$1.A11yUi===null)&&(o$1.A11yUi={}),o$1.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 j=!1;const _=(e,t,s={})=>{j===!1&&(j=!0,p=!1),typeof e=="function"?e=new Set([e]):Array.isArray(e)&&(e=new Set(e)),e instanceof Set&&e.forEach(r=>{typeof r=="function"&&r.length===1?k(r(b),{cache:s.theme?.cache,detect:s.theme?.detect,encroachCss:s.theme?.encroachCss,name:s.theme?.name}):loglevel.error("[Theming] Es wurde versucht eine nicht kompatibles Theme zu laden.");}),p=!0,typeof t=="function"?t=new Set([t]):Array.isArray(t)&&(t=new Set(t));const a=[];return t.forEach(r=>{const n=r();n instanceof Promise&&a.push(n);}),Promise.all(a)};const c$1=new Map,C=[],v=new Set,h$1=new Map,B=/--[^;]+/g,G=/:/;(typeof o$1.A11yUi!="object"||o$1.A11yUi===null)&&(o$1.A11yUi={CSS_STYLE_CACHE:h$1,HYDRATED_HISTORY:C,STYLING_TASK_QUEUE:c$1});const K=(e,t)=>{let s=t.match(B);if(Array.isArray(s)){s=s.filter(r=>G.test(r));const a=document.createElement("style");a.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}v.add(e);},d=(e,t)=>typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&typeof o$1.A11yUi.Themes[e]=="object"&&o$1.A11yUi.Themes[e]!==null&&typeof o$1.A11yUi.Themes[e][t]=="string"?o$1.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",q=e=>{for(const t of Array.from(e.childNodes))if(t instanceof HTMLStyleElement&&t.tagName==="STYLE")e.removeChild(t);else break},F=(e,t)=>{try{const s=[];t.forEach(a=>{const r=new CSSStyleSheet;r.replaceSync(a),s.push(r);}),e.adoptedStyleSheets=s;}catch{t.reverse().forEach(s=>{const a=document.createElement("style");a.innerHTML=s,e.insertBefore(a,e.firstChild);});}},Q=(e,t,s)=>{if(s!==!1){const a=[...Array.from(e.childNodes).filter(n=>n instanceof HTMLStyleElement&&n.tagName==="STYLE")];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch{r=[];}s?.mode==="before"?(a.reverse().forEach(n=>t.unshift(n.innerHTML)),r.reverse().forEach(n=>t.unshift(Array.from(n.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(n=>t.push(n.innerHTML)),r.forEach(n=>t.push(Array.from(n.cssRules).map(i=>i.cssText).join(""))));}},L=(e,t,s)=>{const a=t.name||"default";let r;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch{r=e;}if(h$1.get(a)?.has(e.tagName))M(e,r,h$1.get(a)?.get(e.tagName),s);else {const n=d(a,"PROPERTIES"),i=d(a,"GLOBAL"),H=d(a,e.tagName);v.has(a)===!1&&K(a,i);const m=[n,i,H];Q(r,m,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,m),t.cache===!0&&(h$1.has(a)===!1&&h$1.set(a,new Map),h$1.get(a)?.set(e.tagName,m)),M(e,r,m,s);}},M=(e,t,s,a)=>{q(t),F(t,s),e.style.display=a;},$=e=>{e.loglevel==="debug"&&C.push({timestamp:Date.now(),numberOfTasks:c$1.size});},J=(e,t)=>{c$1.set(e,{styleDisplay:e.style.display?`${e.style.display}`:null,themeDetails:t});},V=(e,t)=>{J(e,t),$(t);},W=e=>{c$1.delete(e);},O=(e,t)=>{W(e),$(t);},R=e=>{const t=setTimeout(()=>{if(clearTimeout(t),c$1.has(e)&&e.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:a}=c$1.get(e);L(e,a,s),O(e,a);}else R(e);},25);},X=e=>{for(const t of e)if(c$1.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:a}=c$1.get(t.target);L(t.target,a,s),O(t.target,a);}},Z$1={attributes:!0,attributeFilter:["class"],childList:!1,subtree:!1};let f$1;try{f$1=new MutationObserver(X);}catch{f$1=null;}const ee$1=(e,t)=>{V(e,t),f$1?f$1.observe(e,Z$1):R(e),e.style.display="none";};
 
 const consoleLogger = {
   type: 'logger',
@@ -6420,7 +6430,7 @@ class PluralResolver {
         return new Intl.PluralRules(getCleanedCode(code), {
           type: options.ordinal ? 'ordinal' : 'cardinal'
         });
-      } catch {
+      } catch (err) {
         return;
       }
     }
@@ -7616,19 +7626,6 @@ class I18nextService {
 }
 I18nextService.namespace = 'KoliBri';
 
-const register = async (themes, loaders, options) => {
-    var _a, _b;
-    if (STORE.I18n === undefined) {
-        const i18n = await I18nextService.createInstance((_b = (_a = options === null || options === void 0 ? void 0 : options.translation) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'de', options === null || options === void 0 ? void 0 : options.translations);
-        Object.defineProperty(STORE, 'I18n', {
-            value: i18n,
-            writable: false,
-        });
-    }
-    return await register$1(themes, loaders, options);
-};
-const getI18nService = () => STORE === null || STORE === void 0 ? void 0 : STORE.I18n;
-
 class ModalService {
     constructor() {
         this.lockedElements = new Map();
@@ -7854,11 +7851,14 @@ const initMeta = () => {
         console.warn(`You can only initialize DEV_MODE and COLOR_CONTRAST_ANALYSIS once.`);
     }
 };
-let KoliBri = null;
-const getKoliBri = () => KoliBri || {};
+const KoliBri = {};
+Object.defineProperty(window, 'KoliBri', {
+    get: function () {
+        return KoliBri;
+    },
+});
 const initKoliBri = () => {
-    if (KoliBri === null) {
-        KoliBri = getWindow$1().KoliBri || {};
+    if (KoliBri.Modal === undefined) {
         const Modal = new ModalService();
         Object.defineProperty(KoliBri, 'Modal', {
             get: function () {
@@ -7872,7 +7872,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.1
 		`, {
             forceLog: true,
         });
@@ -7889,7 +7889,7 @@ const renderDevAdvice = () => {
             },
         });
     }
-    if (getKoliBri().adviceShown !== true) {
+    if (KoliBri.adviceShown !== true) {
         Object.defineProperty(KoliBri, 'adviceShown', {
             get: function () {
                 return true;
@@ -7908,11 +7908,23 @@ if (processEnv === 'test') {
     nonce = () => 'nonce';
 }
 
+const register = async (themes, loaders, options) => {
+    var _a, _b;
+    if (KoliBri.I18n === undefined) {
+        Object.defineProperty(KoliBri, 'I18n', {
+            value: await I18nextService.createInstance((_b = (_a = options === null || options === void 0 ? void 0 : options.translation) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'de', options === null || options === void 0 ? void 0 : options.translations),
+            writable: false,
+        });
+    }
+    return await _(themes, loaders, options);
+};
+const getI18nService = () => KoliBri.I18n;
+
 var appGlobalScript = async () => {
     setMode((elm) => {
         try {
             if (elm.shadowRoot instanceof ShadowRoot) {
-                setThemeStyle(elm, getThemeDetails(elm));
+                ee$1(elm, S(elm));
             }
         }
         catch (error) {
@@ -7967,16 +7979,16 @@ function hydrateApp(e, t, o, n, s) {
  const r = new Set, i = new Set, d = new Set, c = e.document.createElement, $ = e.document.createElementNS, m = Promise.resolve();
  let p, h = !1;
  try {
-  function u() {
+  function f() {
    return L(this);
   }
-  function f(e) {
+  function u(e) {
    if (isValidComponent(e, t) && !getHostRef(e)) {
     const t = loadModule({
      $tagName$: e.nodeName.toLowerCase(),
      $flags$: null
     });
-    null != t && null != t.cmpMeta && (i.add(e), e.connectedCallback = u, registerHost(e, t.cmpMeta), 
+    null != t && null != t.cmpMeta && (i.add(e), e.connectedCallback = f, registerHost(e, t.cmpMeta), 
     function o(e, t) {
      if ("function" != typeof e.componentOnReady && (e.componentOnReady = componentOnReady), 
      "function" != typeof e.forceUpdate && (e.forceUpdate = forceUpdate), 1 & t.$flags$ && (e.shadowRoot = e), 
@@ -8014,7 +8026,7 @@ function hydrateApp(e, t, o, n, s) {
   }
   function g(e) {
    if (null != e && 1 === e.nodeType) {
-    f(e);
+    u(e);
     const t = e.children;
     for (let e = 0, o = t.length; e < o; e++) g(t[e]);
    }
@@ -8051,10 +8063,10 @@ function hydrateApp(e, t, o, n, s) {
   }
   e.document.createElement = function t(o) {
    const n = c.call(e.document, o);
-   return f(n), n;
+   return u(n), n;
   }, e.document.createElementNS = function t(o, n) {
    const s = $.call(e.document, o, n);
-   return f(s), s;
+   return u(s), s;
   }, p = global.setTimeout((function I() {
    a(`Hydrate exceeded timeout${function e(t) {
     return Array.from(t).map(waitingOnElementMsg);
@@ -8300,9 +8312,9 @@ const createElm = (e, t, o, n) => {
   r && a.appendChild(r);
   ("svg" === l.$tag$ ? isSvgMode = !1 : "foreignObject" === a.tagName && (isSvgMode = !0));
  }
- return (a["s-hn"] = hostTagName, 3 & l.$flags$ && (a["s-sr"] = !0, 
+ 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["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;
@@ -8334,10 +8346,10 @@ const createElm = (e, t, o, n) => {
  null !== a ? (r = o["s-cr"]) ? r.parentNode.textContent = a : e.$text$ !== a && (o.data = a) : ((isSvgMode = "svg" === l || "foreignObject" !== l && isSvgMode), 
  ("slot" === l || updateElement(e, t, isSvgMode)), 
  null !== n && null !== s ? ((e, t, o, n) => {
-  let s, l, a = 0, r = 0, i = 0, d = 0, c = t.length - 1, $ = t[0], m = t[c], p = n.length - 1, h = n[0], u = n[p];
-  for (;a <= c && r <= p; ) if (null == $) $ = t[++a]; else if (null == m) m = t[--c]; else if (null == h) h = n[++r]; else if (null == u) u = n[--p]; else if (isSameVnode($, h)) patch($, h), 
-  $ = t[++a], h = n[++r]; else if (isSameVnode(m, u)) patch(m, u), m = t[--c], u = n[--p]; else if (isSameVnode($, u)) "slot" !== $.$tag$ && "slot" !== u.$tag$ || putBackInOriginalLocation($.$elm$.parentNode, !1), 
-  patch($, u), e.insertBefore($.$elm$, m.$elm$.nextSibling), $ = t[++a], u = n[--p]; else if (isSameVnode(m, h)) "slot" !== $.$tag$ && "slot" !== u.$tag$ || putBackInOriginalLocation(m.$elm$.parentNode, !1), 
+  let s, l, a = 0, r = 0, i = 0, d = 0, c = t.length - 1, $ = t[0], m = t[c], p = n.length - 1, h = n[0], f = n[p];
+  for (;a <= c && r <= p; ) if (null == $) $ = t[++a]; else if (null == m) m = t[--c]; else if (null == h) h = n[++r]; else if (null == f) f = n[--p]; else if (isSameVnode($, h)) patch($, h), 
+  $ = t[++a], h = n[++r]; else if (isSameVnode(m, f)) patch(m, f), m = t[--c], f = n[--p]; else if (isSameVnode($, f)) "slot" !== $.$tag$ && "slot" !== f.$tag$ || putBackInOriginalLocation($.$elm$.parentNode, !1), 
+  patch($, f), e.insertBefore($.$elm$, m.$elm$.nextSibling), $ = t[++a], f = n[--p]; else if (isSameVnode(m, h)) "slot" !== $.$tag$ && "slot" !== f.$tag$ || putBackInOriginalLocation(m.$elm$.parentNode, !1), 
   patch(m, h), e.insertBefore(m.$elm$, $.$elm$), m = t[--c], h = n[++r]; else {
    if (i = -1, BUILD.vdomKey) for (d = a; d <= c; ++d) if (t[d] && null !== t[d].$key$ && t[d].$key$ === h.$key$) {
     i = d;
@@ -8394,17 +8406,17 @@ const createElm = (e, t, o, n) => {
 }, 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) => {
- 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), 
+ var n, s, l, a;
+ const i = e.$hostElement$, d = e.$cmpMeta$, c = e.$vnode$ || newVNode(null, null), $ = isHost(t) ? t : h(null, null, t);
+ if (hostTagName = i.tagName, BUILD.isDev  ) ;
+ if (d.$attrsToReflect$ && ($.$attrs$ = $.$attrs$ || {}, d.$attrsToReflect$.map((([e, t]) => $.$attrs$[t] = i[e]))), 
+ o && $.$attrs$) for (const e of Object.keys($.$attrs$)) i.hasAttribute(e) && ![ "key", "ref", "style", "class" ].includes(e) && ($.$attrs$[e] = i[e]);
+ if ($.$tag$ = null, $.$flags$ |= 4, e.$vnode$ = $, $.$elm$ = c.$elm$ = i.shadowRoot || i, 
+ (scopeId = i["s-sc"]), (contentRef = i["s-cr"], 
+ useNativeShadowDom = supportsShadow, checkSlotFallbackVisibility = !1), patch(c, $), 
  BUILD.slotRelocation) {
   if (plt.$flags$ |= 1, checkSlotRelocate) {
-   markSlotContentForRelocation(i.$elm$);
+   markSlotContentForRelocation($.$elm$);
    for (const e of relocateNodes) {
     const t = e.$nodeToRelocate$;
     if (!t["s-ol"]) {
@@ -8413,27 +8425,28 @@ const createElm = (e, t, o, n) => {
     }
    }
    for (const e of relocateNodes) {
-    const t = e.$nodeToRelocate$, o = e.$slotRefNode$;
-    if (o) {
-     const e = o.parentNode;
-     let l = o.nextSibling;
+    const t = e.$nodeToRelocate$, r = e.$slotRefNode$;
+    if (r) {
+     const e = r.parentNode;
+     let o = r.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;
+      let l = null === (n = t["s-ol"]) || void 0 === n ? void 0 : n.previousSibling;
+      for (;l; ) {
+       let n = null !== (s = l["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;
+        o = n;
         break;
        }
-       o = o.previousSibling;
+       l = l.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);
+     (!o && e !== t.parentNode || t.nextSibling !== o) && t !== o && (t["s-hn"] || !t["s-ol"] || (t["s-hn"] = t["s-ol"].parentNode.nodeName), 
+     e.insertBefore(t, o), 1 === t.nodeType && (t.hidden = null !== (l = t["s-ih"]) && void 0 !== l && l));
+    } else 1 === t.nodeType && (o && (t["s-ih"] = null !== (a = t.hidden) && void 0 !== a && a), 
+    t.hidden = !0);
    }
   }
-  checkSlotFallbackVisibility && updateFallbackSlotVisibility(i.$elm$), plt.$flags$ &= -2, 
+  checkSlotFallbackVisibility && updateFallbackSlotVisibility($.$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) => {
@@ -9465,8 +9478,8 @@ KoliBriUtils.executionLock = false;
 KoliBriUtils.cache = new Map();
 class KoliBriDevHelper {
 }
-KoliBriDevHelper.patchTheme = patchTheme;
-KoliBriDevHelper.patchThemeTag = patchThemeTag;
+KoliBriDevHelper.patchTheme = b;
+KoliBriDevHelper.patchThemeTag = A;
 KoliBriDevHelper.querySelector = koliBriQuerySelector;
 KoliBriDevHelper.querySelectorAll = koliBriQuerySelectorAll;
 KoliBriDevHelper.stringifyJson = stringifyJson;
@@ -9673,7 +9686,7 @@ class KolAccordion {
     }; }
 }
 
-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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-alert-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-alert-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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}";
+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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-alert-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-alert-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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\n\t.close {\n\t\toutline: transparent solid 1px; \n\t}\n}";
 
 class KolAlert {
     constructor(hostRef) {
@@ -9955,7 +9968,7 @@ class KolAlertWc {
     }; }
 }
 
-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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-avatar-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-avatar-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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}";
+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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-avatar-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-avatar-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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\toutline: transparent solid 1px; \n\t\t\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t\n\t\tbackground: #d3d3d3;\n\t\tfont-size: 2rem;\n\t}\n}";
 
 class KolAvatar {
     constructor(hostRef) {
@@ -10565,7 +10578,7 @@ const handleColorChange = (value) => {
     };
 };
 
-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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-badge-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-badge-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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}";
+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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-badge-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-badge-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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\toutline: transparent solid 1px; \n\t}\n\n\t.sc-kol-badge-default-h > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}";
 
 featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
 class KolBadge {
@@ -11510,7 +11523,7 @@ class KolButtonWc {
     }; }
 }
 
-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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-card-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-card-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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}";
+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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-card-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-card-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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\toutline: transparent solid 1px; \n\t}\n\n\t.close {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t}\n}";
 
 class KolCard {
     constructor(hostRef) {
@@ -14429,7 +14442,7 @@ class KolInputPassword {
     }; }
 }
 
-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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-radio-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-radio-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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, option, select, textarea, .input-label) {\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}";
+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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-radio-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-radio-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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, option, select, textarea, .input-label) {\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\t@media (forced-colors: active) {\n\t\tinput:checked:before {\n\t\t\tbackground: highlight !important; \n\t\t}\n\t}\n\n\tfieldset {\n\t\tdisplay: flex;\n\t}\n\n\tfieldset.vertical {\n\t\tflex-direction: column;\n\t}\n\n\tfieldset .input-slot {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t\n\t.required label > span::after {\n\t\tcontent: '';\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputRadio {
     async getValue() {
@@ -14457,7 +14470,7 @@ class KolInputRadio {
                     padding: this.state._hideLabel ? '0' : undefined,
                     visibility: this.state._hideLabel ? 'hidden' : undefined,
                 } }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
-        }), hasError && (hAsync("kol-alert", { id: "error", _alert: true, _type: "error", class: `error${this._hideError ? ' hidden' : ''}` }, this.state._error)))));
+        }), hasError && (hAsync("kol-alert", { id: `${this.state._id}-error`, _alert: true, _type: "error", class: `error${this._hideError ? ' hidden' : ''}` }, this.state._error)))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -14672,11 +14685,17 @@ class KolInputRange {
         return floatValue;
     }
     async getValue() {
-        if (this.ref !== undefined) {
-            const value = this.ref.value;
+        if (this.refInputNumber !== undefined) {
+            const value = this.refInputNumber.value;
             return this.getSanitizedFloatValue(value);
         }
     }
+    componentDidLoad() {
+        var _a;
+        if (!this._value && ((_a = this.refInputRange) === null || _a === void 0 ? void 0 : _a.value)) {
+            this.validateValue(parseFloat(this.refInputRange.value));
+        }
+    }
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
@@ -14686,7 +14705,7 @@ class KolInputRange {
                 'hide-label': !!this.state._hideLabel,
             }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("div", { class: "inputs-wrapper", style: {
                 '--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("input", Object.assign({ ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp, onChange: this.onChange }))), hasSuggestions && [
             hAsync("datalist", { id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
         ]))));
     }
@@ -14695,13 +14714,18 @@ class KolInputRange {
         this.catchInputNumberRef = (element) => {
             var _a;
             if (element) {
-                this.ref = element;
+                this.refInputNumber = element;
                 propagateFocus(this.host, element);
-                if (!this._value && ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.value)) {
-                    this.validateValue(parseFloat(this.ref.value));
+                if (!this._value && ((_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.value)) {
+                    this.validateValue(parseFloat(this.refInputNumber.value));
                 }
             }
         };
+        this.catchInputRangeRef = (element) => {
+            if (element) {
+                this.refInputRange = element;
+            }
+        };
         this.onChange = (event) => {
             var _a, _b;
             const value = event.target.value;
@@ -14715,7 +14739,7 @@ class KolInputRange {
             if (event.code === 'Enter') {
                 propagateSubmitEventToForm({
                     form: this.host,
-                    ref: this.ref,
+                    ref: this.refInputNumber,
                 });
             }
             else {
@@ -15137,13 +15161,6 @@ class KolInputText {
 
 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\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-kolibri-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-kolibri-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\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) {
-    return (degree * Math.PI) / 180;
-}
-function getColorNumber(degree) {
-    return Math.round(((Math.cos(degreeToRadians(degree)) + 1) / 2) * 225);
-}
 class KolKolibri {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -15160,11 +15177,9 @@ class KolKolibri {
                 devHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);
             }
         };
-        this._animate = false;
         this._color = '#003c78';
         this._labeled = undefined;
         this.state = {
-            _animate: false,
             _color: {
                 red: 0,
                 green: 60,
@@ -15174,14 +15189,9 @@ class KolKolibri {
         };
     }
     render() {
-        const fillColor = this.state._animate === true
-            ? `rgb(${getColorNumber(this.state._color.red)},${getColorNumber(this.state._color.green)},${getColorNumber(this.state._color.blue)})`
-            : `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
+        const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
         return (hAsync(Host, null, hAsync("svg", { role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { x: "250", y: "525", fill: fillColor }, "KoliBri")))));
     }
-    validateAnimate(value) {
-        watchBoolean(this, '_animate', value);
-    }
     validateColor(value) {
         validateColor(this, value, {
             defaultValue: '#003c78',
@@ -15194,27 +15204,10 @@ class KolKolibri {
         watchBoolean(this, '_labeled', value);
     }
     componentWillLoad() {
-        this.validateAnimate(this._animate);
         this.validateColor(this._color);
         this.validateLabeled(this._labeled);
     }
-    componentDidRender() {
-        clearInterval(this.interval);
-        if (this.state._animate) {
-            this.interval = setInterval(() => {
-                this.state = Object.assign(Object.assign({}, this.state), { _color: {
-                        red: (this.state._color.red + 1) % max$1,
-                        green: (this.state._color.green + 2) % max$1,
-                        blue: (this.state._color.blue + 3) % max$1,
-                    } });
-            }, 50);
-        }
-    }
-    disconnectedCallback() {
-        clearInterval(this.interval);
-    }
     static get watchers() { return {
-        "_animate": ["validateAnimate"],
         "_color": ["validateColor"],
         "_labeled": ["validateLabeled"]
     }; }
@@ -15225,7 +15218,6 @@ class KolKolibri {
         "$flags$": 41,
         "$tagName$": "kol-kolibri",
         "$members$": {
-            "_animate": [4],
             "_color": [1],
             "_labeled": [4],
             "state": [32]
@@ -15904,16 +15896,16 @@ class KolModal {
     componentDidRender() {
         if (this.hostElement) {
             if (this.state._activeElement) {
-                getKoliBri().Modal.openModal(this.hostElement, this.state._activeElement);
+                KoliBri.Modal.openModal(this.hostElement, this.state._activeElement);
             }
             else {
-                getKoliBri().Modal.closeModal(this.hostElement);
+                KoliBri.Modal.closeModal(this.hostElement);
             }
         }
     }
     disconnectedCallback() {
         if (this.hostElement) {
-            getKoliBri().Modal.closeModal(this.hostElement);
+            KoliBri.Modal.closeModal(this.hostElement);
         }
     }
     render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -42,11 +42,11 @@
     "hydrate"
   ],
   "devDependencies": {
-    "@public-ui/components": "2.0.0",
+    "@public-ui/components": "2.0.1",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.0.0"
+    "@public-ui/components": "2.0.1"
   },
   "sideEffects": false,
   "type": "commonjs",