@public-ui/hydrate 2.1.8-rc.0 → 2.1.8

package/dist/index.js

@@ -229,7 +229,7 @@ var HYDRATED_STYLE_ID = "sty-id";
 var HYDRATE_CHILD_ID = "c-id";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
-var h = (nodeName, vnodeData, ...children) => {
+var h$1 = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
   let slotName = null;
@@ -331,7 +331,7 @@ var convertToPrivate = (node) => {
     if (node.vname) {
       vnodeData.name = node.vname;
     }
-    return h(node.vtag, vnodeData, ...node.vchildren || []);
+    return h$1(node.vtag, vnodeData, ...node.vchildren || []);
   }
   const vnode = newVNode(node.vtag, node.vtext);
   vnode.$attrs$ = node.vattrs;
@@ -1166,7 +1166,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
-  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+  const rootVnode = isHost(renderFnResults) ? renderFnResults : h$1(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
   if (cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
@@ -1890,14 +1890,14 @@ var hAsync = (nodeName, vnodeData, ...children) => {
     const flatChildren = children.flat(Infinity);
     if (flatChildren.some((child) => child instanceof Promise)) {
       return Promise.all(flatChildren).then((resolvedChildren) => {
-        return h(nodeName, vnodeData, ...resolvedChildren);
+        return h$1(nodeName, vnodeData, ...resolvedChildren);
       }).catch((err2) => {
-        return h(nodeName, vnodeData);
+        return h$1(nodeName, vnodeData);
       });
     }
-    return h(nodeName, vnodeData, ...flatChildren);
+    return h$1(nodeName, vnodeData, ...flatChildren);
   }
-  return h(nodeName, vnodeData);
+  return h$1(nodeName, vnodeData);
 };
 function proxyHostElement(elm, cmpMeta) {
   if (typeof elm.componentOnReady !== "function") {
@@ -2655,30 +2655,9 @@ var loglevel = {exports: {}};
 }));
 }(loglevel));
 
-var log = loglevel.exports;
+var f = loglevel.exports;
 
-const STORE = {};
-let warrentyWarning = false;
-const THEME_NAME_PATTERN = /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/;
-const isThemeNameValid = (name) => {
-  return typeof name === "string" && THEME_NAME_PATTERN.test(name);
-};
-const validateThemeName = (name) => {
-  if (isThemeNameValid(name) === false) {
-    throw new Error(
-      `[Theming] The theme identifier "${typeof name === "string" ? name : ""}" (Type: ${typeof name}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`
-    );
-  }
-};
-const patchThemeTag = (themeName, tagName, css, options) => setThemeTag(themeName, tagName, css, options);
-const setThemeTag = (themeName, tagName, css, options) => {
-  options = options ?? {};
-  options.append = options.append ?? false;
-  validateThemeName(themeName);
-  if (warrentyWarning === false) {
-    warrentyWarning = true;
-    log.warn(
-      `[Theming] The theme process is locked. This means that the theme "${themeName}" should not be patched.
+const o$1={};let b=!1;const D=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,I=e=>typeof e=="string"&&D.test(e),U=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]+)?$/`)},z=(e,t,s,a)=>d(e,t,s,a),d=(e,t,s,a)=>{a=a??{},a.append=a.append??!1,U(e),b===!1&&(b=!0,f.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 '...';
@@ -2688,214 +2667,7 @@ const setThemeTag = (themeName, tagName, css, options) => {
 	.then(() => {
 		// run your app or website
 	})
-	.catch(console.warn);`
-    );
-  }
-  if (typeof STORE.A11yUi !== "object" || STORE.A11yUi === null) {
-    STORE.A11yUi = {};
-  }
-  if (typeof STORE.A11yUi === "object" && STORE.A11yUi !== null && (typeof STORE.A11yUi.Themes !== "object" || STORE.A11yUi.Themes === null)) {
-    STORE.A11yUi.Themes = {};
-  }
-  if (typeof STORE.A11yUi === "object" && STORE.A11yUi !== null && typeof STORE.A11yUi.Themes === "object" && STORE.A11yUi.Themes !== null && (typeof STORE.A11yUi.Themes[themeName] !== "object" || STORE.A11yUi.Themes[themeName] === null)) {
-    STORE.A11yUi.Themes[themeName] = {};
-  }
-  if (typeof STORE.A11yUi === "object" && STORE.A11yUi !== null && typeof STORE.A11yUi.Themes === "object" && STORE.A11yUi.Themes !== null && typeof STORE.A11yUi.Themes[themeName] === "object" && STORE.A11yUi.Themes[themeName] !== null) {
-    if (options.append && typeof STORE.A11yUi.Themes[themeName][tagName] === "string") {
-      STORE.A11yUi.Themes[themeName][tagName] += css;
-    } else {
-      STORE.A11yUi.Themes[themeName][tagName] = css;
-    }
-  }
-};
-const patchTheme = (name, map, options, registerOptions) => setTheme(name, map, options, registerOptions);
-const setTheme = (name, map, options, registerOptions) => {
-  validateThemeName(name);
-  if (typeof map === "object" && map !== null) {
-    const tagNames = Object.getOwnPropertyNames(map);
-    tagNames.forEach((tagName) => {
-      const cssStyle = map[tagName];
-      const normalizedTagName = tagName.toLowerCase();
-      const domTagName = typeof registerOptions?.transformTagName === "function" && !["GLOBAL", "PROPERTIES"].includes(tagName) ? registerOptions.transformTagName(normalizedTagName) : tagName;
-      if (typeof cssStyle === "string" && cssStyle.length > 0) {
-        setThemeTag(name, domTagName.toUpperCase(), cssStyle, options);
-      }
-    });
-  }
-  return name;
-};
-
-const STYLING_TASK_QUEUE = /* @__PURE__ */ new Map();
-const HYDRATED_HISTORY = [];
-const CSS_PROPERTIES_REGISTERED = /* @__PURE__ */ new Set();
-const CSS_STYLE_CACHE = /* @__PURE__ */ new Map();
-const REGEX_CSS_PROPERTIES = /--[^;]+/g;
-const REGEX_SPLIT_CSS_PROPERTY = /:/;
-if (typeof STORE.A11yUi !== "object" || STORE.A11yUi === null) {
-  STORE.A11yUi = {
-    CSS_STYLE_CACHE,
-    HYDRATED_HISTORY,
-    STYLING_TASK_QUEUE
-  };
-}
-const extractProperties = (themeName, css) => {
-  let properties = css.match(REGEX_CSS_PROPERTIES);
-  if (Array.isArray(properties)) {
-    properties = properties.filter((property) => REGEX_SPLIT_CSS_PROPERTY.test(property));
-    const style = document.createElement("style");
-    style.innerHTML = `.${themeName} {${properties.join(";")}}`;
-    document.querySelector("head")?.appendChild(style);
-  }
-  CSS_PROPERTIES_REGISTERED.add(themeName);
-};
-const getCssStyle = (themeName, tagName) => {
-  if (
-    /**
-     * Search custom StyleSheet in Config
-     * TODO: Performance???
-     */
-    typeof STORE.A11yUi === "object" && STORE.A11yUi !== null && typeof STORE.A11yUi.Themes === "object" && STORE.A11yUi.Themes !== null && typeof STORE.A11yUi.Themes[themeName] === "object" && STORE.A11yUi.Themes[themeName] !== null && typeof STORE.A11yUi.Themes[themeName][tagName] === "string"
-  ) {
-    return STORE.A11yUi.Themes[themeName][tagName].replace(
-      /\r?\n/g,
-      ""
-    );
-  } else {
-    return "";
-  }
-};
-const removeStyle = (shadow) => {
-  for (const childNode of Array.from(shadow.childNodes)) {
-    if (childNode instanceof HTMLStyleElement && childNode.tagName === "STYLE") {
-      shadow.removeChild(childNode);
-    } else {
-      break;
-    }
-  }
-};
-const patchStyle = (shadow, styles) => {
-  try {
-    const styleSheets = [];
-    styles.forEach((style) => {
-      const styleSheet = new CSSStyleSheet();
-      styleSheet.replaceSync(style);
-      styleSheets.push(styleSheet);
-    });
-    shadow.adoptedStyleSheets = styleSheets;
-  } catch (e) {
-    styles.reverse().forEach((style) => {
-      const styleElement = document.createElement("style");
-      styleElement.innerHTML = style;
-      shadow.insertBefore(styleElement, shadow.firstChild);
-    });
-  }
-};
-const encroachStyles = (shadow, styles, encroachCss) => {
-  if (encroachCss !== false) {
-    const defaultStyleNodes = [
-      ...Array.from(shadow.childNodes).filter((node) => node instanceof HTMLStyleElement && node.tagName === "STYLE")
-    ];
-    let defaultStyleSheets;
-    try {
-      defaultStyleSheets = [...Array.from(shadow.adoptedStyleSheets)];
-    } catch (e) {
-      defaultStyleSheets = [];
-    }
-    if (encroachCss?.mode === "before") {
-      defaultStyleNodes.reverse().forEach((style) => styles.unshift(style.innerHTML));
-      defaultStyleSheets.reverse().forEach(
-        (style) => styles.unshift(
-          Array.from(style.cssRules).map((rule) => rule.cssText).join("")
-        )
-      );
-    } else if (encroachCss?.mode === "after") {
-      defaultStyleNodes.forEach((style) => styles.push(style.innerHTML));
-      defaultStyleSheets.forEach(
-        (style) => styles.push(
-          Array.from(style.cssRules).map((rule) => rule.cssText).join("")
-        )
-      );
-    }
-  }
-};
-const setThemeStyleAfterHydrated = (elm, themeDetails, styleDisplay) => {
-  const themeName = themeDetails.name || "default";
-  let shadow;
-  try {
-    if (elm.shadowRoot === null) {
-      throw new Error("ShadowRoot is null");
-    }
-    shadow = elm.shadowRoot;
-  } catch (e) {
-    shadow = elm;
-  }
-  if (CSS_STYLE_CACHE.get(themeName)?.has(elm.tagName)) {
-    switchStyle(elm, shadow, CSS_STYLE_CACHE.get(themeName)?.get(elm.tagName), styleDisplay);
-  } else {
-    const PROPERTY_STYLE = getCssStyle(themeName, "PROPERTIES");
-    const GLOBAL_STYLE = getCssStyle(themeName, "GLOBAL");
-    const TAG_STYLE = getCssStyle(themeName, elm.tagName);
-    if (CSS_PROPERTIES_REGISTERED.has(themeName) === false) {
-      extractProperties(themeName, GLOBAL_STYLE);
-    }
-    const STYLES = [PROPERTY_STYLE, GLOBAL_STYLE, TAG_STYLE];
-    encroachStyles(shadow, STYLES, themeDetails.encroachCss);
-    if (themeDetails.loglevel === "debug") {
-      console.log(elm.tagName, STYLES);
-    }
-    if (themeDetails.cache === true) {
-      if (CSS_STYLE_CACHE.has(themeName) === false) {
-        CSS_STYLE_CACHE.set(themeName, /* @__PURE__ */ new Map());
-      }
-      CSS_STYLE_CACHE.get(themeName)?.set(elm.tagName, STYLES);
-    }
-    switchStyle(elm, shadow, STYLES, styleDisplay);
-  }
-};
-const switchStyle = (elm, shadow, styles, styleDisplay) => {
-  removeStyle(shadow);
-  patchStyle(shadow, styles);
-  elm.style.display = styleDisplay;
-};
-const logHydratedHistory = (themeDetails) => {
-  if (themeDetails.loglevel === "debug") {
-    HYDRATED_HISTORY.push({
-      timestamp: Date.now(),
-      numberOfTasks: STYLING_TASK_QUEUE.size
-    });
-  }
-};
-const deleteDoneTask = (elm) => {
-  STYLING_TASK_QUEUE.delete(elm);
-};
-const loggedDeleteDoneTask = (elm, themeDetails) => {
-  deleteDoneTask(elm);
-  logHydratedHistory(themeDetails);
-};
-const observerCallback = (mutationsList) => {
-  for (const mutation of mutationsList) {
-    if (
-      /**
-       * Save by observer config
-       */
-      // mutation.type === 'attributes' &&
-      // mutation.attributeName === 'class' &&
-      /**
-       * Implizit check for HTMLElement
-       */
-      // mutation.target &&
-      STYLING_TASK_QUEUE.has(mutation.target) && mutation.target.classList.contains("hydrated")
-    ) {
-      const { styleDisplay, themeDetails } = STYLING_TASK_QUEUE.get(mutation.target);
-      setThemeStyleAfterHydrated(mutation.target, themeDetails, styleDisplay);
-      loggedDeleteDoneTask(mutation.target, themeDetails);
-    }
-  }
-};
-try {
-  new MutationObserver(observerCallback);
-} catch (e) {
-}
+	.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);},x=(e,t,s,a)=>g(e,t,s,a),g=(e,t,s,a)=>(U(e),typeof t=="object"&&t!==null&&Object.getOwnPropertyNames(t).forEach(r=>{const n=t[r],i=r.toLowerCase(),m=typeof a?.transformTagName=="function"&&!["GLOBAL","PROPERTIES"].includes(r)?a.transformTagName(i):r;typeof n=="string"&&n.length>0&&d(e,m.toUpperCase(),n,s);}),e);const c$1=new Map,v=[],L=new Set,h=new Map,K=/--[^;]+/g,q=/:/;(typeof o$1.A11yUi!="object"||o$1.A11yUi===null)&&(o$1.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:v,STYLING_TASK_QUEUE:c$1});const F=(e,t)=>{let s=t.match(K);if(Array.isArray(s)){s=s.filter(r=>q.test(r));const a=document.createElement("style");a.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}L.add(e);},p=(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},J=(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);});}},V=(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(""))));}},M=(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.get(a)?.has(e.tagName))$(e,r,h.get(a)?.get(e.tagName),s);else {const n=p(a,"PROPERTIES"),i=p(a,"GLOBAL"),m=p(a,e.tagName);L.has(a)===!1&&F(a,i);const y=[n,i,m];V(r,y,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,y),t.cache===!0&&(h.has(a)===!1&&h.set(a,new Map),h.get(a)?.set(e.tagName,y)),$(e,r,y,s);}},$=(e,t,s,a)=>{Q(t),J(t,s),e.style.display=a;},O=e=>{e.loglevel==="debug"&&v.push({timestamp:Date.now(),numberOfTasks:c$1.size});},Z$1=e=>{c$1.delete(e);},R=(e,t)=>{Z$1(e),O(t);},ee=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);M(t.target,a,s),R(t.target,a);}};try{new MutationObserver(ee);}catch{}
 
 const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'];
 const alertVariantOptions = ['card', 'msg'];
@@ -3970,9 +3742,9 @@ const koliBriQuerySelector = (selector, node) => querySelector(selector, node ||
 const koliBriQuerySelectorAll = (selector, node) => querySelectorAll(selector, node || getDocument());
 class KoliBriDevHelper {
 }
-KoliBriDevHelper.getCssStyle = getCssStyle;
-KoliBriDevHelper.patchTheme = patchTheme;
-KoliBriDevHelper.patchThemeTag = patchThemeTag;
+KoliBriDevHelper.getCssStyle = p;
+KoliBriDevHelper.patchTheme = x;
+KoliBriDevHelper.patchThemeTag = z;
 KoliBriDevHelper.querySelector = koliBriQuerySelector;
 KoliBriDevHelper.querySelectorAll = koliBriQuerySelectorAll;
 KoliBriDevHelper.stringifyJson = stringifyJson;
@@ -11405,7 +11177,7 @@ class KolModal {
     }; }
 }
 
-const defaultStyleCss$h = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}";
+const defaultStyleCss$h = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .list.horizontal {\n    flex-wrap: wrap;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}";
 var KolNavDefaultStyle0 = defaultStyleCss$h;
 
 const entryIsLink = (entryProps) => {

package/dist/index.mjs

@@ -225,7 +225,7 @@ var HYDRATED_STYLE_ID = "sty-id";
 var HYDRATE_CHILD_ID = "c-id";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
-var h = (nodeName, vnodeData, ...children) => {
+var h$1 = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
   let slotName = null;
@@ -327,7 +327,7 @@ var convertToPrivate = (node) => {
     if (node.vname) {
       vnodeData.name = node.vname;
     }
-    return h(node.vtag, vnodeData, ...node.vchildren || []);
+    return h$1(node.vtag, vnodeData, ...node.vchildren || []);
   }
   const vnode = newVNode(node.vtag, node.vtext);
   vnode.$attrs$ = node.vattrs;
@@ -1162,7 +1162,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
-  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+  const rootVnode = isHost(renderFnResults) ? renderFnResults : h$1(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
   if (cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
@@ -1886,14 +1886,14 @@ var hAsync = (nodeName, vnodeData, ...children) => {
     const flatChildren = children.flat(Infinity);
     if (flatChildren.some((child) => child instanceof Promise)) {
       return Promise.all(flatChildren).then((resolvedChildren) => {
-        return h(nodeName, vnodeData, ...resolvedChildren);
+        return h$1(nodeName, vnodeData, ...resolvedChildren);
       }).catch((err2) => {
-        return h(nodeName, vnodeData);
+        return h$1(nodeName, vnodeData);
       });
     }
-    return h(nodeName, vnodeData, ...flatChildren);
+    return h$1(nodeName, vnodeData, ...flatChildren);
   }
-  return h(nodeName, vnodeData);
+  return h$1(nodeName, vnodeData);
 };
 function proxyHostElement(elm, cmpMeta) {
   if (typeof elm.componentOnReady !== "function") {
@@ -2651,30 +2651,9 @@ var loglevel = {exports: {}};
 }));
 }(loglevel));
 
-var log = loglevel.exports;
+var f = loglevel.exports;
 
-const STORE = {};
-let warrentyWarning = false;
-const THEME_NAME_PATTERN = /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/;
-const isThemeNameValid = (name) => {
-  return typeof name === "string" && THEME_NAME_PATTERN.test(name);
-};
-const validateThemeName = (name) => {
-  if (isThemeNameValid(name) === false) {
-    throw new Error(
-      `[Theming] The theme identifier "${typeof name === "string" ? name : ""}" (Type: ${typeof name}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`
-    );
-  }
-};
-const patchThemeTag = (themeName, tagName, css, options) => setThemeTag(themeName, tagName, css, options);
-const setThemeTag = (themeName, tagName, css, options) => {
-  options = options ?? {};
-  options.append = options.append ?? false;
-  validateThemeName(themeName);
-  if (warrentyWarning === false) {
-    warrentyWarning = true;
-    log.warn(
-      `[Theming] The theme process is locked. This means that the theme "${themeName}" should not be patched.
+const o$1={};let b=!1;const D=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,I=e=>typeof e=="string"&&D.test(e),U=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]+)?$/`)},z=(e,t,s,a)=>d(e,t,s,a),d=(e,t,s,a)=>{a=a??{},a.append=a.append??!1,U(e),b===!1&&(b=!0,f.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 '...';
@@ -2684,214 +2663,7 @@ const setThemeTag = (themeName, tagName, css, options) => {
 	.then(() => {
 		// run your app or website
 	})
-	.catch(console.warn);`
-    );
-  }
-  if (typeof STORE.A11yUi !== "object" || STORE.A11yUi === null) {
-    STORE.A11yUi = {};
-  }
-  if (typeof STORE.A11yUi === "object" && STORE.A11yUi !== null && (typeof STORE.A11yUi.Themes !== "object" || STORE.A11yUi.Themes === null)) {
-    STORE.A11yUi.Themes = {};
-  }
-  if (typeof STORE.A11yUi === "object" && STORE.A11yUi !== null && typeof STORE.A11yUi.Themes === "object" && STORE.A11yUi.Themes !== null && (typeof STORE.A11yUi.Themes[themeName] !== "object" || STORE.A11yUi.Themes[themeName] === null)) {
-    STORE.A11yUi.Themes[themeName] = {};
-  }
-  if (typeof STORE.A11yUi === "object" && STORE.A11yUi !== null && typeof STORE.A11yUi.Themes === "object" && STORE.A11yUi.Themes !== null && typeof STORE.A11yUi.Themes[themeName] === "object" && STORE.A11yUi.Themes[themeName] !== null) {
-    if (options.append && typeof STORE.A11yUi.Themes[themeName][tagName] === "string") {
-      STORE.A11yUi.Themes[themeName][tagName] += css;
-    } else {
-      STORE.A11yUi.Themes[themeName][tagName] = css;
-    }
-  }
-};
-const patchTheme = (name, map, options, registerOptions) => setTheme(name, map, options, registerOptions);
-const setTheme = (name, map, options, registerOptions) => {
-  validateThemeName(name);
-  if (typeof map === "object" && map !== null) {
-    const tagNames = Object.getOwnPropertyNames(map);
-    tagNames.forEach((tagName) => {
-      const cssStyle = map[tagName];
-      const normalizedTagName = tagName.toLowerCase();
-      const domTagName = typeof registerOptions?.transformTagName === "function" && !["GLOBAL", "PROPERTIES"].includes(tagName) ? registerOptions.transformTagName(normalizedTagName) : tagName;
-      if (typeof cssStyle === "string" && cssStyle.length > 0) {
-        setThemeTag(name, domTagName.toUpperCase(), cssStyle, options);
-      }
-    });
-  }
-  return name;
-};
-
-const STYLING_TASK_QUEUE = /* @__PURE__ */ new Map();
-const HYDRATED_HISTORY = [];
-const CSS_PROPERTIES_REGISTERED = /* @__PURE__ */ new Set();
-const CSS_STYLE_CACHE = /* @__PURE__ */ new Map();
-const REGEX_CSS_PROPERTIES = /--[^;]+/g;
-const REGEX_SPLIT_CSS_PROPERTY = /:/;
-if (typeof STORE.A11yUi !== "object" || STORE.A11yUi === null) {
-  STORE.A11yUi = {
-    CSS_STYLE_CACHE,
-    HYDRATED_HISTORY,
-    STYLING_TASK_QUEUE
-  };
-}
-const extractProperties = (themeName, css) => {
-  let properties = css.match(REGEX_CSS_PROPERTIES);
-  if (Array.isArray(properties)) {
-    properties = properties.filter((property) => REGEX_SPLIT_CSS_PROPERTY.test(property));
-    const style = document.createElement("style");
-    style.innerHTML = `.${themeName} {${properties.join(";")}}`;
-    document.querySelector("head")?.appendChild(style);
-  }
-  CSS_PROPERTIES_REGISTERED.add(themeName);
-};
-const getCssStyle = (themeName, tagName) => {
-  if (
-    /**
-     * Search custom StyleSheet in Config
-     * TODO: Performance???
-     */
-    typeof STORE.A11yUi === "object" && STORE.A11yUi !== null && typeof STORE.A11yUi.Themes === "object" && STORE.A11yUi.Themes !== null && typeof STORE.A11yUi.Themes[themeName] === "object" && STORE.A11yUi.Themes[themeName] !== null && typeof STORE.A11yUi.Themes[themeName][tagName] === "string"
-  ) {
-    return STORE.A11yUi.Themes[themeName][tagName].replace(
-      /\r?\n/g,
-      ""
-    );
-  } else {
-    return "";
-  }
-};
-const removeStyle = (shadow) => {
-  for (const childNode of Array.from(shadow.childNodes)) {
-    if (childNode instanceof HTMLStyleElement && childNode.tagName === "STYLE") {
-      shadow.removeChild(childNode);
-    } else {
-      break;
-    }
-  }
-};
-const patchStyle = (shadow, styles) => {
-  try {
-    const styleSheets = [];
-    styles.forEach((style) => {
-      const styleSheet = new CSSStyleSheet();
-      styleSheet.replaceSync(style);
-      styleSheets.push(styleSheet);
-    });
-    shadow.adoptedStyleSheets = styleSheets;
-  } catch (e) {
-    styles.reverse().forEach((style) => {
-      const styleElement = document.createElement("style");
-      styleElement.innerHTML = style;
-      shadow.insertBefore(styleElement, shadow.firstChild);
-    });
-  }
-};
-const encroachStyles = (shadow, styles, encroachCss) => {
-  if (encroachCss !== false) {
-    const defaultStyleNodes = [
-      ...Array.from(shadow.childNodes).filter((node) => node instanceof HTMLStyleElement && node.tagName === "STYLE")
-    ];
-    let defaultStyleSheets;
-    try {
-      defaultStyleSheets = [...Array.from(shadow.adoptedStyleSheets)];
-    } catch (e) {
-      defaultStyleSheets = [];
-    }
-    if (encroachCss?.mode === "before") {
-      defaultStyleNodes.reverse().forEach((style) => styles.unshift(style.innerHTML));
-      defaultStyleSheets.reverse().forEach(
-        (style) => styles.unshift(
-          Array.from(style.cssRules).map((rule) => rule.cssText).join("")
-        )
-      );
-    } else if (encroachCss?.mode === "after") {
-      defaultStyleNodes.forEach((style) => styles.push(style.innerHTML));
-      defaultStyleSheets.forEach(
-        (style) => styles.push(
-          Array.from(style.cssRules).map((rule) => rule.cssText).join("")
-        )
-      );
-    }
-  }
-};
-const setThemeStyleAfterHydrated = (elm, themeDetails, styleDisplay) => {
-  const themeName = themeDetails.name || "default";
-  let shadow;
-  try {
-    if (elm.shadowRoot === null) {
-      throw new Error("ShadowRoot is null");
-    }
-    shadow = elm.shadowRoot;
-  } catch (e) {
-    shadow = elm;
-  }
-  if (CSS_STYLE_CACHE.get(themeName)?.has(elm.tagName)) {
-    switchStyle(elm, shadow, CSS_STYLE_CACHE.get(themeName)?.get(elm.tagName), styleDisplay);
-  } else {
-    const PROPERTY_STYLE = getCssStyle(themeName, "PROPERTIES");
-    const GLOBAL_STYLE = getCssStyle(themeName, "GLOBAL");
-    const TAG_STYLE = getCssStyle(themeName, elm.tagName);
-    if (CSS_PROPERTIES_REGISTERED.has(themeName) === false) {
-      extractProperties(themeName, GLOBAL_STYLE);
-    }
-    const STYLES = [PROPERTY_STYLE, GLOBAL_STYLE, TAG_STYLE];
-    encroachStyles(shadow, STYLES, themeDetails.encroachCss);
-    if (themeDetails.loglevel === "debug") {
-      console.log(elm.tagName, STYLES);
-    }
-    if (themeDetails.cache === true) {
-      if (CSS_STYLE_CACHE.has(themeName) === false) {
-        CSS_STYLE_CACHE.set(themeName, /* @__PURE__ */ new Map());
-      }
-      CSS_STYLE_CACHE.get(themeName)?.set(elm.tagName, STYLES);
-    }
-    switchStyle(elm, shadow, STYLES, styleDisplay);
-  }
-};
-const switchStyle = (elm, shadow, styles, styleDisplay) => {
-  removeStyle(shadow);
-  patchStyle(shadow, styles);
-  elm.style.display = styleDisplay;
-};
-const logHydratedHistory = (themeDetails) => {
-  if (themeDetails.loglevel === "debug") {
-    HYDRATED_HISTORY.push({
-      timestamp: Date.now(),
-      numberOfTasks: STYLING_TASK_QUEUE.size
-    });
-  }
-};
-const deleteDoneTask = (elm) => {
-  STYLING_TASK_QUEUE.delete(elm);
-};
-const loggedDeleteDoneTask = (elm, themeDetails) => {
-  deleteDoneTask(elm);
-  logHydratedHistory(themeDetails);
-};
-const observerCallback = (mutationsList) => {
-  for (const mutation of mutationsList) {
-    if (
-      /**
-       * Save by observer config
-       */
-      // mutation.type === 'attributes' &&
-      // mutation.attributeName === 'class' &&
-      /**
-       * Implizit check for HTMLElement
-       */
-      // mutation.target &&
-      STYLING_TASK_QUEUE.has(mutation.target) && mutation.target.classList.contains("hydrated")
-    ) {
-      const { styleDisplay, themeDetails } = STYLING_TASK_QUEUE.get(mutation.target);
-      setThemeStyleAfterHydrated(mutation.target, themeDetails, styleDisplay);
-      loggedDeleteDoneTask(mutation.target, themeDetails);
-    }
-  }
-};
-try {
-  new MutationObserver(observerCallback);
-} catch (e) {
-}
+	.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);},x=(e,t,s,a)=>g(e,t,s,a),g=(e,t,s,a)=>(U(e),typeof t=="object"&&t!==null&&Object.getOwnPropertyNames(t).forEach(r=>{const n=t[r],i=r.toLowerCase(),m=typeof a?.transformTagName=="function"&&!["GLOBAL","PROPERTIES"].includes(r)?a.transformTagName(i):r;typeof n=="string"&&n.length>0&&d(e,m.toUpperCase(),n,s);}),e);const c$1=new Map,v=[],L=new Set,h=new Map,K=/--[^;]+/g,q=/:/;(typeof o$1.A11yUi!="object"||o$1.A11yUi===null)&&(o$1.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:v,STYLING_TASK_QUEUE:c$1});const F=(e,t)=>{let s=t.match(K);if(Array.isArray(s)){s=s.filter(r=>q.test(r));const a=document.createElement("style");a.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}L.add(e);},p=(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},J=(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);});}},V=(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(""))));}},M=(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.get(a)?.has(e.tagName))$(e,r,h.get(a)?.get(e.tagName),s);else {const n=p(a,"PROPERTIES"),i=p(a,"GLOBAL"),m=p(a,e.tagName);L.has(a)===!1&&F(a,i);const y=[n,i,m];V(r,y,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,y),t.cache===!0&&(h.has(a)===!1&&h.set(a,new Map),h.get(a)?.set(e.tagName,y)),$(e,r,y,s);}},$=(e,t,s,a)=>{Q(t),J(t,s),e.style.display=a;},O=e=>{e.loglevel==="debug"&&v.push({timestamp:Date.now(),numberOfTasks:c$1.size});},Z$1=e=>{c$1.delete(e);},R=(e,t)=>{Z$1(e),O(t);},ee=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);M(t.target,a,s),R(t.target,a);}};try{new MutationObserver(ee);}catch{}
 
 const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'];
 const alertVariantOptions = ['card', 'msg'];
@@ -3966,9 +3738,9 @@ const koliBriQuerySelector = (selector, node) => querySelector(selector, node ||
 const koliBriQuerySelectorAll = (selector, node) => querySelectorAll(selector, node || getDocument());
 class KoliBriDevHelper {
 }
-KoliBriDevHelper.getCssStyle = getCssStyle;
-KoliBriDevHelper.patchTheme = patchTheme;
-KoliBriDevHelper.patchThemeTag = patchThemeTag;
+KoliBriDevHelper.getCssStyle = p;
+KoliBriDevHelper.patchTheme = x;
+KoliBriDevHelper.patchThemeTag = z;
 KoliBriDevHelper.querySelector = koliBriQuerySelector;
 KoliBriDevHelper.querySelectorAll = koliBriQuerySelectorAll;
 KoliBriDevHelper.stringifyJson = stringifyJson;
@@ -11401,7 +11173,7 @@ class KolModal {
     }; }
 }
 
-const defaultStyleCss$h = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}";
+const defaultStyleCss$h = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .list.horizontal {\n    flex-wrap: wrap;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}";
 var KolNavDefaultStyle0 = defaultStyleCss$h;
 
 const entryIsLink = (entryProps) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "2.1.8-rc.0",
+  "version": "2.1.8",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -45,11 +45,11 @@
     "hydrate"
   ],
   "devDependencies": {
-    "rimraf": "5.0.10",
-    "@public-ui/components": "2.1.8-rc.0"
+    "rimraf": "6.0.1",
+    "@public-ui/components": "2.1.8"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.1.8-rc.0"
+    "@public-ui/components": "2.1.8"
   },
   "sideEffects": false,
   "type": "commonjs",